The Resume and Portfolio

The portfolio is built with Next.js and Tailwind CSS.

• The Resume and Portfolio
  • Install Next.js
  • Install Tailwind CSS with Next.js
    • Add the paths to all of your template files in your tailwind.config.js file:
    • Add the @tailwind directives for each Tailwind’s layers to your globals.css file:
  • Deploy on Vercel

Install Next.js

Next.js is a flexible React framework that gives you building blocks to create fast web applications.

# npx create-next-app@latest ref-portfolio --typescript --eslint
npx create-next-app@latest --typescript
# yarn
corepack enable
corepack prepare yarn@stable --activate
yarn set version stable

yarn create next-app --typescript 

Install Tailwind CSS with Next.js

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. It's fast, flexible, and reliable — with zero-runtime. Rapidly build modern websites without ever leaving your HTML.

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

Add the paths to all of your template files in your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the @tailwind directives for each Tailwind’s layers to your globals.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

# npx create-next-app@latest  -e with-tailwindcss ref-portfolio --typescript
npm i react-icons next-themes
npm i -D sass tailwind-styled-components

Deploy on Vercel

For more details, check out deploy Next.js deployment documentation on Vercel Platform.