Portfolio Minimaliste Glassmorphic

Portfolio Minimaliste, Glassmorphic / Site Personnel / Projet Next.js App Router

Résumé en une phrase : Un site de portfolio généré statiquement construit avec Next.js 15 App Router, TypeScript, Tailwind CSS 4 et MDX. Présente une interface utilisateur glassmorphic, une architecture modulaire et une personnalisation rapide — aucun CMS requis.

Durée du développement : Juin 2025 - Juillet 2025

Note(s) :

• Avertissement sur l'hébergement/la disponibilité du code : Le code source complet est disponible sur demande. Le projet est en ligne, mais n'est pas publié publiquement pour éviter d'exposer des vulnérabilités potentielles.
• Contact pour plus d'infos ou démos : Contactez Franz Phillip G. Domingo via franzdomingo.tech.
• Note de navigation : Les pages de blog et de projets sont accessibles via la navigation du site.

---

Caractéristiques

• Interface utilisateur minimaliste et glassmorphic
• Mise en page réactive, mobile-first
• Pages de blog et de projets propulsées par MDX
• Système de composants modulaires (ui/, motion-primitives/, dock/)
• Menu de commande CMD+K, dock animé et chatbot
• Optimisé pour le SEO, accessible et performant
• Déployé sur Vercel avec SSL + CDN
• Commutateur de mode sombre
• Système de notifications Toast
• Extensibilité facile pour de nouvelles sections et composants

---

Mes Contributions (Rôle et Responsabilités)

Architecture Frontend :

• Conception et mise en œuvre de l'intégralité de l'interface utilisateur en utilisant React, Next.js App Router et TypeScript pour une sécurité de type stricte.

Design UI/UX :

• Création de mises en page glassmorphic et minimalistes et de composants interactifs pour une apparence et une sensation modernes.

Système de Composants :

• Développement de primitives modulaires et réutilisables (cartes, dialogues, dock, menu de commande, chatbot, etc.) pour une personnalisation rapide.

Accessibilité et SEO :

• Garantie que tous les composants sont accessibles et optimisés pour le SEO, en s'appuyant sur Radix UI et Shadcn UI.

Expérience Développeur :

• Établissement de conventions de style de code, de modèles TypeScript-first et d'un code React fonctionnel et déclaratif.

---

Défis Rencontrés

• Équilibrer minimalisme et richesse des fonctionnalités : Nécessité de garder l'interface utilisateur propre tout en prenant en charge des fonctionnalités avancées comme le menu de commande, le dock et le chatbot.

• Mise en œuvre du design glassmorphic : Réalisation d'effets glassmorphic cohérents sur différents navigateurs en utilisant Tailwind CSS et des utilitaires personnalisés.

• Extensibilité sans code répétitif (boilerplate) : Structuration du codebase pour l'ajout facile de nouvelles sections et composants, en minimisant le code répétitif.

• Sécurité et partage de code : Décision de ne pas publier le code source complet publiquement pour éviter d'exposer une logique sensible et des détails de déploiement.

---

Architecture du Projet

• Style d'Architecture : React modulaire et fonctionnel avec Next.js App Router. Séparation claire des préoccupations : primitives UI, modules de fonctionnalités, hooks et utilitaires.

• Organisation des Composants :

  • app/ : Routage, mises en page, styles globaux
  • components/ : Primitives UI, dock, chatbot, effets de mouvement
  • hooks/ : Hooks React personnalisés
  • lib/ : Utilitaires et constantes partagés
  • types/ : Interfaces TypeScript

• Gestion de l'État : État local minimal, privilégiant les React Server Components et le contexte si nécessaire.

• Intégrations : Framer Motion pour les animations, Radix UI pour l'accessibilité, Shadcn UI pour les primitives de design.

---

Aperçu de la Démo

• Captures d'écran/Vidéo : La démo en direct du Portfolio Minimaliste Glassmorphic est disponible sur franz-domingo.vercel.app. Toutes les fonctionnalités de l'interface utilisateur, les mises en page et les interactions peuvent être explorées directement.

• Vues plateforme : Web (réactif, mobile-first)

• Fonctionnalités présentées :

  • Page d'atterrissage glassmorphic
  • Navigation par dock animé
  • Menu de commande (CMD+K)
  • Pages de blog et de projets
  • Chatbot et notifications toast

• Instructions de démo : Visitez le site en direct sur franz-domingo.vercel.app. Pour le code source complet ou une démo privée, contactez l'auteur.

---

Ressources de Développement

• Guides/Docs :
  • .github/instructions/Enter.instructions.md pour le style de code et les conventions
  • Documentation Next.js, Tailwind CSS, Framer Motion, Radix UI, Shadcn UI

---

Si vous avez besoin de plus de détails ou si vous voulez voir le codebase, veuillez contacter l'auteur directement.

---