Building My Digital Brain: The Tech Behind This Portfolio

The Concept

I wanted a portfolio that felt like a look inside my head—literally. The centerpiece of this site is the interactive 3D brain, representing my focus on neural networks, AI, and creative engineering. but I didn't want just another clean, corporate layout. I wanted it to feel "worked on," like a sketchbook or a lab notebook.

The Tech Stack

This project is built on the bleeding edge of the React ecosystem:

• Framework: Next.js 15 (App Router) for server-side rendering and lightning-fast navigation.
• Database & Auth: Supabase handles the backend. It stores these blog posts, manages the admin login (via magic links), and tracks view counts securely.
• Styling: Tailwind CSS, with a custom "sketch" design system using CSS transforms and irregular border radii.
• 3D Elements: react-three-fiber and Three.js. The brain isn't a video—it's a real-time particle simulation that responds to your touch.

The "Sketch" Aesthetic

You might notice the crooked lines, the tape effects, and the stamp-style badges. This was achieved by purposely fighting against the browser's perfection.

/* Example of the dynamic border radius used for badges */
.sketch-badge {
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  transform: rotate(-1deg);
  box-shadow: 2px 2px 0px 0px rgba(0,0,0,1);
}

Every UI element is slightly imperfect to give it that organic, hand-drawn feel.

Security Hardening

Just because it looks like a sketchbook doesn't mean it's not secure. I recently spent time auditing the codebase (with some AI help 🤖) to ensure it's production-ready:

1. Row Level Security (RLS): Db policies ensure only I can edit posts, while you can only read them.
2. Secure View Counters: Moved from client-side logic to a secure API route that hashes IPs to prevent spam without tracking personal data.
3. HSTS & CSP: Strict browser headers to prevent XSS and man-in-the-middle attacks.

What's Next?

I'm planning to add more interactive 3D experiments and deep dives into the code. This site is a living document, and like a real sketchbook, it will never be truly "finished."