Midnight Slate
NextJS + Tailwind CSS minimal portfolio template for developers, designers, and creators.
About
NextJS + Tailwind CSS minimal portfolio template for developers, designers, and creators. It features a clean, minimal design with a focus on showcasing your work and experience without any distractions. It is fully responsive and adopts a dark zinc / graphite theme. It comes with a homepage and a project archive page.
Getting Started
First, install dependencies:
npm install
Then, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/components/Homepage.tsx
. The page auto-updates as you edit the file.
Quick Setup
-
To make things easier for you, I've added a few files to help you get started. You can simply fill in the details and you're good to go. They are contained in json files inside the
data
folder. -
Edit the details.json file to change your info. It also includes important social links which you can reference later in the project. You can also specify how many projects to display on the home page.
-
Edit the projects.json file to list your projects. Projects are added as objects with several properties, notably a web link and a github repo link.
-
Edit the experience.json file to list your working experience. You can also provide a link to the company / project.
-
Edit the designs.json file to display any designs you have. You may wish to change this do showcase your blogs / gallery / podcasts or whatever suits your profession.
This project uses next/font
to automatically optimize and load Inter, a custom Google Font.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository.
More Info
Placeholder image credits: lucabravo@unsplash
Template license
