Fancier top left navigation

site/lib/components/stamp.tsx

@@ -0,0 +1,16 @@
+const Stamp = () => (
+  <div
+    className="
+    bg-gradient-to-tr
+    from-red-600
+    to-pink-600
+    bg-clip-text
+    font-['Turret_Road']
+    text-transparent
+    "
+  >
+    xithrius.cloud
+  </div>
+);
+
+export default Stamp;

site/lib/components/top-left-nav.tsx

@@ -8,7 +8,7 @@ type Props = {
 const TopLeftNavigation = ({ children, href }: Props) => {
   return (
     <div className="absolute left-8 top-8 flex justify-center">
-      <Link href={href} className="top-0 left-0 text-2xl opacity-50 transition hover:opacity-100">
+      <Link href={href} className="top-0 left-0 text-4xl opacity-50 transition hover:opacity-100">
         {children}
       </Link>
     </div>

site/pages/blog/index.tsx

@@ -7,6 +7,7 @@ import Post from "lib/interfaces/post";
 import Head from "next/head";
 import ThemeSwitch from "lib/components/themeswitch";
 import TopLeftNavigation from "lib/components/top-left-nav";
+import Stamp from "lib/components/stamp";
 
 type Props = {
   allPosts: Post[];
@@ -26,7 +27,9 @@ export default function Index({ allPosts }: Props) {
         </Container>
       </Layout>
       <ThemeSwitch />
-      <TopLeftNavigation href="/">xithrius.cloud</TopLeftNavigation>
+      <TopLeftNavigation href="/">
+        <Stamp />
+      </TopLeftNavigation>
     </>
   );
 }

site/pages/index.tsx

@@ -6,7 +6,8 @@ import Container from "lib/components/container";
 import { utcToZonedTime } from "date-fns-tz";
 import { useEffect, useState } from "react";
 import TopLeftNavigation from "lib/components/top-left-nav";
-import Image from "next/image";
+import Stamp from "lib/components/stamp";
+// import Image from "next/image";
 
 const sitePages = ["Projects", "ToDo", "Blog", "Start"];
 
@@ -53,9 +54,12 @@ export default function Home() {
         <link rel="icon" href="/logo.png" />
       </Head>
       <Container>
-        <main className="-mt-20 flex flex-1 flex-col items-center justify-center text-center">
-          <Image src="/user_icon.svg" alt="Xithrius" width={512} height={512} />
-          <div className="-mt-20 flex w-3/5 justify-center border-t border-solid border-current py-5 text-xl">
+        <main className="flex flex-1 flex-col items-center justify-center text-center">
+          <div className="text-[10vw]">
+            <Stamp />
+          </div>
+
+          <div className="flex w-3/5 justify-center border-t border-solid border-current py-5 text-xl">
             {sitePages.map((element) => (
               <LinkElem
                 key={element}
@@ -72,7 +76,7 @@ export default function Home() {
       <TopLeftNavigation href="https://github.com/Xithrius">
         <SiGithub />
       </TopLeftNavigation>
-      <div className="absolute left-8 bottom-8 flex justify-center font-mono">
+      <div className="absolute bottom-8 left-8 flex justify-center font-mono">
         <TimezonedDate />
       </div>
     </>

site/pages/projects/index.tsx

@@ -4,6 +4,7 @@ import Image from "next/image";
 import ThemeSwitch from "lib/components/themeswitch";
 import TopLeftNavigation from "lib/components/top-left-nav";
 import Container from "lib/components/container";
+import Stamp from "lib/components/stamp";
 
 const githubProjects = [
   "twitch-tui",
@@ -96,7 +97,9 @@ export default function Home({ projects, templates }: HomeProps) {
           ))}
         </div>
         <ThemeSwitch />
-        <TopLeftNavigation href="/">xithrius.cloud</TopLeftNavigation>
+        <TopLeftNavigation href="/">
+          <Stamp />
+        </TopLeftNavigation>
       </Container>
     </>
   );

site/pages/start/index.tsx

@@ -4,6 +4,7 @@ import { BsArrowRight } from "react-icons/bs";
 import { useEffect } from "react";
 import ThemeSwitch from "lib/components/themeswitch";
 import TopLeftNavigation from "lib/components/top-left-nav";
+import Stamp from "lib/components/stamp";
 
 const LINKS = [
   {
@@ -77,7 +78,9 @@ export default function Start() {
           </tbody>
         </table>
         <ThemeSwitch />
-        <TopLeftNavigation href="/">xithrius.cloud</TopLeftNavigation>
+        <TopLeftNavigation href="/">
+          <Stamp />
+        </TopLeftNavigation>
       </main>
     </>
   );

site/pages/todo/index.tsx

@@ -4,6 +4,7 @@ import ThemeSwitch from "lib/components/themeswitch";
 import TopLeftNavigation from "lib/components/top-left-nav";
 import Container from "lib/components/container";
 import todo from "lib/constants/todo_listing";
+import Stamp from "lib/components/stamp";
 
 interface todoItem {
   desc: string;
@@ -69,7 +70,9 @@ export default function Home() {
             return <TodoList key={e.year} year={e.year} items={e.items} />;
           })}
           <ThemeSwitch />
-          <TopLeftNavigation href="/">xithrius.cloud</TopLeftNavigation>
+          <TopLeftNavigation href="/">
+            <Stamp/>
+          </TopLeftNavigation>
         </main>
       </Container>
     </>