Abubker's Portfolio

A modern, responsive portfolio website built with React, TypeScript, and Vite, featuring smooth animations and a premium design.

🚀 Features

• Modern Tech Stack: Built with React 19, TypeScript, and Vite.
• Responsive Design: Fully responsive layout optimized for mobile and desktop.
• Animations: Smooth transitions and effects using GSAP and Framer Motion.
• UI Components: High-quality components powered by Shadcn/ui and Radix UI.
• Styling: Utility-first styling with Tailwind CSS.
• Navigation: Animated pill navigation with mobile support.

🛠️ Tech Stack

• Framework: React
• Build Tool: Vite
• Language: TypeScript
• Styling: Tailwind CSS & Sass
• Animations: GSAP & Framer Motion
• UI Library: Shadcn/ui
• Icons: Lucide React

📦 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or bun

Installation

1. Clone the repository:

   git clone <repository-url>

2. Navigate to the project directory:

   cd profile-me

3. Install dependencies:

   npm install
   # or
   bun install

Running Locally

Start the development server:

npm run dev

The application will be available at http://localhost:5173.

📜 Scripts

• npm run dev: Start the development server.
• npm run build: Build the application for production.
• npm run preview: Preview the production build locally.
• npm run lint: Run ESLint to check for code quality issues.

📂 Project Structure

Abubker's Portfolio

A modern, responsive portfolio built with Next.js, TypeScript, and Tailwind CSS.

🚀 Summary

• Framework: Next.js (app directory) with React 19 and TypeScript
• Styling: Tailwind CSS
• Animations: GSAP and Framer Motion
• Icons: Lucide React

📦 Tech Stack

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS
• GSAP, Framer Motion
• Radix UI primitives & Lucide icons

🔧 Getting Started

Prerequisites

• Node.js v18 or newer
• npm or bun

Install

1. Clone the repository:

   git clone <repository-url>

2. Enter the project folder:

   cd next-profile

3. Install dependencies:

   npm install
   # or
   bun install

Run locally

Start the Next.js dev server:

npm run dev
# or
bun run dev

Open http://localhost:3000 in your browser.

📜 NPM Scripts

• dev: Start Next.js in development (next dev)
• build: Build for production (next build)
• start: Start the production server (next start)
• lint: Run ESLint

These are defined in package.json.

📁 Project Structure (high level)

app/                 # Next.js app directory (routes + layouts)
components/          # UI and page components
lib/                 # Utility functions
public/              # Static assets
next.config.ts       # Next.js configuration
package.json

notes

• This project uses Next.js (not Vite); README updated to match package.json.

📄 License

MIT