Portafolio Glass Minimalista

Portafolio Minimalista, Glassmorphic / Sitio Web Personal / Proyecto Next.js App Router

Resumen de una línea:
Un sitio de portafolio generado estáticamente construido con Next.js 15 App Router, TypeScript, Tailwind CSS 4 y MDX.
Muestra una interfaz de usuario glassmorphic, arquitectura modular y personalización rápida, sin necesidad de CMS.

Duración del Desarrollo: Junio 2025 - Julio 2025

Nota(s):

• Descargo de responsabilidad sobre disponibilidad de hosting/código:
  El código fuente completo está disponible bajo petición. El proyecto está en línea, pero no se ha publicado públicamente para evitar exponer posibles vulnerabilidades.
• Contacto para más información o demostraciones:
  Póngase en contacto con Franz Phillip G. Domingo a través de franzdomingo.tech.
• Nota de navegación:
  Las páginas de blog y proyectos son accesibles a través de la navegación del sitio.

---

Características

• Interfaz de usuario minimalista y glassmorphic
• Diseño adaptable, primero para móviles
• Páginas de blog y proyectos impulsadas por MDX
• Sistema de componentes modular (ui/, motion-primitives/, dock/)
• Menú de comandos CMD+K, dock animado y chatbot
• Optimizado para SEO, accesible y de alto rendimiento
• Desplegado en Vercel con SSL + CDN
• Interruptor de modo oscuro
• Sistema de notificaciones toast
• Fácil extensibilidad para nuevas secciones y componentes

---

Mis Contribuciones (Rol y Responsabilidades)

Arquitectura Frontend:

• Diseñé e implementé toda la interfaz de usuario utilizando React, Next.js App Router y TypeScript para una seguridad de tipos estricta.

Diseño UI/UX:

• Creé diseños glassmorphic y minimalistas y componentes interactivos para un aspecto y sensación modernos.

Sistema de Componentes:

• Desarrollé primitivas modulares y reutilizables (tarjetas, diálogos, dock, menú de comandos, chatbot, etc.) para una personalización rápida.

Accesibilidad y SEO:

• Aseguré que todos los componentes sean accesibles y estén optimizados para SEO, aprovechando Radix UI y Shadcn UI.

Experiencia del Desarrollador:

• Establecí convenciones de estilo de código, patrones centrados en TypeScript y código React funcional y declarativo.

---

Desafíos Enfrentados

• Equilibrar el minimalismo y la riqueza de funciones:
  Necesidad de mantener la interfaz de usuario limpia mientras se admiten funciones avanzadas como el menú de comandos, el dock y el chatbot.

• Implementación del diseño glassmorphic:
  Se lograron efectos glassmorphic consistentes en todos los navegadores utilizando Tailwind CSS y utilidades personalizadas.

• Extensibilidad sin código repetitivo:
  Se estructuró la base de código para agregar fácilmente nuevas secciones y componentes, minimizando el código repetitivo.

• Seguridad e intercambio de código:
  Se decidió no publicar el código fuente completo públicamente para evitar exponer lógica sensible y detalles de despliegue.

---

Arquitectura del Proyecto

• Estilo de Arquitectura:
  React modular y funcional con Next.js App Router.
  Clara separación de responsabilidades: primitivas de UI, módulos de funciones, hooks y utilidades.

• Organización de Componentes:

  • app/: Enrutamiento, diseños, estilos globales
  • components/: Primitivas de UI, dock, chatbot, efectos de movimiento
  • hooks/: Hooks de React personalizados
  • lib/: Utilidades y constantes compartidas
  • types/: Interfaces de TypeScript

• Gestión de Estado:
  Estado local mínimo, favoreciendo los React Server Components y el contexto donde sea necesario.

• Integraciones:
  Framer Motion para animaciones, Radix UI para accesibilidad, Shadcn UI para primitivas de diseño.

---

Vista Previa de la Demostración

• Capturas de pantalla/Video:
  La demostración en vivo del Portafolio Glass Minimalista está disponible en franz-domingo.vercel.app. Todas las características de la interfaz de usuario, diseños e interacciones están disponibles para explorar directamente.

• Vistas de Plataforma:
  Web (adaptable, primero para móviles)

• Funcionalidad Mostrada:

  • Página de inicio glassmorphic
  • Navegación de dock animada
  • Menú de comandos (CMD+K)
  • Páginas de blog y proyectos
  • Chatbot y notificaciones toast

• Instrucciones de la Demostración:
  Visite el sitio en vivo en franz-domingo.vercel.app.
  Para obtener el código fuente completo o una demostración privada, contacte al autor.

---

Recursos de Desarrollo

• Guías/Docs:
  • .github/instructions/Enter.instructions.md para estilo de código y convenciones
  • Documentación de Next.js, Tailwind CSS, Framer Motion, Radix UI, Shadcn UI

---

Si necesita más detalles o desea ver la base de código, comuníquese directamente con el autor.

---