← Back to OverviewPortfolio
/CASE STUDY · 2026
CoreCraftPersonal Engineering Portfolio
Personal engineering portfolio with an editorial aesthetic, a single shared motion system, and a 100% Lighthouse performance score.
Role
- Design
- Frontend Development
- SEO
Timeline
2026
Studio
CoreCraft
Deliverables
- Editorial home page
- Statically generated case studies
- Shared motion system
- SEO, sitemap and robots
Stack
Next.js 16TypeScriptTailwind CSS
corecraft.my.id/work/corecraft
Fullstack
Editorial hero with the outline-and-solid display name.
/01 THE PROBLEM
Problem & Friction
The previous portfolio described projects in prose, which made the engineering behind each one hard to verify.
100Lighthouse performance score
StaticEvery case study pre-rendered
A11yKeyboard and reduced-motion support
/02 SYSTEM DESIGN & ARCHITECTURE
Architectural Breakdown
- Next.js 16 App Router with React Server Components
- TypeScript in strict mode throughout
- Tailwind CSS v4 design tokens
- Framer Motion and Lenis, gated behind prefers-reduced-motion
/03 IMPLEMENTED SOLUTIONS
Resilience & Outcomes
- Every project is a statically generated case study rather than a card in a grid.
- Motion is progressive enhancement — the site is complete and readable without it.
- One spring and one easing curve keep interaction timing consistent everywhere.
/DEEP DIVE SCREENS
Technical Interface & Terminal Views
Project gallery with filterable categories.
100% Lighthouse performance score.