From 1c1c5db4caf55e3204b82bfa4b39a50ff1283b06 Mon Sep 17 00:00:00 2001
From: Pinapelz <donaldshan1@outlook.com>
Date: Wed, 20 Sep 2023 00:24:08 -0700
Subject: implemented project page with cards

---
 src/components/Card.astro             |  73 +++++++++++++++---
 src/components/Header.astro           | 126 ++++++++++++++-----------------
 src/components/ShapesBackground.astro | 135 +++++++++++++++++++++++++++++++++
 src/components/SocialNavbar.astro     | 113 +++++++++++++++++++---------
 src/layouts/Layout.astro              |   4 +-
 src/pages/about.astro                 |   0
 src/pages/index.astro                 | 138 +---------------------------------
 7 files changed, 338 insertions(+), 251 deletions(-)
 create mode 100644 src/components/ShapesBackground.astro
 create mode 100644 src/pages/about.astro

diff --git a/src/components/Card.astro b/src/components/Card.astro
index bd6d597..bf0ecf5 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -1,24 +1,30 @@
+User
 ---
 interface Props {
 	title: string;
 	body: string;
 	href: string;
+	language: string;
+	languageColor: string;
 }
 
-const { href, title, body } = Astro.props;
+const { href, title, body, language, languageColor } = Astro.props;
 ---
 
 <li class="link-card">
 	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
+		<div class="content-container">
+			<h2>{title}</h2>
+			<div class="language-container">
+				<span class="dot" style={{ backgroundColor: languageColor }}></span>
+				<span class="language">{language}</span>
+			</div>
+			<div class="separator"></div>
+			<p>{body}</p>
+		</div>
 	</a>
 </li>
+
 <style>
 	.link-card {
 		list-style: none;
@@ -29,9 +35,13 @@ const { href, title, body } = Astro.props;
 		background-size: 400%;
 		border-radius: 7px;
 		background-position: 100%;
+		align-items: flex-start;
 		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+		position: relative;
+		overflow: hidden;
 	}
+
 	.link-card > a {
 		width: 100%;
 		text-decoration: none;
@@ -41,21 +51,66 @@ const { href, title, body } = Astro.props;
 		color: white;
 		background-color: #23262d;
 		opacity: 0.8;
+		display: flex;
+		flex-direction: column; 
+		align-items: flex-start;
+		justify-content: space-between;
+		position: relative; /* Add position property */
+		box-sizing: border-box; /* Include padding in the element's total width/height. */
+		height: 100%; /* Ensure it takes the full height of its parent. */
+	}
+
+	.content-container {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		margin-bottom: 0; 
 	}
+
 	h2 {
 		margin: 0;
 		font-size: 1.25rem;
 		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 	}
+
 	p {
 		margin-top: 0.5rem;
 		margin-bottom: 0;
 	}
