ok this is going pretty good

index.html

@@ -11,15 +11,26 @@
 
 
 <div class="main">
+
     <div class="pixel-corners">
         <div class="intro-box">
+            <div class="pixel-corners--wrapper">
+                <div class="pfp"> <img src="/home/ruben/signal-2023-10-26-124534_002.gif" alt="my profile picture, which is most likely a grey yoshi"> </div>
+            </div>
             <h1>hey, i'm ruben.</h1>
             <h2>welcome to my site.</h2>
+        </div>
+    </div>
+
+    <div class="pixel-corners">
+        <div class="about-me">
             <p>i'm your "average" 17 year old gay foss enjoyer.</p>
         </div>
     </div>
+
 </div>
 
+
 </body>
 
 </html>

style.css

@@ -65,6 +65,7 @@ html {
 }
 .pixel-corners {
     border: 4px solid transparent;
+    margin-bottom: 40px;
 }
 .pixel-corners--wrapper {
     width: fit-content;
@@ -216,10 +217,10 @@ html {
     max-width: 80%;
     position: absolute;
     top: 20%;
-    transform: translate(11%, -50%);
+    transform: translate(11%, -15%);
 }
 
-.intro-box {
+.intro-box, .about-me {
     position: relative;
     display: flex;
     justify-content: space-evenly;
@@ -227,6 +228,11 @@ html {
     background-color: var(--bg);
 }
 
+.pfp {
+    width: 200px;
+    height: 200px;
+}
+
 h1 {
     color: var(--header);
     text-align: center;