Un portafolio profesional de una sola página (One Page) orientado al sector tecnológico, construido con React y diseñado para mostrar tu experiencia, proyectos y datos de contacto de forma elegante y dinámica.
Este proyecto es un portafolio web personal responsivo que carga dinámicamente toda la información desde archivos JSON. Está diseñado para desarrolladores y profesionales del sector tecnológico que desean mostrar su trabajo de forma profesional y personalizable sin necesidad de modificar código fuente.
- Diseño Responsivo: Se adapta a cualquier dispositivo (móvil, tablet, escritorio)
- Carga Dinámica: Toda la información se carga desde archivos JSON fácilmente editables
- Secciones Completas: Inicio, Sobre Mí, Proyectos y Contacto
- Personalizable: Fácil de adaptar a tus necesidades cambiando solo los archivos JSON
- Moderno: Construido con React y Tailwind CSS para un diseño limpio y actual
- React - Biblioteca JavaScript para construir interfaces de usuario
- Vite - Herramienta de desarrollo rápida para React
- Tailwind CSS - Framework CSS de utilidad para el diseño
- shadcn/ui - Componentes de UI reutilizables y accesibles
Estas instrucciones te permitirán obtener una copia del proyecto funcionando en tu entorno local para propósitos de desarrollo y pruebas.
Para ejecutar este proyecto necesitas tener instalado:
- Clona el repositorio:
git clone git clone https://github.com/adalid-cl/portafolio-web-react.git
cd portafolio-web-react
- Instala las dependencias:
npm install
- Inicia el servidor de desarrollo:
npm run dev
- Abre tu navegador en
http://localhost:8080
src/
├── components/ # Componentes reutilizables
│ ├── Navbar.jsx # Barra de navegación
│ ├── Hero.jsx # Sección principal (inicio)
│ ├── About.jsx # Sección Sobre Mí
│ ├── Projects.jsx # Sección de Proyectos
│ ├── Contact.jsx # Sección de Contacto
│ └── Footer.jsx # Pie de página
├── data/ # Archivos JSON con la información del portafolio
│ ├── personal.json # Información personal (nombre, bio, etc.)
│ ├── projects.json # Lista de proyectos
│ └── contact.json # Información de contacto y redes sociales
└── pages/ # Páginas de la aplicación
└── Index.tsx # Página principal que muestra todas las secciones
El portafolio está diseñado para ser fácilmente personalizable modificando los archivos JSON en la carpeta src/data/
.
Edita el archivo src/data/personal.json
:
{
"name": "Tu Nombre",
"profession": "Tu Profesión",
"shortBio": "Una breve descripción sobre ti",
"fullBio": "Una descripción más detallada de tu experiencia y habilidades...",
"avatarUrl": "URL de tu foto de perfil"
}
Edita el archivo src/data/projects.json
:
[
{
"id": 1,
"name": "Nombre del Proyecto",
"description": "Descripción del proyecto",
"image": "URL de la imagen del proyecto",
"tags": ["React", "Node.js", "MongoDB"],
"githubUrl": "URL del repositorio en GitHub",
"liveUrl": "URL del proyecto en vivo"
}
// Añade más proyectos aquí
]
Edita el archivo src/data/contact.json
:
{
"email": "[email protected]",
"socialMedia": [
{
"name": "LinkedIn",
"url": "https://linkedin.com/in/tuusuario",
"icon": "linkedin"
}
// Añade más redes sociales aquí
]
}
Para crear una versión de producción y desplegarla:
- Construye el proyecto:
npm run build
- Los archivos generados estarán en la carpeta
dist/
, que puedes subir a cualquier servicio de hosting estático como:
Los estilos principales se controlan a través de Tailwind CSS. Puedes modificar los colores y otros aspectos de diseño editando el archivo tailwind.config.js
.
Para añadir nuevas secciones al portafolio:
- Crea un nuevo componente en la carpeta
components/
- Añade los datos necesarios a los archivos JSON existentes o crea uno nuevo
- Importa y añade el componente en
pages/Index.tsx
Las contribuciones son bienvenidas. Para contribuir:
- Haz un Fork del proyecto
- Crea una rama para tu funcionalidad (
git checkout -b feature/amazing-feature
) - Haz commit de tus cambios (
git commit -m 'Add some amazing feature'
) - Empuja la rama (
git push origin feature/amazing-feature
) - Abre un Pull Request
Este proyecto está licenciado bajo la Licencia MIT - consulta el archivo LICENSE para más detalles.
- Brayan Diaz C - Trabajo inicial - Brayan Diaz C
⌨️ con ❤️ por Adalid CL 😊