Skip to content

Commit

Permalink
Merge pull request #17 from tuatmcc/feat/navigation
Browse files Browse the repository at this point in the history 
feat/navigation
  • Loading branch information
@OJII3
OJII3 authored Sep 3, 2024
2 parents 93c37d9 + cc5793a commit f59b2c2
Show file tree
Hide file tree
Showing 17 changed files with 165 additions and 239 deletions.
Binary file modified bun.lockb
View file
Binary file not shown.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,11 @@
"@types/react-dom": "^18.3.0",
"@types/three": "^0.167.1",
"astro": "^4.13.1",
"framer-motion": "^11.3.31",
"pagefind": "^1.1.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"tailwindcss": "^3.4.7",
"three": "^0.167.1",
"typescript": "^5.5.4"
Expand Down
Binary file added public/abstract-wave.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 public/decorations/frame.svg → public/assets/frame.svg
View file
File renamed without changes
7 changes: 7 additions & 0 deletions public/assets/technology-vertical.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions public/icons/arrow_down.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 1 addition & 5 deletions public/icons/hamburger.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 public/logo/logo-vertical.svg → public/logos/logo-vertical.svg
View file
File renamed without changes
0 public/logo/wordmark.svg → public/logos/wordmark.svg
View file
File renamed without changes
1 change: 0 additions & 1 deletion src/components/Card.astro → src/components/BeveledCard.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,5 @@ const { class: className, ...props } = Astro.props;
0 calc(100% - 20px),
0 20px
);
margin-left: 20px;
}
</style>
150 changes: 57 additions & 93 deletions src/components/Navigation/Navigation.astro
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
import { NavigationContainer } from "./NavigationContainer.tsx";
import { FaXTwitter, FaGithub, FaDiscord } from "react-icons/fa6";
const links = [
{ href: "/", label: "Home" },
Expand All @@ -11,99 +12,62 @@ const links = [

<slot />
<NavigationContainer client:only="react">
<nav
class="fixed pl-16 grid top-0 bottom-0 right-0 w-[500px] max-w-[90vw] transition-transform"
>
<svg
class="text-gray-500 absolute top-0 left-0 z-[-1]"
height="100%"
viewBox="0 0 160 80"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Deco</title>
<polygon
points="0 0 0 10 5 15 5 65 0 70 0 80 160 80 160 0"
fill="currentColor"></polygon>
</svg>
<div class="relative flex flex-col bg-gray-500 p-2 overflow-y-hidden">
<div class="bottom-0 right-0 absolute h-full">
<img
src="/logo/logo-vertical.svg"
alt="Logo"
class="opacity-40 py-4 pt-16 h-full"
/>
</div>

<button
type="button"
class="fixed z-10 top-0 right-0 p-2"
aria-label="Menu Button"
>
<svg
width="40"
height="40"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Menu</title>
<path
d="M4 6L20 6"
stroke="white"
stroke-width="2"
stroke-linecap="round"></path>
<path
d="M4 12L20 12"
stroke="white"
stroke-width="2"
stroke-linecap="round"></path>
<path
d="M4 18L20 18"
stroke="white"
stroke-width="2"
stroke-linecap="round"></path>
</svg>
</button>
<div class="w-full pl-8 pt-24 overflow-y-auto">
<ul class="flex flex-col gap-8">
{
links.map((link) => (
<li class="link-item relative flex text-white text-2xl font-orbitron tracking-wider">
<a href={link.href} class=" flex w-full p-2">
{link.label}
</a>
</li>
))
}
</ul>
</div>
</div>
<div class="w-full h-full pl-8 pt-24 overflow-y-auto flex flex-col justify-between">
<ul class="flex flex-col gap-8">
{
links.map((link) => (
<li class="link-item relative flex text-white text-2xl font-orbitron tracking-wider">
<a href={link.href} class=" flex justify-end w-full p-2">
{link.label}
</a>
</li>
))
}
</ul>
<div class="relative">
<div class="absolute top-0 right-0 w-[2px] bottom-0 bg-red-600" />
<ul class="relative flex flex-col gap-8 p-4">
<li class="flex">
<a href="https://x.com/tuatmcc" target="_blank" rel="noopener noreferrer" class="flex flex-1 justify-end">
<FaXTwitter className="text-white w-6 h-6" />
</a>
</li>
<li class="flex">
<a href="https://x.com/tuatmcc" target="_blank" rel="noopener noreferrer" class="flex flex-1 justify-end">
<FaGithub className="text-white w-6 h-6" />
</a>
</li>
<li class="flex">
<a href="https://x.com/tuatmcc" target="_blank" rel="noopener noreferrer" class="flex flex-1 justify-end">
<FaDiscord className="text-white w-6 h-6" />
</a>
</li>
</ul>
</div>
</NavigationContainer>

<style>
.link-item {
&::after {
position: absolute;
content: "";
display: block;
bottom: 0;
left: 50%;
width: 0;
bottom: 0;
height: 2px;
background: white;
transition: all 0.2s;
transform: translateX(-50%);
opacity: 0;
}
<style>
.link-item {
&::after {
position: absolute;
content: "";
display: block;
bottom: 0;
left: 50%;
width: 0;
bottom: 0;
height: 2px;
background: white;
transition: all 0.2s;
transform: translateX(-50%);
opacity: 0;
}

&:hover {
&::after {
width: 100%;
opacity: 1;
}
}
&:hover {
&::after {
width: 100%;
opacity: 1;
}
</style>
</nav></NavigationContainer
>
}
}
</style>
113 changes: 58 additions & 55 deletions src/components/Navigation/NavigationContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,22 @@
import { AnimatePresence, motion } from "framer-motion";
import { type ReactNode, useState } from "react";

export const NavigationContainer = ({ children }: { children: ReactNode }) => {
const [active, setActive] = useState(false);
return (
<>
<div
className="fixed top-0 left-0 w-full h-dvh"
style={{ opacity: active ? 1 : 0, display: active ? "block" : "none" }}
onClick={() => setActive(false)}
onKeyDown={(e) => e.key === "Escape" && setActive(false)}
/>
<AnimatePresence>
{active && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="fixed top-0 left-0 w-full h-dvh bg-black bg-opacity-30 backdrop-blur-sm"
onClick={() => setActive(false)}
onKeyDown={(e) => e.key === "Escape" && setActive(false)}
/>
)}
</AnimatePresence>
<header>
<button
type="button"
Expand Down Expand Up @@ -46,67 +53,63 @@ export const NavigationContainer = ({ children }: { children: ReactNode }) => {
/>
</svg>
</button>
<nav className="fixed pl-16 grid top-0 bottom-0 right-0 w-[500px] max-w-[90vw] transition-transform">
<svg
className="text-gray-500 absolute top-0 left-0 z-[-1]"
height="100%"
viewBox="0 0 160 80"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Deco</title>
<polygon
points="0 0 0 10 5 15 5 65 0 70 0 80 160 80 160 0"
fill="currentColor"
<motion.div
initial={{ x: "100%" }}
animate={{ x: active ? 0 : "100%" }}
transition={{ type: "spring", bounce: 0.1, duration: 0.3 }}
className="fixed grid top-0 bottom-0 right-0 w-[500px] max-w-[95vw]"
style={{
clipPath:
"polygon(0 0, 0 30%, 60px calc(30% + 60px), 60px calc(100% - 160px), 0 calc(100% - 100px), 0 100%, 100% 100%, 100% 0)",
}}
>
<div className="relative pl-16 flex flex-col bg-gray-900 p-2 overflow-y-hidden">
<img
src="/assets/technology-vertical.svg"
alt="Logo"
className="absolute opacity-10 py-4 h-full pointer-events-none"
/>
</svg>
<div className="relative flex flex-col bg-gray-500 p-2 overflow-y-hidden">
<div className="bottom-0 right-0 absolute h-full">
<img
src="/logo/logo-vertical.svg"
alt="Logo"
className="opacity-40 py-4 pt-16 h-full"
/>
</div>

<button
type="button"
className="fixed z-10 top-0 right-0 p-2"
aria-label="Menu Button"
onClick={() => setActive((prev) => !prev)}
>
<svg
width="40"
height="40"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Menu</title>
<path
d="M4 6L20 6"
stroke="white"
stroke-width="2"
stroke-linecap="round"
/>
<path
d="M4 12L20 12"
stroke="white"
stroke-width="2"
stroke-linecap="round"
/>
<path
d="M4 18L20 18"
stroke="white"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
<img src="/icons/hamburger.svg" alt="Close" />
</button>

{children}
</div>
</nav>
<div
className="fixed top-0 h-[30%] w-[60px] bg-red-600"
style={{
clipPath:
"polygon(20px 0, 22px 0, 22px 20%, 60px calc(20% + 38px), 60px calc(20% + 50px), 20px calc(20% + 12px))",
}}
/>
<div
className="fixed top-0 h-[30%] w-[60px] bg-red-600"
style={{
clipPath:
"polygon(20px calc(20% + 22px), 60px calc(20% + 62px), 60px calc(20% + 74px), 20px calc(20% + 36px))",
}}
/>
<div
className="fixed top-0 h-[30%] w-[60px] bg-red-600"
style={{
clipPath:
"polygon(20px calc(20% + 46px), 60px calc(20% + 86px), 60px calc(20% + 98px), 20px calc(20% + 60px))",
}}
/>
<div
className="fixed top-0 h-[30%] w-[60px] bg-red-600"
style={{
clipPath:
"polygon(58px calc(20% + 86px), 60px calc(20% + 86px), 60px calc(20% + 160px), 58px calc(20% + 160px))",
}}
/>
</motion.div>
</header>
</>
);
Expand Down
14 changes: 6 additions & 8 deletions src/components/home/RecentNews.astro
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
---
import { getCollection } from "astro:content";
import Card from "../Card.astro";
import BeveledCard from "../BeveledCard.astro";
const posts = (await getCollection("news")).sort(
(a, b) => a.data.date.valueOf() - b.data.date.valueOf(),
);
---

<section>
<h2>Recent News</h2>
<ul>
<BeveledCard class="card fixed bottom-1/2 left-8 p-4 w-5/12 bg-gray-400">
<h2 class="font-orbitron text-4xl">Recent News</h2>
<ul class="content mt-2 flex flex-col gap-2">
<li class="flex">
<Card class="bg-blue-400 p-8">
<a href="/news/1" class="flex">News 1</a>
</Card>
<a href="/news/1" class="flex">News 1</a>
</li>
<li>
<a href="/news/2">News 2</a>
Expand All @@ -22,4 +20,4 @@ const posts = (await getCollection("news")).sort(
<a href="/news/3">News 3</a>
</li>
</ul>
</section>
</BeveledCard>
Loading

0 comments on commit f59b2c2

Please sign in to comment.