index.html

@@ -54,16 +54,44 @@
                 <ul id="changelog-content">
                 </ul>
             </div>
+            <div class="changelog-panel">
+                <div class="title-bar window-border">
+                    <div class="title-bar-text">About me</div>
+                    <div class="title-bar-controls">
+                        <button class="title-bar-button minimize-button">
+                            <img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
+                        </button>
+                        <button class="title-bar-button maximize-button">
+                            <img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
+                        </button>
+                        <button class="title-bar-button">
+                            <img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
+                        </button>
+                    </div>
+                </div>
+                <div id="about-me-content">
+                    <div class="about-top">
+                        <img class="osaka" alt="osaka :3" src="/src/img/default.png">
+                        <div class="about-top-text">
+                            <p>Guams</p>
+                            <p>21 years old</p>
+                            <p>he/him</p>
+                        </div>
+                    </div>
+                    <div class="text status">
+                        <p class="text">My current status :</p>
+                        <p class="text">Might update my blog someday...</p>
+                    </div>
+                </div>
+            </div>
         </div>
         <div class="presentation">
             <h1>Welcome to my website</h1>
             <span>Hi, I'm <strong>Guams</strong>, a french developer.</span>
             <span>
                 I'm currently studying computer science, especially web development.
-                My hobbies are giving life to my ideas thanks to my coding skills, reading books and watching anime.
+                My hobbies are giving life to my ideas thanks to my coding skills, reading books and watching anime. On my
-            </span><br>
+                free time I share my thoughts on the works I play or read on my
-            <span>
-                On my free time I share my thoughts on the works I play or read on my
                 <a class="hypertext-link" target="_blank" href="https://abonentendeur.guams.fr">blog.</a>
             </span><br><br>
             <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque doloribus ipsum quod rerum. Aliquid architecto asperiores debitis doloremque excepturi exercitationem facilis fugiat, nisi non possimus rem sit totam ut veniam.</span>

src/style.css

@@ -69,6 +69,45 @@ main {
     margin: 15px 0;
 }
 
+.text {
+    word-break: keep-all;
+    margin: 0.5em;
+}
+
+.osaka {
+    width: 50%;
+    height: auto;
+}
+
+.status {
+    background-color: #546bab;
+}
+
+#about-me-content {
+    overflow-y: scroll;
+    overflow-x: hidden;
+    word-break: break-word;
+    box-sizing: border-box;
+    max-height: 400px;
+    scrollbar-color: #a2a2a2 #ffffff;
+    scrollbar-width: thin;
+    box-shadow:
+            inset -1px -1px #404040,
+            inset 1px -1px #DFDFDF,
+            inset -2px -2px #7F7F7F,
+            inset 2px -2px #FFFFFF,
+            inset -3px -3px #C3C3C3,
+            inset 3px -3px #C3C3C3,
+            inset -4px -4px #C3C3C3,
+            inset 4px -4px #C3C3C3,
+            inset -5px -5px #FFFFFF,
+            inset 5px -5px #808080,
+            inset -6px -6px #DFDFDF,
+            inset 6px -6px #000000;
+    padding: 7px;
+    gap: 10px;
+}
+
 #changelog-content {
     overflow-y: scroll;
     overflow-x: hidden;
@@ -122,7 +161,6 @@ li {
 }
 
 .navbar-link {
-    /*background-color: green;*/
     padding: 2px;
     margin: 2px;
 }
@@ -172,6 +210,11 @@ h1 {
     min-width: 70%;
 }
 
+.about-top {
+    display: flex;
+    flex-direction: row;
+}
+
 /* Responsive */
 
 @media (max-width: 850px) {
@@ -202,6 +245,11 @@ h1 {
         object-fit: fill;
     }
 
+    .osaka {
+        width: 100%;
+        height: auto;
+    }
+
     main {
         width:100%;
     }