This is a binary file and will not be displayed.

···

       
1
       
1
       
+
       
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#bac2de" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pause"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>

     

···

       
1
       
1
       
+
       
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#bac2de" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>

     

···

       
1
       
1
       
+
       
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-butterfly-icon lucide-butterfly"><path d="M15.8 2C12 3.8 12 9 12 9s0-5.2-3.8-7"/><path d="M12 9v11"/><path d="M20 5c-3.5 0-6.5 3.9-8 6.3C10.5 8.9 7.5 5 4 5a2 2 0 0 0-2 2c0 2.3.6 4.4 1.5 5.6C4 13.5 4.9 14 6 14h2c-.9.4-2.1.9-2.6 1.5-1.6 1.6-.9 3.4.7 4.9 1.6 1.6 3.4 2.3 4.9.7.3-.3 1-1.1 1-1.1s.6.8 1 1.1c1.6 1.6 3.4.9 4.9-.7 1.6-1.6 2.3-3.4.7-4.9-.5-.5-1.7-1.1-2.6-1.5h2c1.1 0 2-.5 2.5-1.4.9-1.2 1.5-3.3 1.5-5.6a2 2 0 0 0-2-2"/></svg>

     

···

       
2
       
2
       
 
       
import LucideIcon from "./LucideIcon.astro";

     

       
3
       
3
       
 
       


     

       
4
       
4
       
 
       
interface Badge {

     

       
5
       
5
       
-
       
    icon: string,

     

       
5
       
5
       
+
       
    icon: string | any,

     

       
6
       
6
       
 
       
    href: string

     

       
7
       
7
       
 
       
    color: string

     

       
8
       
8
       
+
       
    svg?: boolean

     

       
8
       
9
       
 
       
}

     

       
9
       
10
       
 
       


     

       
10
       
11
       
 
       
interface Props {

     
···

       
13
       
14
       
 
       
}

     

       
14
       
15
       
 
       


     

       
15
       
16
       
 
       
const { badges, size } = Astro.props

     

       
17
       
17
       
+
       


     

       
16
       
18
       
 
       
---

     

       
17
       
19
       
 
       
<span class="flex gap-2 bg-ctp-crust p-2 pl-3 pr-3 rounded-full h-min">

     

       
18
       
20
       
 
       
    {badges.map(badge => 

     

       
19
       
19
       
-
       
    <a href=`${badge.href}`>

     

       
21
       
21
       
+
       
    <a href=`${badge.href}` target="_blank" rel="noopener noreferrer">

     

       
22
       
22
       
+
       
        { badge.svg && badge.icon && (

     

       
23
       
23
       
+
       
        <badge.icon width={size} height={size} style={`stroke:${badge.color}`}

     

       
24
       
24
       
+
       
        class="hover:rotate-15 hover:scale-110 ease-in hover:ease-out transition-transform active:scale-80"

     

       
25
       
25
       
+
       
        />

     

       
26
       
26
       
+
       
        )}

     

       
27
       
27
       
+
       
        { !badge.svg && (

     

       
20
       
28
       
 
       
        <LucideIcon name=`${badge.icon}` width=`${size}` height=`${size}` style={`stroke:${badge.color}`} 

     

       
21
       
21
       
-
       
            class="hover:rotate-15 ease-in hover:ease-out transition-transform"

     

       
29
       
29
       
+
       
            class="hover:rotate-15 hover:scale-110 ease-in hover:ease-out transition-transform active:scale-80"

     

       
22
       
30
       
 
       
        />

     

       
31
       
31
       
+
       
        )}

     

       
23
       
32
       
 
       
    </a>

     

       
24
       
33
       
 
       
    )}

     

       
25
       
34
       
 
       
</span>

     

       
26
       
26
       
-
       


     

···

       
1
       
1
       
-
       
---

     

       
2
       
2
       
-
       
import Label from "./Label.astro"

     

       
3
       
3
       
-
       
import GitHubCalendar from "./GithubCalendar"

     

       
4
       
4
       
-
       
---

     

       
5
       
5
       
-
       


     

       
6
       
6
       
-
       
<div class="flex flex-col p-8 border-ctp-surface0 border w-full h-min relative">

     

       
7
       
7
       
-
       
    <Label name="Contributions"/>

     

       
8
       
8
       
-
       
    <GitHubCalendar client:load username="imabanana80"/>

     

       
9
       
9
       
-
       
</div>

     

···

       
1
       
1
       
 
       
---

     

       
2
       
2
       
-
       
import { Heart, Rocket, Copyright } from "@lucide/astro"

     

       
2
       
2
       
+
       
import { Heart, Rocket, Copyright, Code } from "@lucide/astro"

     

       
3
       
3
       
 
       
---

     

       
4
       
4
       
 
       
<div class="flex justify-between bg-ctp-base p-6 pl-12 pr-12">

     

       
5
       
5
       
-
       
    <span class="inline-flex gap-2">

     

       
5
       
5
       
+
       
    <span class="inline-flex gap-2 items-center">

     

       
6
       
6
       
 
       
        Copyright 

     

       
7
       
7
       
 
       
        <Copyright size="20" class="stroke-ctp-text"/>

     

       
8
       
8
       
 
       
        2026 Banana

     

       
9
       
9
       
 
       
    </span>

     

       
10
       
10
       
-
       
    <span class="inline-flex gap-2">

     

       
10
       
10
       
+
       
    <span class="inline-flex gap-2 items-center">

     

       
11
       
11
       
+
       
        <a href="https://tangled.org/@banana.tngl.sh/mywebsite-2026"

     

       
12
       
12
       
+
       
            class="text-xs text-ctp-overlay0 flex gap-1 hover:underline"><Code size="16" />src</a>

     

       
13
       
13
       
+
       


     

       
14
       
14
       
+
       
    </span>

     

       
15
       
15
       
+
       
    <span class="inline-flex gap-2 items-center">

     

       
11
       
16
       
 
       
        Made with

     

       
12
       
17
       
 
       
        <Heart size="20" class="stroke-ctp-red"/>

     

       
13
       
18
       
 
       
        using Astro

     

···

       
1
       
1
       
-
       
---

     

       
2
       
2
       
-
       
import Btn from "./NavbarLink.astro"

     

       
3
       
3
       
-
       
import { Code } from "@lucide/astro"

     

       
4
       
4
       
-
       


     

       
5
       
5
       
-
       
let href = Astro.url.toString()

     

       
6
       
6
       
-
       
href = href.replace(Astro.url.host.toString(), "")

     

       
7
       
7
       
-
       
href = href.replace("https://", "")

     

       
8
       
8
       
-
       
href = href.replace("http://", "")

     

       
9
       
9
       
-
       
---

     

       
10
       
10
       
-
       
<div class="absolute bg-ctp-base w-full pl-8 pr-8 pt-4 pb-4 flex justify-between rounded-bl-2xl rounded-br-2xl">

     

       
11
       
11
       
-
       
    <div class="flex gap-4 items-center">

     

       
12
       
12
       
-
       
        <a href="/doodlecat.png"><img src="doodlecat.png" width="48px" height="48px" class="rounded-full" /></a>

     

       
13
       
13
       
-
       
        <span class="flex flex-col">

     

       
14
       
14
       
-
       
            <span>~/banana{href}</span>

     

       
15
       
15
       
-
       
            <a href="https://tangled.org/@banana.tngl.sh/mywebsite-2026"

     

       
16
       
16
       
-
       
                class="text-xs text-ctp-overlay0 flex gap-1 hover:underline"><Code size="16" />src</a>

     

       
17
       
17
       
-
       
        </span>

     

       
18
       
18
       
-
       
    </div>

     

       
19
       
19
       
-
       
    <div class="flex gap-6 items-center">

     

       
20
       
20
       
-
       
        <Btn page="home"/>

     

       
21
       
21
       
-
       
        <Btn page="projects"/>

     

       
22
       
22
       
-
       
        <Btn page="experience"/>

     

       
23
       
23
       
-
       
    </div>

     

       
24
       
24
       
-
       
</div>

     

       
25
       
25
       
-
       
<style>

     

       
26
       
26
       
-
       
@reference "../styles/global.css"

     

       
27
       
27
       
-
       
a {

     

       
28
       
28
       
-
       
    @apply ;

     

       
29
       
29
       
-
       
}

     

       
30
       
30
       
-
       
</style>

     

···

       
1
       
1
       
-
       
---

     

       
2
       
2
       
-
       
interface Props {

     

       
3
       
3
       
-
       
    page: String;

     

       
4
       
4
       
-
       
}

     

       
5
       
5
       
-
       
