Minimalist Glass Portfolio

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

One-liner summary:
Isang statically generated na portfolio site na binuo gamit ang Next.js 15 App Router, TypeScript, Tailwind CSS 4, at MDX.
Nagpapakita ng glassmorphic UI, modular na arkitektura, at mabilis na customization—hindi kailangan ng CMS.

Tagal ng Pag-develop: Hunyo 2025 - Hulyo 2025

(Mga) Tala:

• Disclaimer sa availability ng hosting/code:
  Ang buong source code ay available kapag hiniling. Ang proyekto ay live, ngunit hindi inilathala nang publiko upang maiwasan ang paglalantad ng mga potensyal na kahinaan.
• Kontak para sa karagdagang impormasyon o demo:
  Makipag-ugnayan kay Franz Phillip G. Domingo sa pamamagitan ng franzdomingo.tech.
• Tala sa nabigasyon:
  Ang mga pahina ng blog at proyekto ay accessible sa pamamagitan ng nabigasyon ng site.

---

Mga Tampok

• Minimalist, glassmorphic na UI
• Responsive, mobile-first na layout
• Blog at project pages na binuo gamit ang MDX
• Modular component system (ui/, motion-primitives/, dock/)
• CMD+K command menu, animated dock, at chatbot
• SEO optimized, accessible, at performant
• Nakadeploy sa Vercel na may SSL + CDN
• Dark mode toggle
• Toast notification system
• Madaling extensibility para sa mga bagong section at component

---

Aking mga Kontribusyon (Tungkulin at Responsibilidad)

Frontend Architecture:

• Dinisenyo at ipinatupad ang buong UI gamit ang React, Next.js App Router, at TypeScript para sa strict type safety.

UI/UX Design:

• Gumawa ng glassmorphic, minimalist na mga layout at interactive components para sa modernong hitsura at pakiramdam.

Component System:

• Bumuo ng mga modular, reusable primitives (cards, dialogs, dock, command menu, chatbot, atbp.) para sa mabilis na customization.

Accessibility at SEO:

• Siniguro na ang lahat ng components ay accessible at SEO-optimized, gamit ang Radix UI at Shadcn UI.

Developer Experience:

• Nagtatag ng mga convention sa code style, TypeScript-first patterns, at functional, declarative na React code.

---

Mga Hamon na Kinaharap

• Pagbalanse ng minimalism at feature richness:
  Kailangang panatilihing malinis ang UI habang sinusuportahan ang mga advanced features tulad ng command menu, dock, at chatbot.

• Pagpapatupad ng glassmorphic design:
  Nakamit ang consistent na glassmorphic effects sa iba't ibang browsers gamit ang Tailwind CSS at custom utilities.

• Extensibility nang walang boilerplate:
  Inayos ang codebase para sa madaling pagdaragdag ng mga bagong section at component, na binabawasan ang paulit-ulit na code.

• Security at pagbabahagi ng code:
  Nagpasya na huwag i-publish ang buong source nang publiko para maiwasan ang paglalantad ng sensitive na logic at detalye ng deployment.

---

Arkitektura ng Proyekto

• Architecture Style:
  Modular, functional React gamit ang Next.js App Router.
  Malinis na paghihiwalay ng mga responsibilidad: UI primitives, feature modules, hooks, at utilities.

• Organisasyon ng Component:

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

• State Management:
  Minimal na local state, mas pinapaboran ang React Server Components at context kung kinakailangan.

• Integrations:
  Framer Motion para sa mga animation, Radix UI para sa accessibility, Shadcn UI para sa design primitives.

---

Demo Preview

• Screenshots/Video:
  Ang live demo para sa Minimalist Glass Portfolio ay available sa franz-domingo.vercel.app. Lahat ng UI features, layouts, at interactions ay pwedeng i-explore nang direkta.

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

• Functionality na Ipinakita:

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

• Mga Instruksyon sa Demo:
  Bisitahin ang live site sa franz-domingo.vercel.app.
  Para sa buong source o pribadong demo, makipag-ugnayan sa may-akda.

---

Mga Resource sa Pag-develop

• Mga Gabay/Docs:
  • .github/instructions/Enter.instructions.md para sa code style at mga convention
  • Dokumentasyon ng Next.js, Tailwind CSS, Framer Motion, Radix UI, Shadcn UI

---

Kung kailangan mo ng karagdagang detalye o gustong makita ang codebase, mangyaring makipag-ugnayan nang direkta sa may-akda.

---