diff options
| -rw-r--r-- | src/components/Card.astro | 73 | ||||
| -rw-r--r-- | src/components/Header.astro | 114 | ||||
| -rw-r--r-- | src/components/ShapesBackground.astro | 135 | ||||
| -rw-r--r-- | src/components/SocialNavbar.astro | 113 | ||||
| -rw-r--r-- | src/layouts/Layout.astro | 4 | ||||
| -rw-r--r-- | src/pages/about.astro | 0 | ||||
| -rw-r--r-- | src/pages/index.astro | 138 |
7 files changed, 332 insertions, 245 deletions
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>→</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; + } - 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 ul { + display: flex; + flex-direction: row; + list-style: none; + padding: 0; + margin: 0; + } - nav li { - margin-right: 1.5rem; - position: relative; - } + nav li { + margin-right: 1.5rem; + position: relative; + } - nav li:last-child { - margin-right: 0; - } + 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 { + 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); - } + nav a:hover { + background-color: rgba(255, 255, 255, 0.1); + background-size: 120% 120%; + } - /* 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; - } + #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 --- /dev/null +++ b/src/pages/about.astro 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; |