Portfolio personal de Peter Damián Gómez, Web Developer.
| Rol | Herramienta |
|---|---|
| Build / Dev server | Vite |
| UI framework | Preact (~3KB, API idéntica a React) |
| Package manager / Runtime | Bun |
| Tests | Vitest + @testing-library/preact |
| Cobertura | @vitest/coverage-v8 |
| Linting | ESLint (airbnb + jsx-a11y + prettier) |
| Estilos | CSS puro + CSS Modules |
bun install # Instalar dependencias
bun run dev # Servidor de desarrollo (http://localhost:5173)
bun run build # Build de producción → dist/
bun run preview # Previsualizar el build localmente
bun run test # Ejecutar tests unitarios (verbose)
bun run coverage # Tests con cobertura (objetivo ≥90%)
bun run lint # ESLint
bun run prettier # Formatear y verificar códigoEjecutar un test específico:
bun run test tests/components/icons/Icons.test.jssrc/
├── App.tsx # Componente raíz
├── main.tsx # Entry point (render + theme init)
├── components/
│ ├── icons/ # SVG icons
│ ├── layout/
│ │ ├── appbar/ # AppBar, ThemeChanger, Drawer
│ │ └── footer/ # Footer
│ ├── main/
│ │ ├── sections/ # Hero, About, Proyects, Contact
│ │ └── WrapperSection.tsx # IntersectionObserver + lazy mounting
│ ├── placeholders/ # SVG placeholders para Suspense
│ ├── ui/ # Componentes UI reutilizables
│ └── utils/ # ErrorBoundary, setPathHash
├── data/
│ └── siteData.ts # ★ Fuente única de datos del sitio
├── hooks/
│ ├── useTheme.ts # Manejo de tema claro/oscuro
│ ├── useMediaQuery.ts # Media queries con matchMedia
│ ├── useIntersectionObserver.ts
│ └── useFunctionOverTime.tsx
└── styles/
├── globals.css
└── themes.css # CSS custom properties para temas
Todo el contenido editable está en src/data/siteData.ts:
PERSONAL_INFO— nombre, email, URLs de redes sociales, CVLIST_PROJECTS— lista de proyectosDRAWER_TEXT— frases del drawer de escritorioCERTIFICATIONS— certificaciones profesionales
Solo dos breakpoints:
- Mobile ≤767px
- Desktop ≥768px
- HTML semántico:
<header>,<nav>,<main>,<footer>,<section>,<article> - Skip-to-content link para screen readers
aria-labelen todos los elementos interactivosaltdescriptivo en todas las imágenes- Hotkeys de navegación: H (hero), A (about), P (proyects), C (contact), T (theme), M (menu), Esc (cerrar)
Chrome, Firefox, Safari, Edge, Brave — últimos 5 años (~2020+)
El build en dist/ es completamente estático. Funciona en:
https://peterdg.com.ar/(dominio personalizado)https://peterdamiang.github.io/PeterDamianG/(GitHub Pages fallback)
El archivo vite.config.ts usa base: './' para rutas relativas que funcionan en ambos.