const {page} = Astro.props

     

       
6
       
6
       
-
       
var href = page

     

       
7
       
7
       
-
       
if (href == "home") {

     

       
8
       
8
       
-
       
    href = ""

     

       
9
       
9
       
-
       
}

     

       
10
       
10
       
-
       
---

     

       
11
       
11
       
-
       
<a 

     

       
12
       
12
       
-
       
    href=`/${href}` 

     

       
13
       
13
       
-
       
    class="font-bold

     

       
14
       
14
       
-
       
    text-ctp-yellow hover:text-ctp-blue 

     

       
15
       
15
       
-
       
    hover:underline 

     

       
16
       
16
       
-
       
    ease-in hover:ease-out transition-all

     

       
17
       
17
       
-
       
    ">{page}</a>

     

       
18
       
18
       
-
       


     

       
19
       
19
       
-
       


     

       
20
       
20
       
-
       


     

       
21
       
21
       
-
       


     

···

       
1
       
1
       
-
       
---

     

       
2
       
2
       
-
       
import Label from "./Label.astro"

     

       
3
       
3
       
-
       
import Item from "./PortfolioItem.astro"

     

       
4
       
4
       
-
       
---

     

       
5
       
5
       
-
       


     

       
6
       
6
       
-
       
<div class="flex flex-col p-8 border-ctp-surface0 border w-full h-min relative">

     

       
7
       
7
       
-
       
    <Label name="Pinned"/>

     

       
8
       
8
       
-
       
    <div class="flex flex-wrap">

     

       
9
       
9
       
-
       
        <Item

     

       
10
       
10
       
-
       
            type="project"

     

       
11
       
11
       
-
       
            title="IsleStats"

     

       
12
       
12
       
-
       
            subtitle="An MCC Island Discord statistics bot that renders beautiful stat cards to show off your stats."

     

       
13
       
13
       
-
       
            icon="Archive"

     

       
14
       
14
       
-
       
            href="https://islestats.net"

     

       
15
       
15
       
-
       
            tag="Python"

     

       
16
       
16
       
-
       
            tagcolor="--catppuccin-color-blue"

     

       
17
       
17
       
-
       
            badges={[

     

       
18
       
18
       
-
       
                {

     

       
19
       
19
       
-
       
                    icon: "Github",

     

       
20
       
20
       
-
       
                    href: "https://github.com/islestats",

     

       
21
       
21
       
-
       
                    color: "var(--catppuccin-color-green)"

     

       
22
       
22
       
-
       
                },

     

       
23
       
23
       
-
       
                {

     

       
24
       
24
       
-
       
                    icon: "MessageCircle",

     

       
25
       
25
       
-
       
                    href: "https://discord.gg//islestats",

     

       
26
       
26
       
-
       
                    color: "var(--catppuccin-color-blue)"

     

       
27
       
27
       
-
       
                },

     

       
28
       
28
       
-
       
                {

     

       
29
       
29
       
-
       
                    icon: "Mail",

     

       
30
       
30
       
-
       
                    href: "mailto:contact@islestats.net",

     

       
31
       
31
       
-
       
                    color: "var(--catppuccin-color-maroon)"

     

       
32
       
32
       
-
       
                }

     

       
33
       
33
       
-
       
            ]}

     

       
34
       
34
       
-
       
        />

     

       
35
       
35
       
-
       
        <Item

     

       
36
       
36
       
-
       
            type="team"

     

       
37
       
37
       
-
       
            title="potassium.sh"

     

       
38
       
38
       
-
       
            subtitle="An indie software development studio for the creative and insane, founded by me!"

     

       
39
       
39
       
-
       
            icon="Users"

     

       
40
       
40
       
-
       
            href="https://tangled.org/@banana.tngl.sh/dotfiles"

     

       
41
       
41
       
-
       
            tag="Java"

     

       
42
       
42
       
-
       
            tagcolor="--catppuccin-color-teal"

     

       
43
       
43
       
-
       
            badges={[

     

       
44
       
44
       
-
       
                {

     

       
45
       
45
       
-
       
                    icon: "Mail",

     

       
46
       
46
       
-
       
                    href: "mailto:team@potassium.sh",

     

       
47
       
47
       
-
       
                    color: "var(--catppuccin-color-maroon)"

     

       
48
       
48
       
-
       
                },

     

       
49
       
49
       
-
       
                {

     

       
50
       
50
       
-
       
                    icon: "Spool",

     

       
51
       
51
       
-
       
                    href: "https://tangled.org/@potassium.sh",

     

       
52
       
52
       
-
       
                    color: "var(--catppuccin-color-lavender)"

     

       
53
       
53
       
-
       
                },

     

       
54
       
54
       
-
       
                {

     

       
55
       
55
       
-
       
                    icon: "Bird",

     

       
56
       
56
       
-
       
                    href: "https://bsky.app/profile/potassium.sh",

     

       
57
       
57
       
-
       
                    color: "var(--catppuccin-color-sapphire)"

     

       
58
       
58
       
-
       
                },

     

       
59
       
59
       
-
       
            ]}

     

       
60
       
60
       
-
       
        />

     

       
61
       
61
       
-
       
        <Item

     

       
62
       
62
       
-
       
            type="repo"

     

       
63
       
63
       
-
       
            title="dotfiles"

     

       
64
       
64
       
-
       
            subtitle="My personal configuration dotfiles for endeavouros linux."

     

       
65
       
65
       
-
       
            icon="BookMarked"

     

       
66
       
66
       
-
       
            href="https://tangled.org/@banana.tngl.sh/dotfiles"

     

       
67
       
67
       
-
       
            badges={[

     

       
68
       
68
       
-
       
                {

     

       
69
       
69
       
-
       
                    icon: "Book",

     

       
70
       
70
       
-
       
                    href: "https://wiki.archlinux.org/title/Dotfiles",

     

       
71
       
71
       
-
       
                    color: "var(--catppuccin-color-sapphire)"

     

       
72
       
72
       
-
       
                },

     

       
73
       
73
       
-
       
            ]}

     

       
74
       
74
       
-
       
        />

     

       
75
       
75
       
-
       
    </div>

     

       
76
       
76
       
-
       
</div>

     

···

       
7
       
7
       
 
       


     

       
8
       
8
       
 
       
interface Props {

     

       
9
       
9
       
 
       
    type: string

     

       
10
       
10
       
-
       
    icon: string,

     

       
10
       
10
       
+
       
    icon?: string,

     

       
11
       
11
       
 
       
    title: string,

     

       
12
       
12
       
 
       
    subtitle: string,

     

       
13
       
13
       
 
       
    tag?: string,

     

       
14
       
14
       
 
       
    tagcolor?: string,

     

       
15
       
15
       
 
       
    href: string

     

       
16
       
16
       
-
       
    badges: Badge[]

     

       
16
       
16
       
+
       
    badges?: Badge[]

     

       
17
       
17
       
 
       
}

     

       
18
       
18
       
 
       


     

       
19
       
19
       
-
       
const { type, icon, title, subtitle, tag, tagcolor, href, badges } = Astro.props

     

       
19
       
19
       
+
       
const { type, icon = "Box", title, subtitle, tag, tagcolor, href, badges } = Astro.props

     

       
20
       
20
       
 
       


     

       
21
       
21
       
 
       
var color = "--catppuccin-color-yellow"

     

       
22
       
22
       
 
       
if (type=="project") {

     
···

       
32
       
32
       
 
       
}

     

       
33
       
33
       
 
       
const colorCss = "var(" + color + ")"

     

       
34
       
34
       
 
       


     

       
35
       
35
       
-
       
import LucideIcon from "./LucideIcon.astro";

     

       
35
       
35
       
+
       
var iconName = icon

     

       
36
       
36
       
+
       
if (iconName == "Box") {

     

       
37
       
37
       
+
       
    if (type=="project") {

     

       
38
       
38
       
+
       
        iconName = "Archive" 

     

       
39
       
39
       
+
       
    } else if (type=="repo") {

     

       
40
       
40
       
+
       
        iconName = "BookMarked"

     

       
41
       
41
       
+
       
    } else if (type=="team") {

     

       
42
       
42
       
+
       
        iconName = "Users"

     

       
43
       
43
       
+
       
    } else if (type=="misc") {

     

       
44
       
44
       
+
       
        iconName = "Box"

     

       
45
       
45
       
+
       
    } else if (type=="freelance") {

     

       
46
       
46
       
+
       
        iconName = "ReceiptText"

     

       
47
       
47
       
+
       
    }

     

       
48
       
48
       
+
       
}

     

       
49
       
49
       
