···

       
1
       
1
       
 
       
---

     

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

     

       
3
       
3
       
-
       
import Item from "./PinnedItem.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">

     
···

       
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"

     

       
15
       
17
       
 
       
            badges={[

     

       
16
       
18
       
 
       
                {

     

       
17
       
19
       
 
       
                    icon: "Github",

     
···

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

     

       
37
       
39
       
 
       
            icon="Users"

     

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

     

       
41
       
41
       
+
       
            tag="Java"

     

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

     

       
39
       
43
       
 
       
            badges={[

     

       
40
       
44
       
 
       
                {

     

       
41
       
45
       
 
       
                    icon: "Mail",

     

···

       
10
       
10
       
 
       
    icon: string,

     

       
11
       
11
       
 
       
    title: string,

     

       
12
       
12
       
 
       
    subtitle: string,

     

       
13
       
13
       
+
       
    tag?: string,

     

       
14
       
14
       
+
       
    tagcolor?: string,

     

       
13
       
15
       
 
       
    href: string

     

       
14
       
16
       
 
       
    badges: Badge[]

     

       
15
       
17
       
 
       
}

     

       
16
       
18
       
 
       


     

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

     

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

     

       
18
       
20
       
 
       


     

       
19
       
19
       
-
       
var color

     

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

     

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

     

       
21
       
23
       
 
       
    color = "--catppuccin-color-red"

     

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

     
···

       
25
       
27
       
 
       
    color = "--catppuccin-color-mauve"

     

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

     

       
27
       
29
       
 
       
    color = "--catppuccin-color-maroon"

     

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

     

       
31
       
31
       
+
       
    color = "--catppuccin-color-sky"

     

       
28
       
32
       
 
       
}

     

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

     

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

     

       
30
       
34
       
 
       


     

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

     

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

     

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

     

       
33
       
38
       
 
       
---

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

       
45
       
45
       
+
       
                {tag && tagcolor && (

     

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

     

       
47
       
47
       
+
       
                )}

     

       
48
       
48
       
+
       
            </span>

     

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

     

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

     

       
41
       
51
       
 
       
            </span>

     

       
42
       
52
       
 
       
        </a>

     

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

     

       
54
       
54
       
+
       
    </div>

     

       
55
       
55
       
+
       
    <div>

     

       
56
       
56
       
+
       
        <slot/>

     

       
44
       
57
       
 
       
    </div>

     

       
45
       
58
       
 
       
</div>

     

···

       
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-ctp-subtext0 text-sm w-full">

     

       
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>

     

···

       
5
       
5
       
 
       
}

     

       
6
       
6
       
 
       


     

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

     

       
8
       
8
       
-
       
const bgColorCss = "var(" + color + "-950)"

     

       
9
       
9
       
-
       
const borderColorCss = "var(" + color + "-800)"

     

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

     

       
10
       
9
       
 
       
---

     

       
11
       
11
       
-
       
<span class="p-0.5 pl-2 pr-2 border text-xs rounded-full scale-95 font-extrabold" 

     

       
12
       
12
       
-
       
    style={`background:${bgColorCss};border-color:${borderColorCss};`}>

     

       
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" 

     

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

     

       
13
       
12
       
 
       
    {text}

     

       
14
       
13
       
 
       
</span>