feat: add quote section to profile that shows a random funny/ironic quote

Changed files
+48 -2
src
+17 -2
src/components/Profile.astro
···
---
import Tag from '../components/Tag.astro';
import { Github, Spool, Icon } from '@lucide/astro'
import { butterfly } from '@lucide/lab'
-
---
<div class="flex flex-col col-span-2 border border-ctp-surface0 gap-[-1px] w-full h-min">
<span class="p-4 pb-0 border-b border-ctp-surface0 relative">
···
</span>
<span class="relative p-3 mt-4 border border-ctp-surface0 text-sm">
<Tag name="Currently"/>
-
Learning Svelte | Open for Hire
</span>
<span class="relative p-3 mt-4 border border-ctp-surface0 text-sm">
<Tag name="About"/>
···
<Tag name="Time"/>
<span id="clock" class="text-ctp-text"></span> (SGT/UTC+8)
</span>
</div >
</div>
···
---
import Tag from '../components/Tag.astro';
+
import Quote from '../components/Quote.astro'
import { Github, Spool, Icon } from '@lucide/astro'
import { butterfly } from '@lucide/lab'
---
<div class="flex flex-col col-span-2 border border-ctp-surface0 gap-[-1px] w-full h-min">
<span class="p-4 pb-0 border-b border-ctp-surface0 relative">
···
</span>
<span class="relative p-3 mt-4 border border-ctp-surface0 text-sm">
<Tag name="Currently"/>
+
Switching to endeavoros | Open for Hire
</span>
<span class="relative p-3 mt-4 border border-ctp-surface0 text-sm">
<Tag name="About"/>
···
<Tag name="Time"/>
<span id="clock" class="text-ctp-text"></span> (SGT/UTC+8)
</span>
+
<span class="relative p-3 mt-4 border border-ctp-surface0 text-ctp-subtext0 text-sm">
+
<Tag name="Languages"/>
+
<span>Java, Python, Golang, HTML/CSS/TS</span>
+
</span>
+
<span class="relative p-3 -mt-px border border-ctp-surface0 text-ctp-subtext0 text-sm">
+
<Tag name="Frameworks"/>
+
<span>PaperMC, Astro, Tailwindcss</span>
+
</span>
+
<span class="relative p-3 -mt-px border border-ctp-surface0 text-ctp-subtext0 text-sm">
+
<Tag name="Tools"/>
+
<span>Neovim, IntellIJ, Figma, VSC*de</span>
+
</span>
+
<div class="mt-4 flex">
+
<Quote />
+
</div>
</div >
</div>
+31
src/components/Quote.astro
···
···
+
---
+
import Tag from "../components/Tag.astro"
+
---
+
<script>
+
interface Quote {
+
quote: string,
+
quotee: string,
+
}
+
const quoteElement = document.getElementById("quote") as HTMLElement
+
const quoteeElement = document.getElementById("quotee") as HTMLElement
+
+
const quotes: Quote[] = [
+
{ quote: "America is a nation that can be defined in a single word: asufutimaehaehfutbw", quotee: "Joseph Robinette Biden Jr."},
+
{ quote: "What if they- what if anything- what if a bomb drops on your head right now?", quotee: "Donald John Trump"},
+
{ 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."},
+
{ quote: "the color orange is named after the fruit", quotee: "Elon Reeve Musk" },
+
{ quote: "I'm excited about electric school busses, I love electric school busses, I just love them..", quotee: "Kamala Devi Harris"},
+
{ 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" },
+
]
+
const quote: Quote = quotes[Math.floor(Math.random()*quotes.length)]
+
+
quoteElement.textContent = '"' + quote.quote + '"'
+
quoteeElement.textContent = "- " + quote.quotee
+
</script>
+
<span class="relative p-3 -mt-px border border-ctp-surface0 text-ctp-subtext0 text-sm w-full">
+
<Tag name="Quote"/>
+
<div class="flex flex-col text-sm gap-1">
+
<span id="quote" class="italic"></span>
+
<span id="quotee" class="w-full text-right"></span>
+
</div>
+
</span>