A modern, animated, and fully responsive portfolio website built with React, Tailwind CSS, and Framer Motion to showcase my skills, projects, and professional journey.
Live Demo: https://portfolio-1-zosc.onrender.com/
This portfolio is designed to be a rich, interactive experience. Key features include:
- Animated Hero Section: A welcoming introduction with your photo and a clear call-to-action.
- Professional "About Me" Section: Features key statistics and dual "Let's Talk" / "Download CV" call-to-actions.
- Dynamic Services Showcase: Highlights your core competencies with clean, animated cards.
- Unique Skills Section: A dual-format display with a clean, three-column text list for scannability and a colorful, continuous marquee of technology icons for visual appeal.
- Smart Education & Journey Timeline: A space-efficient, two-column layout presenting formal education and practical experience.
- Immersive Projects Section: Full-bleed image cards with a subtle video background and "reveal on hover" details.
- Functional Contact Form: A clean, user-friendly form that sends emails directly to your inbox using Web3Forms, complete with beautiful
SweetAlert2
notifications for success and error states. - Comprehensive Footer: Includes contact info, availability status, useful links, and a unique "Digital Craftsmanship" section with interactive tooltips.
- Custom Cursor: A unique, interactive cursor that provides a premium feel and changes state on hover and click.
- Floating WhatsApp Button: A persistent, easy-to-use button for immediate contact.
- Responsive Design: Fully responsive layout with an animated hamburger menu for seamless navigation on all devices.
- Smooth Scrolling: Implemented with
react-scroll
for elegant navigation between sections.
This project leverages a modern, efficient tech stack to deliver a high-performance, visually stunning experience.
-
Frontend:
- React (UI Library)
- Vite (Build Tool)
- Tailwind CSS (CSS Framework)
- Framer Motion (Animation Library)
- React Icons (Icons)
- React Scroll (Smooth Scrolling)
- React Fast Marquee (Skills Marquee)
- SweetAlert2 (Alerts for Contact Form)
-
Backend Services:
- Web3Forms (For handling the contact form submissions)
To get a local copy up and running, follow these simple steps.
You need to have Node.js (which includes npm
) installed on your machine.
-
Clone the repository:
git clone https://github.com/your-username/your-portfolio-repo.git
-
Navigate to the project directory:
cd your-portfolio-repo
-
Install NPM packages:
npm install
-
Configure the Contact Form:
- Open the
src/components/Contact.jsx
file. - Find the following line:
const accessKey = "YOUR_ACCESS_KEY_HERE";
- Replace
'YOUR_ACCESS_KEY_HERE'
with your actual Access Key from Web3Forms.
- Open the
-
Run the development server:
npm run dev
The application will now be running on
http://localhost:5173
(or another available port).
To create a static, optimized build of the application for deployment:
npm run build