···

       
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

     

···

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

     

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

     

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

     

       
60
       
60
       
-
       
                <span class="hidden md:block">

     

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

     

       
61
       
61
       
 
       
                {tag && tagcolor && (

     

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

     

       
63
       
63
       
 
       
                )}

     

···

       
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
       
-
       
import { Code } from "@lucide/astro"

     

       
4
       
3
       
 
       


     

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

     

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

     
···

       
9
       
8
       
 
       
---

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

       
18
       
15
       
 
       
        </span>

     

       
19
       
16
       
 
       
    </div>

     

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

     

···

       
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!"

     

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

     

       
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={[

     

···

       
1
       
1
       
 
       
---

     

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

     

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

     

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

     

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

     

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

     

       
7
       
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
       
+
       
}

     

       
8
       
11
       
 
       
---

     

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

     

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

     

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

     

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

     

       
12
       
15
       
 
       
    </span>

     
···

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

     

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

     

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

     

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

     

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

     

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

     

       
20
       
24
       
 
       
            </span>

     

       
21
       
25
       
 
       
            <BadgeBar 

     

       
22
       
26
       
 
       
                badges={[

     

···

       
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" },

     

       
22
       
23
       
 
       
    ]

     

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

     

       
24
       
25
       
 
       


     

···

       
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-[2%] pr-[2%] 

     

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

     

···

       
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-20 md:p-12 md:pt-24 xl:p-24 xl:pt-48 gap-4 md:gap-8 xl:gap-16">

     

       
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/>

     

···

       
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
       
+
       
}