My Portfolio Built Using Astro

#portfolio #template #astro #webdev

If you're looking to create a fast, statically rendered portfolio website, you may want to consider using the Astro framework. It uses a familiar component syntax similar to React.js but without the need for large JavaScript bundles.

When building my portfolio website, I wanted to make sure it had a consistent and polished look. One way I achieved this was by using CSS variables, also known as CSS custom properties. These allow for easy modification and maintenance of design elements such as colors and font sizes.

Here is my variables style sheet:

:root {
  /* Colors */
  /* Mint */
  --color-mint: #15FF93;
  --color-mint-50: #CDFFE8;
  --color-mint-100: #B8FFDE;
  --color-mint-200: #8FFFCB;
  --color-mint-300: #67FFB9;
  --color-mint-400: #3EFFA6;
  --color-mint-500: #15FF93;
  --color-mint-600: #00DC76;
  --color-mint-700: #00A458;
  --color-mint-800: #006C3A;
  --color-mint-900: #00341C;
  /* Orange */
  --color-orange: #E8871E;
  --color-orange-50: #F9E0C5;
  --color-orange-100: #F7D6B2;
  --color-orange-200: #F3C28D;
  --color-orange-300: #F0AE68;
  --color-orange-400: #EC9B43;
  --color-orange-500: #E8871E;
  --color-orange-600: #BB6A13;
  --color-orange-700: #884D0E;
  --color-orange-800: #553009;
  --color-orange-900: #221303;

  /* Font sizes */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px, base */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.75rem;  /* 28px */
  --font-size-4xl: 2rem;     /* 32px */
  --font-size-5xl: 2.25rem;  /* 36px */
  --font-size-6xl: 2.5rem;   /* 40px */
  --font-size-7xl: 2.75rem;  /* 44px */
  --font-size-8xl: 3rem;     /* 48px */
  --font-size-9xl: 3.25rem;  /* 52px */
  --font-size-10xl: 3.5rem;  /* 56px */
  --font-size-11xl: 3.75rem; /* 60px */
  --font-size-12xl: 4rem;    /* 64px */
  --font-size-13xl: 4.25rem; /* 68px */
  --font-size-14xl: 4.5rem;  /* 72px */
  --font-size-15xl: 4.75rem; /* 76px */
  --font-size-16xl: 5rem;    /* 80px */

  /* Font Family */
  --font-family-IBM-Plex-Mono: 'IBM Plex Mono', sans-serif;
  --font-family-Mukta: 'Mukta', sans-serif;
}

I can then use these values throughout my website styling, e.g:

.intro-welcome {
  color: var(--color-mint);
  font-family: var(--font-family-IBM-Plex-Mono);
  font-size: var(--font-size-base);
}

For now, this is a very brief overview of how I built my website but feel free to follow me as I will be posting a more in depth post about how I built my portfolio.

I encourage others to take inspiration from my website, as it is open source and available on GitHub 💻. Feel free to use it as a reference or starting point for your own projects. Give the repository a star ⭐ if it helped you.

LINK: 👉lukeliasi.com Have fun!