feat: add actual content to projects page (dummy projects for now)

5 files changed, 125 insertions, 15 deletions

diff --git a/src/app.scss b/src/app.scss
index 764f1b0..7e47126 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -42,18 +42,6 @@ a {
   }
 }
 
-.ii {
-  width: 20vh;
-  height: 20vh;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
-  background-color: #1e1e2e;
-  border-radius: 2vh;
-  box-shadow: -12px -12px 28px #27273b73, 12px 12px 20px #12121c73;
-}
-
 .container {
   display: flex;
   height: 100dvh;
@@ -61,6 +49,7 @@ a {
   justify-content: center;
   overflow: hidden;
   flex-direction: column;
+  width: 100%;
 }
 
 .main {
diff --git a/src/lib/assets/css/projects.scss b/src/lib/assets/css/projects.scss
new file mode 100644
index 0000000..e9c2f6a
--- /dev/null
+++ b/src/lib/assets/css/projects.scss
@@ -0,0 +1,62 @@
+$font-min: 16px;
+$font-desired: 1vw;
+$font-max: 32px;
+
+.project-container {
+  padding: 0 10vw;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(40vw, 1fr));
+  height: 85dvh;
+  align-items: center;
+  justify-items: center;
+  overflow: auto;
+  align-content: center;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.project {
+  margin: 30px 15px;
+  font-size: clamp($font-min, $font-desired, $font-max);
+  padding: 25px 10px;
+  display: flex;
+  align-items: center;
+  background: #1e1e2e;
+  transition: transform .3s ease-in-out;
+  border-radius: 2vh;
+  box-shadow: -12px -12px 28px #27273b73, 12px 12px 20px #12121c73;
+}
+
+.spacer {
+  height: 15dvh;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+}
+
+.home {
+  font-size: clamp($font-min, 2.5vw, 48px);
+  margin-bottom: 15px;
+}
+
+.project-icon {
+  width: 4rem;
+  height: 4rem;
+  margin-right: 10px;
+}
+
+@media (max-width: 839px) {
+  .project-container {
+    grid-template-columns: minmax(90vw, 1fr);
+    padding: 0 5vw;
+  }
+}
+
+a:hover .project {
+  transform: scale(110%);
+  transition: transform .3s ease-in-out;
+}
diff --git a/src/lib/projects.json b/src/lib/projects.json
new file mode 100644
index 0000000..bb637bb
--- /dev/null
+++ b/src/lib/projects.json
@@ -0,0 +1,28 @@
+{
+  "projects": [
+    {
+      "iconLink": "https://raw.githubusercontent.com/Olah-Barbershop/website/master/src/lib/assets/icon.png",
+      "link": "https://github.com/Olah-Barbershop/website/",
+      "title": "Oláh Barbershop",
+      "description": "Lorem ipsum dolor sit amet, qui minim labore adipisicing."
+    },
+    {
+      "iconLink": "https://raw.githubusercontent.com/Olah-Barbershop/website/master/src/lib/assets/icon.png",
+      "link": "https://github.com/Olah-Barbershop/API",
+      "title": "Oláh Barbershop - API",
+      "description": "Lorem ipsum dolor sit amet, qui minim labore adipisicing."
+    },
+    {
+      "iconLink": "https://raw.githubusercontent.com/Olah-Barbershop/website/master/src/lib/assets/icon.png",
+      "link": "https://github.com/Olah-Barbershop/website/",
+      "title": "Oláh Barbershop",
+      "description": "Lorem ipsum dolor sit amet, qui minim labore adipisicing."
+    },
+    {
+      "iconLink": "https://raw.githubusercontent.com/Olah-Barbershop/website/master/src/lib/assets/icon.png",
+      "link": "https://github.com/Olah-Barbershop/website/",
+      "title": "Oláh Barbershop",
+      "description": "Lorem ipsum dolor sit amet, qui minim labore adipisicing."
+    }
+  ]
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4391bf3..17129e9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -31,6 +31,6 @@
   </div>
   <br>
   <div class="projects">
-    Check out my projects <a href={base + '/projects'}><b>here ⮞</b></a>
+    Check out my projects <a href={base + '/projects'}><b>here</b></a>
   </div>
 </div>
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 5a074b6..8b64856 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -1,7 +1,38 @@
 <script lang="ts">
+  import '$lib/assets/css/projects.scss'
+
   import { base } from "$app/paths"
+  import { projects } from '$lib/projects.json'
+
+  type Project = {
+    iconLink: string,
+    link: string,
+    title: string,
+    description: string
+  }
+
+  const projectsList: Project[] = projects
 </script>
 
-<div class="home">
-  ⮜ Take me back <a href={base + '/'}><b>home</b></a>
+<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 {iconLink, link, title, description}}
+    <a href={link} target="_blank">
+      <div class="project">
+        <img src={iconLink} alt={title + ' icon'} class="project-icon">
+        <div class="content">
+          <h3>{title}</h3>
+          <p>{description}</p>
+        </div>
+      </div>
+    </a>
+  {/each}
 </div>