Rework style

html/styles/introduction.css

@@ -1,26 +1,99 @@
-#introduction .content {
-    flex: 5;
-    width: 25%;
+.introduction {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 40%;
+    height: 100%;
 }
 
-#introduction footer {
-    flex : 1;
-    transition: transform 0.5s ease-in-out;
+.introduction-box {
+    min-width: 350px;
+    min-height: 350px;
+    padding: 25px 35px 35px 35px;
+
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+
+    overflow: scroll;
 }
 
-footer:hover{
-    transform: translateY(-20px);
-}
-
-hr {
+.introduction-box hr {
     width: 100%;
+
+    margin-bottom: 25px;
+    margin-top: 10px;
 }
 
+
+
+.introduction-header
+{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 25px;
+}
+
+.names
+{
+    line-height: 16px;
+}
+
+.real-name
+{
+    opacity: 0.7;
+}
+
+.profile-picture
+{
+    width: 100px;
+    aspect-ratio: 1/1;
+    border: solid 1px rgba(0, 0, 0, 0.3);
+    border-radius: 50%;
+}
+
+.introduction-text {
+    font-size: 1.1rem;
+    line-height: 1.25rem;
+
+}
+
+.greetings
+{
+    font-size: 3.5rem;
+}
+
+
 .typer::after {
     content: '|';
     animation: blink 800ms infinite;
 }
 
+.projects
+{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 60%;
+}
+
+.punched-card
+{
+    mask-image: radial-gradient(circle 25px at calc(100% - 0px) calc(0% + 0px), transparent 99%, black 100%);
+    mask-repeat: no-repeat;
+    mask-position: top right;
+    mask-composite: exclude;
+}
+
+.thumbnail
+{
+    width: 250px;
+    border : solid 1px black;
+}
+
 .card-list
 {
     display: flex;
@@ -28,39 +101,45 @@ hr {
     justify-content: start;
     gap: 15px;
     min-width: 375px;
-    height: 75%;
     overflow: scroll;
-    padding: 0 20px 0 20px;
+    padding: 20px;
 }
 
 .card {
     display: flex;
     flex-direction: column;
     justify-content: start;
-    align-items: center;
+    align-items: start;
 
     height: 350px;
     width: 275px;
+    padding: 15px;
 
     background: white;
     border-radius: 16px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 
-    padding: 15px;
-
     transition: transform 0.2s ease, box-shadow 0.2s ease;
-    will-change: transform;
 }
 
 .card:hover {
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
 }
 
-.card p
-{
-    opacity: 0.65;
+.card-details {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    height: 100%;
+    width: 100%;
 }
 
+.card .notice
+{
+    opacity: 0.65;
+    font-size: 0.75rem;
+}
 
 @keyframes blink {
     from { opacity: 0; }

html/styles/mobile.css

@@ -0,0 +1,18 @@
+@media (max-width: 801px) {
+    .container {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .introduction
+    {
+        width: 100%;
+    }
+
+    .introduction-box
+    {
+        height: 100%;
+    }
+
+}

html/styles/style.css

@@ -1,5 +1,5 @@
 :root {
-    --primary-color: #3dae15;
+    --primary-color: #5f9a13;
 }
 
 ::-webkit-scrollbar {
@@ -7,7 +7,8 @@
 }
 
 * {
-    font-family: 'Fira Code', 'PT sans', sans-serif;
+    font-family: 'Roboto', 'PT sans', sans-serif;
+
     box-sizing: border-box;
     color: #333;
 }
@@ -17,7 +18,7 @@ html, body {
     width: 100dvw;
 }
 
-html, body, main, section, section div, footer {
+html, body, main, footer {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -44,18 +45,20 @@ main {
     margin : 5px;
 }
 
-section {
+.container {
+    display: flex;
+    flex-direction: row;
+
     height: 100%;
-    min-height: 100%;
     width: 100%;
-    scroll-snap-align: start;
+    padding : 15px;
 }
 
-ul li{
-    list-style-type: none;
+hr {
+    width: 50%;
 }
 
-ul li a {
+a {
     text-decoration: none;
 }