+
       


     

       
50
       
50
       
+
       
import LucideIcon from "./LucideIcon.astro"

     

       
36
       
51
       
 
       
import Badgebar from "./Badgebar.astro"

     

       
37
       
52
       
 
       
import Tag from "./Tag.astro"

     

       
38
       
53
       
 
       
---

     

       
39
       
54
       
 
       
<div class="p-4 border border-ctp-surface0 flex flex-col -mt-px w-full">

     

       
40
       
40
       
-
       
    <div class="flex justify-between gap-16">

     

       
55
       
55
       
+
       
    <div class="flex flex-wrap sm:flex-nowrap justify-between gap-2 sm:gap-4">

     

       
41
       
56
       
 
       
        <a href=`${href}` class="flex flex-col gap-1 group">

     

       
42
       
57
       
 
       
            <span class="text-xl flex gap-2 items-center">

     

       
43
       
43
       
-
       
                <LucideIcon name=`${icon}` width="20" height="20" style={`stroke:${colorCss}`} /> 

     

       
58
       
58
       
+
       
                <LucideIcon name=`${iconName}` width="20" height="20" style={`stroke:${colorCss}`} /> 

     

       
44
       
59
       
 
       
                <span class="group-hover:underline font-bold">{title} </span>

     

       
60
       
60
       
+
       
                <span class="hidden md:flex items-center">

     

       
45
       
61
       
 
       
                {tag && tagcolor && (

     

       
46
       
46
       
-
       
                    <Tag text={tag} color={tagcolor} />

     

       
62
       
62
       
+
       
                    <Tag text={tag} color={tagcolor}/>

     

       
47
       
63
       
 
       
                )}

     

       
64
       
64
       
+
       
                </span>

     

       
48
       
65
       
 
       
            </span>

     

       
49
       
66
       
 
       
            <span class="text-sm">

     

       
50
       
67
       
 
       
                <span class="flex gap-1">{subtitle}</span>

     

       
51
       
68
       
 
       
            </span>

     

       
52
       
69
       
 
       
        </a>

     

       
53
       
53
       
-
       
        <Badgebar badges={badges} size="20"/>    

     

       
70
       
70
       
+
       
        <span>

     

       
71
       
71
       
+
       
            { badges && (

     

       
72
       
72
       
+
       
                <Badgebar badges={badges} size="20"/>    

     

       
73
       
73
       
+
       
            )}

     

       
74
       
74
       
+
       
        </span>

     

       
54
       
75
       
 
       
    </div>

     

       
55
       
76
       
 
       
    <div>

     

       
56
       
77
       
 
       
        <slot/>

     

···

       
1
       
1
       
-
       
---

     

       
2
       
2
       
-
       
import Label from '../components/Label.astro';

     

       
3
       
3
       
-
       
import Quote from '../components/Quote.astro'

     

       
4
       
4
       
-
       
import { Github, Spool, Icon } from '@lucide/astro'

     

       
5
       
5
       
-
       
import { butterfly } from '@lucide/lab'

     

       
6
       
6
       
-
       
---

     

       
7
       
7
       
-
       
<div class="flex flex-col col-span-2 border border-ctp-surface0 gap-[-1px] w-full h-min">

     

       
8
       
8
       
-
       
    <span class="p-4 pb-0 border-b border-ctp-surface0 relative">

     

       
9
       
9
       
-
       
        <img src="/banner.png" class="w-full"/>

     

       
10
       
10
       
-
       
    </span>

     

       
11
       
11
       
-
       
    <div class="p-8 pt-12 flex-col flex flex-wrap relative">

     

       
12
       
12
       
-
       
        <img src="doodlecat.png" width="96px" height="96px" 

     

       
13
       
13
       
-
       
            class="rounded-full absolute -top-12 left-8 border-6 border-ctp-mantle" />

     

       
14
       
14
       
-
       
        <span class="text-base flex justify-between w-full flex-wrap gap-2">

     

       
15
       
15
       
-
       
            <span class="flex flex-col">

     

       
16
       
16
       
-
       
                <span class="text-2xl font-bold">Banana</span>

     

       
17
       
17
       
-
       
                <a href="mailto:banana@potassium.sh" class="hover:underline ease-in hover:ease-out transition-all">banana@potassium.sh</a>

     

       
18
       
18
       
-
       
            </span>

     

       
19
       
19
       
-
       
            <span class="flex gap-2 bg-ctp-crust p-2 pl-3 pr-3 rounded-full h-min">

     

       
20
       
20
       
-
       
                <a href="https://github.com/imabanana80">

     

       
21
       
21
       
-
       
                    <Github size="20" 

     

       
22
       
22
       
-
       
                        class="stroke-ctp-green hover:rotate-15 ease-in hover:ease-out transition-transform"/></a>

     

       
23
       
23
       
-
       
                <a href="https://tangled.org/@banana.tngl.sh/">

     

       
24
       
24
       
-
       
                    <Spool size="20" 

     

       
25
       
25
       
-
       
                        class="stroke-ctp-lavender hover:rotate-15 ease-in hover:ease-out transition-transform"/></a>

     

       
26
       
26
       
-
       


     

       
27
       
27
       
-
       
                </a>

     

       
28
       
28
       
-
       
                <a href="https://bsky.app/profile/imabanana80.com">

     

       
29
       
29
       
-
       
                    <Icon iconNode={butterfly} size="20" 

     

       
30
       
30
       
-
       
                        class="stroke-ctp-sapphire hover:rotate-15 ease-in hover:ease-out transition-transform"/></a>

     

       
31
       
31
       
-
       
           </span>

     

       
32
       
32
       
-
       
        </span>

     

       
33
       
33
       
-
       
        <span class="relative p-3 mt-4 border border-ctp-surface0 text-sm">

     

       
34
       
34
       
-
       
            <Label name="Currently"/>

     

       
35
       
35
       
-
       
            Switching to endeavoros | Open for Hire

     

       
36
       
36
       
-
       
        </span>

     

       
37
       
37
       
-
       
        <span class="relative p-3 mt-4 border border-ctp-surface0 text-sm">

     

       
38
       
38
       
-
       
            <Label name="About"/>

     

       
39
       
39
       
-
       
            Hi, I'm Banana, a computer science student and software developer that specialises in 

     

       
40
       
40
       
-
       
            Web Development as well as developing and hosting Minecraft Events.

     

       
41
       
41
       
-
       
        </span>

     

       
42
       
42
       
-
       
        <span class="relative p-3 mt-4 border border-ctp-surface0 text-ctp-subtext0 text-sm">

     

       
43
       
43
       
-
       
            <Label name="Time"/>

     

       
44
       
44
       
-
       
            <span id="clock" class="text-ctp-text"></span> (SGT/UTC+8)

     

       
45
       
45
       
-
       
        </span>

     

       
46
       
46
       
-
       
        <span class="relative p-3 mt-4 border border-ctp-surface0 text-ctp-subtext0 text-sm">

     

       
47
       
47
       
-
       
            <Label name="Languages"/>

     

       
48
       
48
       
-
       
            <span>Java, Python, Golang, HTML/CSS/TS</span>

     

       
49
       
49
       
-
       
        </span>

     

       
50
       
50
       
-
       
        <span class="relative p-3 -mt-px border border-ctp-surface0 text-ctp-subtext0 text-sm">

     

       
51
       
51
       
-
       
            <Label name="Frameworks"/>

     

       
52
       
52
       
-
       
            <span>PaperMC, Astro, Tailwindcss</span>

     

       
53
       
53
       
-
       
        </span>

     

       
54
       
54
       
-
       
        <span class="relative p-3 -mt-px border border-ctp-surface0 text-ctp-subtext0 text-sm">

     

       
55
       
55
       
-
       
            <Label name="Tools"/>

     

       
56
       
56
       
-
       
            <span>Neovim, IntellIJ, Figma, VSC*de</span>

     

       
57
       
57
       
-
       
        </span>

     

       
58
       
58
       
-
       
        <div class="mt-4 flex">

     

       
59
       
59
       
-
       
            <Quote />

     

       
60
       
60
       
-
       
        </div>

     

       
61
       
61
       
-
       
    </div >

     

       
62
       
62
       
-
       
</div>

     

       
63
       
63
       
-
       


     

       
64
       
64
       
-
       


     

       
65
       
65
       
-
       
<script>

     

       
66
       
66
       
-
       
const clockElement: HTMLElement | null = document.getElementById("clock");

     

       
67
       
67
       
-
       


     

       
68
       
68
       
-
       
