initial moeification

12 files changed, 208 insertions, 177 deletions

diff --git a/src/assets/603.gif b/src/assets/603.gif
new file mode 100644
index 0000000..0691ccc
--- /dev/null
+++ b/src/assets/603.gif
diff --git a/src/assets/profile-pfp.jpg b/src/assets/profile-pfp.jpg
new file mode 100644
index 0000000..feeda69
--- /dev/null
+++ b/src/assets/profile-pfp.jpg
diff --git a/src/assets/screenshot-app.png b/src/assets/screenshot-app.png
deleted file mode 100644
index 09755e3..0000000
--- a/src/assets/screenshot-app.png
+++ /dev/null
diff --git a/src/assets/user-profile-image.png b/src/assets/user-profile-image.png
deleted file mode 100644
index d2c8fd2..0000000
--- a/src/assets/user-profile-image.png
+++ /dev/null
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..6670702
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,60 @@
+---
+import dataList from "../data/user.json";
+---
+
+<footer class="footer">
+    <div class="footer-content">
+        <p class="footer-text">萌え萌えキュン</p>
+
+        <div class="footer-links">
+            <a
+                href="https://github.com/yourprofile"
+                class="footer-link"
+                aria-label="GitHub"
+            >
+                <i class="ri-github-fill"></i>
+                Source
+            </a>
+        </div>
+    </div>
+</footer>
+
+<style>
+    .footer {
+        padding: 1.5rem 0;
+        text-align: center;
+        position: relative;
+    }
+
+    .footer-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .footer-text {
+        font-size: 0.875rem;
+        color: var(--zinc-900);
+    }
+
+    .footer-emoji {
+        font-size: 1rem;
+        color: var(--zinc-800);
+    }
+
+    .footer-links {
+        display: flex;
+        gap: 1rem;
+    }
+
+    .footer-link {
+        font-size: 1.25rem;
+        color: var(--zinc-900);
+        transition: color 0.2s ease-in-out;
+    }
+
+    .footer-link:hover {
+        color: var(--pink-darker);
+    }
+</style>
diff --git a/src/components/Link.astro b/src/components/Link.astro
index 4ffb04b..9a6708d 100644
--- a/src/components/Link.astro
+++ b/src/components/Link.astro
@@ -1,9 +1,9 @@
 ---
-import 'remixicon/fonts/remixicon.css'
+import "remixicon/fonts/remixicon.css";
 
 interface Props {
     icon: string;
-	title: string;
+    title: string;
     description: string;
     url: string;
 }
@@ -13,7 +13,7 @@ const { icon, title, description, url } = Astro.props;
 
 <a href={url} class="link">
     <span class="link-icon">
-        <i class={'ri-' + icon}></i>
+        <i class={"ri-" + icon}></i>
     </span>
     <div class="link-content">
         <h2 class="link-title">{title}</h2>
@@ -28,35 +28,40 @@ const { icon, title, description, url } = Astro.props;
         border: 1px solid var(--zinc-800);
         border-radius: 1rem;
         text-decoration: none;
