Portfolio Demo

A modern, customizable portfolio website built with Next.js, TypeScript, and Tailwind CSS. Easily showcase your projects, blog posts, and personal information.

Features

• Next.js 14 app directory
• TypeScript support
• Tailwind CSS styling
• Modular components
• Blog, Projects, About, and Contact pages
• Responsive and accessible design

Getting Started

1. Clone the Repository

git clone https://github.com/mihf05/Portfolio-demo.git
cd Portfolio-demo

2. Install Dependencies

Using npm

npm install

Using bun

bun install

3. Configure Environment Variables (Optional)

If you plan to use the contact form, create a .env.local file in the root directory. Example:

SMTP_HOST=your_smtp_host
SMTP_PORT=your_smtp_port
SMTP_SECURE=your_smtp_secure_setting
SMTP_USER=your_smtp_user
SMTP_PASSWORD=your_smtp_password

Note: Check your codebase for any required environment variables and update .env.local accordingly.

4. Run the Development Server

Using npm

npm run dev

Using bun

bun run dev

Open http://localhost:3000 to view your site.

5. Build for Production

Using npm

npm run build
npm start

Using bun

bun run build
bun run start

Customization

Using data.ts

The portfolio content is managed through lib/data.ts. This file contains all the customizable data for your portfolio including:

• Personal Information: Name, title, contact details, bio
• Projects: Showcase your work with descriptions, metrics, and technologies
• Testimonials: Add client or colleague reviews
• Blog Posts: Write and display your articles
• About Section: Personal interests, tools, and current reading
• Social Links: GitHub, LinkedIn, Twitter, etc.

To customize your portfolio:

1. Open lib/data.ts
2. Update the siteData object with your information
3. Replace placeholder images in public/ with your own
4. Modify text, add/remove projects, update contact info

Example structure:

export const siteData = {
  personal: {
    name: "Your Name",
    title: "Your Title",
    // ... other personal info
  },
  projects: [
    {
      id: "your-project",
      title: "Your Project Title",
      description: "Project description",
      // ... project details
    }
  ],
  // ... other sections
}

Demo

Here are some screenshots of the portfolio in action:

Homepage

Contact Section

Folder Structure

• app/ — Next.js app directory (pages, layouts, API routes)
• components/ — Reusable UI components
• lib/ — Data and utility functions
• public/ — Static assets (images, icons)
• styles/ — Global styles