Zeroman Portfolio
A personal portfolio engineered to function as a client-acquisition tool, not just a visual showcase. Built with Nuxt 3, TypeScript, and custom CSS animations to achieve elite Core Web Vitals scores while presenting bilingual content and a structured case-study format for each project.
// Key Challenges
- Professional Credibility: Without corporate brand backing, individual candidates struggle to convey enterprise-grade technical competence to hiring managers.
- Content Architecture: Bilingual (ID/EN) content required a scalable, maintainable JSON data structure rather than hardcoded strings.
- Performance vs. Animation: Rich CSS animations risked degrading Core Web Vitals (CLS, LCP) scores on mobile devices.
- SEO for Portfolio Sites: Static portfolio pages typically rank poorly due to thin content and lack of structured data.
// Approach & Solutions
1. Credibility-First Case Study Format
Each project entry includes quantified impact metrics, technical decision rationale, and challenge-solution narratives to demonstrate real-world expertise rather than just listing technologies.
2. Centralized JSON Data Architecture
All content — bilingual copy, project metadata, skills, testimonials — is stored in a single portfolio.json file, enabling instant content updates without touching Vue component logic.
3. Performance-Optimized Animations
All CSS animations use GPU-accelerated properties (transform, opacity) and respect prefers-reduced-motion, ensuring zero CLS impact and accessibility compliance.
// Tech Stack
| Technology | Reason |
|---|---|
| Nuxt 3 | SSR + static generation gives search engines fully-rendered HTML for each project page, critical for E-E-A-T SEO signals and fast First Contentful Paint. |
| TypeScript | Strict typing on portfolio data schemas prevents runtime errors and ensures content integrity across both language variants. |
| Vanilla CSS + Custom Animations | Zero framework overhead. Every animation is hand-crafted with GPU-accelerated properties to maintain 60fps performance without importing heavy animation libraries. |
// Results & Business Impact
- <2s - Page Load Time (Consistently under 2 seconds on mobile (Nuxt SSR + optimized assets))
- 100% - Mobile Responsive (Pixel-perfect layout on all screen sizes from 320px to 4K)
- 2 - Languages Supported (Full EN/ID bilingual switch without page reload)
- 9 - Projects Showcased (Each with full case-study depth: challenges, solutions, and measurable impact)
// Project Gallery
