🌟 Personal Portfolio - Fernando Cueto

Read this in other languages: Español

English

📖 About This Project

This is my personal portfolio website showcasing my skills, experience, and projects as a software developer. Built with modern web technologies for optimal performance and user experience.

🚀 Live Demo

Visit: fernandocueto.com

✨ Features

Responsive Design: Optimized for all devices and screen sizes
Dark/Light Theme: Toggle between themes with smooth transitions
Multi-language Support: Available in English and Spanish
Contact Form: Functional email contact form powered by EmailJS
Smooth Animations: Beautiful animations using Framer Motion
Modern UI Components: Built with shadcn/ui (powered by Radix UI + Tailwind CSS)
Fast Performance: Optimized bundle with Vite build system
Unit Testing: Comprehensive test suite with Vitest and React Testing Library
CI/CD Pipeline: Automated testing and deployment with GitHub Actions

🛠️ Tech Stack

Technology	Version	Purpose
React	19.1.1	Frontend framework
TypeScript	5.8.3	Type safety and better DX
Vite	7.1.2	Build tool and dev server
Tailwind CSS	4.1.12	Utility-first CSS framework
Framer Motion	12.23.12	Animation library
React i18next	15.6.1	Internationalization
EmailJS	4.4.1	Contact form functionality
Lucide React	0.539.0	Icon library
shadcn/ui	-	Modern UI components (Radix + Tailwind)
Vitest	Latest	Unit testing framework
React Testing Library	Latest	Component testing utilities

📦 Installation & Setup

Prerequisites

Node.js (v18 or higher)
npm or yarn

Steps

Clone the repository

git clone https://github.com/fernastereo/PaginaPersonal.git
cd paginapersonal

Install dependencies
```
npm install
```

Set up environment variables

# Create .env file in root directory
VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_PUBLIC_KEY=your_public_key

Start development server
```
npm run dev
```
Open in browser Navigate to http://localhost:5173

🔧 Available Scripts

Command	Description
`npm run dev`	Start development server
`npm run build`	Build for production
`npm run build:production`	Build with environment validation
`npm run preview`	Preview production build
`npm run lint`	Run ESLint
`npm run test`	Run unit tests
`npm run test:watch`	Run tests in watch mode
`npm run format`	Format code with Prettier

📁 Project Structure

src/
├── components/
│   ├── sections/          # Main page sections
│   │   ├── data/         # JSON data files
│   │   ├── About.tsx
│   │   ├── Contact.tsx
│   │   ├── Experience.tsx
│   │   ├── Hero.tsx
│   │   ├── Projects.tsx
│   │   ├── Services.tsx
│   │   ├── Skills.tsx
│   │   └── Testimonials.tsx
│   ├── ui/               # Reusable UI components
│   ├── custom-ui/        # Custom components
│   ├── Footer.tsx
│   ├── NavBar.tsx
│   ├── ThemeToggle.tsx
│   └── LanguageToggle.tsx
├── lib/
│   ├── i18n.ts          # Internationalization config
│   └── utils.ts         # Utility functions
├── pages/
│   ├── Index.tsx        # Main page
│   └── NotFound.tsx     # 404 page
├── test/                # Test files
│   ├── setup.ts         # Test configuration
│   ├── basic.test.ts    # Basic unit tests
│   ├── components/      # Component tests
│   │   └── themeToggle.test.tsx
│   ├── data/            # Data validation tests
│   └── lib/             # Utility function tests
└── assets/              # Images and static files

📧 Contact Form Setup

The contact form uses EmailJS for sending emails. To set it up:

Create an account at EmailJS
Create an email service (Gmail, Outlook, etc.)
Create an email template
Get your Service ID, Template ID, and Public Key
Add them to your .env file

🧪 Testing

This project includes a comprehensive test suite to ensure code quality and reliability.

Test Structure

Unit Tests: Test individual functions and utilities
Component Tests: Test React components in isolation
Integration Tests: Test component interactions and routing
Data Validation Tests: Validate JSON data structure

