2 files changed, 90 insertions, 0 deletions
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."
+    }
+  ]
+}