🌐 Portfolio Website – Nida Ilyas

A fully responsive, dark-themed portfolio site built with Next.js 15, Tailwind CSS, Framer Motion, and deployed via Vercel.

Live Site: portfolio-website-five-fawn-84.vercel.app

📖 Overview

This is my personal portfolio to showcase my background in software engineering and cybersecurity, highlight my featured and additional projects, and provide easy access for recruiters to connect with me via email, GitHub, and LinkedIn.

✨ Features

• ⚡ Preloader with animated glowing logo
• 🎯 Hero section with personalized intro and call-to-action
• 💼 Featured project section with GIFs and hover effects
• 🧩 Grid of additional projects with tags and links
• 🎨 Animated scroll-based section reveals with Framer Motion
• 🧭 Navigation bar with blur + shadow on scroll
• 📬 Contact section with email and social links
• 📱 Fully responsive and mobile-friendly
• 🌙 Dark modern design aesthetic

🛠 Tech Stack

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS 4
• Animation: Framer Motion
• Languages: JavaScript, TypeScript
• Icons: React Icons
• Hosting: Vercel

💡 What I Learned

• Implementing smooth section-based animation using Framer Motion
• Building a responsive layout with Tailwind’s utility classes
• Working with layoutId to animate logo across transitions
• Managing preloader + layout with shared animated state
• Deploying a full-stack project using Vercel

🗂 Project Structure

src/
├── app/                # App Router entry point (layout, page)
├── components/         # Hero, Projects, Navbar, Preloader, etc.
├── public/media/       # Project previews, logo, favicon
├── styles/             # Tailwind & global styles

🚀 How to Run Locally

Clone the repository and install dependencies:

git clone https://github.com/Cyber-Security-Tech/portfolio-website.git
cd portfolio-website
npm install

Start the development server:

npm run dev

Build for production:

npm run build
npm run start

🛠️ Future Improvements

• Add blog or technical writeups section
• Convert into CMS-based portfolio (e.g., using Sanity or Contentlayer)
• Expand project filtering (by tech stack or year)
• Add light mode toggle

💬 Let's Connect

📧 Email: [email protected]
🔗 GitHub | LinkedIn

🔖 Credits & Inspiration: This project was heavily inspired by Brittany Chiang’s portfolio. I recreated the design from scratch to learn modern web development practices and personalized it to reflect my own technical identity and career goals.