add some projects

main.css

@@ -1,5 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
 
+* {
+    box-sizing: border-box;
+}
+
 :root {
     --text-color: #cccccc;
     --text-color-highlight: #ffffff;
@@ -119,10 +123,12 @@ article {
     align-items: center;
     background-color: rgba(0,0,0, 0.9);
     background-blend-mode: darken;
-    background-attachment: local;
     padding-top: 2rem;
+    padding-bottom: 2rem;
     background-image: url("/img/bg-projects.jpg");
     transition: background-color 4s;
+    background-position: center;
+    background-attachment: fixed;
     overflow-y: auto;
     overflow-y: overlay;
 }
@@ -131,6 +137,30 @@ article {
     background-color: rgba(0,0,0, 0.85);
 }
 
+#projects .links {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+    padding-top: 0.5rem;
+}
+
+#projects .links a button {
+    width: 2rem;
+    height: 2rem;
+    border: 1px solid #fff;
+    border-radius: 0.2rem;
+    padding: 0.2rem;
+    background: transparent;
+    cursor: pointer;
+}
+
+#projects .links a button img {
+    width: 100%;
+    height: 100%;
+}
+
 .tags {
     display: flex;
     flex-direction: row;
@@ -177,14 +207,8 @@ article {
 }
 
 #projects .project-scroller {
-    display: flex;
-    justify-content: start;
-    align-items: center;
     height: 100%;
-    width: 100%;
-    gap: 1.5rem;
     max-width: 100vw;
-    flex-direction: column;
 }
 
 #projects .project-scroller article {
@@ -194,16 +218,26 @@ article {
     text-align: start;
     flex-wrap: wrap;
     max-width: 34rem;
-    padding: 0.5rem;
-    gap: 0.25rem;
+    padding-top: 0.5rem;
+    padding-bottom: 1.5rem;
+    padding-inline: min(1rem, 5%);
+    gap: 0.75rem;
 }
 
-#projects .project-scroller article:nth-child(2) {
+#projects .project-scroller article:nth-child(2n+0) {
     justify-content: end;
     flex-direction: row-reverse;
     text-align: end;
 }
 
+#projects .project-scroller article .links {
+    justify-content: flex-start;
+}
+
+#projects .project-scroller article:nth-child(2n+0) .links {
+    justify-content: flex-end;
+}
+
 #projects .project-scroller article .title {
     font-size: 1.4rem;
     color: var(--text-color-highlight);
@@ -223,13 +257,15 @@ article {
 }
 
 #projects .project-scroller article .project-logo {
-    width: 6rem;
-    height: 6rem;
-    min-width: 10rem;
-    min-height: 10rem;
+    min-width: 9rem;
+    min-height: 9rem;
+    max-width: 9rem;
+    max-height: 9rem;
+    border-radius: 0.5rem;
 }
 
 #projects .project-scroller article .project-logo img {
     width: 100%;
     height: 100%;
+    border-radius: 0.5rem;
 }