if (!clockElement) {

     

       
69
       
69
       
-
       
    console.error(`Error: Clock element with ID "clock" not found.`);

     

       
70
       
70
       
-
       
}

     

       
71
       
71
       
-
       


     

       
72
       
72
       
-
       
const displayTime = (): void => {

     

       
73
       
73
       
-
       
    const now: Date = new Date();

     

       
74
       
74
       
-
       


     

       
75
       
75
       
-
       
    const options: Intl.DateTimeFormatOptions = {

     

       
76
       
76
       
-
       
    hour: '2-digit',     

     

       
77
       
77
       
-
       
    minute: '2-digit',  

     

       
78
       
78
       
-
       
    second: '2-digit', 

     

       
79
       
79
       
-
       
    hour12: false,    

     

       
80
       
80
       
-
       
    timeZone: "Asia/Singapore"

     

       
81
       
81
       
-
       
    };

     

       
82
       
82
       
-
       


     

       
83
       
83
       
-
       
    const timeString: string = now.toLocaleTimeString('en-US', options);

     

       
84
       
84
       
-
       
    clockElement.textContent = timeString;

     

       
85
       
85
       
-
       
};

     

       
86
       
86
       
-
       
displayTime();

     

       
87
       
87
       
-
       
setInterval(displayTime, 1000);

     

       
88
       
88
       
-
       
</script>

     

···

       
1
       
1
       
-
       
---

     

       
2
       
2
       
-
       
import Label from "../components/Label.astro"

     

       
3
       
3
       
-
       
---

     

       
4
       
4
       
-
       
<script>

     

       
5
       
5
       
-
       
    interface Quote {

     

       
6
       
6
       
-
       
        quote: string,

     

       
7
       
7
       
-
       
        quotee: string,

     

       
8
       
8
       
-
       
    }

     

       
9
       
9
       
-
       
    const quoteElement = document.getElementById("quote") as HTMLElement

     

       
10
       
10
       
-
       
    const quoteeElement = document.getElementById("quotee") as HTMLElement

     

       
11
       
11
       
-
       


     

       
12
       
12
       
-
       
    const quotes: Quote[] = [

     

       
13
       
13
       
-
       
        { quote: "America is a nation that can be defined in a single word: asufutimaehaehfutbw", quotee: "Joseph Robinette Biden Jr."},

     

       
14
       
14
       
-
       
        { quote: "What if they- what if anything- what if a bomb drops on your head right now?", quotee: "Donald John Trump"},

     

       
15
       
15
       
-
       
        { quote: "Heh heh heh, oh it's focused. I say it's err- I think it's- I- I- I haven't-- look.", quotee: "Joseph Robinette Biden Jr."},

     

       
16
       
16
       
-
       
        { quote: "the color orange is named after the fruit", quotee: "Elon Reeve Musk" },

     

       
17
       
17
       
-
       
        { quote: "I'm excited about electric school busses, I love electric school busses, I just love them..", quotee: "Kamala Devi Harris"},

     

       
18
       
18
       
-
       
        { quote: "One thing that really encourages me is AI. I love AI. I love ChatGPT. I love it. ChatGPT is frankly fantastic.", quotee: "Alexander Boris de Pfeffel Johnson" },

     

       
19
       
19
       
-
       
    ]

     

       
20
       
20
       
-
       
    const quote: Quote = quotes[Math.floor(Math.random()*quotes.length)]

     

       
21
       
21
       
-
       


     

       
22
       
22
       
-
       
    quoteElement.textContent = '"' + quote.quote + '"'

     

       
23
       
23
       
-
       
    quoteeElement.textContent = "- " + quote.quotee

     

       
24
       
24
       
-
       
</script>

     

       
25
       
25
       
-
       
<span class="relative p-3 -mt-px border border-ctp-surface0 text-sm w-full">

     

       
26
       
26
       
-
       
    <Label name="Quote"/>

     

       
27
       
27
       
-
       
    <div class="flex flex-col text-sm gap-1">

     

       
28
       
28
       
-
       
        <span id="quote" class="italic"></span>

     

       
29
       
29
       
-
       
        <span id="quotee" class="w-full text-right"></span>

     

       
30
       
30
       
-
       
    </div>

     

       
31
       
31
       
-
       
</span>

     

···

       
7
       
7
       
 
       
const { text, color } = Astro.props

     

       
8
       
8
       
 
       
const colorCss = "var(" + color + "-700)"

     

       
9
       
9
       
 
       
---

     

       
10
       
10
       
-
       
<span class="p-1 pl-2 pr-2 text-xs rounded-full scale-95 font-bold bg-ctp-base border border-ctp-surface0" 

     

       
10
       
10
       
+
       
<span class="p-1 pl-2 pr-2 text-xs rounded-full font-bold bg-ctp-base border border-ctp-surface0" 

     

       
11
       
11
       
 
       
    style={`color:${colorCss};`}>

     

       
12
       
12
       
 
       
    {text}

     

       
13
       
13
       
 
       
</span>

     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Btn from "./NavbarLink.astro"

     

       
3
       
3
       
+
       


     

       
4
       
4
       
+
       
let href = Astro.url.toString()

     

       
5
       
5
       
+
       
href = href.replace(Astro.url.host.toString(), "")

     

       
6
       
6
       
+
       
href = href.replace("https://", "")

     

       
7
       
7
       
+
       
href = href.replace("http://", "")

     

       
8
       
8
       
+
       
---

     

       
9
       
9
       
+
       
<div class="fixed z-40 bg-ctp-base 

     

       
10
       
10
       
+
       
    left-[2%] right-[2%] md:left-[4%] md:right-[4%] xl:left-[8%] xl:right-[8%] 

     

       
11
       
11
       
+
       
    pl-8 pr-8 pt-4 pb-4 flex justify-between rounded-bl-2xl rounded-br-2xl squircle">

     

       
12
       
12
       
+
       
    <div class="flex gap-4 items-center">

     

       
13
       
13
       
+
       
        <span class="flex flex-col">

     

       
14
       
14
       
+
       
            <span>~/banana{href}</span>

     

       
15
       
15
       
+
       
        </span>

     

       
16
       
16
       
+
       
    </div>

     

       
17
       
17
       
+
       
    <div class="flex gap-6 items-center">

     

       
18
       
18
       
+
       
        <Btn page="home"/>

     

       
19
       
19
       
+
       
        <Btn page="projects"/>

     

       
20
       
20
       
+
       
    </div>

     

       
21
       
21
       
+
       
</div>

     

       
22
       
22
       
+
       
<style>

     

       
23
       
23
       
+
       
@reference "../../styles/global.css"

     

       
24
       
24
       
+
       
a {

     

       
25
       
25
       
+
       
    @apply ;

     

       
26
       
26
       
+
       
}

     

       
27
       
27
       
+
       
</style>

     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
interface Props {

     

       
3
       
3
       
+
       
    page: String;

     

       
4
       
4
       
+
       
}

     

       
5
       
5
       
+
       
const {page} = Astro.props

     

       
6
       
6
       
+
       
var href = page

     

       
7
       
7
       
+
       
if (href == "home") {

     

       
8
       
8
       
+
       
    href = ""

     

       
9
       
9
       
+
       
}

     

       
10
       
10
       
+
       
---

     

       
11
       
11
       
+
       
<a 

     

       
12
       
12
       
+
       
    href=`/${href}` 

     

       
13
       
13
       
+
       
    class="font-bold

     

       
14
       
14
       
+
       
    text-ctp-yellow hover:text-ctp-blue 

     

       
15
       
15
       
+
       
    hover:underline 

     

       
16
       
16
       
+
       
    ease-in hover:ease-out transition-all

     

       
17
       
17
       
+
       
    ">{page}</a>

     

       
18
       
18
       
+
       


     

       
19
       
19
       
+
       


     

       
20
       
20
       
+
       


     

       
21
       
21
       
+
       


     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Item from "../PortfolioItem.astro"

     

       
3
       
3
       
+
       
---

     

       
4
       
4
       
+
       
<Item

     

       
5
       
5
       
+
       
    type="freelance"

     

       
6
       
6
       
+
       
    title="BiomeBattle"

     

       
7
       
7
       
+
       
    subtitle="A modern Minecraft creator event. As a developer, I helped with minor improvements to the cosmetics system."

     

       
8
       
8
       
+
       
    icon="Earth"

     

       
9
       
9
       
+
       
    href="https://biomebattle.xyz/"

     

       
10
       
10
       
+
       
    tag="Java"

     

       
11
       
11
       
+
       
    tagcolor="--catppuccin-color-teal"

     

       
12
       
12
       
