Rashell Guerrero's Portfolio

A responsive software engineering portfolio built with React, TypeScript, and Vite. The site presents my projects, technical skills, resume, and contact information through a polished one-page experience focused on clear navigation, accessible UI patterns, and maintainable component structure.

Live site: https://rashellguerrero.dev/

Highlights

• Responsive one-page layout with Hero, About, Projects, Skills, Contact, and Footer sections
• Sticky navigation with active-section tracking using IntersectionObserver
• Data-driven project and skills content for easier updates and cleaner component logic
• Interactive project cards with image carousel support and mobile-friendly expandable summaries
• Contact form powered by EmailJS with loading, success, and error states
• Automated tests covering key UI rendering, navigation, resume, and social link behavior
• CI/CD workflow with GitHub Actions for linting, testing, production builds, and Vercel deployment
• Custom UI details including a mobile typewriter effect, pixel-inspired styling, and a canvas-based footer cat animation
• Vercel Analytics integration

Tech Stack

React, TypeScript, Vite, CSS, EmailJS, Vercel Analytics, React Icons

Testing and tooling: Vitest, React Testing Library, JSDOM, ESLint, GitHub Actions, Vercel

How to Run Locally

git clone https://github.com/rxshellg/rg-portfolio.git
cd rg-portfolio
npm ci
npm run dev

Environment Variables

The contact form uses EmailJS. To enable message sending, add the following variables to a local .env file and to the project’s Environment Variables settings:

VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_PUBLIC_KEY=your_public_key

Without these variables, the site will still render, but the contact form will not be able to send messages.

Screenshots

Desktop	Mobile