WIP website
banana.tngl.sh
1---
2import Label from '../Label.astro';
3import Quote from './Quote.astro'
4import BadgeBar from "../Badgebar.astro"
5import Butterfly from "../../assets/butterfly.svg"
6
7let home = "hidden lg:flex"
8if (Astro.url.pathname == "/") {
9 home = "flex"
10}
11---
12<div class=`${home} flex-col md:col-span-2 border border-ctp-surface0 gap-[-1px] w-full h-min`>
13 <span class="p-4 pb-0 border-b border-ctp-surface0 relative">
14 <img src="/banner.png" class="w-full"/>
15 </span>
16 <div class="p-8 pt-12 flex-col flex flex-wrap relative">
17 <img src="/doodlecat.png" width="96px" height="96px"
18 class="rounded-full absolute -top-12 left-8 border-6 border-ctp-mantle" />
19 <span class="text-base flex justify-between w-full flex-wrap gap-2">
20 <span class="flex flex-col">
21 <span class="text-2xl font-bold">Banana</span>
22 <a href="mailto:banana@potassium.sh" class="hover:underline ease-in hover:ease-out transition-all">
23 banana@potassium.sh</a>
24 </span>
25 <BadgeBar
26 badges={[
27 {
28 icon: "Github",
29 color: "var(--catppuccin-color-green)",
30 href: "https://github.com/imabanana80"
31 },
32 {
33 icon: "Spool",
34 color: "var(--catppuccin-color-lavender)",
35 href: "https://tangled.org/@banana.tngl.sh"
36 },
37 {
38 icon: Butterfly,
39 color: "var(--catppuccin-color-sapphire)",
40 href: "https://bsky.app/profile/imabanana80.com",
41 svg: true
42 }
43 ]}
44 size='20'
45 />
46 </span>
47 <span class="relative p-3 mt-4 border border-ctp-surface0 text-sm">
48 <Label name="Currently"/>
49 Switching to endeavoros | Open for Hire
50 </span>
51 <span class="relative p-3 mt-4 border border-ctp-surface0 text-sm">
52 <Label name="About"/>
53 Hi, I'm Banana, a computer science student and software developer that specialises in
54 Web Development as well as developing and hosting Minecraft Events.
55 </span>
56 <span class="relative p-3 mt-4 border border-ctp-surface0 text-ctp-subtext0 text-sm">
57 <Label name="Time"/>
58 <span id="clock" class="text-ctp-text"></span> (SGT/UTC+8)
59 </span>
60 <span class="relative p-3 mt-4 border border-ctp-surface0 text-sm">
61 <Label name="Languages"/>
62 <span>Java, Python, Golang, HTML/CSS/TS</span>
63 </span>
64 <span class="relative p-3 -mt-px border border-ctp-surface0 text-sm">
65 <Label name="Frameworks"/>
66 <span>PaperMC, Astro, Tailwindcss</span>
67 </span>
68 <span class="relative p-3 -mt-px border border-ctp-surface0 text-sm">
69 <Label name="Tools"/>
70 <span>Neovim, IntellIJ, Figma, VSC*de</span>
71 </span>
72 <div class="mt-4 flex">
73 <Quote />
74 </div>
75 </div >
76</div>
77
78
79<script>
80const clockElement: HTMLElement | null = document.getElementById("clock");
81
82if (!clockElement) {
83 console.error(`Error: Clock element with ID "clock" not found.`);
84}
85
86const displayTime = (): void => {
87 const now: Date = new Date();
88
89 const options: Intl.DateTimeFormatOptions = {
90 hour: '2-digit',
91 minute: '2-digit',
92 second: '2-digit',
93 hour12: false,
94 timeZone: "Asia/Singapore"
95 };
96
97 const timeString: string = now.toLocaleTimeString('en-US', options);
98 clockElement.textContent = timeString;
99};
100displayTime();
101setInterval(displayTime, 1000);
102</script>