+
       
    badges={[

     

       
13
       
13
       
+
       
        {

     

       
14
       
14
       
+
       
            icon: "Bird",

     

       
15
       
15
       
+
       
            href: "https://x.com/biomebattle",

     

       
16
       
16
       
+
       
            color: "var(--catppuccin-color-sapphire)"

     

       
17
       
17
       
+
       
        },

     

       
18
       
18
       
+
       
        {

     

       
19
       
19
       
+
       
            icon: "Github",

     

       
20
       
20
       
+
       
            href: "https://github.com/biomebattle",

     

       
21
       
21
       
+
       
            color: "var(--catppuccin-color-green)"

     

       
22
       
22
       
+
       
        },

     

       
23
       
23
       
+
       
        {

     

       
24
       
24
       
+
       
            icon: "MessageCircle",

     

       
25
       
25
       
+
       
            href: "https://biomebattle.xyz/discord",

     

       
26
       
26
       
+
       
            color: "var(--catppuccin-color-blue)"

     

       
27
       
27
       
+
       
        },

     

       
28
       
28
       
+
       
        {

     

       
29
       
29
       
+
       
            icon: "Youtube",

     

       
30
       
30
       
+
       
            href: "https://youtube.com/@BiomeBattle",

     

       
31
       
31
       
+
       
            color: "var(--catppuccin-color-red)"

     

       
32
       
32
       
+
       
        },

     

       
33
       
33
       
+
       
    ]}

     

       
34
       
34
       
+
       
/>

     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Item from "../PortfolioItem.astro"

     

       
3
       
3
       
+
       
export const priority = 1;

     

       
4
       
4
       
+
       
---

     

       
5
       
5
       
+
       
<Item

     

       
6
       
6
       
+
       
    type="repo"

     

       
7
       
7
       
+
       
    title="dotfiles"

     

       
8
       
8
       
+
       
    subtitle="My personal configuration dotfiles for endeavouros linux."

     

       
9
       
9
       
+
       
    href="https://tangled.org/@banana.tngl.sh/dotfiles"

     

       
10
       
10
       
+
       
    badges={[

     

       
11
       
11
       
+
       
        {

     

       
12
       
12
       
+
       
            icon: "Github",

     

       
13
       
13
       
+
       
            href: "https://github.com/imabanana80/dotfiles",

     

       
14
       
14
       
+
       
            color: "var(--catppuccin-color-green)"

     

       
15
       
15
       
+
       
        },

     

       
16
       
16
       
+
       


     

       
17
       
17
       
+
       
        {

     

       
18
       
18
       
+
       
            icon: "Book",

     

       
19
       
19
       
+
       
            href: "https://wiki.archlinux.org/title/Dotfiles",

     

       
20
       
20
       
+
       
            color: "var(--catppuccin-color-sapphire)"

     

       
21
       
21
       
+
       
        },

     

       
22
       
22
       
+
       
    ]}

     

       
23
       
23
       
+
       
/>

     

       
24
       
24
       
+
       


     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Item from "../PortfolioItem.astro"

     

       
3
       
3
       
+
       
---

     

       
4
       
4
       
+
       
<Item

     

       
5
       
5
       
+
       
    type="project"

     

       
6
       
6
       
+
       
    title="IsleStats"

     

       
7
       
7
       
+
       
    subtitle="An MCC Island Discord statistics bot that renders beautiful stat cards to show off your stats."

     

       
8
       
8
       
+
       
    href="https://islestats.net"

     

       
9
       
9
       
+
       
    tag="Python"

     

       
10
       
10
       
+
       
    tagcolor="--catppuccin-color-blue"

     

       
11
       
11
       
+
       
    badges={[

     

       
12
       
12
       
+
       
        {

     

       
13
       
13
       
+
       
            icon: "Github",

     

       
14
       
14
       
+
       
            href: "https://github.com/islestats",

     

       
15
       
15
       
+
       
            color: "var(--catppuccin-color-green)"

     

       
16
       
16
       
+
       
        },

     

       
17
       
17
       
+
       
        {

     

       
18
       
18
       
+
       
            icon: "MessageCircle",

     

       
19
       
19
       
+
       
            href: "https://discord.gg//islestats",

     

       
20
       
20
       
+
       
            color: "var(--catppuccin-color-blue)"

     

       
21
       
21
       
+
       
        },

     

       
22
       
22
       
+
       
        {

     

       
23
       
23
       
+
       
            icon: "Mail",

     

       
24
       
24
       
+
       
            href: "mailto:contact@islestats.net",

     

       
25
       
25
       
+
       
            color: "var(--catppuccin-color-maroon)"

     

       
26
       
26
       
+
       
        }

     

       
27
       
27
       
+
       
    ]}

     

       
28
       
28
       
+
       
/>

     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Item from "../PortfolioItem.astro"

     

       
3
       
3
       
+
       
---

     

       
4
       
4
       
+
       
<Item

     

       
5
       
5
       
+
       
    type="repo"

     

       
6
       
6
       
+
       
    title="my-website-2026"

     

       
7
       
7
       
+
       
    subtitle="My portfolio website for the year 2026 built with Astro. This is the current website you're on."

     

       
8
       
8
       
+
       
    href="https://beta.imabanana80.com/"

     

       
9
       
9
       
+
       
    tag="Astro"

     

       
10
       
10
       
+
       
    tagcolor="--catppuccin-color-pink"

     

       
11
       
11
       
+
       
    badges={[

     

       
12
       
12
       
+
       
        {

     

       
13
       
13
       
+
       
            icon: "Spool",

     

       
14
       
14
       
+
       
            href: "https://tangled.org/@banana.tngl.sh/mywebsite-2026",

     

       
15
       
15
       
+
       
            color: "var(--catppuccin-color-lavender)"

     

       
16
       
16
       
+
       
        },

     

       
17
       
17
       
+
       
        {

     

       
18
       
18
       
+
       
            icon: "Github",

     

       
19
       
19
       
+
       
            href: "https://github.com/imabanana80/mywebsite-2026",

     

       
20
       
20
       
+
       
            color: "var(--catppuccin-color-green)"

     

       
21
       
21
       
+
       
        },

     

       
22
       
22
       
+
       
    ]}

     

       
23
       
23
       
+
       
/>

     

       
24
       
24
       
+
       


     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Item from "../PortfolioItem.astro"

     

       
3
       
3
       
+
       
---

     

       
4
       
4
       
+
       
<Item

     

       
5
       
5
       
+
       
    type="repo"

     

       
6
       
6
       
+
       
    title="passgen-astro"

     

       
7
       
7
       
+
       
    subtitle="Static client-based password phrase generator built with astro."

     

       
8
       
8
       
+
       
    href="https://pass.imabanana80.com"

     

       
9
       
9
       
+
       
    tag="Astro"

     

       
10
       
10
       
+
       
    tagcolor="--catppuccin-color-pink"

     

       
11
       
11
       
+
       
    badges={[

     

       
12
       
12
       
+
       
        {

     

       
13
       
13
       
+
       
            icon: "Github",

     

       
14
       
14
       
+
       
            href: "https://github.com/imabanana80/passgen-astro",

     

       
15
       
15
       
+
       
            color: "var(--catppuccin-color-green)"

     

       
16
       
16
       
+
       
        },

     

       
17
       
17
       
+
       
    ]}

     

       
18
       
18
       
+
       
/>

     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Item from "../PortfolioItem.astro"

     

       
3
       
3
       
+
       
export const priority = 2;

     

       
4
       
4
       
+
       
---

     

       
5
       
5
       
+
       
<Item

     

       
6
       
6
       
+
       
    type="team"

     

       
7
       
7
       
+
       
    title="potassium.sh"

     

       
8
       
8
       
+
       
    subtitle="An indie software development studio for the creative and insane, founded by me, with some friends!"

     

       
9
       
9
       
+
       
    href="https://potassium.sh"

     

       
10
       
10
       
+
       
    tag="Founder"

     

       
11
       
11
       
+
       
    tagcolor="--catppuccin-color-rosewater"

     

       
12
       
12
       
+
       
    badges={[

     

       
13
       
13
       
+
       
        {

     

       
14
       
14
       
+
       
            icon: "Mail",

     

       
15
       
15
       
+
       
            href: "mailto:team@potassium.sh",

     

       
16
       
16
       
+
       
            color: "var(--catppuccin-color-maroon)"

     

       
17
       
17
       
+
       
        },

     

       
18
       
18
       
+
       
        {

     

       
19
       
19
       
+
       
            icon: "Spool",

     

       
20
       
20
       
+
       
            href: "https://tangled.org/@potassium.sh",

     

       
21
       
21
       
+
       
            color: "var(--catppuccin-color-lavender)"

     

       
22
       
22
       
+
       
        },

     

       
23
       
23
       
+
       
        {

     

       
24
       
24
       
+
       
            icon: "Bird",

     

       
25
       
25
       
+
       
            href: "https://bsky.app/profile/potassium.sh",

     

       
26
       
26
       
+
       
            color: "var(--catppuccin-color-sapphire)"

     

       
27
       
27
       
+
       
        },

     

       
28
       
28
       
+
       
    ]}

     

       
