Skip to content

Deploy your portfolio in 5 minutes ⚑ Built with Astro πŸš€ and TailwindCSS ✨ Achieve a perfect Lighthouse score πŸ’―

License

Notifications You must be signed in to change notification settings

zougari47/portfolio-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

41 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Portfolio Template

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

Table of Contents

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 color Gray
{ 50: '#F9FAFB', 100: '#F3F4F6', 200: '#E5E7EB', 300: '#D1D5DB', 400: '#9CA3AF', 500: '#6B7280', 600: '#4B5563', 700: '#374151', 800: '#1F2937', 900: '#111827' }
  • Red color Red
{ 50: '#FDF2F2', 100: '#FDE8E8', 200: '#FBD5D5', 300: '#F8B4B4', 400: '#F98080', 500: '#F05252', 600: '#E02424', 700: '#C81E1E', 800: '#9B1C1C', 900: '#771D1D' }
  • Yellow color Yellow
{ 50: '#FDFDEA', 100: '#FDF6B2', 200: '#FCE96A', 300: '#FACA15', 400: '#E3A008', 500: '#C27803', 600: '#9F580A', 700: '#8E4B10', 800: '#723B13', 900: '#633112' }
  • Green color Green
{ 50: '#F3FAF7', 100: '#DEF7EC', 200: '#BCF0DA', 300: '#84E1BC', 400: '#31C48D', 500: '#0E9F6E', 600: '#057A55', 700: '#046C4E', 800: '#03543F', 900: '#014737' }
  • Blue color Blue
{ 50: '#EBF5FF', 100: '#E1EFFE', 200: '#C3DDFD', 300: '#A4CAFE', 400: '#76A9FA', 500: '#3F83F8', 600: '#1C64F2', 700: '#1A56DB', 800: '#1E429F', 900: '#233876' }
  • Indigo color Indigo
{ 50: '#F0F5FF', 100: '#E5EDFF', 200: '#CDDBFE', 300: '#B4C6FC', 400: '#8DA2FB', 500: '#6875F5', 600: '#5850EC', 700: '#5145CD', 800: '#42389D', 900: '#362F78' }
  • Purple color Purple
{ 50: '#F6F5FF', 100: '#EDEBFE', 200: '#DCD7FE', 300: '#CABFFD', 400: '#AC94FA', 500: '#9061F9', 600: '#7E3AF2', 700: '#6C2BD9', 800: '#5521B5', 900: '#4A1D96' }
  • Pink color Pink
{ 50: '#FDF2F8', 100: '#FCE8F3', 200: '#FAD1E8', 300: '#F8B4D9', 400: '#F17EB8', 500: '#E74694', 600: '#D61F69', 700: '#BF125D', 800: '#99154B', 900: '#751A3D' }

About

Deploy your portfolio in 5 minutes ⚑ Built with Astro πŸš€ and TailwindCSS ✨ Achieve a perfect Lighthouse score πŸ’―

Topics

Resources

License

Stars

Watchers

Forks