React Portfolio Template

A reusable React + Vite starter for developer portfolios. Drop in your content, deploy to GitHub Pages (workflow included), and iterate quickly.

Features

• Responsive layout with hero, skills, projects, contact, and thank-you sections
• Auto light/dark theme toggle with localStorage + system preference fallback
• Project data driven by src/data/projects.js for easy edits
• Font Awesome + Google Fonts pre-wired
• GitHub Actions workflow (.github/workflows/deploy.yml) ready to build and ship to GitHub Pages

Getting Started

npm install
npm run dev

Visit http://localhost:5173 to preview.

Full Customization Checklist

1. Site metadata + favicon
   • index.html contains the <title>, <meta name="description">, and inline SVG favicon. Replace the placeholder name/description and swap the base64 SVG with your own icon (or drop in a traditional favicon.ico + update the <link rel="icon"> tag).
   • Update the Open Graph / social tags here too if you need richer link previews.
2. Hero + about copy
   • In src/App.jsx, change the hero name, role subtitle, and about paragraph to your actual story.
   • Swap the hero portrait URL (https://placehold.co/400x400...) with a real image—local assets work if you import them at the top of the file.
3. Projects section
   • All project cards render from src/data/projects.js. For each entry, update title, description, features, image, and both URLs.
   • The placeholder() helper creates temporary screenshots; point image to deployed assets instead (or import static files).
4. Skills + tooling
   • src/components/SkillsCard.jsx lists branded Font Awesome icons. Swap the icon classes or replace the component with a custom layout that matches the story you want to tell.
   • src/data/constants.js exposes the adjective list for the animated “Have a ____ day!” message if you want to reword it.
5. Contact + social links
   • Update the LinkedIn/GitHub anchors near the bottom of src/App.jsx. Add more <a> blocks (email, Twitter, etc.) as needed.
6. Styling + theme
   • Colors, fonts, and spacing live in src/index.css. Tune CSS variables for the light/dark theme system or override Bootstrap utility classes to match your brand.
   • If you’d like more control, install additional UI libraries (Chakra, Tailwind, etc.) and remove Bootstrap entirely.
7. Deployment settings
   • Adjust the repo name and homepage if you plan to serve from a custom domain.
   • Review .github/workflows/deploy.yml to confirm the branch and build command match your workflow.

Deploy

This repo includes a Pages workflow. To deploy:

1. Push to GitHub.
2. In repo settings → Pages, select “GitHub Actions” as the source.
3. The workflow installs deps, runs npm run build, and publishes the dist/ bundle automatically.

Want to host elsewhere? Run npm run build and upload the dist/ folder to any static host (Netlify, Vercel, S3, etc.).

License

MIT © You. Use freely, customize heavily, and ship your story.