29
       
29
       
+
       
/>

     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Item from "../PortfolioItem.astro"

     

       
3
       
3
       
+
       
---

     

       
4
       
4
       
+
       
<Item

     

       
5
       
5
       
+
       
    type="team"

     

       
6
       
6
       
+
       
    title="SMP Sales"

     

       
7
       
7
       
+
       
    subtitle="A Minecraft SMP freelancing hub, from developers to artists, all you'll need to start an SMP of your own."

     

       
8
       
8
       
+
       
    href="https://discord.gg/DUa3asXpvs"

     

       
9
       
9
       
+
       
    tag="Developer"

     

       
10
       
10
       
+
       
    tagcolor="--catppuccin-color-rosewater"

     

       
11
       
11
       
+
       
    badges={[

     

       
12
       
12
       
+
       
        {

     

       
13
       
13
       
+
       
            icon: "Github",

     

       
14
       
14
       
+
       
            href: "https://github.com/smpsales",

     

       
15
       
15
       
+
       
            color: "var(--catppuccin-color-green)"

     

       
16
       
16
       
+
       
        },

     

       
17
       
17
       
+
       
    ]}

     

       
18
       
18
       
+
       
/>

     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Item from "../PortfolioItem.astro"

     

       
3
       
3
       
+
       
---

     

       
4
       
4
       
+
       
<Item

     

       
5
       
5
       
+
       
    type="project"

     

       
6
       
6
       
+
       
    title="Status Page"

     

       
7
       
7
       
+
       
    subtitle="A custom status page design that could automatically fetch data from a custom api to display live information."

     

       
8
       
8
       
+
       
    href="https://status.imabanana80.com"

     

       
9
       
9
       
+
       
    tag="Astro"

     

       
10
       
10
       
+
       
    tagcolor="--catppuccin-color-pink"

     

       
11
       
11
       
+
       
/>

     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Label from "../Label.astro"

     

       
3
       
3
       
+
       
import GitHubCalendar from "../GithubCalendar"

     

       
4
       
4
       
+
       
---

     

       
5
       
5
       
+
       


     

       
6
       
6
       
+
       
<div class="flex flex-col p-8 border-ctp-surface0 border w-full h-min relative">

     

       
7
       
7
       
+
       
    <Label name="Contributions"/>

     

       
8
       
8
       
+
       
    <GitHubCalendar client:load username="imabanana80"/>

     

       
9
       
9
       
+
       
</div>

     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Label from "../Label.astro"

     

       
3
       
3
       
+
       
import { Disc } from "@lucide/astro"

     

       
4
       
4
       
+
       
---

     

       
5
       
5
       
+
       
<div class="border border-ctp-surface0 p-8 pt-6 pb-6 relative">

     

       
6
       
6
       
+
       
    <Label name="Music Player" />

     

       
7
       
7
       
+
       
    <div id="music">

     

       
8
       
8
       
+
       
        <audio

     

       
9
       
9
       
+
       
            id="audio"

     

       
10
       
10
       
+
       
            controls

     

       
11
       
11
       
+
       
            src="/celeste_exhale.mp3"

     

       
12
       
12
       
+
       
            class="hidden"

     

       
13
       
13
       
+
       
        ></audio>

     

       
14
       
14
       
+
       
        <div class="mb-1">

     

       
15
       
15
       
+
       
            <span class="text-base flex gap-2 items-center w-fit">

     

       
16
       
16
       
+
       
                    <Disc size="20" class="stroke-ctp-pink"/>

     

       
17
       
17
       
+
       
                Celeste - Exhale

     

       
18
       
18
       
+
       
            <span class="text-sm text-ctp-overlay0">by Lena Raine</span>

     

       
19
       
19
       
+
       
            </span>

     

       
20
       
20
       
+
       
        </div>

     

       
21
       
21
       
+
       
        <div id="controls" class="flex gap-1">

     

       
22
       
22
       
+
       
            <button id="control-button" class=""><img id="control-img" src="/play.svg"></button>

     

       
23
       
23
       
+
       
            <div id="progress-bar" class="self-center border border-ctp-surface1 w-full h-1">

     

       
24
       
24
       
+
       
                <div id="progress" class="bg-ctp-subtext0 h-[0.25rem] w-0"></div>

     

       
25
       
25
       
+
       
            </div>

     

       
26
       
26
       
+
       
        </div>

     

       
27
       
27
       
+
       
    </div>

     

       
28
       
28
       
+
       
</div>

     

       
29
       
29
       
+
       
<script>

     

       
30
       
30
       
+
       
    const controlButton = document.getElementById("control-button") as HTMLElement

     

       
31
       
31
       
+
       
    const controlImg = document.getElementById("control-img") as HTMLImageElement

     

       
32
       
32
       
+
       
    const audio = document.getElementById("audio") as HTMLAudioElement

     

       
33
       
33
       
+
       
    const progressBar = document.getElementById("progress-bar") as HTMLElement

     

       
34
       
34
       
+
       
    const progress = document.getElementById("progress") as HTMLElement

     

       
35
       
35
       
+
       


     

       
36
       
36
       
+
       
    controlButton.addEventListener("click", () => {

     

       
37
       
37
       
+
       
        if (audio.paused) {

     

       
38
       
38
       
+
       
            audio.play();

     

       
39
       
39
       
+
       
            controlImg.src = "/pause.svg"

     

       
40
       
40
       
+
       
        } else {

     

       
41
       
41
       
+
       
            audio.pause();

     

       
42
       
42
       
+
       
            controlImg.src = "/play.svg"

     

       
43
       
43
       
+
       
        }

     

       
44
       
44
       
+
       
    });

     

       
45
       
45
       
+
       


     

       
46
       
46
       
+
       
    audio.addEventListener("timeupdate", () => {

     

       
47
       
47
       
+
       
        progress.style.width = `${(audio.currentTime / audio.duration) * 100}%`;

     

       
48
       
48
       
+
       
    });

     

       
49
       
49
       
+
       


     

       
50
       
50
       
+
       
    audio.addEventListener("ended", () => {

     

       
51
       
51
       
+
       
        audio.currentTime = 0;

     

       
52
       
52
       
+
       
        progress.style.width = "0%";

     

       
53
       
53
       
+
       
        audio.play();

     

       
54
       
54
       
+
       
    });

     

       
55
       
55
       
+
       


     

       
56
       
56
       
+
       
    progressBar.addEventListener("click", (e) => {

     

       
57
       
57
       
+
       
        const clickPosition =

     

       
58
       
58
       
+
       
            (e.offsetX / progressBar.clientWidth) * audio.duration;

     

       
59
       
59
       
+
       
        audio.currentTime = clickPosition;

     

       
60
       
60
       
+
       
    });

     

       
61
       
61
       
+
       
</script>

     

       
62
       
62
       
+
       


     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Label from "../Label.astro"

     

       
3
       
3
       
+
       
import Dotfiles from "../projects/Dotfiles.astro"

     

       
4
       
4
       
+
       
import IsleStats from "../projects/IsleStats.astro"

     

       
5
       
5
       
+
       
import Potassium from "../projects/PotassiumSh.astro"

     

       
6
       
6
       
+
       
---

     

       
7
       
7
       
+
       


     

       
8
       
8
       
+
       
<div class="flex flex-col p-8 border-ctp-surface0 border w-full h-min relative">

     

       
9
       
9
       
+
       
    <Label name="Pinned"/>

     

       
10
       
10
       
+
       
    <div class="flex flex-wrap">

     

       
11
       
11
       
+
       
        <IsleStats/>

     

       
12
       
12
       
+
       
        <Potassium />

     

       
13
       
13
       
+
       
        <Dotfiles />

     

       
14
       
14
       
+
       
    </div>

     

       
15
       
15
       
+
       
</div>

     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Label from '../Label.astro';

     

       
3
       
3
       
+
       
import Quote from './Quote.astro'

     

       
4
       
4
       
+
       
import BadgeBar from "../Badgebar.astro"

     

       
5
       
5
       
+
       
import Butterfly from "../../assets/butterfly.svg"

     

       
6
       