+
+	.separator {
+		height: 1px;
+		width: 100%;
+		background-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.language-container {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		margin: 0;
+	}
+
+	.dot {
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		display: inline-block;
+	}
+
+	.language {
+		font-weight: bold;
+		font-size: 1rem;
+		color: rgba(255, 255, 255, 0.8);
+	}
+
 	.link-card:is(:hover, :focus-within) {
 		background-position: 0;
 		background-image: var(--accent-gradient);
+		
 	}
+
 	.link-card:is(:hover, :focus-within) h2 {
 		color: rgb(var(--accent-light));
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 3e3f97e..171e8e1 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,72 +1,62 @@
----
-
----
 <header>
-    <nav>
-      <ul>
-        <li><a href="/">Home</a></li>
-        <li><a href="/about">About</a></li>
-        <li><a href="/contact">Contact</a></li>
-      </ul>
-    </nav>
+  <nav>
+    <ul>
+      <li><a href="/">Home</a></li>
+      <li><a href="/projects">Projects</a></li>
+      <li><a href="/about">About</a></li>
+    </ul>
+  </nav>
+  <img
+    id="profilePic"
+    src="https://files.pinapelz.com/21994085.png"
+    alt="Profile Picture"
+  />
 </header>
 <style>
-
-    header {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        padding: 1rem 2rem;
-    }
-
-    nav ul {
-        display: flex;
-        flex-direction: row;
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
-
-    nav li {
-        margin-right: 1.5rem;
-        position: relative;
-    }
-
-    nav li:last-child {
-        margin-right: 0;
-    }
-
-    nav a {
-        color: #fff;
-        text-decoration: none;
-        font-weight: 500;
-        padding: 5px 10px;
-        border-radius: 5px;
-        transition: all 0.3s ease; /* Adding transition */
-    }
-
-    nav a:hover {
-        background-color: rgba(255, 255, 255, 0.1);
-    }
-
-    /* Active link state example (you may need to adjust this based on your routing) */
-    nav a.active {
-        background: linear-gradient(to right, #4CAF50, #8BC34A);
-        color: #000;
-    }
+  header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+  }
+
+  nav ul {
+    display: flex;
+    flex-direction: row;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  nav li {
+    margin-right: 1.5rem;
+    position: relative;
+  }
+
+  nav li:last-child {
+    margin-right: 0;
+  }
+
+  nav a {
+    color: #fff;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: large;
+    padding: 5px 10px;
+    border-radius: 5px;
+    transition: all 0.3s ease;
+  }
+
+  nav a:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    background-size: 120% 120%;
+  }
+
+  #profilePic {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    margin-left: 1rem;
+  }
 </style>
-<script>
-const currentPage = window.location.pathname;
-const homeLink = document.querySelector("#home-link");
-const aboutLink = document.querySelector("#about-link");
-const contactLink = document.querySelector("#contact-link");
-
-if (currentPage === "/") {
-  homeLink.classList.add("active");
-} else if (currentPage === "/about") {
-  aboutLink.classList.add("active");
-} else if (currentPage === "/contact") {
-  contactLink.classList.add("active");
-}
-</script>
diff --git a/src/components/ShapesBackground.astro b/src/components/ShapesBackground.astro
new file mode 100644
index 0000000..fd56d72
--- /dev/null
+++ b/src/components/ShapesBackground.astro
@@ -0,0 +1,135 @@
+<ul class="circles">
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+  </ul>
+<style>
+  .context {
+    width: 100%;
+    position: absolute;
+    top: 50vh;
+  }
+
+  .context h1 {
+    text-align: center;
+    color: #fff;
+    font-size: 50px;
+  }
+
+  .circles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: -1;
+  }
+
+  .circles li {
+    position: absolute;
+    display: block;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.2);
+    animation: animate 25s linear infinite;
+    bottom: -150px;
+  }
+
+  .circles li:nth-child(1) {
+    left: 25%;
+    width: 80px;
+    height: 80px;
+    animation-delay: 0s;
+  }
+
+  .circles li:nth-child(2) {
+    left: 10%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 2s;
+    animation-duration: 12s;
+  }
+
+  .circles li:nth-child(3) {
+    left: 70%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 4s;
+  }
+
+  .circles li:nth-child(4) {
+    left: 40%;
+    width: 60px;
+    height: 60px;
+    animation-delay: 0s;
+    animation-duration: 18s;
+  }
+
+  .circles li:nth-child(5) {
+    left: 65%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 0s;
+  }
+
+  .circles li:nth-child(6) {
+    left: 75%;
+    width: 110px;
+    height: 110px;
+    animation-delay: 3s;
+  }
+
+  .circles li:nth-child(7) {
+    left: 35%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 7s;
+  }
+
+  .circles li:nth-child(8) {
+    left: 50%;
+    width: 25px;
+    height: 25px;
+    animation-delay: 15s;
+    animation-duration: 45s;
+  }
+
+  .circles li:nth-child(9) {
+    left: 20%;
+    width: 15px;
+    height: 15px;
+    animation-delay: 2s;
+    animation-duration: 35s;
+  }
+
+  .circles li:nth-child(10) {
+    left: 85%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 0s;
+    animation-duration: 11s;
+  }
+
+  @keyframes animate {
+    0% {
+      transform: translateY(0) rotate(0deg);
+      opacity: 0.5;
+      border-radius: 0;
+    }
+
+    100% {
+      transform: translateY(-1000px) rotate(720deg);
+      opacity: 0;
+      border-radius: 50%;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/SocialNavbar.astro b/src/components/SocialNavbar.astro
index ed020e4..95aa1a2 100644
--- a/src/components/SocialNavbar.astro
+++ b/src/components/SocialNavbar.astro
@@ -1,46 +1,85 @@
 ---
-import '@fortawesome/fontawesome-free/css/all.min.css';
+import "@fortawesome/fontawesome-free/css/all.min.css";
 ---
+
 <style>
-    .dark-social-navbar-wrapper {
-        display: flex;
-        margin-top: 5px;
-        justify-content: center;
-    }
+  .dark-social-navbar-wrapper {
+    display: flex;
+    margin-top: 5px;
+    justify-content: center;
+  }
+
+  .dark-social-navbar {
+    display: flex;
+    gap: 15px;
+    padding: 10px 20px;
+    border-radius: 8px;
+  }
 
-    .dark-social-navbar {
-        display: flex;
-        gap: 15px;
-        padding: 10px 20px;
-        border-radius: 8px;
-    }
+  .dark-social-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #3a3f4b;
+    color: #fff;
+    text-decoration: none;
+    transition:
+      background-color 0.3s ease,
+      transform 0.3s ease;
+  }
 
-    .dark-social-icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        background-color: #3a3f4b;
-        color: #fff;
-        text-decoration: none;
-        transition: background-color 0.3s ease, transform 0.3s ease;
-    }
+  .dark-social-icon:hover::before {
+  content: attr(title);
+  background-color: #333;
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  position: absolute;
+  bottom: 120%;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+  .dark-social-icon:hover::before {
+    opacity: 1;
+  }
 
-    .dark-social-icon:hover {
-        background-color: #4a4f5b;
-        transform: scale(1.1);
-    }
+  .dark-social-icon:hover {
+    background-color: #4a4f5b;
+    transform: scale(1.1);
+  }
 </style>
 
 <div class="dark-social-navbar-wrapper">
-    <div class="dark-social-navbar">
-        <a href="#" class="dark-social-icon"><i class="fab fa-github"></i></a>
-        <a href="#" class="dark-social-icon"><i class="fab fa-twitter"></i></a>
-        <a href="#" class="dark-social-icon"><i class="fa fa-book"></i></a>
-        <a href="#" class="dark-social-icon"><i class="fab fa-discord"></i></a>
-        <a href="#" class="dark-social-icon"><i class="fa fa-envelope"></i></a>
-        <a href="#" class="dark-social-icon"><i class="fa fa-globe"></i></a>
-    </div>
-</div>
\ No newline at end of file
+  <div class="dark-social-navbar">
+    <a
+      href="https://github.com/pinapelz"
+      class="dark-social-icon"
+      title="GitHub"><i class="fab fa-github"></i></a
+    >
+    <a
+      href="https://twitter.com/pinapelz"
+      class="dark-social-icon"
+      title="Twitter"><i class="fab fa-twitter"></i></a
+    >
+    <a href="https://blog.pinapelz.com" class="dark-social-icon" title="Blog"
+      ><i class="fa fa-book"></i></a
+    >
+    <a
+      href="https://discord.com/users/246787839570739211"
+      title="Discord"
+      class="dark-social-icon"><i class="fab fa-discord"></i></a
+    >
+    <a href="mailto:yukais@pinapelz.com" class="dark-social-icon" title="Email"
+      ><i class="fa fa-envelope"></i></a
+    >
+    <a href="https://pinapelz.moe" class="dark-social-icon" title="pinapelz.moe"
+      ><i class="fa fa-globe"></i></a
+    >
+  </div>
+</div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 69f5f8f..672b5cc 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -35,8 +35,8 @@ import Header from '../components/Header.astro';
 		);
 		--accent-gradient-purp: linear-gradient(
 			45deg,
-			rgb(126, 85, 182),       
-			rgb(121, 77, 209) 30%,
+			rgb(139, 101, 194),       
+			rgb(145, 108, 219) 30%,
 			rgb(230, 230, 250) 60% 
 		);
 	}
