Hello! 👋 This is a personal portfolio website built with modern web tooling. It showcases projects, certificates, experience, and contact information with smooth animations and a responsive UI.
Live Demo: https://portfolio-ahqsa.vercel.app/
- React 19 + Vite
- Tailwind CSS v4
- AOS (Animate On Scroll) for scroll animations
- Framer Motion for component/section animations
- React Router v7 for routing
- EmailJS for contact form (optional)
- Vercel Analytics for visitor tracking
Want to personalize the text, images, and content? All customizable content is in src/text.js for easy editing.
Quick customization:
- Edit
src/text.jsto change text content (name, bio, headings, etc.) - Replace images in
/public/assets/and update imports intext.js
Detailed guide: See CUSTOMIZATION_GUIDE.md for step-by-step instructions on:
- Changing your name and job titles
- Updating section headings and descriptions
- Replacing images (profile picture, logo, icons)
- Adding/removing tech stack badges
- Customizing contact section text
Make sure you have:
- Node.js 18+ (LTS recommended)
- npm (bundled with Node.js)
Check versions:
node -v
npm -v- Clone the repository
git clone https://github.com/ahqsa24/portfolio-v1
cd "Portfolio Web"- Install dependencies
npm installIf you encounter peer dependency warnings, you can try:
npm install --legacy-peer-deps- Start the development server
npm run devThen open the URL shown in the terminal (usually http://localhost:5173).
If you want the contact form to send emails via EmailJS, create a .env file in the project root and add:
VITE_EMAILJS_SERVICE_ID=your_actual_service_id
VITE_EMAILJS_TEMPLATE_ID=your_actual_template_id
VITE_EMAILJS_PUBLIC_KEY=your_actual_public_keyImportant:
- In Vite, frontend env vars must start with
VITE_. - Restart the dev server after editing
.env.
Detailed steps are documented in EMAIL_SETUP_GUIDE.md.
Create an optimized build:
npm run buildThe output will be in the dist folder, ready to be deployed to static hosting (e.g., Vercel, Netlify, GitHub Pages).
Optional preview of the production build locally:
npm run previewsrc/main.jsx– App entry point (renders<App />)src/App.jsx– Main application component with Router, routes, AOS initialization, and Analyticssrc/components/– UI sections:Home.jsx,About.jsx,Experience.jsx,Portfolio.jsx,Contact.jsx,Navbar.jsx,Footer.jsxsrc/animations/motion.js– Shared Framer Motion variantssrc/components/MotionSection.jsx– Wrapper for applying variants + AOS attributessrc/components/AOSRouteInit.jsx– Refresh AOS on route changesrc/text.js– Centralized content for easy customizationsrc/data.js– Static data and asset imports
This project uses both AOS and Framer Motion. See ANIMATIONS_GUIDE.md for quick usage and best practices. Quick example:
<MotionSection variant="fadeInUp" aos="fade-up" delay={0.2}>
{/* your content */}
</MotionSection>This project includes Vercel Analytics for tracking visitor insights (page views, referrers, devices, etc.).
Setup:
- Deploy to Vercel
- Enable Analytics in your Vercel project dashboard
- Analytics data will appear automatically
Note: Analytics only work in production (vercel.com domain), not on localhost.
See VERCEL_ANALYTICS_GUIDE.md for detailed setup and usage instructions.
- Ensure you’re in the correct directory before running commands
- Verify Node and npm versions are installed and accessible
- If env vars are undefined, ensure
.envis in the project root and keys start withVITE_ - For EmailJS issues, double-check Service ID, Template ID, and Public Key; then restart the dev server
- Clear browser cache or open a new incognito window if assets don’t refresh
If you use or get inspired by this project, a credit mention is appreciated. Feel free to customize and extend it.
Questions or feedback? Open an issue or reach out via the contact links on the site.