## Introduction In today's competitive tech landscape, having a standout portfolio is essential. Gone are the days of simple static pages – modern portfolios need to be dynamic, performant, and visually striking. In this guide, I'll walk you through the key techniques I used to build my portfolio. ## The Tech Stack Before diving in, here's what we're working with: - **Next.js 14** - React framework with App Router - **Tailwind CSS** - Utility-first styling - **Framer Motion** - Smooth animations - **TypeScript** - Type safety ## Sharp Grid Aesthetics One of the defining features of modern portfolios is the "grid" or "tech" aesthetic. Instead of rounded corners everywhere, we use sharp edges with accent lines: ```tsx

{/* Corner accents */}

{/* Gradient edge lines */}

{/* Content */}

Your content here

``` This creates cards that feel technical and modern, with subtle gradient accents that catch the eye without being overwhelming. ## Scroll-Based Animations Framer Motion's `useScroll` hook is perfect for creating engaging scroll experiences. Here's how to create a timeline that fills as you scroll: ```tsx import { useScroll, useTransform, motion } from "framer-motion"; function Timeline() { const containerRef = useRef(null); const { scrollYProgress } = useScroll({ target: containerRef, offset: ["start 0.33", "end 0.66"] }); const lineHeight = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]); return (

{/* Background track */}

{/* Animated fill */}

); } ``` ## Gradient Backgrounds Each section can have its own unique gradient to create visual separation: ```tsx

{/* Gradient orbs for depth */}

``` The key is using very dark base colors with subtle tints, and adding blurred gradient orbs for depth. ## Bento Grid Layouts Bento grids create visual interest by varying card sizes: ```tsx const bentoPatterns = [ { colSpan: "md:col-span-2", rowSpan: "md:row-span-2" }, // Large featured { colSpan: "md:col-span-1", rowSpan: "md:row-span-1" }, // Small { colSpan: "md:col-span-1", rowSpan: "md:row-span-2" }, // Tall ];

{items.map((item, i) => ( ))}

``` ## Performance Tips 1. **Use `viewport={{ once: true }}`** on animations to prevent re-triggering 2. **Lazy load images** with Next.js Image component 3. **Use CSS transforms** instead of layout properties for animations 4. **Keep gradient orbs as fixed/absolute** positioned elements ## Conclusion Building a modern portfolio is about balancing aesthetics with performance. The sharp grid aesthetic, combined with smooth scroll animations and thoughtful color gradients, creates a memorable experience for visitors. The key is consistency – once you establish your design language (sharp corners, specific accent colors, monospace fonts for labels), apply it throughout the entire site. Happy building!