https://github.com/carlosjcastro/user-profile-challenge-cjcg
Este proyecto es un perfil de usuario desarrollado con Next.js, que muestra información personal, intereses, habilidades, idiomas y un formulario de contacto.
https://github.com/carlosjcastro/user-profile-challenge-cjcg
css3 html5 javascript mui-material nextjs reactjs
Last synced: 7 months ago
JSON representation
Este proyecto es un perfil de usuario desarrollado con Next.js, que muestra información personal, intereses, habilidades, idiomas y un formulario de contacto.
- Host: GitHub
- URL: https://github.com/carlosjcastro/user-profile-challenge-cjcg
- Owner: carlosjcastro
- License: mit
- Created: 2024-07-03T01:32:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-05T14:09:57.000Z (over 1 year ago)
- Last Synced: 2025-01-06T14:38:32.533Z (9 months ago)
- Topics: css3, html5, javascript, mui-material, nextjs, reactjs
- Language: JavaScript
- Homepage: https://user-profile-challenge.cjcastrogalante.com/
- Size: 860 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🌟 User Profile Challenge
Este proyecto es un perfil de usuario desarrollado con Next.js, que muestra información personal, intereses, habilidades, idiomas y un formulario de contacto funcional. Además, cuenta con funcionalidades como la visualización ampliada de imagen de perfil al hacer clic en la misma, iconos de redes sociales, secciones de "About", un botón para ver CV, "Interests", "Skills" con nombres específicos, "Languages" con barras de progreso, "Experience" con una línea de tiempo desde la más reciente hasta la más antigua, un formulario de contacto funcional con validación, mensajes de error y éxito al enviar el mensaje, y un footer con logo.
## 🚀 Instalación
1. Clonar el repositorio
```git clone https://github.com/carlosjcastro/user-profile-challenge-cjcg.git```
```cd user-profile-challenge ```
3. Instalar Node.js y npm en el sistema
4. Instalar dependencias necesarias
```
npm install @emotion/react @emotion/styled @mui/material framer-motion axios next react react-dom react-hook-form react-icons
6. Instalar dependencias de desarrollo
```
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @testing-library/jest-dom @testing-library/react babel-jest eslint eslint-config-next identity-obj-proxy jest
## 🏃 Ejecución
1. Iniciar el servidor de desarrollo
```
npm run dev
3. Abrir la aplicación en el navegador
La aplicación estará disponible en http://localhost:3000.
## 📦 Dependencias
Framework y bibliotecas principales:
- Next.js
- React.js
- Material-UI (para validación básica de formulario)
- Framer Motion
- Emotion
### Otras dependencias importantes:
- react-hook-form
- react-icons
## 📜 Scripts disponibles
```
- npm run dev: Inicia la aplicación en modo de desarrollo.
- npm run build: Compila la aplicación para producción.
- npm start: Inicia la aplicación en modo de producción.
- npm run lint: Ejecuta el linter para verificar el código.
- npm test: Ejecuta pruebas utilizando Jest.
```
## 📂 Estructura del proyecto
1. /components: Componentes reutilizables de React.
- /about
- /contactForm
- /experience
- /footer
- /header
- /interests
- /loader
- /skills
## 🌐 Ver deploy: ([https://user-profile-challenge.cjcastrogalante.com/](https://user-profile-challenge.cjcastrogalante.com/))
Creado con ♥ por Carlos José Castro Galante