Portfolio

Overview

vivid344's portfolio repository.

You can view the deployed site at https://vivid344.vercel.app .

Table of Contents

• Requirements
• Technology
• Quick Start
• Directory Structure
• Design

Requirements

• node [^20.0.0]

Technology

• Next.js
• TailwindCSS
• shadcn-ui
• Vercel
• microCMS

Quick Start

setup

$ corepack enable
$ pnpm install

start

$ pnpm run dev

Access to http://localhost:3000 .

Directory Structure

portfolio
├── app  # Directory used for routing in Next.js
├── components  # Directory for reusable components
│   └── ui  # Directory for components using shadcn/ui
├── lib
│   ├── types  # Directory for type definitions
│   └── utils  # Directory for general utility functions
├── public  # Directory for placing static files
└── styles  # Directory for placing CSS

Design

Each component basically follows the shadcn/ui guidelines.

When adding a new component, please use the following command:

$ pnpm dlx shadcn-ui@latest add <component-name>

For icons, we are using lucide . Please import and use lucide-react.