Esta landing page personal es una plataforma interactiva y moderna que presenta mi portafolio de desarrollo frontend. Diseñada como una experiencia de usuario fluida, la página organiza y exhibe todos mis proyectos completados de Frontend Mentor de manera visualmente atractiva y funcional.
- Portfolio Dinámico: Una vitrina profesional de mis habilidades en desarrollo web
- Organización Inteligente: Los proyectos están categorizados por nivel de complejidad y tecnologías utilizadas
- Experiencia Interactiva: Navegación fluida entre diferentes secciones con animaciones y transiciones suaves
- Responsive Design: Adaptación perfecta a todos los dispositivos (móvil, tablet, desktop)
- Carga Dinámica: Contenido generado automáticamente desde archivos JSON para fácil mantenimiento
| 🏠 Página Principal | 💻 Proyectos Intermedios | 🎨 HTML & CSS | ⚡ JavaScript & TypeScript |
|---|---|---|---|
| Ver Landing | Proyectos Intermedios | Retos HTML/CSS | Retos JS/TS |
| Página de inicio con presentación personal y últimos proyectos | Desafíos de dificultad intermedia con funcionalidades avanzadas | Proyectos enfocados en diseño y maquetación responsive | Aplicaciones interactivas con lógica compleja |
- 🏗️ HTML5 Semántico: Estructura sólida y accesible
- 🎨 CSS3 Avanzado: Flexbox, Grid, animaciones y variables CSS
- ⚡ JavaScript ES6+: Manipulación del DOM, fetch API, módulos ES6
- 📘 TypeScript: Tipado estático para mayor robustez del código
- 📊 JSON: Gestión dinámica de datos de proyectos
- 📱 Responsive Design: Mobile-first approach con breakpoints optimizados
- ✅ Diseño Mobile-First completamente responsive
- ✅ Interfaz moderna con esquemas de color profesionales
- ✅ Animaciones suaves y transiciones CSS
- ✅ Tipografía optimizada para legibilidad en todos los dispositivos
- ✅ Carga dinámica de proyectos desde archivos JSON
- ✅ Filtrado inteligente por tecnologías y dificultad
- ✅ Navegación intuitiva entre secciones
- ✅ Enlaces directos a demos en vivo y código fuente
- ✅ Código modular y reutilizable
- ✅ Separación de responsabilidades (HTML/CSS/JS)
- ✅ Estructura escalable para agregar nuevos proyectos
- ✅ Optimización de rendimiento con lazy loading
- Navegador web moderno
- Editor de código (recomendado: VS Code)
- Servidor local (opcional: Live Server extension)
# 1. Clonar el repositorio
git clone https://github.com/JuSeRDev/Landing-challenge-FM.git
# 2. Navegar al directorio del proyecto
cd Landing-challenge-FM
# 3. Abrir con Live Server o directamente en el navegador
# Opción A: Con Live Server (recomendado)
# - Abrir con VS Code
# - Instalar extensión Live Server
# - Click derecho en index.html > "Open with Live Server"
# Opción B: Directamente en navegador
# - Abrir index.html en tu navegador preferido📦 Personal-landing-page/
├── 📂 imgs/ # Recursos visuales
│ ├── 📂 Redes-sociales/ # Iconos de redes sociales
│ └── 📄 icon_github.jpg # Foto de perfil
├── 📂 retos-html/ # Proyectos HTML/CSS
├── 📂 retos-intermedios/ # Proyectos intermedios
├── 📂 retos-js-ts/ # Proyectos JavaScript/TypeScript
├── 📄 index.html # Página principal
├── 📄 style.css # Estilos principales
├── 📄 code.js # Lógica JavaScript
└── 📄 package.json # Dependencias del proyecto
- Dark/Light Mode Toggle
- Búsqueda avanzada de proyectos
- Blog integrado con artículos técnicos
- Formulario de contacto funcional
- Métricas de rendimiento con Google Analytics
- PWA (Progressive Web App) capabilities
¡Las contribuciones son bienvenidas! Si tienes ideas para mejorar este proyecto:
- Fork el repositorio
- Crea una rama para tu feature (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add some AmazingFeature') - Push a la rama (
git push origin feature/AmazingFeature) - Abre un Pull Request
Sebastian Rodriguez - Frontend Developer
⭐ Si te gusta este proyecto, no olvides darle una estrella ⭐
Desarrollado con ❤️ y mucho ☕ por JuSeRDev - 2024