// This codebase: Minimalist Glass Portfolio

Minimalist Glass Portfolio

Minimalist, Glassmorphic Portfolio / Personal Website / Next.js App Router Project

One-liner summary:
A statically generated portfolio site built with Next.js 15 App Router, TypeScript, Tailwind CSS 4, and MDX.
Showcases a glassmorphic UI, modular architecture, and rapid customization—no CMS required.

Development Duration: June 2025 - July 2025

Note(s):

• Hosting/code availability disclaimer:
  The full source code is available upon request. The project is live, but not published publicly to avoid exposing potential vulnerabilities.
• Contact for more info or demos:
  Reach out to Franz Phillip G. Domingo via franzdomingo.tech.
• Navigation note:
  Blog and project pages are accessible via the site’s navigation.

Features

• Minimalist, glassmorphic UI
• Responsive, mobile-first layout
• Blog and project pages powered by MDX
• Modular component system (ui/, motion-primitives/, dock/)
• CMD+K command menu, animated dock, and chatbot
• SEO optimized, accessible, and performant
• Deployed on Vercel with SSL + CDN
• Dark mode toggle
• Toast notification system
• Easy extensibility for new sections and components

My Contributions (Role & Responsibilities)

Frontend Architecture:

• Designed and implemented the entire UI using React, Next.js App Router, and TypeScript for strict type safety.

UI/UX Design:

• Created glassmorphic, minimalist layouts and interactive components for a modern look and feel.

Component System:

• Developed modular, reusable primitives (cards, dialogs, dock, command menu, chatbot, etc.) for rapid customization.

Accessibility & SEO:

• Ensured all components are accessible and SEO-optimized, leveraging Radix UI and Shadcn UI.

Developer Experience:

• Established code style conventions, TypeScript-first patterns, and functional, declarative React code.

Challenges Faced

• Balancing minimalism and feature richness:
  Needed to keep the UI clean while supporting advanced features like command menu, dock, and chatbot.

• Glassmorphic design implementation:
  Achieved consistent glassmorphic effects across browsers using Tailwind CSS and custom utilities.

• Extensibility without boilerplate:
  Structured the codebase for easy addition of new sections and components, minimizing repetitive code.

• Security and code sharing:
  Decided not to publish the full source publicly to avoid exposing sensitive logic and deployment details.

Project Architecture

• Architecture Style:
  Modular, functional React with Next.js App Router.
  Clean separation of concerns: UI primitives, feature modules, hooks, and utilities.

• Component Organization:

  • app/: Routing, layouts, global styles
  • components/: UI primitives, dock, chatbot, motion effects
  • hooks/: Custom React hooks
  • lib/: Shared utilities and constants
  • types/: TypeScript interfaces

• State Management:
  Minimal local state, favoring React Server Components and context where needed.

• Integrations:
  Framer Motion for animations, Radix UI for accessibility, Shadcn UI for design primitives.

Demo Preview

• Screenshots/Video:
  The live demo for the Minimalist Glass Portfolio is available at franz-domingo.vercel.app. All UI features, layouts, and interactions are available to explore directly.

• Platform Views:
  Web (responsive, mobile-first)

• Functionality Shown:

  • Glassmorphic landing page
  • Animated dock navigation
  • Command menu (CMD+K)
  • Blog and project pages
  • Chatbot and toast notifications

• Demo Instructions:
  Visit the live site at franz-domingo.vercel.app.
  For full source or private demo, contact the author.

Development Resources

• Guides/Docs:
  • .github/instructions/Enter.instructions.md for code style and conventions
  • Next.js, Tailwind CSS, Framer Motion, Radix UI, Shadcn UI documentation

If you need further details or want to see the codebase, please contact the author directly.