Skip to content

Add personal portfolio website for Vale2029 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

Add personal portfolio website for Vale2029 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
41d1558
Initial plan
Copilot Nov 14, 2025
9694d1e
Add complete personal portfolio for Vale2029
Copilot Nov 14, 2025
6b7cb12
Update documentation with Vale2029 portfolio details
Copilot Nov 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,15 @@ Este repositorio agrupa varios ejemplos y ejercicios prácticos organizados por
- 🌐 `index.html` — Página HTML que sirve de contenedor para ejemplos que usan el navegador.
- 📁 `tutoria3/`
- 📄 `index.js` — Ejemplo o ejercicio de la tutoría 3.
- 📁 `Tutoria4/`
- 🌐 `index.html` — Ejemplo de blog personal con Flexbox y Grid.
- 🎨 `style.css` — Estilos CSS para el blog.
- 📁 `Vale2029/`
- 🌟 **Portafolio Personal** — Proyecto completo de portafolio web personal.
- 🌐 `index.html` — Estructura completa del portafolio.
- 🎨 `style.css` — Diseño responsive y moderno.
- ⚡ `script.js` — Interactividad y animaciones.
- 📖 `README.md` — Documentación completa y guía de despliegue.

> Nota: la estructura puede crecer según se añadan nuevas tutorías o clases.

Expand Down
173 changes: 173 additions & 0 deletions Vale2029/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
# 🌟 Portafolio Personal - Vale2029

Portafolio web personal creado como parte de la tarea del Módulo 1 de JavaScript Cohorte 5.

## 🔗 Demo en Vivo

Una vez desplegado en GitHub Pages, el portafolio estará disponible en:
**https://thejsarchitects.github.io/ModuloOneJavascriptCohorte5/Vale2029/**

> **Nota:** El portafolio debe ser desplegado siguiendo las instrucciones de la sección "Publicación en GitHub Pages" más abajo.

## 📋 Descripción

Este es mi portafolio web personal donde muestro mis habilidades, proyectos y forma de contacto como desarrolladora web en formación.

## ✨ Características

### Estructura HTML
- ✅ Encabezado con nombre/logo (Vale2029)
- ✅ Sección "Sobre mí" con información personal y habilidades
- ✅ Sección "Proyectos" con 3 ejemplos de proyectos
- ✅ Sección "Contacto" con formulario y métodos de contacto

### Diseño CSS
- 🎨 Paleta de colores coherente (púrpura/rosa)
- 📱 Diseño responsive para móviles y tablets
- 🖋️ Tipografía legible y moderna
- 🎯 Estructura limpia y profesional
- ✨ Animaciones y efectos visuales

### Interactividad JavaScript
- 🔘 Botones "Ver más" en cada proyecto
- 📜 Animaciones al hacer scroll
- ⬆️ Botón "Volver arriba" dinámico
- ⌨️ Efecto de escritura en el título
- 📧 Formulario de contacto funcional
- 🎭 Animaciones en badges de habilidades

## 🚀 Cómo visualizar el proyecto

### Opción 1: Abrir localmente
1. Descarga o clona este repositorio
2. Navega a la carpeta `Vale2029`
3. Abre el archivo `index.html` en tu navegador

### Opción 2: Servidor local
```bash
# Si tienes Python instalado
cd Vale2029
python -m http.server 8000

# Si tienes Node.js y http-server
npx http-server Vale2029 -o

# Si usas VS Code
# Instala la extensión "Live Server" y haz clic derecho en index.html > "Open with Live Server"
```

## 📦 Publicación en GitHub Pages

### Pasos para publicar:

1. **Asegúrate de que tu código esté en GitHub:**
```bash
git add .
git commit -m "Añadir portafolio personal Vale2029"
git push origin main
```

2. **Activar GitHub Pages:**
- Ve a tu repositorio en GitHub
- Click en "Settings" (Configuración)
- Navega a "Pages" en el menú lateral
- En "Source", selecciona la rama principal
- En la carpeta, selecciona "/root"
- Click en "Save"
- Espera unos minutos y tu sitio estará disponible en:
`https://thejsarchitects.github.io/ModuloOneJavascriptCohorte5/Vale2029/`

### Configuración alternativa (si quieres que sea la página principal):
Si quieres que el portafolio sea accesible directamente en `https://[tu-usuario].github.io/[nombre-repositorio]/`:

1. Mueve los archivos `index.html`, `style.css` y `script.js` a la raíz del repositorio
2. Sigue los pasos anteriores pero selecciona "/root"

## 🌐 Publicación en Netlify

### Opción 1: Desde GitHub (Recomendada)

