Added support for homepage on mobile

2 files changed, 77 insertions, 22 deletions

diff --git a/src/layouts/Terminal.astro b/src/layouts/Terminal.astro
index cb94bd0..fdccaf3 100644
--- a/src/layouts/Terminal.astro
+++ b/src/layouts/Terminal.astro
@@ -33,9 +33,5 @@ const { path: title } = Astro.props;
         background: var(--background);
         font-weight: 300;
         overflow: hidden;
-
-        /* grid-template-columns: minmax(200px, 1fr); */
-        /* max-width: 75%; */
-        /* max-height: 80%; */
     }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 25b7b5e..166ed94 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -33,8 +33,11 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
 ---
 
 <Terminal path="">
-    <div id="content">
-        <div id="left" class="column">
+    <!-- ================= -->
+    <!-- ==== Desktop ==== -->
+    <!-- ================= -->
+    <div id="content" class="w-0 h-0 invisible sm:w-full sm:h-full sm:visible">
+        <div class="w-[30%]">
             <TerminalBorder header="Profile">
                 <div class="flex items-center space-x-[1.25vw] h-[9.5vw]">
                     <img
@@ -82,9 +85,7 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
             </TerminalBorder>
             <div class="w-[334%]">
                 <TerminalBorder header="SSH Key">
-                    <div
-                        class="sshKeyCopy w-[100%] flex items-center group"
-                    >
+                    <div class="sshKeyCopy w-[100%] flex items-center group">
                         <span
                             id="sshKey"
                             class="hover:text-[var(--alt)] cursor-pointer truncate flex-1 group-hover:text-[var(--alt)]"
@@ -109,7 +110,7 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
                 </TerminalBorder>
             </div>
         </div>
-        <div id="right" class="column">
+        <div class="w-[67%]">
             <TerminalBorder header="Status">
                 <p>
                     Working on <Link href="https://github.com/KapiMC/Kapi"
@@ -129,6 +130,76 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
             />
         </div>
     </div>
+
+    <!-- ================ -->
+    <!-- ==== Mobile ==== -->
+    <!-- ================ -->
+    <div
+        class="w-full h-[80svh] visible sm:w-0 sm:h-0 sm:invisible overflow-y-auto overflow-x-hidden sm:overflow-visible"
+    >
+        <div class="mx-[1vw] mt-[1vw]">
+            <TerminalBorder header="Status">
+                <p>
+                    Working on <Link href="https://github.com/KapiMC/Kapi"
+                        >Kapi
+                    </Link> | Available for hire | Learning Golang & Backend
+                </p>
+            </TerminalBorder>
+            <TerminalBorder header="About Me" extra="my-[5vw] sm:my-[2.5vw]">
+                <p>{aboutMe}</p>
+            </TerminalBorder>
+            <BlogItem
+                header="Latest Blog Post"
+                title={latestBlog.data.title}
+                description={latestBlog.data.description ?? ""}
+                date={latestBlog.data.date}
+                href={"/blogs/" + latestBlog.slug}
+            />
+            <div class="mt-[8vw]">
+                <TerminalBorder header="Email">
+                    <span id="email" class="flex-1">Kyren223@proton.me</span>
+                    <button class="emailCopy hover:text-gray-700">
+                        <svg
+                            class="ml-[-4vw]"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                        >
+                            <path
+                                fill="currentColor"
+                                fill-rule="evenodd"
+                                d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z"
+                            ></path>
+                        </svg>
+                    </button>
+                </TerminalBorder>
+            </div>
+            <TerminalBorder header="GitHub">
+                <Link href="https://github.com/Kyren223">
+                    github.com/Kyren223
+                </Link>
+            </TerminalBorder>
+            <TerminalBorder header="Discord">
+                <Link href="https://discord.com/users/481884415090229258">
+                    Kyren223
+                </Link>
+            </TerminalBorder>
+            <TerminalBorder header="Timezone">
+                <div class="flex justify-between w-full">
+                    <span class="text-left">UTC+2</span>
+                    <span id="time" class="text-right">Loading...</span>
+                </div>
+            </TerminalBorder>
+            <TerminalBorder header="SSH Key">
+                <div class="sshKeyCopy w-[100%] flex items-center group">
+                    <span
+                        id="sshKey"
+                        class="hover:text-[var(--alt)] cursor-pointer truncate flex-1 group-hover:text-[var(--alt)]"
+                        >{sshKey}</span
+                    >
+                </div>
+            </TerminalBorder>
+        </div>
+    </div>
 </Terminal>
 
 <script>
@@ -181,18 +252,6 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
         justify-content: space-between;
     }
 
-    #left {
-        width: 30%;
-    }
-    #right {
-        width: 67%;
-    }
-
-    .column {
-        /* border-width: 10px; */
-        /* border-color: var(--alt); */
-    }
-
     button {
         background-color: var(--background);
         color: var(--text);