Brutal Efficiency: A Tech Breakdown of My Portfolio

Source: Dev.to

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 (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)

Design System: Neobrutalism

The visual style follows a Neobrutalist design trend, characterized by:

• High Contrast: Stark black borders (border-2 or border-4) against vivid colors.
• Bold Colors: A custom palette defined in the Tailwind configuration:
  • neo-blue
  • neo-green
  • neo-yellow
  • neo-pink
  • neo-black (very dark gray/black)
  • neo-offwhite
• Offset Shadows: Hard, non‑blurred shadows (e.g., box-shadow: 4px 4px 0px 0px #000;) to give a “sticker” or “layered paper” look.
  Implementation example: a class like shadow-neo applies the above shadow.

Animations & Interactivity

The site feels alive thanks to a mix of animation libraries and CSS techniques.

Framer Motion

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

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

Scroll Animations – elements reveal themselves as you scroll, often triggered by whileInView or similar Framer Motion props.

React CountUp & Intersection Observers

• Stats section uses react-countup to animate numbers (e.g., “30+ Projects Completed”) when they enter the viewport.
• react-intersection-observer detects when the numbers are in view, 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 for a gentle fade‑in/out.
• 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 a tactile UI feel.

Key Components

• Hero.tsx – layers absolute‑positioned background blobs, a grid layout for text vs. image, and Framer Motion for entrance animations.
• Stats.tsx – integrates useInView (from the intersection observer) with CountUp for polished number animations.
• ProjectModal.tsx – handles detailed project views 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 yet feels incredibly fast and responsive.