zougari47 / portfolio-template

Deploy your portfolio in 5 minutes ⚡ Built with Astro 🚀 and TailwindCSS ✨ Achieve a perfect Lighthouse score 💯

Portfolio Template

Deploy your portfolio in 5 minutes with ease, built with Astro & TailwindCSS.

Table of Contents

• Table of Contents
• Prerequisites
• Installation
• Modify Template
  • Theme

Prerequisites

• Node.js - v18.17.1 or v20.3.0 or higher. ( v19 is not supported.)
• Text editor - VS Code is good with the Official Astro extension.
• Terminal - Astro is accessed through its command-line interface
• pnpm(or you can use npm/yarn)
• Git

Installation

1. Use the Use this template button on GitHub and create new repository.
2. Clone the repo:

   git clone https://github.com/yourUsername/yourRepoName.git

3. Navigate to the project directory:

   cd yourRepoName

4. Install dependencies:

   pnpm install

5. Start the development server:

   pnpm dev

   PS: Make sure your replace yourRepoName with your repository name.

Modify Template

After you started the development server, you can navigate to http://localhost:3000/portfolio-template and start editing the src/data.json file with your personal details.

PS: You will learn how to remove /portfolio-template from the URL in the deplyment section.

Theme

I used blue as the theme for the template, but you can experiment with the following colors if you prefer a different option. Copy the color you like and replace the primary value in the tailwind.config.mjs.

• Gray

{ 50: '#F9FAFB', 100: '#F3F4F6', 200: '#E5E7EB', 300: '#D1D5DB', 400: '#9CA3AF', 500: '#6B7280', 600: '#4B5563', 700: '#374151', 800: '#1F2937', 900: '#111827' }

• Red

{ 50: '#FDF2F2', 100: '#FDE8E8', 200: '#FBD5D5', 300: '#F8B4B4', 400: '#F98080', 500: '#F05252', 600: '#E02424', 700: '#C81E1E', 800: '#9B1C1C', 900: '#771D1D' }

• Yellow

{ 50: '#FDFDEA', 100: '#FDF6B2', 200: '#FCE96A', 300: '#FACA15', 400: '#E3A008', 500: '#C27803', 600: '#9F580A', 700: '#8E4B10', 800: '#723B13', 900: '#633112' }

• Green

{ 50: '#F3FAF7', 100: '#DEF7EC', 200: '#BCF0DA', 300: '#84E1BC', 400: '#31C48D', 500: '#0E9F6E', 600: '#057A55', 700: '#046C4E', 800: '#03543F', 900: '#014737' }

• Blue

{ 50: '#EBF5FF', 100: '#E1EFFE', 200: '#C3DDFD', 300: '#A4CAFE', 400: '#76A9FA', 500: '#3F83F8', 600: '#1C64F2', 700: '#1A56DB', 800: '#1E429F', 900: '#233876' }

• Indigo

{ 50: '#F0F5FF', 100: '#E5EDFF', 200: '#CDDBFE', 300: '#B4C6FC', 400: '#8DA2FB', 500: '#6875F5', 600: '#5850EC', 700: '#5145CD', 800: '#42389D', 900: '#362F78' }

• Purple

{ 50: '#F6F5FF', 100: '#EDEBFE', 200: '#DCD7FE', 300: '#CABFFD', 400: '#AC94FA', 500: '#9061F9', 600: '#7E3AF2', 700: '#6C2BD9', 800: '#5521B5', 900: '#4A1D96' }

• Pink

{ 50: '#FDF2F8', 100: '#FCE8F3', 200: '#FAD1E8', 300: '#F8B4D9', 400: '#F17EB8', 500: '#E74694', 600: '#D61F69', 700: '#BF125D', 800: '#99154B', 900: '#751A3D' }