Pouya — Portfolio

A bold, animated portfolio website built with React + Vite. Features a vibrant dark theme, filterable projects grid, animated cursor glow, and a contact form that opens your mail client.

Quick start

# 1. Install dependencies (only once)
npm install

# 2. Start the dev server (with hot reload)
npm run dev

# 3. Build for production
npm run build

# 4. Preview the production build locally
npm run preview

The dev server runs at http://localhost:5173.

Project structure

.
├── index.html                 # HTML entry point
├── package.json
├── vite.config.js
├── public/
│   └── favicon.svg            # Site favicon
└── src/
    ├── main.jsx               # React entry
    ├── App.jsx                # Root component
    ├── styles.css             # All styles (one stylesheet)
    ├── data/
    │   └── projects.js        # ★ Edit this to update your projects
    └── components/
        ├── Navbar.jsx
        ├── Hero.jsx
        ├── About.jsx
        ├── Projects.jsx
        ├── Skills.jsx
        ├── Contact.jsx
        └── Footer.jsx

How to customize

1. Your projects

Open src/data/projects.js and replace the placeholder entries. Each project has:

• title, tagline, description
• tech — array of tech badges
• tags — used by the filter buttons (e.g. "Frontend", "Featured")
• accent — hex color for the card's gradient theme
• image — null for the placeholder block, or '/projects/my-image.png' after dropping a screenshot into public/projects/
• links.live, links.github — leave blank to hide

2. Your name, bio, and social links

• Hero text: src/components/Hero.jsx
• About + code block: src/components/About.jsx
• Social URLs: src/components/Contact.jsx (search for yourusername and replace with your actual handles)
• Email recipient: src/components/Contact.jsx — the form opens mailto:pouyaghp97@gmail.com. Change if needed.

3. Skills

src/components/Skills.jsx — edit the skillGroups array and the marquee list.

4. Colors

Top of src/styles.css — the :root block defines all accent colors (--accent, --accent-2, etc.) and the gradient combos.

Hooking up a real contact form

The form currently uses mailto: (opens the user's mail app). For a proper "send and forget" experience, swap in one of these in Contact.jsx's handleSubmit:

• Formspree — POST to your form's URL
• EmailJS — client-side send with no backend
• Your own API — fetch to your Node/Express endpoint

Deploy

Both options take 2 minutes:

• Vercel: npm i -g vercel && vercel from this folder
• Netlify: drag-and-drop the dist/ folder after running npm run build
• GitHub Pages: push to GitHub and use the gh-pages package or GitHub Actions

License

MIT — yours to use, change, and ship.