Origami Web Design logoOrigami Web Design
Contact Us
Back to Projects

Brandon Grimaldo Portfolio

A developer-focused personal portfolio showcasing projects, skills, and case studies. Features a terminal/IDE-inspired design with theme switching, animated interactions, and comprehensive project galleries. Built for employers, clients, and fellow developers.

Next.js 14TypeScriptFramer MotionTailwind CSSReact 18
4
Featured Projects
2
Theme Options
100%
Performance Score
Brandon Grimaldo portfolio hero

Project Overview

The Challenge

Building a portfolio that balances developer-focused aesthetics with exceptional performance. The site needed to showcase 4 featured projects with detailed case studies, support theme switching, handle complex animations without impacting Core Web Vitals, and maintain accessibility across all interactions.

The Solution

A Next.js 14 App Router build with Framer Motion for smooth animations, CSS variables for theme switching, and optimized image loading. Custom card components with multiple chrome styles (pixel-edge, tabs, notebook) create a unique terminal/IDE-inspired aesthetic while maintaining responsive design and accessibility standards.

Key Features

Theme Switching

Dark and sand theme options with CSS variables, smooth transitions, and persistent user preferences.

Animated Hero

Portrait with stats, scroll indicator, and viewport-based animations using Framer Motion's whileInView.

Dynamic Card Components

Multiple chrome styles: pixel-edge borders, tabs, and notebook layouts for diverse visual presentations.

Project Gallery

Lightbox functionality for project screenshots with lazy loading and optimized Next.js Image components.

Performance Optimized

Next.js Image optimization, dynamic imports for client components, font optimization with display swap, and lazy loading.

Developer Aesthetic

Terminal/IDE-inspired UI with IBM Plex Mono typography, gradient blurs, floating dots, and pixel-edge borders.

Screens from the Build

Portfolio homepage with animated hero, portrait, stats, and featured projects
Homepage featuring animated hero section with portrait, stats display, and scroll indicator. Showcases the terminal/IDE-inspired aesthetic with dark theme.
Featured projects gallery with Origami Web Design, Kims Mart, Chloe Yap, and Pioneer
Project gallery showcasing 4 featured projects with custom card components. Interactive elements include hover states and smooth transitions.
Project case study detail page with challenges and outcomes
Detailed project case study page with comprehensive information about challenges, solutions, and technical details. Features project lightbox gallery.
Resume viewing and download section with social links
Resume viewing and download functionality with social links (GitHub, LinkedIn, Email). Includes skip-to-content link for accessibility.

Project Results

The portfolio successfully showcases 4 shipped projects (Origami Web Design, Kims Mart Davis, Chloe Yap Portfolio, and Pioneer) with detailed case studies. The developer-focused aesthetic creates a unique identity that stands out to potential employers and clients. Performance optimizations ensure fast load times while maintaining smooth animations and theme switching capabilities.

4
Featured Projects
2
Theme Options
100%
Performance Score

Want a portfolio like this?

Bring your vision and goals. We'll create a developer-focused portfolio with theme switching, animated interactions, and performance optimizations that showcase your work effectively to employers, clients, and peers.

Start Your Project