+        background-color: var(--pink-pastel);
+        transition:
+            transform 0.2s ease-in-out,
+            box-shadow 0.2s ease-in-out;
+    }
+
+    .link:hover {
+        transform: scale(1.05);
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
     }
 
     .link-icon {
         width: 3rem;
         height: 3rem;
         margin-right: 1.125rem;
-        background: var(--zinc-900);
+        background: var(--pink-darker);
         border-radius: 0.5rem;
         display: flex;
         justify-content: center;
-        align-items: center;   
+        align-items: center;
     }
 
     .link-icon i {
         font-size: 1.5rem;
-        color: var(--zinc-50)
-    }
-
-    .link-title, .link-description {
-        font-size: 1rem;
+        color: var(--zinc-50);
     }
 
     .link-title {
-        color: var(--zinc-50);
-        font-weight: normal;
+        color: var(--zinc-900);
+        font-weight: bold;
     }
 
     .link-description {
-        color: var(--zinc-400);
+        color: var(--zinc-900);
         margin-top: 0.125rem;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Profile.astro b/src/components/Profile.astro
index ba51fb6..a232463 100644
--- a/src/components/Profile.astro
+++ b/src/components/Profile.astro
@@ -1,12 +1,12 @@
 ---
-import UserProfileImage from '../assets/user-profile-image.png'
-import dataList from '../data/user.json';
+import UserProfileImage from "../assets/profile-pfp.jpg";
+import dataList from "../data/user.json";
 ---
 
 <header class="profile">
     <div class="profile-picture-content">
         <figure class="profile-picture">
-            <img src={UserProfileImage.src} alt="This is me!">
+            <img src={UserProfileImage.src} alt="This is me!" />
         </figure>
     </div>
     <div class="profile-data">
@@ -17,7 +17,7 @@ import dataList from '../data/user.json';
 
 <style>
     .profile {
-        margin-top: 6rem;
+        margin-top: 0.5rem;
         width: 100%;
         display: flex;
         flex-direction: column;
@@ -28,13 +28,13 @@ import dataList from '../data/user.json';
         padding: 0.5rem;
         border-radius: 100%;
         border: 1px solid var(--zinc-800);
+        background-color: var(--pink-lighter);
     }
 
     .profile-picture {
-        width: 6rem;
-        height: 6rem;
-        border-radius: 100%;
-        border: 1px solid var(--zinc-800);
+        width: 10rem;
+        height: 10rem;
+        border-radius: 75%;
         overflow: hidden;
     }
 
@@ -50,12 +50,13 @@ import dataList from '../data/user.json';
     }
 
     .profile-name {
-        font-size: 1.125rem;
-        font-weight: normal;
+        font-size: 2.125rem;
+        font-weight: bold;
+        color: var(--zinc-900);
     }
 
     .profile-profession {
-        font-size: 0.875rem;
-        color: var(--zinc-400);
+        font-size: 1.2rem;
+        color: var(--zinc-900);
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Shadow.astro b/src/components/Shadow.astro
deleted file mode 100644
index 946dcde..0000000
--- a/src/components/Shadow.astro
+++ /dev/null
@@ -1,45 +0,0 @@
-<div class="shadow" id="shadow">
-    <button class="shadow-button" id="shadow-button">
-        <span class="shadow-button-text">Explore More</span>
-        <span class="shadow-button-icon">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM12.1779 7.17624C11.4834 7.48982 11 8.18846 11 9C11 10.1046 11.8954 11 13 11C13.8115 11 14.5102 10.5166 14.8238 9.82212C14.9383 10.1945 15 10.59 15 11C15 13.2091 13.2091 15 11 15C8.79086 15 7 13.2091 7 11C7 8.79086 8.79086 7 11 7C11.41 7 11.8055 7.06167 12.1779 7.17624Z"></path></svg>
-        </span>
-    </button>
-</div>
-
-<style>
-    .shadow {
-        margin-top: 3rem;
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        height: 11.25rem;
-        background: rgb(9,9,11);
-        background: linear-gradient(0deg, rgba(9,9,11,1) 0%, rgba(9,9,11,0) 100%);
-    }
-
-    .shadow-button {
-        margin: auto;
-        padding: 1rem 2.375rem;
-        display: flex;
-        align-items: center;
-        gap: 1.125rem;
-        border: none;
-        outline: none;
-        background: var(--zinc-50);
-        font-size: 0.875rem;
-        color: var(--zinc-950); 
-        border-radius: 1.5rem;
-        cursor: pointer;
-    }
-
-    .shadow-button-icon {
-        width: 1.5rem;
-        height: 1.5rem;
-    }
-
-    .shadow-button-icon svg {
-        fill: var(--zinc-950);
-    }
-</style>
\ No newline at end of file
diff --git a/src/data/user.json b/src/data/user.json
index 9b17563..ed4ea32 100644
--- a/src/data/user.json
+++ b/src/data/user.json
@@ -1,48 +1,30 @@
 {
-    "name": "Kelly Bowlin",
-    "profession": "Web Designer",
+    "name": "moekyun.me",
+    "profession": "providing only the most moe of web services",
     "links": [
         {
-            "url": "#",
-            "icon": "link",
-            "title": "Personal Portfolio",
-            "description": "All my latest design projects"
-        },
-        {
-            "url": "#",
-            "icon": "youtube-fill",
-            "title": "Youtube Channel",
-            "description": "All my latest design projects"
+            "url": "https://patchwork.moekyun.me",
+            "icon": "video-line",
+            "title": "Patchwork Archive",
+            "description": "An ongoing archival effort of songs and covers created by VTubers Preserving rhythm, one video at a time"
         },
         {
-            "url": "#",
-            "icon": "shopping-bag-line",
-            "title": "Template Store",
-            "description": "Discover templates that suit you"
+            "url": "https://patchwork.moekyun.me",
+            "icon": "music-2-line",
+            "title": "Patchwork Radio",
+            "description": "A (usually) 24/7 internet radio stream of VTubers songs and covers, forever free and without Ads"
         },
         {
-            "url": "#",
+            "url": "https://link.moekyun.me",
             "icon": "link",
-            "title": "Design Podcast",
-            "description": "Every Friday a new episode"
-        },
-        {
-            "url": "#",
-            "icon": "instagram-line",
-            "title": "Instagram Profile",
-            "description": "Designer lifestyle and more"
-        },
-        {
-            "url": "#",
-            "icon": "dribbble-line",
-            "title": "Dribbble Shots",
-            "description": "Know more about my work"
+            "title": "Moekyun Link Shortener",
+            "description": "Make your links a whole lot cuter (and more fun)"
         },
         {
-            "url": "#",
-            "icon": "link",
-            "title": "Free Resources",
-            "description": "Collection of free resources"
+            "url": "https://github.com/pinapelz/vtuber-captcha",
+            "icon": "robot-line",
+            "title": "VTuber Captcha",
+            "description": "A bring your own user interface CAPTCHA service to test if users are true VTuber fans"
         }
     ]
-}
\ No newline at end of file
+}
diff --git a/src/env.d.ts b/src/env.d.ts
index f964fe0..acef35f 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b80dd61..8d5c7e4 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,6 @@
 ---
 interface Props {
-	title: string;
+    title: string;
 }
 
 const { title } = Astro.props;
