Portfolio Website

A modern and fully responsive portfolio website template built with Next.js 14, TypeScript, and Tailwind CSS. It features a light/dark mode toggle, a blog with Markdown support, and a customizable project showcase to highlight your work and achievements.

Table of Contents

• Key Features
• Getting Started
  • 1. Download the Template
  • 2. Prepare Your Blog Posts
  • 3. Customize the Content
  • 4. Change the Icon
  • 5. Deploy Your Site
• Contributing

Key Features

• 🚀 Built with Next.js 14 using the App Router for optimal routing and performance.
• 💅 Tailwind CSS for efficient, responsive, and customizable styling.
• 🌓 Light/Dark Mode Toggle for an enhanced user experience.
• 📱 Fully Responsive Design ensuring compatibility across all devices.
• 📝 Markdown Blog with built-in syntax highlighting for clear and professional posts.
• 🔍 Project Showcase with dynamic filtering to showcase your work and achievements.
• 📊 Contact Form to allow users to reach out to you directly.

Getting Started

To set up and customize the portfolio, follow the steps below:

1. Download the Template

You can either clone the repository or download it as a ZIP file, command below.

git clone https://github.com/LordJunn/portfolio.git

2. Prepare Your Blog Posts

To start with a clean slate, remove any existing posts in the /content/blog/ directory.

# Delete all existing blog posts for a fresh start
rm -rf content/blog/*

3. Customize the Content

Edit the necessary components and pages as needed. Below are the key components to modify:

About Section: Update the /components/ui/about.tsx file to add your personal information.

Hero Section: Modify /components/ui/hero.tsx to customize your homepage introduction.

Contact Section: Change your nodemailer credentials in .env so it will be mailed to you instead.
If you're using Vercel, they will provide you with an option to fill out via the website itself.

Pages: Update other relevant pages inside the /components/ui/ directory to reflect your unique content.

4. Change the Icon

If you wish to change the favicon or other icons, navigate to the /public/ directory and replace the current icons.
Same goes for the images in /public/work/.

5. Deploy Your Site

Once you've made your changes, deploy the site using your preferred platform, such as Vercel or Netlify, for seamless hosting.

Contributing

We welcome contributions to improve this template! If you'd like to contribute:

Fork the repository.
Create a new branch for your changes.
Submit a pull request with a detailed description of the changes you made.