Running Tests

# Run all tests once
npm run test

# Run tests in watch mode (for development)
npm run test:watch

# Run tests with coverage (if configured)
npm run test:coverage

Test Files

src/test/
├── setup.ts              # Test configuration and mocks
├── basic.test.ts          # Basic utility tests
├── App.test.tsx           # App routing logic tests
├── main.test.tsx          # Main application tests
├── components/
│   └── themeToggle.test.tsx  # ThemeToggle component tests
├── data/
│   ├── skills.test.ts     # Skills data validation
│   ├── projects.test.ts   # Projects data validation
│   └── testimonials.test.ts  # Testimonials data validation
└── lib/
    └── utils.test.ts      # Utility functions tests

Testing Technologies

Vitest: Fast unit testing framework
React Testing Library: Component testing utilities
jsdom: DOM simulation for browser APIs
Mocking: i18n, localStorage, and browser APIs

🚀 Deployment

Automatic Deployment (Recommended)

This project includes GitHub Actions for automatic deployment:

✅ Continuous Integration: Runs on every push/PR
🚀 Auto-Deploy: Deploys to production on push to main/master
📧 Email Integration: Includes EmailJS configuration
🔐 Secure: Uses GitHub Secrets for credentials

Setup:

Configure GitHub Secrets
Push to main/master branch
Automatic deployment via FTP to your hosting

See: Complete CI/CD Setup Guide

Manual Deployment (Static Hosting)

Build the project
```
npm run build:production
```
Upload files
- Upload contents of dist/ folder to your hosting
- Place files in public_html/ or equivalent

For Vercel/Netlify

Connect your GitHub repository
Add environment variables in dashboard
Deploy automatically on push

🌐 Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Español

📖 Acerca del Proyecto

Este es mi portafolio personal que muestra mis habilidades, experiencia y proyectos como desarrollador de software. Construido con tecnologías web modernas para un rendimiento óptimo y una excelente experiencia de usuario.

🚀 Demo en Vivo

Visita: fernandocueto.com

✨ Características

Diseño Responsivo: Optimizado para todos los dispositivos y tamaños de pantalla
Tema Oscuro/Claro: Alterna entre temas con transiciones suaves
Soporte Multi-idioma: Disponible en inglés y español
Formulario de Contacto: Formulario funcional de email con EmailJS
Animaciones Suaves: Hermosas animaciones usando Framer Motion
Componentes UI Modernos: Construido con shadcn/ui (Radix UI + Tailwind CSS)
Rendimiento Rápido: Bundle optimizado con sistema de build Vite
Testing Unitario: Suite completa de tests con Vitest y React Testing Library
Pipeline CI/CD: Testing automatizado y deployment con GitHub Actions

🛠️ Stack Tecnológico

Tecnología	Versión	Propósito
React	19.1.1	Framework frontend
TypeScript	5.8.3	Tipado estático y mejor DX
Vite	7.1.2	Herramienta de build y servidor dev
Tailwind CSS	4.1.12	Framework CSS utility-first
Framer Motion	12.23.12	Librería de animaciones
React i18next	15.6.1	Internacionalización
EmailJS	4.4.1	Funcionalidad del formulario
Lucide React	0.539.0	Librería de iconos
shadcn/ui	-	Componentes UI modernos (Radix + Tailwind)
Vitest	Latest	Framework de testing unitario
React Testing Library	Latest	Utilidades para testing de componentes

📦 Instalación y Configuración

Prerrequisitos

Node.js (v18 o superior)
npm o yarn

Pasos

Clonar el repositorio

git clone https://github.com/fernastereo/PaginaPersonal.git
cd paginapersonal

Instalar dependencias
```
npm install
```

Configurar variables de entorno

# Crear archivo .env en la raíz del proyecto
VITE_EMAILJS_SERVICE_ID=tu_service_id
VITE_EMAILJS_TEMPLATE_ID=tu_template_id
VITE_EMAILJS_PUBLIC_KEY=tu_public_key

