Portfolio

What is Portfolio?

Portfolio is a sleek, modern dark-mode developer portfolio template built with Next.js and Tailwind CSS. It is designed to help developers showcase their skills, projects, and experiences in a professional and visually appealing way. This template is perfect for those who want to move beyond basic templates and create a polished online presence.

Benefits

• Modern Dark Design: The sleek, professional dark theme ensures your portfolio stands out and looks great.
• Fully Responsive: Works perfectly on all devices, from desktops to smartphones.
• Smooth Animations: Fluid transitions and hover effects enhance user experience.
• Fast Performance: Optimized with Next.js 15 for quick loading times.
• SEO Optimized: Built-in meta tags and structured data help improve visibility on search engines.
• Easy Customization: Simple configuration file makes it easy to personalize your portfolio.
• TypeScript: Type-safe development ensures reliability and ease of use.
• Tailwind CSS: Utility-first styling allows for quick and efficient customization.

Use Cases

Portfolio is ideal for developers, designers, and tech professionals who want to create an impressive online portfolio. It can be used to showcase personal projects, highlight skills and experience, and provide contact information. The template is versatile and can be customized to fit various needs, making it suitable for freelancers, job seekers, and established professionals looking to enhance their online presence.

Quick Start

Getting started with Portfolio is straightforward. Follow these steps to set up your portfolio:

1. Clone the Repository:

git clone https://github.com/JeninSutradhar/flow-portfolio.gitcd flow-portfolio

2. Install Dependencies:

npm install

3. Customize Your Content:

• Editsite.config.tsto add your personal information.
• Replace images in the/publicdirectory.
• Update project details inside the components as needed.

4. Run Development Server:

npm run dev

Your site will be available athttp://localhost:3000.

5. Build for Production:

npm run build

Then run it withnpm startor deploy to platforms like Vercel, Netlify, or your preferred hosting.

Project Structure

The project structure is organized to make customization easy. Key directories and files include:

• app/: Next.js app directory.
• components/: React components for different sections of the portfolio.
• public/: Static assets like images.
• site.config.ts: Site configuration file for personal information.

Configuration

Editsite.config.tsto customize your portfolio. This file allows you to add your name, professional title, location, email, and links to your GitHub, LinkedIn, and Twitter profiles. You can also update the projects array incomponents/projects-section.tsxto add your projects.

Customization

Adding Projects

Update the projects array incomponents/projects-section.tsxto add your projects. Each project can include a title, description, category, type, link, and image.

Changing Colors

The template uses a dark theme with customizable accent colors. You can modify the Tailwind config or CSS variables to change the color scheme.

Adding Sections

Create new components in thecomponents/directory and import them inapp/page.tsxto add new sections to your portfolio.

Tech Stack

• Framework: Next.js 15
• Styling: Tailwind CSS
• Language: TypeScript
• Icons: Lucide React
• Animations: CSS Transitions
• Deployment: Netlify/Vercel

License

This project is licensed under the MIT License. See the file for details.

Support

If you have any questions or need help customizing the template, you can create an issue on GitHub or follow on Twitter. Star this repo if you found it helpful!

About

Portfolio is a premium, dark-mode portfolio template designed specifically for developers. It provides a professional and modern way to showcase your work and skills online.