Pages: rework main page

2023-12-30 00:40:23 -07:00 · 2023-12-30 00:40:23 -07:00 · b99bd58b70
parent 390d9d27f5
commit b99bd58b70
1 changed files with 109 additions and 8 deletions
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -12,7 +12,108 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
    </head>
    <body style="display: flex" class="font-sans flex-col items-center">
        <Header class="grow" title={SITE_TITLE} />
-		<img width="600px" src="/akemi_silly_transparent.png" />
+        <main>
+        <div id="big-circle-wrapper" >
+            <div id="big-circle"></div>
+        </div>
+        <div id="title-circle"></div>
+        <h1 id="name-title">
+            Akemi Izuko
+        </h1>
+        <p id="about">
+            I'm Akemi, a 4th year CS honor student at
+            <a href="https://www.ualberta.ca/computing-science/index.html">UAlberta</a>. I'm
+            usually on discord, but email is the best way to contact me.
+        Some of my interests include <a href="/unix">unix</a>,
+        <a href="/road_bike.avif">biking</a>, llamas, 日本語とアニミ... 当たり
+        前じゃん and you (>ω^)!
+        </p>
+        <img id="pfp" src="/akemi_silly_transparent.png" />
+        </main>
        <Footer />
    </body>
 </html>
+
+<style>
+    main {
+        display: grid;
+        grid-template-columns: 1fr auto 20px 50%;
+        grid-template-rows: repeat(6, 1fr);
+        width: 100%;
+        min-height: 70vh;
+        overflow: hidden;
+    }
+
+    main a {
+        color: var(--accent-color);
+    }
+
+    #name-title {
+        font-family: var(--font-title);
+        font-size: 96px;
+        text-align: right;
+        /* Grid styles */
+        grid-column-start: 2;
+        grid-column-end: 3;
+        grid-row-start: 2;
+        grid-row-end: 4;
+        align-self: center;
+    }
+
+    #title-circle {
+        border-radius: 50%;
+        background-color: white;
+        width: 200px;
+        height: 200px;
+        box-shadow: 0 40px 50px -10px rgba(0, 0, 0, 0.1);
+        /* Grid styles */
+        grid-column: 1 / 2;
+        grid-row: 2 / 4;
+        justify-self: right;
+        margin-right: -120px;
+        margin-top: -10px;
+    }
+
+    #about {
+        max-width: 520px;
+        font-family: var(--font-sans);
+        font-size: 1.2rem;
+        line-height: 1.8;
+        /* Grid styles */
+        grid-column-start: 2;
+        grid-row-start: 4;
+        grid-row-end: 7;
+        justify-self: right;
+        align-self: start;
+    }
+
+    #big-circle {
+        border-radius: 50%;
+        background-color: white;
+        width: 1500px;
+        height: 1500px;
+        box-shadow: 10px 60px 50px -10px rgba(0, 0, 0, 0.1);
+    }
+
+    #big-circle-wrapper {
+        width: 500px;
+        height: 160vh;
+        z-index: -1;
+        overflow: hidden;
+        position: absolute;
+        top: -60%;
+        left: 60%;
+    }
+
+    #pfp {
+        width: 600px;
+        /* Grid styles */
+        grid-column-start: 4;
+        grid-column-end: 5;
+        grid-row-start: 1;
+        grid-row-end: 7;
+        justify-self: right;
+        align-self: bottom;
+        margin-right: -15%;
+    }
+</style>