Johan Hernández — Network Engineer Portfolio

Portfolio personal enfocado en redes y automatización (CCNA Certified, CCNP Enterprise en curso, NetDevOps). Construido desde cero en React + TypeScript, bilingüe (es/en).

Stack

• React 19 + TypeScript + Vite
• framer-motion (animaciones y transiciones)
• lucide-react (iconografía)
• CSS plano (sin frameworks de UI), tema cream/teal con tipografías Wallpoet, Inter y JetBrains Mono

Secciones

• Hero — nombre con efecto "decrypt", tags de stack, foto animada.
• Sobre mí
• Habilidades — categorías por tabs con panel enfocado (Redes, Automatización, Monitoreo, Seguridad, IaC/DevOps, etc.).
• Proyectos — tarjetas expandibles: colapsadas muestran solo imagen + título; al hacer clic (o Enter/Espacio) se expanden con descripción, tecnologías y link al repo.
• Experiencia
• Contacto — dock estilo macOS (email, GitHub, LinkedIn, WhatsApp).

Fondo animado de toda la página con un grid interactivo tipo ShapeGrid (React Bits, adaptado al tema claro) que reacciona al mouse.

Desarrollo

npm install
npm run dev       # servidor de desarrollo
npm run build     # tsc -b && vite build
npm run lint      # eslint
npm run preview   # sirve el build de producción

Estructura

src/
├── components/       # secciones de la página (Hero, About, SkillsTabs, Projects, Experience, Contact, Navbar)
├── effects/           # efectos reutilizables (DecryptedText, Dock, ShapeGrid)
├── context/           # LanguageContext / LanguageProvider (i18n es/en)
├── hooks/             # useLanguage, useReducedMotion, useScrolled
├── i18n/              # translations.ts — todo el contenido bilingüe
└── imgs/              # imágenes e ilustraciones de proyectos