Assim VS - Portfolio Website

🌐 Modern, animated portfolio website built with Next.js 16, Tailwind CSS v4, and Framer Motion.

✨ Features

• 🎨 Modern Design: Clean, responsive UI with smooth animations
• 🌊 Animated Background: Multiple gradient orbs with Framer Motion
• 📱 Fully Responsive: Mobile-first design that works on all devices
• ⚡ Fast & Optimized: Built with Next.js App Router for optimal performance
• 🎯 Framer Motion: Smooth animations and transitions throughout
• 🎭 Project Cards: Interactive cards with Lucide icons
• 💬 Contact Form: Ready to integrate with Formspree or EmailJS
• 🎬 Smooth Animations: Scroll-triggered animations on sections

🚀 Tech Stack

Category	Technology	Version
Framework	Next.js	16.0.0 (App Router)
Styling	Tailwind CSS	v4
Animations	Framer Motion	12.23.24
Icons	Lucide React	Latest
Language	TypeScript	5
Fonts	Geist Sans & Mono	Google Fonts

📂 Project Structure

my-portfolio/
├── app/
│   ├── about/          # About page route
│   │   └── page.tsx
│   ├── contact/        # Contact page route
│   │   └── page.tsx
│   ├── projects/       # Projects page route
│   │   └── page.tsx
│   ├── page.tsx        # Home page
│   ├── layout.tsx      # Root layout (Navbar/Footer)
│   └── globals.css     # Global styles & Tailwind
├── components/
│   ├── Navbar.tsx              # Fixed navigation bar
│   ├── Footer.tsx              # Footer with social links
│   ├── BackgroundAnimation.tsx # Animated gradient background
│   ├── Hero.tsx                # Home hero section
│   ├── About.tsx               # About section
│   ├── Services.tsx            # Services cards
│   ├── Projects.tsx            # Projects grid
│   ├── ProjectCard.tsx         # Individual project card
│   └── ContactForm.tsx         # Contact form
├── public/
│   └── assim.jpg              # Profile photo
└── README.md

🛠️ Getting Started

Prerequisites

• Node.js ≥ 18.x (Download)
• npm ≥ 9.x (comes with Node.js)
• Git (Download)

Installation

1. Clone the repository (or use your existing folder):

git clone <your-repo-url>
cd my-portfolio

2. Install dependencies:

npm install

3. Start development server:

npm run dev

4. Open your browser: Visit http://localhost:3000

Build for Production

npm run build
npm start

🎨 Customization Guide

1. Update Personal Information

Hero Section (components/Hero.tsx):

<h1>Hi, I'm Your Name 👋</h1>
<p>Your introduction text...</p>

About Section (components/About.tsx):

• Edit the bio paragraph
• Add/remove skill tags

Footer (components/Footer.tsx):

• Update GitHub/LinkedIn URLs
• Add more social links

2. Add Your Projects

Edit the projects array in components/Projects.tsx:

const projects: Project[] = [
  {
    title: "Your Project Name",
    description: "Brief description of your project",
    tech: ["Next.js", "TypeScript", "Tailwind"],
    demo: "https://your-demo-url.com",
    github: "https://github.com/username/repo",
  },
  // Add more projects...
];

3. Connect Contact Form

The contact form is set up but needs integration with a service:

Option A: Formspree (Recommended for beginners)

1. Sign up at formspree.io
2. Create a form and get your endpoint
3. Add to components/ContactForm.tsx:

const response = await fetch("YOUR_FORMSPREE_ENDPOINT", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name, email, message }),
});

Option B: EmailJS

1. Sign up at emailjs.com
2. Follow their React integration guide
3. Add the EmailJS SDK

4. Update Profile Photo

Replace public/assim.jpg with your own photo (ideally 400x400px).

🌟 Advanced Features

Add Dark/Light Mode

1. Create components/ThemeToggle.tsx
2. Use CSS variables in globals.css
3. Add a toggle button in the Navbar

Add a Blog

1. Create app/blog/page.tsx
2. Use MDX for content
3. Add blog cards to the home page

Add Animations

All components use Framer Motion. Edit animation options:

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6 }}
>

📄 Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm start	Start production server
npm run lint	Run ESLint

🚀 Deployment

Vercel (Recommended - 1-click deploy)

1. Push to GitHub
2. Go to vercel.com
3. Click "Import Project"
4. Select your repository
5. Deploy! 🎉

Other Platforms

• Netlify: Similar to Vercel
• AWS Amplify: Full AWS integration
• Railway: Simple container-based hosting

📝 License

MIT © 2025 Assim VS

🔗 Links & Credits

• Next.js: nextjs.org
• Tailwind CSS: tailwindcss.com
• Framer Motion: framer.com/motion
• Lucide Icons: lucide.dev

---

Built with ❤️ by Assim VS