About me thingz

alexanderristinmaa/app/(homepage)/alex/page.module.css

@@ -0,0 +1,45 @@
+#imgDiv {
+    width: 500px;
+}
+
+#imgDiv > p {
+    margin-top: 8px;
+    float: right;
+}
+
+#img {
+    width: 100%;
+    border: 2px solid var(--black);
+}
+
+#imgText {
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+}
+
+#textDiv {
+    flex: 1;
+    display: flex;
+    gap: 1em;
+    flex-direction: column;
+}
+
+#textDiv a {
+    color: var(--highlight)
+}
+
+@media screen and (max-width: 900px) {
+    #imgDiv {
+        width: min(100%, 500px);
+    }
+    #img {
+        width: 100%;
+    }
+
+    #imgText {
+        padding-left: 20px;
+        padding-right: 20px;
+        flex-direction: column;
+    }
+}

alexanderristinmaa/app/(homepage)/alex/page.tsx

@@ -3,9 +3,24 @@ import styles from './page.module.css';
 
 export default function Home() {
   return (
-    <div>
-      <p><b>VEM ÄR JAG?</b></p>
-      <p>Jag heter Alex och kommer ifrån Sverige.</p>
+    <div id={styles.imgText}>
+      <div id={styles.imgDiv}>
+        <img id={styles.img} src='/alex/me.jpg'></img>
+        <p><i>Jag i Fontainebleau, Frankrike. 2024</i></p>
+      </div>
+      <div id={styles.textDiv}>
+        <p>Hejsan!</p>
+        <p>Vad kul att du vill veta mer om mig :) 
+          Det finns <u>säkerligen</u> en massa spännande saker som du undrar som jag tyvärr måste undanhålla dig i detta nu. 
+          Detta är <b>inte</b> för att jag inte gillar dig! Det är helt enkelt för att jag är lat.
+        </p>
+        <p><b>Bra länkar:</b></p>
+        <ul style={{listStyle: "none"}}>
+          <li>Instagram: <a target="_blank" href="https://www.instagram.com/alexristinmaa/">@alexristinmaa</a></li>
+          <li>27crags: <a target="_blank" href="https://27crags.com/climbers/alexanderris">alexanderris</a></li>
+        </ul>
+
+      </div>
     </div>
 
   );