From 582f753a9370c00f82ddd0ea0c4bf842df318a96 Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Thu, 17 Oct 2024 01:16:32 -0700
Subject: initial moeification

---
 src/components/Footer.astro  | 60 ++++++++++++++++++++++++++++++++++++++++++++
 src/components/Link.astro    | 33 +++++++++++++-----------
 src/components/Profile.astro | 27 ++++++++++----------
 src/components/Shadow.astro  | 45 ---------------------------------
 4 files changed, 93 insertions(+), 72 deletions(-)
 create mode 100644 src/components/Footer.astro
 delete mode 100644 src/components/Shadow.astro

(limited to 'src/components')

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
-- 
cgit v1.2.3