feat: improved portfolio item more, and added more projects

Changed files
+50 -15
src
+15 -14
src/components/PortfolioItem.astro
···
badges?: Badge[]
}
-
const { type, icon, title, subtitle, tag, tagcolor, href, badges } = Astro.props
+
const { type, icon = "Box", title, subtitle, tag, tagcolor, href, badges } = Astro.props
var color = "--catppuccin-color-yellow"
if (type=="project") {
···
const colorCss = "var(" + color + ")"
var iconName = icon
-
if (type=="project") {
-
iconName = "Archive"
-
} else if (type=="repo") {
-
iconName = "BookMarked"
-
} else if (type=="team") {
-
iconName = "Users"
-
} else if (type=="misc") {
-
color = "Box"
-
} else if (type=="freelance") {
-
color = "ReceiptText"
+
if (iconName == "Box") {
+
if (type=="project") {
+
iconName = "Archive"
+
} else if (type=="repo") {
+
iconName = "BookMarked"
+
} else if (type=="team") {
+
iconName = "Users"
+
} else if (type=="misc") {
+
iconName = "Box"
+
} else if (type=="freelance") {
+
iconName = "ReceiptText"
+
}
}
-
-
import LucideIcon from "./LucideIcon.astro";
+
import LucideIcon from "./LucideIcon.astro"
import Badgebar from "./Badgebar.astro"
import Tag from "./Tag.astro"
---
<div class="p-4 border border-ctp-surface0 flex flex-col -mt-px w-full">
-
<div class="flex justify-between gap-16">
+
<div class="flex justify-between gap-8">
<a href=`${href}` class="flex flex-col gap-1 group">
<span class="text-xl flex gap-2 items-center">
<LucideIcon name=`${iconName}` width="20" height="20" style={`stroke:${colorCss}`} />
+1 -1
src/components/navbar/Navbar.astro
···
href = href.replace("https://", "")
href = href.replace("http://", "")
---
-
<div class="absolute bg-ctp-base w-full pl-8 pr-8 pt-4 pb-4 flex justify-between rounded-bl-2xl rounded-br-2xl">
+
<div class="fixed z-40 bg-ctp-base left-[12%] right-[12%] pl-8 pr-8 pt-4 pb-4 flex justify-between rounded-bl-2xl rounded-br-2xl">
<div class="flex gap-4 items-center">
<a href="/doodlecat.png"><img src="doodlecat.png" width="48px" height="48px" class="rounded-full" /></a>
<span class="flex flex-col">
+34
src/components/projects/BiomeBattle.astro
···
+
---
+
import Item from "../PortfolioItem.astro"
+
---
+
<Item
+
type="freelance"
+
title="BiomeBattle"
+
subtitle="A modern Minecraft creator event. As a developer, I helped with minor improvements to the cosmetics system."
+
icon="Earth"
+
href="https://biomebattle.xyz/"
+
tag="Java"
+
tagcolor="--catppuccin-color-teal"
+
badges={[
+
{
+
icon: "Bird",
+
href: "https://x.com/biomebattle",
+
color: "var(--catppuccin-color-sapphire)"
+
},
+
{
+
icon: "Github",
+
href: "https://github.com/biomebattle",
+
color: "var(--catppuccin-color-green)"
+
},
+
{
+
icon: "MessageCircle",
+
href: "https://biomebattle.xyz/discord",
+
color: "var(--catppuccin-color-blue)"
+
},
+
{
+
icon: "Youtube",
+
href: "https://youtube.com/@BiomeBattle",
+
color: "var(--catppuccin-color-red)"
+
},
+
]}
+
/>