@@ -8,37 +8,90 @@ const { title } = Astro.props;
 
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="description" content="Astro description" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        <link href="https://api.fontshare.com/v2/css?f[]=satoshi@400&display=swap" rel="stylesheet">
-		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
-	</head>
-	<body>
-		<slot />
-	</body>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="description" content="Astro description" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link
+            href="https://api.fontshare.com/v2/css?f[]=satoshi@400&display=swap"
+            rel="stylesheet"
+        />
+        <meta name="generator" content={Astro.generator} />
+        <title>{title}</title>
+    </head>
+    <body>
+        <slot />
+    </body>
 </html>
 <style is:global>
-	:root {
-        --zinc-50: #FAFAFA;
-        --zinc-400: #A1A1AA;
-        --zinc-800: #27272A;
-        --zinc-900: #18181B;
-        --zinc-950: #09090B;
-	}
+    :root {
+        --pink-pastel: #ffd7f1;
+        --pink-lighter: #ffeaf8;
+        --pink-darker: #f5a9ce;
+        --zinc-50: #fff5fb;
+        --zinc-400: #f5c2e7;
+        --zinc-800: #e1a4c9;
+        --zinc-900: #d990b4;
+        --zinc-950: #ffedf6;
+    }
 
-    *, *::before, *::after {
+    *,
+    *::before,
+    *::after {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }
 
-	html {
-		font-family: 'Satoshi', system-ui, sans-serif;
-		background: var(--zinc-950);
-        color: var(--zinc-50)
-	}
+    html {
+        font-family: "Satoshi", system-ui, sans-serif;
+        color: var(--zinc-950);
+    }
+
+    body {
+        background: #fff4e6;
+        padding: 20px;
+    }
+
+    a {
+        color: var(--zinc-800);
+        text-decoration: none;
+        transition: color 0.2s ease-in-out;
+    }
+
+    a:hover {
+        color: var(--pink-darker);
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-family: "Satoshi", sans-serif;
+        color: var(--zinc-800);
+    }
+    button {
+        background: var(--zinc-50);
+        color: var(--zinc-900);
+        border: 2px solid var(--zinc-400);
+        border-radius: 12px;
+        padding: 10px 20px;
+        transition:
+            background 0.3s ease,
+            color 0.3s ease;
+        cursor: pointer;
+    }
+
+    button:hover {
+        background: var(--pink-darker);
+        color: var(--zinc-50);
+    }
+
+    .container {
+        padding: 20px;
+        overflow: visible;
+    }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1ce438f..a1b25e9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,60 +1,34 @@
 ---
-import Layout from '../layouts/Layout.astro';
-import Profile from '../components/Profile.astro';
-import List from '../components/List.astro';
-import Shadow from '../components/Shadow.astro'
+import Layout from "../layouts/Layout.astro";
+import Profile from "../components/Profile.astro";
+import List from "../components/List.astro";
+import Footer from "../components/Footer.astro";
+import FooterImage from "../assets/603.gif";
 ---
 
-<Layout title="Welcome to Astro.">
+<Layout title="Moekyun Web Services">
     <main class="container" id="container">
-        <Profile></Profile>
-        <List></List>
-        <Shadow></Shadow>
+        <Profile />
+
+        <List />
+        <div style="display: flex; justify-content: center; margin-top: 20px">
+            <img src={FooterImage.src} width="150px" alt="rosemi gif" />
+        </div>
+        <Footer />
     </main>
 </Layout>
 
 <style>
-	.container {
+    .container {
         position: relative;
         margin: auto;
+        justify-content: space-between;
         padding: 0.3125rem;
         max-width: 600px;
         width: 90%;
         height: 100vh;
-        overflow: hidden;
+        overflow: visible;
         scrollbar-width: 8px;
-        scrollbar-color: var(--zinc-900) var(--zinc-950)
+        scrollbar-color: var(--zinc-900) var(--zinc-950);
     }
 </style>
-
-<script>
-    (() => {
-        // show or hide shadow, works only if content leaves viewport
-        const mainContent = document.getElementById('container');
-        const shadow = document.getElementById('shadow');
-        const shadowButton = document.getElementById('shadow-button');
-
-        shadowButton.addEventListener('click', () => {
-            if (shadow.style.position === 'absolute') {
-                shadow.style.position = 'relative';
-                mainContent.style.overflow = 'auto';
-                shadowButton.children[0].textContent = 'Show Less';
-            
-            }  else {
-                shadow.style.position = 'absolute';
-                mainContent.style.overflow = 'hidden';
-                mainContent.scroll(0,0);
-                shadowButton.children[0].textContent = 'Explore More';
-            }
-        });
-
-        // Hide the shadow if the content is minimal enough to leave the viewport
-        const list = document.getElementById('list');
-        const observerList = list.getBoundingClientRect();
-
-        if (observerList.bottom <  window.innerHeight) {
-            shadow.style.display = 'none';
-            mainContent.style.overflow = 'auto';
-        }
-    })();
-</script>
\ No newline at end of file