1. Ve a [netlify.com](https://netlify.com) y crea una cuenta
2. Click en "New site from Git"
3. Conecta tu repositorio de GitHub
4. Configura:
- **Base directory**: `Vale2029`
- **Build command**: (dejar vacío)
- **Publish directory**: `Vale2029`
5. Click en "Deploy site"
6. Tu sitio estará disponible en un dominio como: `https://random-name-123456.netlify.app`

### Opción 2: Drag & Drop

1. Ve a [netlify.com](https://netlify.com)
2. Arrastra la carpeta `Vale2029` directamente a Netlify
3. ¡Listo! Tu sitio estará publicado instantáneamente

### Personalizar el dominio en Netlify
- En el dashboard de Netlify, click en "Domain settings"
- Click en "Options" > "Edit site name"
- Cambia el nombre a algo como `vale2029-portfolio`
- Tu sitio será: `https://vale2029-portfolio.netlify.app`

## 📁 Estructura de archivos

```
Vale2029/
│
├── index.html # Estructura principal del sitio
├── style.css # Estilos y diseño
├── script.js # Interactividad y animaciones
└── README.md # Este archivo
```

## 🛠️ Tecnologías utilizadas

- **HTML5**: Estructura semántica y accesible
- **CSS3**: Diseño, animaciones y responsive design
- Variables CSS
- Flexbox y Grid
- Animaciones y transiciones
- Media queries
- **JavaScript (Vanilla)**: Interactividad
- Manipulación del DOM
- Event Listeners
- Intersection Observer API
- Animaciones dinámicas

## 📝 Notas de desarrollo

- El formulario de contacto actualmente muestra una alerta. En producción, necesitarías conectarlo con un servicio backend o usar servicios como Formspree, EmailJS, o Netlify Forms.
- Los enlaces de proyectos son demostrativos. Reemplázalos con tus proyectos reales.
- Las imágenes de proyectos usan emojis como placeholders. Puedes reemplazarlos con imágenes reales.

## 🎨 Personalización

Para personalizar este portafolio:

1. **Colores**: Modifica las variables CSS en `style.css`:
```css
:root {
--primary-color: #6366f1; /* Cambia este color */
--secondary-color: #ec4899; /* Y este también */
}
```

2. **Contenido**: Edita el texto en `index.html` con tu información personal

3. **Proyectos**: Actualiza la sección de proyectos con tus propios trabajos

4. **Imágenes**: Añade imágenes reales en la carpeta y actualiza las referencias

## 📧 Contacto

- **Email**: vale2029@example.com
- **GitHub**: [github.com/vale2029](https://github.com/vale2029)
- **LinkedIn**: [linkedin.com/in/vale2029](https://linkedin.com/in/vale2029)

## 📄 Licencia

Este proyecto fue creado con fines educativos como parte del curso de JavaScript.

---

💜 Hecho con amor y mucho café ☕ por Vale2029
205 changes: 205 additions & 0 deletions Vale2029/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portafolio personal de Valentina - Desarrolladora Web">
<title>Vale2029 - Portafolio Personal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header con nombre y navegación -->
<header class="header">
<div class="logo">
<h1>Vale<span class="highlight">2029</span></h1>
</div>
<nav class="nav">
<a href="#sobre-mi">Sobre mí</a>
<a href="#proyectos">Proyectos</a>
<a href="#contacto">Contacto</a>
</nav>
</header>

<!-- Sección Hero -->
<section class="hero">
<div class="hero-content">
<h2 class="hero-title">¡Hola! Soy Valentina</h2>
<p class="hero-subtitle">Desarrolladora Web Full Stack en formación</p>
<p class="hero-description">Apasionada por crear experiencias web increíbles y funcionales</p>
<a href="#proyectos" class="btn-primary">Ver mis proyectos</a>
</div>
</section>

<!-- Sección Sobre mí -->
<section id="sobre-mi" class="section sobre-mi">
<div class="container">
<h2 class="section-title">Sobre mí</h2>
<div class="sobre-mi-content">
<div class="sobre-mi-text">
<p>Soy una estudiante de desarrollo web con gran pasión por la tecnología y el aprendizaje continuo. Me encanta enfrentar nuevos desafíos y buscar soluciones creativas a problemas complejos.</p>
<p>Actualmente estoy profundizando mis conocimientos en HTML, CSS y JavaScript, construyendo una base sólida para convertirme en una desarrolladora web profesional.</p>
<div class="skills">
<h3>Habilidades técnicas:</h3>
<div class="skills-list">
<span class="skill-badge">HTML5</span>
<span class="skill-badge">CSS3</span>
<span class="skill-badge">JavaScript</span>
<span class="skill-badge">Responsive Design</span>
<span class="skill-badge">Git & GitHub</span>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Sección Proyectos -->
<section id="proyectos" class="section proyectos">
<div class="container">
<h2 class="section-title">Mis Proyectos</h2>
<div class="proyectos-grid">
<!-- Proyecto 1 -->
<article class="proyecto-card">
<div class="proyecto-image">
<div class="placeholder-image">📱</div>
</div>
<div class="proyecto-content">
<h3>Aplicación de Tareas</h3>
<p>Una aplicación web interactiva para gestionar tareas diarias con funcionalidad de agregar, editar y eliminar tareas.</p>
<div class="proyecto-tech">
<span class="tech-tag">HTML</span>
<span class="tech-tag">CSS</span>
<span class="tech-tag">JavaScript</span>
</div>
<button class="btn-secondary ver-mas" data-proyecto="1">Ver más</button>
<div class="proyecto-detalles" id="detalles-1" style="display: none;">
<p><strong>Características principales:</strong></p>
<ul>
<li>Interfaz intuitiva y fácil de usar</li>
<li>Almacenamiento local con localStorage</li>
<li>Filtrado de tareas completadas/pendientes</li>
<li>Diseño responsive para móviles</li>
</ul>
</div>
</div>
</article>

<!-- Proyecto 2 -->
<article class="proyecto-card">
<div class="proyecto-image">
<div class="placeholder-image">🎨</div>
</div>
<div class="proyecto-content">
<h3>Landing Page Creativa</h3>
<p>Diseño moderno y atractivo de una landing page para un negocio ficticio con animaciones y efectos visuales.</p>
<div class="proyecto-tech">
<span class="tech-tag">HTML</span>
<span class="tech-tag">CSS</span>
<span class="tech-tag">Flexbox/Grid</span>
</div>
<button class="btn-secondary ver-mas" data-proyecto="2">Ver más</button>
<div class="proyecto-detalles" id="detalles-2" style="display: none;">
<p><strong>Características principales:</strong></p>
<ul>
<li>Diseño completamente responsive</li>
<li>Animaciones CSS suaves</li>
<li>Paleta de colores profesional</li>
<li>Optimización para SEO</li>
</ul>
</div>
</div>
</article>

<!-- Proyecto 3 -->
<article class="proyecto-card">
<div class="proyecto-image">
<div class="placeholder-image">🌤️</div>
</div>
<div class="proyecto-content">
<h3>App del Clima</h3>
<p>Aplicación que muestra el clima actual utilizando una API externa con búsqueda por ciudad.</p>
<div class="proyecto-tech">
<span class="tech-tag">HTML</span>
<span class="tech-tag">CSS</span>
<span class="tech-tag">JavaScript</span>
<span class="tech-tag">API</span>
</div>
<button class="btn-secondary ver-mas" data-proyecto="3">Ver más</button>
<div class="proyecto-detalles" id="detalles-3" style="display: none;">
<p><strong>Características principales:</strong></p>
<ul>
<li>Integración con API de clima</li>
<li>Búsqueda dinámica de ciudades</li>
<li>Visualización de datos meteorológicos</li>
<li>Interfaz limpia y moderna</li>
</ul>
</div>
</div>
</article>
</div>
</div>
</section>

<!-- Sección Contacto -->
<section id="contacto" class="section contacto">
<div class="container">
<h2 class="section-title">Contacto</h2>
<div class="contacto-content">
<div class="contacto-info">
<p>¿Tienes un proyecto en mente o quieres colaborar? ¡Me encantaría saber de ti!</p>
<div class="contacto-methods">
<div class="contacto-item">
<span class="icon">📧</span>
<div>
<h4>Email</h4>
<a href="mailto:vale2029@example.com">vale2029@example.com</a>
</div>
</div>
<div class="contacto-item">
<span class="icon">💼</span>
<div>
<h4>LinkedIn</h4>
<a href="https://linkedin.com/in/vale2029" target="_blank">linkedin.com/in/vale2029</a>
</div>
</div>
<div class="contacto-item">
<span class="icon">🐙</span>
<div>
<h4>GitHub</h4>
<a href="https://github.com/vale2029" target="_blank">github.com/vale2029</a>
</div>
</div>
</div>
</div>
<div class="contacto-form">
<form id="contact-form">
<div class="form-group">
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="tu@email.com" required>
</div>
<div class="form-group">
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" rows="5" placeholder="Tu mensaje..." required></textarea>
</div>
<button type="submit" class="btn-primary">Enviar mensaje</button>
</form>
</div>
</div>
</div>
</section>

<!-- Footer -->
<footer class="footer">
<div class="container">
<p>&copy; 2025 Vale2029. Todos los derechos reservados.</p>
<p>Hecho con ❤️ y mucho ☕</p>
</div>
</footer>

<script src="script.js"></script>
</body>
</html>
Loading