more work on redesign

img/purpur.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+ <defs>
+  <linearGradient id="g" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+   <stop offset="15%" stop-color="#25b8ff" />
+   <stop offset="85%" stop-color="#fa02ff" />
+  </linearGradient>
+ </defs>
+ <g fill="none" stroke="url(#g)" stroke-linejoin="round" stroke-width="1.8">
+  <path d="M72.09 13.86L53.18 24.8l18.93 10.92 18.91-10.94z"/>
+  <path d="M49.87 1.05L30.95 11.99 49.88 22.9 68.8 11.97z"/>
+  <path d="M27.67 13.89L8.75 24.82l18.93 10.92 18.91-10.93z"/>
+  <path d="M49.89 26.7L30.97 37.64 49.9 48.55l18.92-10.93z"/>
+  <path d="M7.11 27.67l.01 21.86 18.93 10.91-.01-21.85z"/>
+  <path d="M29.33 40.49l.01 21.85 18.93 10.92-.01-21.85z"/>
+  <path d="M7.12 53.32l.01 21.85 18.93 10.91-.01-21.85z"/>
+  <path d="M29.34 66.14l.01 21.85L48.28 98.9l-.01-21.85z"/>
+  <path d="M51.57 98.9l18.92-10.93-.01-21.85-18.92 10.93z"/>
+  <path d="M73.78 86.06L92.7 75.13l-.02-21.85-18.91 10.93z"/>
+  <path d="M73.76 60.41l18.92-10.93-.01-21.85-18.92 10.93z"/>
+  <path d="M51.55 51.4l.01 21.85 18.91-10.93-.01-21.85z"/>
+ </g>
+</svg>

index.html

@@ -36,16 +36,28 @@
     <h1 id="projects">Projects</h1>
     <div class="projects">
         <a href="https://yht.one/">
-            <article class="vertical-screen">
+            <article class="vertical-screen side-projects">
                 <div class="bg"></div>
-                <h2>Side Project Den</h2>
-                <p>A list of my side projects</p>
+                <div class="logo">
+                    <span class="small">YouHaveTrouble's</span>
+                    <span class="big">Side Project Den</span>
+                </div>
+                <div>
+                    <h2>Side Project Den</h2>
+                    <p>A list of my side projects</p>
+                </div>
             </article>
         </a>
         <a href="https://purpurmc.org/">
-        <article class="vertical-screen">
-            <h2>Purpur</h2>
-            <p>Minecraft server software</p>
+        <article class="vertical-screen purpur">
+            <div class="bg"></div>
+            <div class="logo">
+                <img src="img/purpur.svg" alt="">
+            </div>
+            <div>
+                <h2>Purpur</h2>
+                <p>Minecraft server software</p>
+            </div>
         </article>
         </a>
         <article class="vertical-screen">

main.css

@@ -55,7 +55,7 @@ header {
 }
 
 main {
-    width: 100%;
+    width: calc(100% - 2rem);
     max-width: var(--max-width);
     padding-inline: 1rem;
     display: flex;
@@ -92,10 +92,11 @@ main {
 .projects {
     text-align: center;
     width: 100%;
-    display: grid;
-    grid-gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
 }
 
 .vertical-screen {
@@ -107,12 +108,18 @@ main {
     backdrop-filter: blur(4px);
     box-sizing: border-box;
     min-height: 20rem;
+    width: 12rem;
     display: flex;
     flex-direction: column;
-    justify-content: flex-end;
+    justify-content: space-between;
     align-items: center;
     text-decoration: none;
     color: #fff;
+    transition: border-color 0.1s linear;
+}
+
+.vertical-screen:hover {
+    border-color: #fff;
 }
 
 .vertical-screen p {
@@ -120,6 +127,17 @@ main {
     color: rgba(255,255,255, 0.75);
 }
 
+.vertical-screen .logo {
+    width: 100%;
+    height: 100%;
+    opacity: 0.75;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 15rem;
+}
+
 .vertical-screen .bg {
     position: absolute;
     top: 0;
@@ -129,9 +147,42 @@ main {
     z-index: -1;
     overflow: hidden;
     opacity: 0.075;
+    transition: opacity 0.1s linear;
+}
+
+.vertical-screen:hover .bg {
+    opacity: 0.15;
+}
+
+.vertical-screen.side-projects .bg  {
     background-image: url("img/board.jpg");
     background-position: center;
-    animation: pan-image-1 30s infinite;
+    animation: pan-image-1 60s infinite alternate both ease-in-out;
+}
+
+.vertical-screen.side-projects .logo {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 15rem;
+    opacity: 0.75;
+}
+
+.vertical-screen.side-projects .logo .small {
+    font-size: 0.6rem;
+}
+
+.vertical-screen.side-projects .logo .big {
+    font-size: 1.3rem;
+    font-weight: bold;
+}
+
+.vertical-screen.purpur .bg  {
+    background-image: url("img/minecraft-hobbit-hole.jpg");
+    background-position: center;
+    animation: pan-image-2 60s infinite alternate both ease-in-out;
 }
 
 @keyframes pan-image-1 {
@@ -151,3 +202,18 @@ main {
         background-position: 36% 42%;
     }
 }
+
+@keyframes pan-image-2 {
+    0% {
+        background-position: 0 0;
+    }
+    33% {
+        background-position: 56% 60%;
+    }
+    66% {
+        background-position: 77% 42%;
+    }
+    100% {
+        background-position: 0 0;
+    }
+}