https://github.com/seb-rm/html-css-portafolios
Simulación de un portafolio funcional desarrollado para poner en práctica conceptos de HTML y CSS.
https://github.com/seb-rm/html-css-portafolios
css3 html5
Last synced: 12 months ago
JSON representation
Simulación de un portafolio funcional desarrollado para poner en práctica conceptos de HTML y CSS.
- Host: GitHub
- URL: https://github.com/seb-rm/html-css-portafolios
- Owner: Seb-RM
- Created: 2025-01-30T15:50:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-05T03:35:41.000Z (over 1 year ago)
- Last Synced: 2025-02-17T22:54:53.606Z (over 1 year ago)
- Topics: css3, html5
- Language: HTML
- Homepage: https://seb-rm.github.io/HTML-CSS-Portafolios/
- Size: 44.4 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Portafolio Web - Proyecto de Práctica en HTML y CSS
Este proyecto es una simulación de un portafolio funcional desarrollado para poner en práctica conceptos de HTML y CSS. La estructura incluye secciones como presentación personal, habilidades, servicios, proyectos y contacto.
## ✨ Características Principales
- Diseño responsivo
- Secciones interactivas con efectos hover
- Animaciones CSS personalizadas
- Formulario de contacto funcional
- Integración con redes sociales
- Diseño modular y fácil de personalizar
- Optimizado para SEO básico
## 🛠 Tecnologías Utilizadas
- **HTML5** (Estructura semántica)
- **CSS3** (Estilos avanzados)
- Google Fonts (Tipografía)
- Boxicons (Iconos modernos)
- CSS Variables (Personalización temática)
## 📌 Conceptos HTML Implementados
1. **Estructura Semántica**
- Uso de ``, ``, ``
- Etiquetas semánticas para mejor SEO
- Sistema de navegación con anclajes
2. **Meta Tags para Responsividad**
```html
```
3. **Integración de Recursos Externos**
- Fuentes de Google Fonts
- Iconos de Boxicons
- Sistema de archivos organizado
## 🎨 Conceptos CSS Destacados
1. **Custom Properties (Variables CSS)**
```css
:root {
--main-color: #ff5733;
--bg-color: #f7f7f7;
}
```
2. **Flexbox para Layouts**
- Diseños flexibles
- Alineación precisa
- Distribución de espacios
3. **Efectos y Transiciones**
```css
.social-media a:hover {
transform: scale(1.2) translateY(-1rem);
transition: .3s ease;
}
```
4. **Animaciones con Keyframes**
```css
Copy
@keyframes floatImage {
0% { transform: translateY(0); }
50% { transform: translateY(-2.4rem); }
100% { transform: translateY(0); }
}
```
5. **Diseño Responsivo**
- Unidades relativas (rem, vw)
- Media Queries implícitas
- Contenido adaptable
## 🚀 Instalación
1. Clonar el repositorio
````bash
git clone https://github.com/tu-usuario/tu-portfolio.git
````
2. Abre index.html en tu navegador