From f06501dc5823b99b86a60650752b3cdf9c159d90 Mon Sep 17 00:00:00 2001
From: Rashell Guerrero <157666982+rxshellg@users.noreply.github.com>
Date: Sun, 5 Jul 2026 00:55:24 -0400
Subject: [PATCH] Revise README for portfolio project details
Updated the README to reflect the new portfolio details, including project descriptions, tech stack, and environment variables for the contact form.
---
README.md | 99 ++++++++++++++++++++++---------------------------------
1 file changed, 40 insertions(+), 59 deletions(-)
diff --git a/README.md b/README.md
index 7dbf7eb..0d4fc04 100644
--- a/README.md
+++ b/README.md
@@ -1,73 +1,54 @@
-# React + TypeScript + Vite
+# Rashell Guerrero's Portfolio
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+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.
-Currently, two official plugins are available:
+**Live site:** https://rashellguerrero.dev/
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+## Highlights
-## React Compiler
+* 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
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Tech Stack
-## Expanding the ESLint configuration
+React, TypeScript, Vite, CSS, EmailJS, Vercel Analytics, React Icons
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+Testing and tooling: Vitest, React Testing Library, JSDOM, ESLint, GitHub Actions, Vercel
-```js
-export default defineConfig([
- globalIgnores(['dist']),
- {
- files: ['**/*.{ts,tsx}'],
- extends: [
- // Other configs...
+## How to Run Locally
- // Remove tseslint.configs.recommended and replace with this
- tseslint.configs.recommendedTypeChecked,
- // Alternatively, use this for stricter rules
- tseslint.configs.strictTypeChecked,
- // Optionally, add this for stylistic rules
- tseslint.configs.stylisticTypeChecked,
-
- // Other configs...
- ],
- languageOptions: {
- parserOptions: {
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
- tsconfigRootDir: import.meta.dirname,
- },
- // other options...
- },
- },
-])
+```bash
+git clone https://github.com/rxshellg/rg-portfolio.git
+cd rg-portfolio
+npm ci
+npm run dev
```
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+## Environment Variables
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+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:
-export default defineConfig([
- globalIgnores(['dist']),
- {
- files: ['**/*.{ts,tsx}'],
- extends: [
- // Other configs...
- // Enable lint rules for React
- reactX.configs['recommended-typescript'],
- // Enable lint rules for React DOM
- reactDom.configs.recommended,
- ],
- languageOptions: {
- parserOptions: {
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
- tsconfigRootDir: import.meta.dirname,
- },
- // other options...
- },
- },
-])
+```env
+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 |
+|---------|--------|
+| 
| 
|
+| 
| 
|
+| 
| 
|
+| 
| 
|
+| 
| 
|
+| 
| 
|