commit 985ef30947906b977c0019f3982a88730d31927d · banana.tngl.sh/mywebsite-2026

+73

src/components/Profile.astro

···

       1
       +
       ---

     

       2
       +
       import Tag from '../components/Tag.astro';

     

       3
       +
       import { Github, Twitch, Youtube, Icon } from '@lucide/astro'

     

       4
       +
       import { butterfly } from '@lucide/lab'

     

       5
       +
       ---

     

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

     

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

     

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

     

       9
       +
           </span>

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

       17
       +
                   </span>

     

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

     

       19
       +
                       <a href="https://github.com/imabanana80">

     

       20
       +
                           <Github size="20" 

     

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

     

       22
       +
                       <a href="https://bsky.app/profile/imabanana80.com">

     

       23
       +
                           <Icon iconNode={butterfly} size="20" 

     

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

     

       25
       +
                       <a href="https://twitch.tv/imabanana80">

     

       26
       +
                           <Twitch size="20" 

     

       27
       +
                               class="stroke-ctp-mauve hover:rotate-15 ease-in hover:ease-out transition-transform"/></a>

     

       28
       +
                       <a href="https://youtube.com/@imabanana80">

     

       29
       +
                           <Youtube size="20" 

     

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

     

       31
       +
                   </span>

     

       32
       +
               </span>

     

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

     

       34
       +
                   <Tag name="About"/>

     

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

     

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

     

       37
       +
               </span>

     

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

     

       39
       +
                   <Tag name="Currently"/>

     

       40
       +
                   Learning Svelte | Open for Hire

     

       41
       +
               </span>

     

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

     

       43
       +
                   <Tag name="Time"/>

     

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

     

       45
       +
               </span>

     

       46
       +
           </div >

     

       47
       +
       </div>

     

       48
       +
       

     

       49
       +
       

     

       50
       +
       <script>

     

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

     

       52
       +
       

     

       53
       +
       if (!clockElement) {

     

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

     

       55
       +
       }

     

       56
       +
       

     

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

     

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

     

       59
       +
       

     

       60
       +
           const options: Intl.DateTimeFormatOptions = {

     

       61
       +
           hour: '2-digit',     

     

       62
       +
           minute: '2-digit',  

     

       63
       +
           second: '2-digit', 

     

       64
       +
           hour12: false,    

     

       65
       +
           timeZone: "Asia/Singapore"

     

       66
       +
           };

     

       67
       +
       

     

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

     

       69
       +
           clockElement.textContent = timeString;

     

       70
       +
       };

     

       71
       +
       displayTime();

     

       72
       +
       setInterval(displayTime, 1000);

     

       73
       +
       </script>

+1 -1

src/layouts/Layout.astro

···

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

     

       12
        
       		<title>banana@potassium.sh</title>

     

       13
        
       	</head>

     

       14
       -
       	<body class="bg-ctp-crust pl-64 pr-64 text-ctp-text">

     

       15
        
               <main class="w-full min-h-full max-h-max bg-ctp-mantle">

     

       16
        
                   <Navbar/>

     

       17
        
       		    <slot />

···

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

     

       12
        
       		<title>banana@potassium.sh</title>

     

       13
        
       	</head>

     

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

     

       15
        
               <main class="w-full min-h-full max-h-max bg-ctp-mantle">

     

       16
        
                   <Navbar/>

     

       17
        
       		    <slot />

+3 -46

src/pages/index.astro

···

       1
        
       ---

     

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

     

       3
       -
       import Tag from '../components/Tag.astro';

     

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

     

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

     

       6
        
       ---

     

       7
        
       <script>

     

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

     
···

       30
        
       </script>

     

       31
        
       <Layout>

     

       32
        
           <section class="h-[50%] grid-cols-5 grid p-32 gap-12">

     

       33
       -
              <div class="flex flex-col col-span-3 gap-3 p-8 border-ctp-surface0 border h-min">

     

       0
        
       
     

       34
        
                   <span class="text-5xl font-semibold">

     

       35
        
                       Hi, I'm Banana.

     

       36
        
                   </span>

     
···

       38
        
                       I'm a computer science student and software developer that specialises in 

     

       39
        
                       Web Development as well as developing and hosting Minecraft Events.

     

       40
        
                   </span>

     

       41
       -
               </div>

     

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

     

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

     

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

     

       45
       -
                   </span>

     

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

     

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

     

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

     

       49
       -
                       <span class="text-base flex justify-between">

     

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

     

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

     

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

     

       53
       -
                           </span>

     

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

     

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

     

       56
       -
                                   <Github size="20" 

     

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

     

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

     

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

     

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

     

       61
       -
                               <a href="https://twitch.tv/imabanana80">

     

       62
       -
                                   <Twitch size="20" 

     

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

     

       64
       -
                               <a href="https://youtube.com/@imabanana80">

     

       65
       -
                                   <Youtube size="20" 

     

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

     

       67
       -
                           </span>

     

       68
       -
                       </span>

     

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

     

       70
       -
                           <Tag name="About"/>

     

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

     

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

     

       73
       -
                       </span>

     

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

     

       75
       -
                           <Tag name="Currently"/>

     

       76
       -
                           Learning Svelte | Open for Hire

     

       77
       -
                       </span>

     

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

     

       79
       -
                           <Tag name="Time"/>

     

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

     

       81
       -
                       </span>

     

       82
       -
                   </div >

     

       83
        
               </div>

     

       84
        
           </section>

     

       85
        
       </Layout>

···

       1
        
       ---

     

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

     

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

     

       0
        
       
     

       0
        
       
     

       4
        
       ---

     

       5
        
       <script>

     

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

     
···

       28
        
       </script>

     

       29
        
       <Layout>

     

       30
        
           <section class="h-[50%] grid-cols-5 grid p-32 gap-12">

     

       31
       +
               <Profile/>

     

       32
       +
               <div class="flex flex-col col-span-3 gap-3 p-8 border-ctp-surface0 border h-min">

     

       33
        
                   <span class="text-5xl font-semibold">

     

       34
        
                       Hi, I'm Banana.

     

       35
        
                   </span>

     
···

       37
        
                       I'm a computer science student and software developer that specialises in 

     

       38
        
                       Web Development as well as developing and hosting Minecraft Events.

     

       39
        
                   </span>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       40
        
               </div>

     

       41
        
           </section>

     

       42
        
       </Layout>