Winnie's Portfolio with Next.js

A new version of server-side rendering portfolio app.

🎨 Color Reference

Color	Hex
Primary Color	#F9BF45
Primary Light	#FAD689
primary Dark	#C28F06
Secondary01 (Background)	#FAFAFA
Secondary02	#E0E0E0
Secondary03	#757575
Secondary04	#212121

Features

• 🌊 Tailwindcss
• ✨ Eslint & lint-staged
• 🐕 Husky & cz (with commitizen installed globally)

Getting Started

First, run the development server:

$ install
pnpm install

$ dev
pnpm dev

$ build
pnpm build

$ serve
pnpm start

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Tailwindcss

Installation

pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

/** tailwind.config.js */
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
       ^^^
    "./src/components/**/*.{js,ts,jsx,tsx}",
       ^^^
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

/** globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Automatic Class Sorting with Prettier

pnpm install -D prettier prettier-plugin-tailwindcss

Note that plugin autoloading is not supported when using certain package managers, such as pnpm or Yarn PnP. In this case you may need to add the plugin to your Prettier config explicitly:

.prettierrc

{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "printWidth": 80,
  "arrowParens": "always",
  "plugins": ["prettier-plugin-tailwindcss"]
}

Developing

Husky

It will help us to setup Git Hooks easier.

pnpm install -D husky
npx husky install

npx husky add .husky/pre-commit

.husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

echo '🏗️👷 Styling your project before committing👷‍♂️🏗️'
echo 'please be patient, this may take a while...'

# Check ESLint Standards
pnpm lint ||
(
    echo '🔨❌ Yoo, you have a problem in your code. Check linter 🔨❌
          Run yarn lint, add changes and try commit again.';
    false;
)
echo '🎉 No error found: committing this now.... ✨🚀🏄‍♂️🍻'

npx lint-staged

package.json

"scripts": {
  "postinstall": "husky install",
}

lint-staged

It will help us to run a certain task before commiting our code, and it will make sure that our code is clean and well formatted.

pnpm install -D lint-staged

package.json

"lint-staged": {
    // ... this mean any file with the extension of js, jsx,
    // ts, and tsx will be checked by eslint and formatted by prettier
    "**/*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --config ./.prettierrc.js --write"],

    // ... this mean any file with the extension of css,
    // scss, md, html, and json will be formatted by prettier
    "**/*.{css,scss,md,html,json}": ["prettier --config ./.prettierrc.js --write"]
}

Commitizen

It will help us to organize our commit message, and it will make sure that our commit message is clear and easy to understand.

pnpm install -g commitizen
commitizen init cz-conventional-changelog --pnpm --dev --exact

package.json will automatically generate the config below in your package.json

{
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  }
}

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.