Portfolio: Glass

Minimalist at glassmorphic na portfolio site na binuo gamit ang Next.js 15 App Router, TypeScript, Tailwind CSS, at MDX

LIVE DEMO (V1) • [GITHUB: Pribadong Source]

Overview

• Role: Solo Creator, UI/UX Designer at Frontend Developer
• Stack: Next.js 15 (App Router), React 18, TypeScript, Tailwind CSS 4, Framer Motion, Radix UI, MDX, next-intl
• Key Result: Perpektong 100/100/100/100 Pagespeed Score at SEO Optimization
• Summary: Isang statically generated na developer portfolio na nagpapakita ng high-end minimalist na aesthetics, na binuo noong panahon ng paghahanap ng mga frontend engineering internship (kung saan matagumpay akong nakapasok sa Trend Micro). Tampok ang mga modular UI primitives, localized content, at fully responsive glassmorphic interfaces.

The Problem

• Hamon: Ang pangunahing hamon ay ang pagpapatupad ng isang magkakaugnay na visual language mula sa simula bilang isang developer na nagsisimula pa lamang sa kanyang paglalakbay sa disenyo. Dahil ito pa lamang ang pangalawang pagkakataon na nagdisenyo ako ng isang portfolio website mula sa simula, naging mahirap ang paghahanap ng tamang panimulang punto, pagbuo ng balanseng mga layout, at pagtiyak ng mataas na kalidad ng aesthetics nang hindi gumagamit ng mga stock template.
• Audience: Mga technical recruiter, engineering lead, at mga koponan sa mga kumpanyang inaaplayan ko para sa mga internship opportunity noong panahong iyon (tulad ng Trend Micro).
• Constraints: Pagkamit ng isang pare-parehong frosted glassmorphic UI sa maramihang mobile at desktop browser habang pinapanatiling maliit ang paunang laki ng client bundle, mabilis sumagot (responsive) ang mga pahina, at natutugunan ang mga pamantayan sa accessibility.

Approach & Decisions

• Architecture: Next.js App Router para sa mga multi-locale na pahina. Umaasa sa React Server Components (RSC) para i-render ang mga static markdown (MDX) na pahina, na pinagsama sa Client Components sa mga bahagi lamang kung saan kailangan ang interactive na elemento (mga animation, dock, commands).
• Mga Pangunahing Desisyon:
  • Pagsisimula sa Tailwind CSS 4: Ginamit ang mga maagang build ng Tailwind 4 para ipatupad ang maayos na CSS glassmorphic variables, custom backdrop-filters, at border gradients.
  • Modular UI Primitives: Bumuo ng mga magagamit muling layout blocks (ui/, motion-primitives/, dock/) para madaling mabuo ang iba't ibang view nang hindi nag-iipon ng technical debt.
  • next-intl para sa Multilingual Support: Iminarka ang codebase para suportahan ang internationalization sa Ingles at iba pang target locales nang direkta.
• Mga Trade-off: Pinili ang static generation na may client-side component hydration kaysa sa dynamic server rendering para ma-optimize ang oras ng paglo-load, bagaman nalimitahan nito ang real-time dynamic database interactions.
• Data Flow: Direktang naka-map ang mga page request sa static MDX compilations na nakabalot sa layout templates. Pinamahalaan ang mga client state sa pamamagitan ng React hooks para sa mga menu, theme toggles, at modals.

Key Results & Impact

• Outcome: Isang makintab at modernong glassmorphic interface na naglo-load nang napakabilis at mataas ang ranggo sa mga search engine.
• Lighthouse Performance: Nakakuha ng perpektong 100 / 100 / 100 / 100 sa PageSpeed Insights para sa Mobile at Desktop sa Performance, Accessibility, Best Practices, at SEO.
• Context: Binuo sa panahon ng aktibong paghahanap ng mga internship, na kalaunan ay nagresulta sa pagpasok sa Trend Micro.
• Mga Limitasyon sa Pag-optimize: Sa V1 project na ito, ang pag-optimize ay mahigpit na limitado sa karaniwang Search Engine Optimization (SEO). Ganap nitong kulang ang mga modernong paradigm sa pag-optimize tulad ng AI Optimization (AIO), Answer Engine Optimization (AEO), at Generative Engine Optimization (GEO) na hinarap sa layout ng V2.
• Paghahambing: Ito ang layout ng V1. Bagaman napakahusay ng performance nito, kulang ito sa custom terminal interactivity, 3D Canvas physics, at voice-activated AI chatbot ng layout ng V2 (Portfolio: Cyberpunk).
• Impact: Napatunayang kakayahang magsagawa ng high-fidelity user interface designs at bumuo ng search-optimized React codebases.