Iniciar servidor de desarrollo
```
npm run dev
```
Abrir en el navegador Navegar a http://localhost:5173

🔧 Scripts Disponibles

Comando	Descripción
`npm run dev`	Iniciar servidor de desarrollo
`npm run build`	Build para producción
`npm run build:production`	Build con validación de entorno
`npm run preview`	Preview del build de producción
`npm run lint`	Ejecutar ESLint
`npm run test`	Ejecutar tests unitarios
`npm run test:watch`	Ejecutar tests en modo watch
`npm run format`	Formatear código con Prettier

🚀 Despliegue

Despliegue Automático (Recomendado)

Este proyecto incluye GitHub Actions para despliegue automático:

✅ Integración Continua: Se ejecuta en cada push/PR
🚀 Auto-Deploy: Despliega a producción en push a main/master
📧 Integración Email: Incluye configuración de EmailJS
🔐 Seguro: Usa GitHub Secrets para credenciales

Configuración:

Configurar GitHub Secrets
Push a la rama main/master
Despliegue automático vía FTP a tu hosting

Ver: Guía Completa de CI/CD

Despliegue Manual (Hosting Estático)

Construir el proyecto
```
npm run build:production
```
Subir archivos
- Subir contenido de la carpeta dist/ a tu hosting
- Colocar archivos en public_html/ o equivalente

Para Vercel/Netlify

Conectar tu repositorio de GitHub
Agregar variables de entorno en el dashboard
Despliegue automático en push

📞 Contacto

Email: [email protected]
Ubicación: Berlín, Alemania

🧪 Testing (Español)

Este proyecto incluye una suite completa de tests para asegurar la calidad y confiabilidad del código.

Ejecutar Tests

# Ejecutar todos los tests una vez
npm run test

# Ejecutar tests en modo watch (para desarrollo)
npm run test:watch

Tecnologías de Testing

Vitest: Framework de testing rápido y moderno
React Testing Library: Utilidades para testing de componentes
jsdom: Simulación de DOM para APIs del navegador
Mocking: Simulación de i18n, localStorage y APIs del navegador

⭐ Si te gusta este proyecto, ¡dale una estrella en GitHub!

Características destacadas:

✅ Testing Completo: Unit tests, component tests, e integration tests
✅ CI/CD Automatizado: GitHub Actions para deployment automático
✅ Código de Calidad: ESLint + Testing para mantener estándares altos
✅ Documentación Completa: README bilingüe con guías detalladas

Name		Name	Last commit message	Last commit date
Latest commit History 248 Commits
.github		.github
.vscode		.vscode
public		public
src		src
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
README.md		README.md
build-production.js		build-production.js
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

fernastereo/PaginaPersonal

Folders and files

Latest commit

History

Repository files navigation

🌟 Personal Portfolio - Fernando Cueto

English

📖 About This Project

🚀 Live Demo

✨ Features

🛠️ Tech Stack

📦 Installation & Setup

Prerequisites

Steps

🔧 Available Scripts

📁 Project Structure

📧 Contact Form Setup

🧪 Testing

Test Structure

Running Tests

Test Files

Testing Technologies

🚀 Deployment

Automatic Deployment (Recommended)

Manual Deployment (Static Hosting)

For Vercel/Netlify

🌐 Browser Support

📄 License

Español

📖 Acerca del Proyecto

🚀 Demo en Vivo

✨ Características

🛠️ Stack Tecnológico

📦 Instalación y Configuración

Prerrequisitos

Pasos

🔧 Scripts Disponibles

🚀 Despliegue

Despliegue Automático (Recomendado)

Despliegue Manual (Hosting Estático)

Para Vercel/Netlify

📞 Contacto

🧪 Testing (Español)

Ejecutar Tests

Tecnologías de Testing

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 2

Uh oh!

Languages

Packages