🟩 Team Matrix or ⬜ Team Paper? | Alan Babychan

#webdev #nextjs #api #ai

🚀 Shipping a major update to my portfolio

After weeks of designing, developing, and refining, I'm excited to share the latest version of my personal portfolio.

Rather than building another static portfolio, I wanted to treat it like a real product—focusing on performance, interaction design, accessibility, analytics, and user experience.

🌐 Live: https://www.alanbabychan.online

What I built

🟩 Matrix Theme
A cyberpunk-inspired dark mode featuring animated binary effects, glowing UI elements, and an immersive developer experience.

⬜ Paper Theme
A clean, modern light mode designed with readability, visual hierarchy, and clarity in mind.

🎵 Interactive Audio System

•Background music
•UI sound effects
•Dedicated settings panel
•Adjustable volume controls
•Built using the Web Audio API

🖱️ Interactive Cursor
A custom mouse-follow glow and subtle cursor interactions that enhance the browsing experience without becoming distracting.

✨ Micro-interactions
Hover states, smooth page transitions, animated UI components, and responsive visual feedback to make every interaction feel intentional.

📖 UX & Accessibility
Built around clear typography, intuitive navigation, responsive layouts, and accessibility-focused design to provide a consistent experience across devices.

📊 Performance & Analytics
Built with Next.js and optimized for speed, SEO, and scalability.

Implemented a complete Google Analytics 4 setup including:
•SPA page tracking
•Google Consent Mode v2
•Custom event tracking
•User interaction analytics

Tech Stack:
Next.js • React • Tailwind CSS • Framer Motion • Web Audio API • Google Analytics 4 • Microsoft Clarity

Coming Soon...

👀 I'm currently building a personal AI assistant that will allow visitors to interact with my portfolio, ask questions about my projects, experience, and skills, and explore everything conversationally.

What I learned

This project pushed me to dive deeper into:
•Theme architecture
•Frontend performance optimization
•Animation systems
•Custom UI interactions
•Web Audio API
•Analytics implementation
•Responsive design
•UX engineering

I'd really appreciate feedback from fellow developers.

👉 Explore both themes, enable the audio, play around with the interactions, and let me know what you think—or what you'd improve.

🟩 Team Matrix or ⬜ Team Paper?

🌐 Portfolio: https://www.alanbabychan.online