Technical Deep Dive

• Mga Kilalang Detalye: Interactive na animated dock navigation, mga custom frosted glass effect gamit ang utility backdrops, CMD+K command search menu.
• Pagpapatunay: Binuo at sinubukan nang lokal gamit ang next build at run-time profiling gamit ang Lighthouse, Vercel Analytics, at manu-manong pagsusuri ng layout sa Safari, Chrome, at Firefox.
• Mga Pag-optimize: Static page generation (SSG) para sa lahat ng pahinang MDX, ipinagpalibang paglo-load ng mabibigat na interactive client components, at pag-optimize ng imahe gamit ang karaniwang mga Next.js image configurations.
• Kalidad ng Code: Ipinatupad ang mahigpit na mga pagsusuri sa TypeScript, pag-format, at mga panuntunan sa linting.
• Mga Link: Tingnan ang mga istruktura ng folder sa package.json at components/.

Reflections

• Gagawing Iba: Nagtatag sana ako ng design system o visual guidelines sa Figma bago magsimula. Ang direktang pagdidisenyo sa code bilang pangalawang beses ay lumikha ng maramihang layout iteration cycles bago marating ang panghuling glassmorphic aesthetic.
• Mga Tagumpay: Nakatamo ng walang kamali-maling 100/100 PageSpeed score at naghatid ng elegante at malinis na frosted-glass aesthetic.
• Mga Aral: Ang minimalist na disenyo ay mukhang simple ngunit nangangailangan ng tumpak na espasyo, typographic hierarchy, at padding upang magmukhang propesyonal. Ang pagpapatupad ng mga glassmorphic surface ay nangangailangan din ng maingat na backdrop-filter fallbacks para sa compatibility ng browser.

My Contributions

• Buong Pagmamay-ari: Dinisenyo, binuo ang arkitektura, at ipinatupad ang 100% ng proyekto mula sa simula, kabilang ang UI design, layout systems, component structure, mga animation, at localization configs.

Project Architecture

Gumagamit ang application na ito ng structured na Next.js App Router pattern na naka-configure para sa static client-side generation.

• Layered Structure: Pinamamahalaan ng global configurations at core layout wrappers ang mga theme provider at base styling, habang pinapasad naman ng MDX loaders ang raw markdown files.
• Feature Modules:
  • components/ui/ - Layout modules at mga pangunahing visual components.
  • components/motion-primitives/ - Animated wrappers para sa maayos na paglipat.
  • components/dock/ - Nako-customize na floating navigation utility.
• State Management: Pinapanatili ang client-side state nang localized sa loob ng mga indibidwal na wrapper (halimbawa, active item indices, overlay visibility).

Route & Resource Mapping

Hindi tulad ng arkitektura ng V2 (Cyberpunk), ang V1 ay isang magaan na client-only build:

• Ano ang Mayroon:
  • Static Root & Anchors: Single-page structure na gumagamit ng fragment routing (#home, #about, #featured-projects, #experience-education-certificates, #blog, #connect).
  • Metadata & Discovery: Localized manifest files (/site.webmanifest, /browserconfig.xml).
  • Hydrated Hydration Bundles: Static next-chunks para sa layout, mga elemento ng pahina, at mga ipinagpalibang loading states.
• Ano ang Wala:
  • Walang Backend APIs: Walang stream endpoints, music routes, o chatbot handlers (/api/chat, /api/music).
  • Walang AI / Agent Integrations: Ganap na wala ang Model Context Protocol (MCP) endpoints (/api/mcp) at LLM discovery text schemas (/llms.txt, /llms-full.txt).

Demo Preview

• Glassmorphic Landing Page: Frosted panels, banayad na mga backdrop ng kulay, at tumpak na typographic alignment.
• Animated Dock Navigation: Maayos na pagpapalawak ng dock icon batay sa mouse-tracking at pag-target sa partikular na seksyon.
• Command Menu (CMD+K): Instant overlay menu para sa direktang pag-navigate sa pahina at mga shortcut.
• Live Demo Link: Ang live na proyekto ay maaaring tingnan sa franzdomingov1.vercel.app.

Tala sa Pagho-host:
Ang V1 Glass Portfolio ay naka-deploy sa Vercel at madaling ma-access sa pamamagitan ng mga live demo link sa itaas. Tandaan na ang pangunahing portfolio ay na-upgrade na sa Cyberpunk (V2) layout.