Portfolio: Glass

Minimalist, glassmorphic portfolio site built with Next.js 15 App Router, TypeScript, Tailwind CSS, and MDX

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

Overview

• Role: Solo Creator, UI/UX Designer & Frontend Developer
• Stack: Next.js 15 (App Router), React 18, TypeScript, Tailwind CSS 4, Framer Motion, Radix UI, MDX, next-intl
• Key Result: Perfect 100/100/100/100 Pagespeed Score & SEO Optimization
• Summary: A statically generated developer portfolio demonstrating high-end minimalist aesthetics, built during a period of seeking frontend engineering internships (during which I successfully joined Trend Micro). Featuring modular UI primitives, localized content, and fully responsive glassmorphic interfaces.

The Problem

• Challenge: The core challenge was implementing a cohesive visual language from scratch as a developer early in their design journey. With this being only my second time designing a portfolio website from scratch, finding the right starting point, building balanced layouts, and ensuring high aesthetic quality without using stock templates proved difficult.
• Audience: Technical recruiters, engineering leads, and teams at companies where I was applying for internship opportunities around that time (such as Trend Micro).
• Constraints: Achieving a consistent frosted glassmorphic UI across multiple mobile and desktop browsers while keeping initial client bundle sizes small, pages responsive, and accessibility standards met.

Approach & Decisions

• Architecture: Next.js App Router for multi-locale pages. Relies on React Server Components (RSC) to render static markdown (MDX) pages, combined with Client Components only where interactive elements (animations, dock, commands) are necessary.
• Key Decisions:
  • Starting with Tailwind CSS 4: Leveraged early builds of Tailwind 4 to implement smooth CSS glassmorphic variables, custom backdrop-filters, and border gradients.
  • Modular UI Primitives: Built reusable layout blocks (ui/, motion-primitives/, dock/) to compose different views easily without accumulating technical debt.
  • next-intl for Multilingual Support: Structured the codebase to support internationalization across English and other target locales out of the box.
• Trade-offs: Chose static generation with client-side component hydration rather than dynamic server rendering to optimize load times, though it limited real-time dynamic database interactions.
• Data Flow: Page requests mapped directly to static MDX compilations wrapped in layout templates. Client states managed via React hooks for menus, theme toggles, and modals.

Key Results & Impact

• Outcome: A polished, modern glassmorphic interface that loads incredibly fast and ranks highly on search engines.
• Lighthouse Performance: Scored a perfect 100 / 100 / 100 / 100 on PageSpeed Insights for Mobile and Desktop across Performance, Accessibility, Best Practices, and SEO.
• Context: Built during a period of actively searching for internships, eventually landing a role at Trend Micro.
• Optimization Limitations: During this V1 project, optimization was strictly limited to standard Search Engine Optimization (SEO). It entirely lacked modern optimization paradigms like AI Optimization (AIO), Answer Engine Optimization (AEO), and Generative Engine Optimization (GEO) which were later addressed in the V2 layout.
• Comparison: This was the V1 layout. While it was highly performant, it lacked the custom terminal interactivity, 3D Canvas physics, and voice-activated AI chatbot of the V2 (Portfolio: Cyberpunk) layout.
• Impact: Proven ability to execute high-fidelity user interface designs and build search-optimized React codebases.

Technical Deep Dive

• Notable Details: Interactive animated dock navigation, custom frosted glass effects using utility backdrops, CMD+K command search menu.
• Verification: Built and tested locally using next build and run-time profiling with Lighthouse, Vercel Analytics, and manual layout checking across Safari, Chrome, and Firefox.
• Optimizations: Static page generation (SSG) for all MDX pages, deferred loading of heavy interactive client components, and image optimization using standard Next.js image configurations.
• Code Quality: Enforced strict TypeScript checks, formatting, and linting rules.
• Links: Check out package.json and components/ folder structures.

Reflections

• Differently: I would have established a design system or visual guidelines in Figma beforehand. Designing straight in code as a second-timer created multiple layout iteration cycles before reaching the final cohesive glassmorphic aesthetic.
• Successes: Attained a flawless 100/100 PageSpeed score and delivered an elegant, clean frosted-glass aesthetic.
• Lessons: A minimalist design looks simple but requires precise spacing, typographic hierarchy, and padding to look professional. Implementing glassmorphic surfaces also requires careful backdrop-filter fallbacks for browser compatibility.

---

My Contributions

• Full Ownership: Designed, architected, and implemented 100% of the project from scratch, including UI design, layout systems, component structure, animations, and localization configs.

---

Project Architecture

This application utilizes a structured Next.js App Router pattern configured for static client-side generation.

• Layered Structure: Global configurations and core layout wrappers manage theme providers and base styling, while MDX loaders parse raw markdown files.
• Feature Modules:
  • components/ui/ - Layout modules and core visual components.
  • components/motion-primitives/ - Animated wrappers for smooth transitions.
  • components/dock/ - Customizable floating navigation utility.
• State Management: Keeps client-side state localized within individual wrappers (e.g., active item indices, overlay visibility).

Route & Resource Mapping

Unlike the V2 (Cyberpunk) architecture, V1 is a lightweight client-only build:

• What it Has:
  • Static Root & Anchors: Single-page structure utilizing 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 for layout, page elements, and deferred loading states.
• What it Lacks:
  • No Backend APIs: Lacks stream endpoints, music routes, or chatbot handlers (/api/chat, /api/music).
  • No AI / Agent Integrations: Completely misses Model Context Protocol (MCP) endpoints (/api/mcp) and LLM discovery text schemas (/llms.txt, /llms-full.txt).

---

Demo Preview

• Glassmorphic Landing Page: Frosted panels, subtle color backdrops, and precise typographic alignment.
• Animated Dock Navigation: Smooth mouse-tracking dock icon expansion and section targeting.
• Command Menu (CMD+K): Instant overlay menu for direct page navigation and shortcuts.
• Live Demo Link: The live project can be viewed at franzdomingov1.vercel.app.

Hosting Note:
The V1 Glass Portfolio is deployed on Vercel and accessible via the live demo links above. Note that the primary portfolio has since been upgraded to the Cyberpunk (V2) layout.