6
       
+
       


     

       
7
       
7
       
+
       
let home = "hidden lg:flex" 

     

       
8
       
8
       
+
       
if (Astro.url.pathname == "/") {

     

       
9
       
9
       
+
       
    home = "flex"

     

       
10
       
10
       
+
       
}

     

       
11
       
11
       
+
       
---

     

       
12
       
12
       
+
       
<div class=`${home} flex-col md:col-span-2 border border-ctp-surface0 gap-[-1px] w-full h-min`>

     

       
13
       
13
       
+
       
    <span class="p-4 pb-0 border-b border-ctp-surface0 relative">

     

       
14
       
14
       
+
       
        <img src="/banner.png" class="w-full"/>

     

       
15
       
15
       
+
       
    </span>

     

       
16
       
16
       
+
       
    <div class="p-8 pt-12 flex-col flex flex-wrap relative">

     

       
17
       
17
       
+
       
        <img src="/doodlecat.png" width="96px" height="96px" 

     

       
18
       
18
       
+
       
            class="rounded-full absolute -top-12 left-8 border-6 border-ctp-mantle" />

     

       
19
       
19
       
+
       
        <span class="text-base flex justify-between w-full flex-wrap gap-2">

     

       
20
       
20
       
+
       
            <span class="flex flex-col">

     

       
21
       
21
       
+
       
                <span class="text-2xl font-bold">Banana</span>

     

       
22
       
22
       
+
       
                <a href="mailto:banana@potassium.sh" class="hover:underline ease-in hover:ease-out transition-all">

     

       
23
       
23
       
+
       
                    banana@potassium.sh</a>

     

       
24
       
24
       
+
       
            </span>

     

       
25
       
25
       
+
       
            <BadgeBar 

     

       
26
       
26
       
+
       
                badges={[

     

       
27
       
27
       
+
       
                    {

     

       
28
       
28
       
+
       
                        icon: "Github",

     

       
29
       
29
       
+
       
                        color: "var(--catppuccin-color-green)",

     

       
30
       
30
       
+
       
                        href: "https://github.com/imabanana80"

     

       
31
       
31
       
+
       
                    },

     

       
32
       
32
       
+
       
                    {

     

       
33
       
33
       
+
       
                        icon: "Spool",

     

       
34
       
34
       
+
       
                        color: "var(--catppuccin-color-lavender)",

     

       
35
       
35
       
+
       
                        href: "https://tangled.org/@banana.tngl.sh"

     

       
36
       
36
       
+
       
                    },

     

       
37
       
37
       
+
       
                    {

     

       
38
       
38
       
+
       
                        icon: Butterfly,

     

       
39
       
39
       
+
       
                        color: "var(--catppuccin-color-sapphire)",

     

       
40
       
40
       
+
       
                        href: "https://bsky.app/profile/imabanana80.com",

     

       
41
       
41
       
+
       
                        svg: true

     

       
42
       
42
       
+
       
                    }

     

       
43
       
43
       
+
       
                ]}

     

       
44
       
44
       
+
       
                size='20'

     

       
45
       
45
       
+
       
            />

     

       
46
       
46
       
+
       
        </span>

     

       
47
       
47
       
+
       
        <span class="relative p-3 mt-4 border border-ctp-surface0 text-sm">

     

       
48
       
48
       
+
       
            <Label name="Currently"/>

     

       
49
       
49
       
+
       
            Switching to endeavoros | Open for Hire

     

       
50
       
50
       
+
       
        </span>

     

       
51
       
51
       
+
       
        <span class="relative p-3 mt-4 border border-ctp-surface0 text-sm">

     

       
52
       
52
       
+
       
            <Label name="About"/>

     

       
53
       
53
       
+
       
            Hi, I'm Banana, a computer science student and software developer that specialises in 

     

       
54
       
54
       
+
       
            Web Development as well as developing and hosting Minecraft Events.

     

       
55
       
55
       
+
       
        </span>

     

       
56
       
56
       
+
       
        <span class="relative p-3 mt-4 border border-ctp-surface0 text-ctp-subtext0 text-sm">

     

       
57
       
57
       
+
       
            <Label name="Time"/>

     

       
58
       
58
       
+
       
            <span id="clock" class="text-ctp-text"></span> (SGT/UTC+8)

     

       
59
       
59
       
+
       
        </span>

     

       
60
       
60
       
+
       
        <span class="relative p-3 mt-4 border border-ctp-surface0 text-sm">

     

       
61
       
61
       
+
       
            <Label name="Languages"/>

     

       
62
       
62
       
+
       
            <span>Java, Python, Golang, HTML/CSS/TS</span>

     

       
63
       
63
       
+
       
        </span>

     

       
64
       
64
       
+
       
        <span class="relative p-3 -mt-px border border-ctp-surface0 text-sm">

     

       
65
       
65
       
+
       
            <Label name="Frameworks"/>

     

       
66
       
66
       
+
       
            <span>PaperMC, Astro, Tailwindcss</span>

     

       
67
       
67
       
+
       
        </span>

     

       
68
       
68
       
+
       
        <span class="relative p-3 -mt-px border border-ctp-surface0 text-sm">

     

       
69
       
69
       
+
       
            <Label name="Tools"/>

     

       
70
       
70
       
+
       
            <span>Neovim, IntellIJ, Figma, VSC*de</span>

     

       
71
       
71
       
+
       
        </span>

     

       
72
       
72
       
+
       
        <div class="mt-4 flex">

     

       
73
       
73
       
+
       
            <Quote />

     

       
74
       
74
       
+
       
        </div>

     

       
75
       
75
       
+
       
    </div >

     

       
76
       
76
       
+
       
</div>

     

       
77
       
77
       
+
       


     

       
78
       
78
       
+
       


     

       
79
       
79
       
+
       
<script>

     

       
80
       
80
       
+
       
const clockElement: HTMLElement | null = document.getElementById("clock");

     

       
81
       
81
       
+
       


     

       
82
       
82
       
+
       
if (!clockElement) {

     

       
83
       
83
       
+
       
    console.error(`Error: Clock element with ID "clock" not found.`);

     

       
84
       
84
       
+
       
}

     

       
85
       
85
       
+
       


     

       
86
       
86
       
+
       
const displayTime = (): void => {

     

       
87
       
87
       
+
       
    const now: Date = new Date();

     

       
88
       
88
       
+
       


     

       
89
       
89
       
+
       
    const options: Intl.DateTimeFormatOptions = {

     

       
90
       
90
       
+
       
    hour: '2-digit',     

     

       
91
       
91
       
+
       
    minute: '2-digit',  

     

       
92
       
92
       
+
       
    second: '2-digit', 

     

       
93
       
93
       
+
       
    hour12: false,    

     

       
94
       
94
       
+
       
    timeZone: "Asia/Singapore"

     

       
95
       
95
       
+
       
    };

     

       
96
       
96
       
+
       


     

       
97
       
97
       
+
       
    const timeString: string = now.toLocaleTimeString('en-US', options);

     

       
98
       
98
       
+
       
    clockElement.textContent = timeString;

     

       
99
       
99
       
+
       
};

     

       
100
       
100
       
+
       
displayTime();

     

       
101
       
101
       
+
       
setInterval(displayTime, 1000);

     

       
102
       
102
       
+
       
</script>

     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Label from "../Label.astro"

     

       
3
       
3
       
+
       
let projects = Object.values(import.meta.glob('../projects/*.astro', { eager: true }));

     

       
4
       
4
       
+
       


     

       
5
       
5
       
+
       
projects = projects.sort((a, b) => {

     

       
6
       
6
       
+
       
    const projectA = a.priority ?? Infinity;

     

       
7
       
7
       
+
       
    const projectB = b.priority ?? Infinity;

     

       
8
       
8
       
+
       


     

       
9
       
9
       
+
       
    return projectA - projectB

     

       
10
       
10
       
+
       
})

     

       
11
       
11
       
+
       
---

     

       
12
       
12
       
+
       
<div class="flex flex-col p-8 border-ctp-surface0 border w-full h-min relative">

     

       
13
       
13
       
+
       
    <Label name="Projects"/>

     

       
14
       
14
       
+
       
    <div class="flex flex-wrap gap-4">

     

       
15
       
15
       
+
       
        {projects.map(Project => (

     

       
16
       
16
       
+
       
            <Project.default />

     

       
17
       
17
       
+
       
        ))}

     

       
18
       
18
       
+
       
    </div>

     

       
19
       
19
       
+
       
</div>

     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Label from "../Label.astro"

     

       
3
       
3
       
+
       
---

     

       
4
       
4
       
