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; }