Shadow Scripter - Advanced Portfolio

Architecting scalable digital realms from the shadows.

A high-performance, visually stunning personal portfolio website built with the latest web technologies. Designed to showcase projects, skills, and experience with a focus on premium aesthetics, fluid animations, and modern engineering practices.

🚀 Key Features

• ⚡ Next-Gen Performance: Powered by Next.js 16 (Turbopack) and React 19 for blazing fast load times and seamless transitions.
• 🎨 Glassmorphism UI: A custom-designed, dark-themed interface featuring advanced glassmorphism effects, gradients, and blurs.
• ✨ Fluid Animations: Immersive user experience driven by Framer Motion, featuring complex layout transitions, scroll animations, and micro-interactions.
• 📱 Fully Responsive: Flawless display across all devices, from large desktop monitors to mobile screens, utilizing Tailwind CSS 4.
• 🔍 SEO Optimized: Built-in SEO best practices to ensure maximum visibility.
• 🛠️ Type-Safe: Developed with TypeScript for robust, maintainable, and error-free code.

🛠️ Tech Stack

• Framework: Next.js 16
• Library: React 19
• Styling: Tailwind CSS 4
• Animations: Framer Motion
• Icons: Lucide React
• Language: TypeScript
• Deployment: Vercel

📂 Project Structure

src/
├── app/              # Next.js App Router pages and layouts
├── components/       # Reusable UI components (Hero, Navbar, Projects, etc.)
├── data/             # Static data files (Portfolio content, skills, experience)
├── lib/              # Utility functions (cn, etc.)
└── styles/           # Global styles and Tailwind configuration

🚀 Getting Started

Follow these steps to set up the project locally on your machine.

Prerequisites

• Node.js: Version 18.17 or later
• npm, yarn, or pnpm

Installation

1. Clone the repository:

   git clone https://github.com/Waleed-Ahmad-dev/portfolio.git
   cd portfolio

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server:

   npm run dev

4. Open your browser: Navigate to http://localhost:3000 to view the application.

📜 Scripts

• npm run dev: Starts the development server.
• npm run build: Builds the application for production.
• npm run start: Starts the production server.
• npm run lint: Runs ESLint to check for code quality issues.

👤 Author

Waleed Ahmad (Shadow Scripter)

• GitHub: @Waleed-Ahmad-dev
• LinkedIn: Waleed Ahmed
• Instagram: @shadow.scripter

📄 License

This project is licensed under the MIT License.

---

Built with ❤️ and ☕ by Shadow Scripter.