Building the Electric Edge: The Design and Engineering Behind My Portfolio

Welcome to my new digital garden! Since this is the very first post on my newly minted, custom-built blogging platform, I thought it would be fitting to pull back the curtain and talk about how this website came to life.

Designing a portfolio isn't just about listing past experiences; it's about crafting an environment that reflects your engineering philosophy and design sensibilities. For this iteration of my website, I aimed for an aesthetic I call "Electric Edge"—a seamless blend of high-performance modern web technologies and striking, intentional design.

Here’s a deep dive into the architecture, design systems, and tech stack that power this platform.

The Engineering Stack

At its core, this site is built for blazing speed, developer experience, and scalability. I didn't want a generic template; I wanted a platform I could completely control and extend.

• Framework: Next.js 15 (App Router) and React 19. Taking full advantage of React Server Components (RSC) keeps the client payload minuscule while delivering fast, dynamic content to the browser.

• Styling: Tailwind CSS v4 combined with Shadcn/ui components. Tailwind's utility-first approach allowed me to build a highly custom design token system rapidly and reliably.

• Database & ORM: The data layer is powered by PostgreSQL (hosted on Neon Database) and queried type-safely via the Prisma ORM.

• Authentication: Auth.js (NextAuth) handles admin authentication securely using Google OAuth, storing secure stateless sessions directly in the database via the Prisma Adapter.

• The Blogging Engine: The bespoke /admin dashboard features a rich-text, Notion-style editing experience built on Novel (TipTap). Articles are saved as raw Markdown and rendered on the frontend using next-mdx-remote, which securely compiles content into my custom Tailwind design components.

• Search Engine: The front-end leverages Fuse.js for an instant, typo-tolerant fuzzy search system that works seamlessly alongside React state.

1. Shape Design Matrix & Layout

The visual foundation of the site relies on specific geometric values and clip-paths to create a sharp, intentional feel without overwhelming the content.

• The Container: The reading experience restricts line lengths to a highly legible 65-75 characters (max-w-3xl), bordered by subtle --radius-xl softening.

• Dynamic Angles: Throughout the site, you'll notice diagonal slices and slanted edges (.shape-slant-bottom). These geometric cuts add a sense of forward-leaning energy to hero sections.

• Glassmorphism: Navigation menus, Table of Contents sidebars, and specific container elements utilize backdrop-blur filters (.glass) combined with --radius-full pill shapes, allowing them to float gracefully above the content.

2. Rhythmic Typography

Readability is paramount for a blog, but I also wanted the headings to carry a distinct technical personality. I paired a mechanical, modern display font with highly legible body text.

• Headings: Space Grotesk. Set with tight letter spacing and heavy weights (800), it commands attention and gives structural weight to the page layout.

• Body Copy: Geist Sans. With a generous line height of 1.8, Geist offers exceptional readability for long-form essays and technical deep-dives.

• Code Elements: Inheriting the sleek Vercel aesthetic, inline code and syntax-highlighted code blocks utilize Geist Mono wrapped in subtle squircle borders (--radius-sm).

3. The Color Palette: High Contrast & Neon Accents

The color design operates on a philosophy of high-contrast surgical strikes. The base canvas is intentionally muted so the interactive elements can truly pop.

• The Canvas: A pristine matte dark slate (#0a0a0a) in dark mode provides a zero-distraction surface, allowing text to remain the focal point.

• Electric Accents: The primary brand colors utilize a vivid gradient spanning from Electric Cyan (#06b6d4) to Vivid Violet (#a855f7). These are applied carefully to hover states, active links, and dynamic highlights to draw the user's eye naturally.

• Custom Selections: Even highlighting text triggers a custom CSS ::selection rule, painting the background with a glowing cyan wash to make quoting or copying text feel satisfying and cohesive.

4. Motion & Animation Physics

An aesthetic isn't just how a site looks; it's how it feels when you interact with it.

• Butter-Smooth Scrolling: The entire site is wrapped in a custom Lenis scrolling instance. It hijacks the browser's default scroll behavior to inject physical friction, resulting in an incredibly smooth, buttery scroll that makes reading a joy.

• Framer Motion: Every page entry, scroll reveal, and micro-interaction is orchestrated natively by Framer Motion.

  • Articles organically slide up and fade into view using staggered variants.

  • Hovering over blog cards triggers fluid transform physics, scaling the card slightly and expanding its neon shadow dynamically.

  • A reading progress bar pinned to the top window edge smoothly widens as the user scrolls, controlled by Framer's useScroll hook.