Parte 1 - Estruturando o projeto

Variáveis do arquivo global.css

:root {
  --primary: #334155;
  --secondary: #2C2D2E;

  --link: #107fd2;
 
  --background-card: #FFF;
  --background-badge: #E6EEF5;
  --background-body: #F2F5F9;

  --shadow-image: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
  --shadow-card: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

Carregamento da fonte Inter (link)

<link rel="preconnect" href="<https://fonts.gstatic.com>">
<link href="<https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap>" rel="stylesheet">

Parte 3 - Adicionando o link das redes sociais

Carregamento da lib de icones

<script src="<https://unpkg.com/@phosphor-icons/web>"></script>

Acessar nome dos icones

Phosphor Icons

Parte 5 - Listando os projetos via JavaScript

Modelo do arquivo JSON dos projetos

[
  {
    "name": "",
    "image": "",
    "tags": ["", "", ""],
    "link": ""
  },
	{
    "name": "",
    "image": "",
    "tags": ["", "", ""],
    "link": ""
  },
	{
    "name": "",
    "image": "",
    "tags": ["", "", ""],
    "link": ""
  },
]

Parte 7 - Biblioteca de animação

Colar script dentro da tag head

<!-- Script AOS - Animações -->
<link href="<https://unpkg.com/[email protected]/dist/aos.css>" rel="stylesheet">

Colar script no final da tag body

<script src="<https://unpkg.com/[email protected]/dist/aos.js>"></script>

<script>
  AOS.init({ once: true })
</script>

Mais detalhes sobre a biblioteca AOS Animate

AOS - Animate on scroll library