Code Practice: Simple Portfolio — Next.js, Tailwind CSS, Flowbite

Create simple portfolio following a single article. No back-end.

Description

Complete Step-by-step Tutorial

1. Read on Medium

Live demo on Vercel

1. https://simple-portfolio-cwntf.vercel.app

Series:

1. Code Practice on Medium

Some concepts you’ll see here

1. Next.js App Router
2. Next.js server and client components

Stack:

1. Next.js 13
2. Tailwind CSS
3. Flowbite

Notes:

1. No back-end needed. Portfolio data stored in data.ts.
2. No global state.

Preview

Getting Started

Prerequisites

Before you begin, ensure you have the following software installed:

1. GitHub CLI
2. Node.js 16.8 or later.
3. macOS, Windows (including WSL), and Linux are supported.
4. Prettier VS Code Extension
5. Tailwind Fold (Optional)

Installation

1. Create your GitHub repo using this project as template.

gh repo create <repo-name> --public --template=saikise/simple-portfolio-cwntf

1. Install the dependencies listed in package.json.

npm i

Usage

To run the project, use the following command:

npm run dev