update

static/css/index.css

@@ -4,7 +4,7 @@
     --background-color: #090c10;
     --secondary-background-color: #0d1117;
     --font-size: 0.5cm;
-    --font-family: 'Helvetica', sans-serif;
+    --font-family: 'Roboto Mono', sans-serif;
 }
 
 body {
@@ -118,7 +118,7 @@ nav ul li#music div#music-progress {
     margin-top: auto;
     height: 1rem;
     background-color: var(--primary-color);
-    transition: all 1s ease;
+    transition: all 3s ease;
 }
 
 main {
@@ -179,10 +179,97 @@ header h2 {
 
 main section {
     width: 100%;
-    height: 100vh;
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: center;
     box-sizing: border-box;
-}
+    padding: 4rem;
+}
+
+main section h1 {
+    font-size: 4.5rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+}
+
+main section h2 {
+    font-size: 1.75rem;
+    margin: 0;
+    padding: 0;
+}
+
+main section p {
+    font-size: 1.25rem;
+    margin: 0;
+    padding: 0;
+    font-weight: 300;
+}
+
+main section a {
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: all 0.3s ease-in-out;
+}
+
+main section a:hover {
+    text-decoration: underline;
+}
+
+.projects {
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+    margin-top: 2rem;
+    flex-wrap: wrap;
+}
+
+.project {
+    width: 30%;
+    display: flex;
+    flex-direction: column;
+}
+
+.project img {
+    width: 100%;
+    aspect-ratio: 5/2;
+    border-radius: 1rem 1rem 0 0;
+}
+
+.project .project-info {
+    padding: 0 1rem 1rem 1rem;
+    background-color: var(--secondary-background-color);
+    border-radius: 0 0 1rem 1rem;
+}
+
+.links {
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+    margin-top: 2rem;
+    flex-wrap: wrap;
+}
+
+.links a img {
+    height: 120px;
+    transition: all 0.3s ease-in-out;
+}
+
+.links a img:hover {
+    transform: scale(1.1);
+}
+
+.blinkies {
+    display: flex;
+    flex-direction: column;
+}
+
+.blinkies a img {
+    height: 60px;
+    transition: all 0.3s ease-in-out;
+}
+
+img.btn {
+    height: 50px !important;
+    transition: all 0.3s ease-in-out;
+}