portfolio2025

Portfolio Website

A modern, animated portfolio website built with Next.js 15, featuring beautiful UI animations powered by Framer Motion and a data-driven architecture for easy content updates.

✨ Features

• 🎨 Modern Animated UI - Stunning animations using Framer Motion and Magic UI components
• 🎭 Glassmorphism Design - Beautiful backdrop blur effects and gradient backgrounds
• 📱 Fully Responsive - Optimized for all devices and screen sizes
• 🚀 Performance Optimized - Built with Next.js 15 and Turbopack
• 🎯 Data-Driven Architecture - Easy content updates through centralized data files
• ♿ Accessible - Following web accessibility best practices
• 🎨 Tailwind CSS v4 - Using the latest Tailwind with OKLCH color space

🛠️ Tech Stack

• Framework: Next.js 15.5.5 with App Router
• Language: TypeScript 5
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui (New York style)
• Animations: Framer Motion
• Icons: Lucide React
• Form Handling: React Hook Form + Zod
• Fonts: Geist Sans & Geist Mono

📂 Project Structure

portfolio/
├── app/                    # Next.js app directory
│   ├── api/               # API routes
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # React components
│   ├── sections/         # Section components
│   └── ui/               # shadcn/ui components
├── data/                  # Content data files
│   ├── bio.ts            # Personal information
│   ├── experiences.ts    # Work experience
│   ├── projects.ts       # Project showcase
│   └── contact.ts        # Contact information
├── types/                 # TypeScript type definitions
└── lib/                   # Utility functions

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository:

   git clone https://github.com/dwk601/portfolio2025.git
   cd portfolio
   

2. Install dependencies:

   npm install
   

3. Run the development server:

   npm run dev
   

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

📝 Updating Content

All content is managed through simple TypeScript files in the /data directory:

Personal Information (data/bio.ts)

Update your name, title, description, avatar, and social links.

Work Experience (data/experiences.ts)

Add or modify your work experiences with:

• Company name
• Position/Role
• Duration
• Description
• Technologies used

Projects (data/projects.ts)

Showcase your projects with:

• Title
• Description
• Image URL
• Live URL
• Technologies

Contact Info (data/contact.ts)

Update your email, location, and availability status.

🎨 Customization

Colors

Edit app/globals.css to customize the color scheme using OKLCH color space:

--primary: oklch(...);
--secondary: oklch(...);

Animations

Modify animation variants in section components to customize entrance effects.

🏗️ Build & Deploy

Build for Production

npm run build

Deploy on Vercel

The easiest way to deploy is using Vercel:

Or manually:

1. Push your code to GitHub
2. Import the project in Vercel
3. Deploy with one click

📦 Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

🔧 Configuration

Image Domains

Add allowed image domains in next.config.ts:

images: {
  remotePatterns: [
    {
      protocol: "https",
      hostname: "your-domain.com",
    },
  ],
}

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

Contributions, issues, and feature requests are welcome!

📧 Contact

For questions or feedback, please reach out through the contact form on the portfolio website.

---

Built with ❤️ using Next.js and Framer Motion