Brutal Efficiency: A Tech Breakdown of My Portfolio

This article provides a technical breakdown of how my 2026 portfolio website was built, covering the technology stack, design system, and animation techniques used to create its unique "Neobrutalist" aesthetic.

1. The Tech Stack

The project is built on a modern, high-performance React stack designed for speed and developer experience.

• Core Framework: React 18
• Language: TypeScript (for type safety and better developer tooling)
• Build Tool: Vite (ensuring lightning-fast dev server startup and optimized builds)
• Styling: Tailwind CSS v4 (using the new experimental v4 or latest v3 features for utility-first styling)
• Icons: Lucide React (clean, consistent SVG icons)

2. Design System: Neobrutalism

The visual style follows a Neobrutalist design trend. This is characterized by:

• High Contrast: Stark black borders (border-2 or border-4) against vivid colors.
• Bold Colors: A custom color palette defined in the Tailwind configuration:
  • neo-blue
  • neo-green
  • neo-yellow
  • neo-pink
  • neo-black (likely a very dark gray/black)
  • neo-offwhite
• Offset Shadows: Elements often feature hard, non-blurred shadows (box-shadows with no blur radius) to give a "sticker" or "layered" paper look.
  • Implementation Example: A class like shadow-neo likely applies box-shadow: 4px 4px 0px 0px #000;.

3. Animations & Interactivity

The site feels alive due to a combination of animation libraries and CSS techniques.

Framer Motion

Included via framer-motion, this library powers the complex entrance animations and state transitions.

• Hero Section: textual elements and the hero image slide in and fade up using motion.div.

  • Code Snippet:
    

    <motion.div
      initial={{ opacity: 0, x: -50 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.8 }}
    >
    

• Scroll Animations: Elements reveal themselves as you scroll down the page, often triggered by whileInView or similar Framer Motion properties.

React CountUp & Intersection Observers

The Stats section uses react-countup to animate numbers rolling up (e.g., "30+ Projects Completed") when they come into view.

• react-intersection-observer is used to detect when the user has scrolled to the numbers section, triggering the count-up animation only once (triggerOnce: true).

CSS Animations

Standard CSS animations (configured via Tailwind) are used for continuous effects:

• Pulse: Background blobs in the Hero section use animate-pulse to gently fade in and out, creating a dynamic background.
• Bounce: Decorative elements (like the "HI!" badge) use animate-bounce to draw attention.
• Hover Effects: Buttons and cards have transition-all classes to snap or move slightly on hover, reinforcing the tactile feel of the UI.

4. Key Components

• Hero.tsx: The visual centerpiece. It layers absolute positioned background blobs, a grid layout for text vs image, and Framer Motion for the entrance.
• Stats.tsx: Demonstrates integration of third-party hooks (useInView) with animation libraries (CountUp) for a polished user experience.
• ProjectModal.tsx: Handles the detailed view of projects, likely using a fixed overlay with a high z-index and conditional rendering based on state.

Summary

This portfolio combines the raw, bold aesthetic of Neobrutalism with the smooth, polished feel of modern React animations. The result is a site that looks retro but feels incredibly fast and responsive.

Comments

[Ste Griffiths]

It's a great outcome. Thanks for posting the making-of, Vicente.

[Vicente G. Reyes]

You are welcome!