diff --git a/src/pages/about.astro b/src/pages/about.astro
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a08de2d..fce4326 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,9 +1,10 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import SocialNavbar from '../components/SocialNavbar.astro';
+import ShapesBackground from "../components/ShapesBackground.astro";
 ---
 
-<Layout title="Welcome to Pinapelz">
+<Layout title="Pinapelz">
   <div class="center-wrapper">
     <main>
       <h1 class="welcome-message">
@@ -19,18 +20,7 @@ import SocialNavbar from '../components/SocialNavbar.astro';
       <SocialNavbar/>
     </main>
   </div>
-  <ul class="circles">
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-  </ul>
+  <ShapesBackground/>
   <script>
     const welcomeMessages = [
       'print("Hello World")',
@@ -81,128 +71,6 @@ import SocialNavbar from '../components/SocialNavbar.astro';
     font-family: "Noto", sans-serif;
     height: 100%;
   }
-
-  .context {
-    width: 100%;
-    position: absolute;
-    top: 50vh;
-  }
-
-  .context h1 {
-    text-align: center;
-    color: #fff;
-    font-size: 50px;
-  }
-
-  .circles {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: -1;
-  }
-
-  .circles li {
-    position: absolute;
-    display: block;
-    list-style: none;
-    width: 20px;
-    height: 20px;
-    background: rgba(255, 255, 255, 0.2);
-    animation: animate 25s linear infinite;
-    bottom: -150px;
-  }
-
-  .circles li:nth-child(1) {
-    left: 25%;
-    width: 80px;
-    height: 80px;
-    animation-delay: 0s;
-  }
-
-  .circles li:nth-child(2) {
-    left: 10%;
-    width: 20px;
-    height: 20px;
-    animation-delay: 2s;
-    animation-duration: 12s;
-  }
-
-  .circles li:nth-child(3) {
-    left: 70%;
-    width: 20px;
-    height: 20px;
-    animation-delay: 4s;
-  }
-
-  .circles li:nth-child(4) {
-    left: 40%;
-    width: 60px;
-    height: 60px;
-    animation-delay: 0s;
-    animation-duration: 18s;
-  }
-
-  .circles li:nth-child(5) {
-    left: 65%;
-    width: 20px;
-    height: 20px;
-    animation-delay: 0s;
-  }
-
-  .circles li:nth-child(6) {
-    left: 75%;
-    width: 110px;
-    height: 110px;
-    animation-delay: 3s;
-  }
-
-  .circles li:nth-child(7) {
-    left: 35%;
-    width: 150px;
-    height: 150px;
-    animation-delay: 7s;
-  }
-
-  .circles li:nth-child(8) {
-    left: 50%;
-    width: 25px;
-    height: 25px;
-    animation-delay: 15s;
-    animation-duration: 45s;
-  }
-
-  .circles li:nth-child(9) {
-    left: 20%;
-    width: 15px;
-    height: 15px;
-    animation-delay: 2s;
-    animation-duration: 35s;
-  }
-
-  .circles li:nth-child(10) {
-    left: 85%;
-    width: 150px;
-    height: 150px;
-    animation-delay: 0s;
-    animation-duration: 11s;
-  }
-
-  @keyframes animate {
-    0% {
-      transform: translateY(0) rotate(0deg);
-      opacity: 0.5;
-      border-radius: 0;
-    }
-
-    100% {
-      transform: translateY(-1000px) rotate(720deg);
-      opacity: 0;
-      border-radius: 50%;
-    }
-  }
   main {
     margin: auto;
     padding: 1rem;
-- 
cgit v1.2.3