commit 57bd146e693349e9107e6d365e561f21c78b5c9a · banana.tngl.sh/mywebsite-2026

+72

src/components/Pinned.astro

···

       1
       +
       ---

     

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

     

       3
       +
       import Item from "./PinnedItem.astro"

     

       4
       +
       ---

     

       5
       +
       

     

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

     

       7
       +
           <Tag name="Pinned"/>

     

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

     

       9
       +
               <Item

     

       10
       +
                   type="project"

     

       11
       +
                   title="IsleStats"

     

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

     

       13
       +
                   icon="Archive"

     

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

     

       15
       +
                   badges={[

     

       16
       +
                       {

     

       17
       +
                           icon: "Github",

     

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

     

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

     

       20
       +
                       },

     

       21
       +
                       {

     

       22
       +
                           icon: "MessageCircle",

     

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

     

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

     

       25
       +
                       },

     

       26
       +
                       {

     

       27
       +
                           icon: "Mail",

     

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

     

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

     

       30
       +
                       }

     

       31
       +
                   ]}

     

       32
       +
               />

     

       33
       +
               <Item

     

       34
       +
                   type="team"

     

       35
       +
                   title="potassium.sh"

     

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

     

       37
       +
                   icon="Users"

     

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

     

       39
       +
                   badges={[

     

       40
       +
                       {

     

       41
       +
                           icon: "Mail",

     

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

     

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

     

       44
       +
                       },

     

       45
       +
                       {

     

       46
       +
                           icon: "Spool",

     

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

     

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

     

       49
       +
                       },

     

       50
       +
                       {

     

       51
       +
                           icon: "Bird",

     

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

     

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

     

       54
       +
                       },

     

       55
       +
                   ]}

     

       56
       +
               />

     

       57
       +
               <Item

     

       58
       +
                   type="repo"

     

       59
       +
                   title="dotfiles"

     

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

     

       61
       +
                   icon="BookMarked"

     

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

     

       63
       +
                   badges={[

     

       64
       +
                       {

     

       65
       +
                           icon: "Book",

     

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

     

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

     

       68
       +
                       },

     

       69
       +
                   ]}

     

       70
       +
               />

     

       71
       +
           </div>

     

       72
       +
       </div>

+46

src/components/PinnedItem.astro

···

       1
       +
       ---

     

       2
       +
       interface Badge {

     

       3
       +
           icon: string,

     

       4
       +
           href: string

     

       5
       +
           color: string

     

       6
       +
       }

     

       7
       +
       

     

       8
       +
       interface Props {

     

       9
       +
           type: string

     

       10
       +
           icon: string,

     

       11
       +
           title: string,

     

       12
       +
           subtitle: string,

     

       13
       +
           href: string

     

       14
       +
           badges: Badge[]

     

       15
       +
       }

     

       16
       +
       

     

       17
       +
       const { type, title, subtitle, icon, badges, href } = Astro.props

     

       18
       +
       

     

       19
       +
       var color

     

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

     

       21
       +
           color = "--catppuccin-color-red"

     

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

     

       23
       +
           color = "--catppuccin-color-peach"

     

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

     

       25
       +
           color = "--catppuccin-color-mauve"

     

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

     

       27
       +
           color = "--catppuccin-color-maroon"

     

       28
       +
       }

     

       29
       +
       color = "var(" + color + ")"

     

       30
       +
       

     

       31
       +
       import LucideIcon from "./LucideIcon.astro";

     

       32
       +
       import Badgebar from "./Badgebar.astro"

     

       33
       +
       ---

     

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

     

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

     

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

     

       37
       +
                   <span class="text-xl flex gap-2 items-center font-bold group-hover:underline">

     

       38
       +
                       <LucideIcon name=`${icon}` width="20" height="20" style={`stroke:${color}`} /> {title}</span>

     

       39
       +
                   <span class="text-sm">

     

       40
       +
                       <span class="flex gap-1">{subtitle}</span>

     

       41
       +
                   </span>

     

       42
       +
               </a>

     

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

     

       44
       +
           </div>

     

       45
       +
       </div>

     

       46
       +

+3 -1

src/pages/index.astro

···

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

     

       4
        
       

     

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

     

       0
        
       
     

       6
        
       ---

     

       7
        
       <Layout>

     

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

     

       9
        
               <Profile/>

     

       10
       -
               <div class="col-span-3 gap-8 flex flex-col">

     

       11
        
                   <Contributions/>

     

       0
        
       
     

       12
        
               </div>

     

       13
        
           </section>

     

       14
        
       </Layout>

···

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

     

       4
        
       

     

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

     

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

     

       7
        
       ---

     

       8
        
       <Layout>

     

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

     

       10
        
               <Profile/>

     

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

     

       12
        
                   <Contributions/>

     

       13
       +
                   <Pinned/>

     

       14
        
               </div>

     

       15
        
           </section>

     

       16
        
       </Layout>