Futuristic mechanical device stack - detailed sketch
2024/03/15β€’ID 089

NeoSketchfolio

A digital portfolio that bridges the gap between traditional sketch notebooks and modern web experiences.

NeoSketchfolio

A minimalist portfolio website that combines Bauhaus design principles with Japanese aesthetic sensibilities. Built with Next.js 15 and featuring a custom design system that emphasizes clean typography, thoughtful spacing, and subtle interactive details.

Design SystemNext.jsTypeScriptTailwind CSSReactUI/UX

Project Details

Timeline

March 2024 - April 2024

Role

Design & Development

Client

Personal Project

Recognition

Awwwards Honorable Mention
CSS Design Awards
Featured on Behance

Design Explorations

The creative process behind NeoSketchfolio involved extensive exploration of design systems, user flows, and interface patterns. Each sketch represents a moment of discovery in the journey toward the final design.

Creative Workspace Setup
2024.01.15β€’EXP001

Creative Workspace Setup

Initial workspace setup and ideation environment for the NeoSketchfolio project

Web Design Wireframes
2024.01.20β€’EXP002

Web Design Wireframes

Layout explorations and wireframe development for the portfolio structure

UI Components Design
2024.01.25β€’EXP003

UI Components Design

Component library development and design system creation

Responsive Design Layouts
2024.02.01β€’EXP004

Responsive Design Layouts

Cross-device consistency and adaptive design exploration

Design Process Tools
2024.02.05β€’EXP005

Design Process Tools

Research methodology and systematic design approach documentation

Audio Equipment Integration
2024.02.10β€’EXP006

Audio Equipment Integration

Sound design and audio component planning for multimedia portfolio

Process Timeline

A detailed look at the step-by-step approach that brought this project to life, from initial research to final implementation.

Started with exploring the intersection of traditional Japanese design principles and modern digital interfaces. Researched Bauhaus typography, manga illustration techniques, and contemporary portfolio designs. The goal was to create something that felt both timeless and fresh.
Filled multiple sketchbooks with rough concepts, exploring different layout grids, navigation patterns, and visual hierarchies. The '+' navigation concept emerged from wanting something more playful than traditional menu systems while maintaining excellent usability.
Established the core design tokens - the stark monochrome palette with the signature yellow accent, typography scales, spacing rhythms, and animation principles. Every decision was made to support the 'architectural notebook' aesthetic while ensuring accessibility.
Built interactive prototypes to test the card hover effects, accordion animations, and scroll-triggered reveals. Fine-tuned the timing curves to achieve that smooth, paper-like feeling when navigating through content.
Implemented using Next.js with Tailwind CSS, focusing on performance and accessibility. Added progressive enhancement for animations, proper ARIA labels, and optimized image loading with lazy loading and WebP formats.

Hello🎯

NeoSketchfolio represents a complete reimagining of the creative portfolio experience. This project challenged me to blend minimalist aesthetics with interactive storytelling, creating a digital space that feels both gallery-quiet and playfully engaging.

Creative workspace with design tools

Initial workspace setup and ideation phase

Technologies

Next.js 15TypeScriptTailwind CSSFramer MotionVercel

Timeline

4 weeks from concept to deployment

Role

Lead Designer & Developer

Web design mockups and wireframes

PRJ003 - Initial wireframe explorations

User interface components sketch

PRJ004 - Component library development

Hello⚑

The creation of NeoSketchfolio followed a structured yet iterative design process, balancing systematic thinking with creative exploration.

Design process tools

Research & Ideation

Started with competitive analysis and user research to understand what makes portfolios memorable and engaging.

Responsive design layouts

Design & Prototype

Created responsive wireframes and prototypes, focusing on the balance between minimalism and personality.

Design system documentation

System & Scale

Developed a comprehensive design system with tokens, components, and guidelines for consistent execution.

Next Project

Continue exploring the creative journey

Interactive cassette tape interface design
Data visualization dashboards and charts sketch
2024/02/20β€’ID 088

Interactive Data Visualization

Exploring complex datasets through playful and intuitive visual interfaces that bridge analog and digital experiences.

View Project→