src/routes/projects/+page.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<script lang="ts">
  import '$lib/assets/css/projects.scss'

  import { base } from "$app/paths"
  import { projects } from '$lib/projects.json'

  type Project = {
    icon: string,
    link: string,
    title: string,
    description: string
  }

  const projectsList: Project[] = projects
</script>

<svelte:head>
  <title>Projects</title>
</svelte:head>

<div class="spacer">
  <div class="home">
    Take me back <a href={base + '/'}><b>home</b></a>
  </div>
</div>
<div class="project-container">
  {#each projectsList as {icon, link, title, description}}
    <a href={link} target="_blank">
      <div class="project">
        <img src={icon} alt={title + ' icon'} class="project-icon">
        <div class="content">
          <h3>{title}</h3>
          <p>{description}</p>
        </div>
      </div>
    </a>
  {/each}
</div>