+
       
<script>

     

       
5
       
5
       
+
       
    interface Quote {

     

       
6
       
6
       
+
       
        quote: string,

     

       
7
       
7
       
+
       
        quotee: string,

     

       
8
       
8
       
+
       
    }

     

       
9
       
9
       
+
       
    const quoteElement = document.getElementById("quote") as HTMLElement

     

       
10
       
10
       
+
       
    const quoteeElement = document.getElementById("quotee") as HTMLElement

     

       
11
       
11
       
+
       


     

       
12
       
12
       
+
       
    const quotes: Quote[] = [

     

       
13
       
13
       
+
       
        { quote: "America is a nation that can be defined in a single word: asufutimaehaehfutbw", quotee: "Joseph Robinette Biden Jr."},

     

       
14
       
14
       
+
       
        { quote: "What if they- what if anything- what if a bomb drops on your head right now?", quotee: "Donald John Trump"},

     

       
15
       
15
       
+
       
        { quote: "This is a tough hurricane. One of the wettest we've ever seen from the standpoint of water.", quotee: "Donald John Trump"},

     

       
16
       
16
       
+
       
        { quote: "Heh heh heh, oh it's focused. I say it's err- I think it's- I- I- I haven't-- look.", quotee: "Joseph Robinette Biden Jr."},

     

       
17
       
17
       
+
       
        { quote: "the color orange is named after the fruit", quotee: "Elon Reeve Musk" },

     

       
18
       
18
       
+
       
        { quote: "I'm excited about electric school busses, I love electric school busses, I just love them..", quotee: "Kamala Devi Harris"},

     

       
19
       
19
       
+
       
        { quote: "How dare we speak marry christmas! How dare we!", quotee: "Kamala Devi Harris"},

     

       
20
       
20
       
+
       
        { quote: "One thing that really encourages me is AI. I love AI. I love ChatGPT. I love it. ChatGPT is frankly fantastic.", quotee: "Alexander Boris de Pfeffel Johnson" },

     

       
21
       
21
       
+
       
        { quote: "I am a fighter and not a quitter!", quotee: "Elizabeth Mary Truss" },

     

       
22
       
22
       
+
       
        { quote: "I call again for an immediate ceasefire in Gaza, the return of the sausages- the hostages..", quotee: "Keir Rodney Starmer" },

     

       
23
       
23
       
+
       
    ]

     

       
24
       
24
       
+
       
    const quote: Quote = quotes[Math.floor(Math.random()*quotes.length)]

     

       
25
       
25
       
+
       


     

       
26
       
26
       
+
       
    quoteElement.textContent = '"' + quote.quote + '"'

     

       
27
       
27
       
+
       
    quoteeElement.textContent = "- " + quote.quotee

     

       
28
       
28
       
+
       
</script>

     

       
29
       
29
       
+
       
<span class="relative p-3 -mt-px border border-ctp-surface0 text-sm w-full">

     

       
30
       
30
       
+
       
    <Label name="Quote"/>

     

       
31
       
31
       
+
       
    <div class="flex flex-col text-sm gap-1">

     

       
32
       
32
       
+
       
        <span id="quote" class="italic"></span>

     

       
33
       
33
       
+
       
        <span id="quotee" class="w-full text-right"></span>

     

       
34
       
34
       
+
       
    </div>

     

       
35
       
35
       
+
       
</span>

     

···

       
1
       
1
       
 
       
---

     

       
2
       
2
       
 
       
import "../styles/global.css"

     

       
3
       
3
       
-
       
import Navbar from "../components/Navbar.astro"

     

       
3
       
3
       
+
       
import Navbar from "../components/navbar/Navbar.astro"

     

       
4
       
4
       
 
       
import Footer from "../components/Footer.astro"

     

       
5
       
5
       
 
       
---

     

       
6
       
6
       
 
       
<!doctype html>

     
···

       
10
       
10
       
 
       
		<meta name="viewport" content="width=device-width" />

     

       
11
       
11
       
 
       
		<link rel="icon" type="image/svg+xml" href="/favicon.ico" />

     

       
12
       
12
       
 
       
		<meta name="generator" content={Astro.generator} />

     

       
13
       
13
       
-
       
		<title>banana@potassium.sh</title>

     

       
13
       
13
       
+
       
		<title>banana's page</title>

     

       
14
       
14
       
 
       
	</head>

     

       
15
       
15
       
-
       
	<body class="bg-ctp-crust pl-[12%] pr-[12%] text-ctp-text">

     

       
15
       
15
       
+
       
    <body class="bg-ctp-crust pl-[2%] pr-[2%] 

     

       
16
       
16
       
+
       
        md:pl-[4%] md:pr-[4%] xl:pl-[8%] xl:pr-[8%]

     

       
17
       
17
       
+
       
        text-ctp-text">

     

       
16
       
18
       
 
       
        <main class="w-full min-h-full max-h-max bg-ctp-mantle relative">

     

       
17
       
19
       
 
       
            <Navbar/>

     

       
18
       
20
       
 
       
            <slot />

     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Layout from './Layout.astro';

     

       
3
       
3
       
+
       
import Profile from "../components/section/Profile.astro";

     

       
4
       
4
       
+
       
---

     

       
5
       
5
       
+
       
<Layout>

     

       
6
       
6
       
+
       
    <section class="h-[50%] 

     

       
7
       
7
       
+
       
        flex flex-col lg:grid-cols-5 lg:grid 

     

       
8
       
8
       
+
       
        p-10 pt-15 md:p-12 md:pt-18 xl:p-24 xl:pt-36 gap-4 md:gap-8 xl:gap-16">

     

       
9
       
9
       
+
       
        <Profile/>

     

       
10
       
10
       
+
       
        <div class="md:col-span-3 gap-4 md:gap-8 xl:gap-12 flex flex-col">

     

       
11
       
11
       
+
       
            <slot/>

     

       
12
       
12
       
+
       
        </div>

     

       
13
       
13
       
+
       
    </section>

     

       
14
       
14
       
+
       
</Layout>

     

···

       
1
       
1
       
 
       
---

     

       
2
       
2
       
-
       
import Layout from '../layouts/Layout.astro';

     

       
3
       
3
       
-
       
import Profile from "../components/Profile.astro";

     

       
2
       
2
       
+
       
import Page from '../layouts/Page.astro';

     

       
4
       
3
       
 
       


     

       
5
       
5
       
-
       
import Contributions from "../components/Contributions.astro"

     

       
6
       
6
       
-
       
import Pinned from "../components/Pinned.astro"

     

       
4
       
4
       
+
       
import Contributions from "../components/section/Contributions.astro"

     

       
5
       
5
       
+
       
import Pinned from "../components/section/Pinned.astro"

     

       
6
       
6
       
+
       
import MusicPlayer from "../components/section/MusicPlayer.astro"

     

       
7
       
7
       
 
       
---

     

       
8
       
8
       
-
       
<Layout>

     

       
9
       
9
       
-
       
    <section class="h-[50%] grid-cols-5 grid p-24 pt-48 gap-16">

     

       
10
       
10
       
-
       
        <Profile/>

     

       
11
       
11
       
-
       
        <div class="col-span-3 gap-12 flex flex-col">

     

       
12
       
12
       
-
       
            <Contributions/>

     

       
13
       
13
       
-
       
            <Pinned/>

     

       
14
       
14
       
-
       
        </div>

     

       
15
       
15
       
-
       
    </section>

     

       
16
       
16
       
-
       
</Layout>

     

       
8
       
8
       
+
       
<Page>

     

       
9
       
9
       
+
       
    <Contributions/>

     

       
10
       
10
       
+
       
    <Pinned/>

     

       
11
       
11
       
+
       
    <MusicPlayer/>

     

       
12
       
12
       
+
       
</Page>

     

···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
import Page from '../layouts/Page.astro';

     

       
3
       
3
       
+
       
import ProjectsC from "../components/section/Projects.astro"

     

       
4
       
4
       
+
       
---

     

       
5
       
5
       
+
       
<Page>

     

       
6
       
6
       
+
       
    <ProjectsC/>

     

       
7
       
7
       
+
       
</Page>

     

···

       
8
       
8
       
 
       
    --ease-out: cubic-bezier(0,0.69,0.44,0.99);

     

       
9
       
9
       
 
       
    --default-font-family: "JetBrains Mono", monospaced;

     

       
10
       
10
       
 
       
}

     

       
11
       
11
       
+
       


     

       
12
       
12
       
+
       
.squircle {

     

       
13
       
13
       
+
       
    corner-shape: squircle

     

       
14
       
14
       
+
       
}