Personal Portfolio

📋 Table of Contents

1. Introduction
2. Features
3. Tech Stack
4. Getting Started
5. Project Structure
6. License
7. Contributing
8. Contact

Introduction

This repository contains the code for a premium, highly responsive personal portfolio and developer dashboard built with Next.js (App Router), Tailwind CSS, Framer Motion, and Prisma. The application features a split architecture optimized individually for desktop and mobile screen layouts.

Features

👉 Responsive & Adaptive Layouts: Individual desktop and mobile directory splits allow for layout-specific experiences, avoiding styling bloat and ensuring maximum performance.

👉 Dynamic Skeleton Loading (Boneyard-js): Powered by boneyard-js, using custom configurations (boneyard.config.json and a registered bone system) for skeleton screens.

👉 Audio feedback: Integrated sound engine (sound-engine.ts) supplying interactive feedback (e.g. click effects) across UI actions.

👉 Interactive Command Menu: A custom mobile command menu allowing quick searches, actions, and toggles.

👉 Aesthetic UI/UX Elements: Beautiful features such as particle effects, displacement text, custom maps, charts (uptime, traffic, visitors), dark/light mode toggle, and pixel-perfect hover cards.

👉 Dashboard & Analytics Suite: Secure auth layouts (app/desktop/dashboard) with real-time stats tracking coding time, visitors, referrers, and project deployments.

👉 Database Integration: Prisma ORM with SQLite (or target DB) for tracking and persisting projects, API keys, and deployment logs.

Tech Stack 🛠️

• Core: Next.js (v16), React 19, TypeScript
• Styling: Tailwind CSS, CSS Modules, Sass
• Database / ORM: Prisma ORM
• UI Components & Icons: Radix UI primitives, Lucide React
• Animations: Framer Motion 12, GSAP
• Interactive Skeletons: boneyard-js
• Charts / Maps: Chart.js, D3.js, TopoJSON

Getting Started

To get started with this project, follow these steps:

1. Clone the repository:

   git clone https://github.com/Mubassim-Khan/Portfolio-Next.js.git

2. Install project dependencies:

   npm install

3. Configure environment variables:

   Create a .env file in the root directory and configure your database and authentication details.

4. Generate Prisma client:

   npx prisma generate

5. Run the development server:

   npm run dev

6. View the project:

   Open http://localhost:3000 to view it in your browser.

Project Structure

The project is structured to differentiate between desktop and mobile devices:

├── app/
│   ├── desktop/         # Desktop layout, dashboard pages, and analytics
│   └── mobile/          # Mobile layouts, contact, resume, and experiences
├── components/
│   ├── desktop/         # Desktop-specific components, charts, and sections
│   └── mobile/          # Mobile-specific UI elements, toggles, navigation
├── data/                # Data files, blogs details, and mobile projects list
├── lib/                 # Core utilities: sound engine, click effects, etc.
├── prisma/              # Prisma schema definition
├── src/bones/           # Registered skeleton layout configuration
└── boneyard.config.json # Boneyard configuration

License

This project is licensed under the MIT License.

Contributing

Contributions to this project are welcome. If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.

Contact

If you have any questions, suggestions, or feedback, you can reach out to:

• LinkedIn: Mubassim Ahmed Khan
• Email: mubassimkhan@gmail.com