WIP website
banana.tngl.sh
1---
2import Tag from '../components/Tag.astro';
3import { Github, Twitch, Youtube, Icon } from '@lucide/astro'
4import { butterfly } from '@lucide/lab'
5---
6<div class="flex flex-col col-span-2 border border-ctp-surface0 gap-[-1px] w-full h-min">
7 <span class="p-4 pb-0 border-b border-ctp-surface0 relative">
8 <img src="/banner.png" class="w-full"/>
9 </span>
10 <div class="p-8 pt-12 flex-col flex flex-wrap relative">
11 <img src="doodlecat.png" width="96px" height="96px"
12 class="rounded-full absolute -top-12 left-8 border-6 border-ctp-mantle" />
13 <span class="text-base flex justify-between w-full flex-wrap gap-2">
14 <span class="flex flex-col">
15 <span class="text-2xl font-bold">Banana</span>
16 <a href="mailto:banana@potassium.sh" class="hover:underline ease-in hover:ease-out transition-all">banana@potassium.sh</a>
17 </span>
18 <span class="flex gap-2 bg-ctp-crust p-2 pl-3 pr-3 rounded-full h-min">
19 <a href="https://github.com/imabanana80">
20 <Github size="20"
21 class="stroke-ctp-green hover:rotate-15 ease-in hover:ease-out transition-transform"/></a>
22 <a href="https://bsky.app/profile/imabanana80.com">
23 <Icon iconNode={butterfly} size="20"
24 class="stroke-ctp-sapphire hover:rotate-15 ease-in hover:ease-out transition-transform"/></a>
25 <a href="https://twitch.tv/imabanana80">
26 <Twitch size="20"
27 class="stroke-ctp-mauve hover:rotate-15 ease-in hover:ease-out transition-transform"/></a>
28 <a href="https://youtube.com/@imabanana80">
29 <Youtube size="20"
30 class="stroke-ctp-red hover:rotate-15 ease-in hover:ease-out transition-transform"/></a>
31 </span>
32 </span>
33 <span class="relative p-3 mt-4 border border-ctp-surface0 text-sm">
34 <Tag name="About"/>
35 Hi, I'm Banana, a computer science student and software developer that specialises in
36 Web Development as well as developing and hosting Minecraft Events.
37 </span>
38 <span class="relative p-3 mt-4 border border-ctp-surface0 text-sm">
39 <Tag name="Currently"/>
40 Learning Svelte | Open for Hire
41 </span>
42 <span class="relative p-3 -mt-px border border-ctp-surface0 text-ctp-subtext0 text-sm">
43 <Tag name="Time"/>
44 <span id="clock" class="text-ctp-text"></span> (SGT/UTC+8)
45 </span>
46 </div >
47</div>
48
49
50<script>
51const clockElement: HTMLElement | null = document.getElementById("clock");
52
53if (!clockElement) {
54 console.error(`Error: Clock element with ID "clock" not found.`);
55}
56
57const displayTime = (): void => {
58 const now: Date = new Date();
59
60 const options: Intl.DateTimeFormatOptions = {
61 hour: '2-digit',
62 minute: '2-digit',
63 second: '2-digit',
64 hour12: false,
65 timeZone: "Asia/Singapore"
66 };
67
68 const timeString: string = now.toLocaleTimeString('en-US', options);
69 clockElement.textContent = timeString;
70};
71displayTime();
72setInterval(displayTime, 1000);
73</script>