Improve portfolio section

References #2

1 files changed, 144 insertions, 0 deletions

diff --git a/src/partials/TechnologyBadge.astro b/src/partials/TechnologyBadge.astro
new file mode 100644
index 0000000..491bcea
--- /dev/null
+++ b/src/partials/TechnologyBadge.astro
@@ -0,0 +1,144 @@
+---
+interface Technology {
+	name: string;
+	colour: string;
+	text?: "light" | "dark";
+	icon: string;
+}
+
+export const technologies: { [key: string]: Technology } = {
+	java: {
+		name: "Java",
+		colour: "#f29111",
+		icon: "java",
+	},
+	dotnet: {
+		name: ".NET",
+		colour: "#512bd4",
+		icon: "dotnet",
+	},
+	go: {
+		name: "Go",
+		colour: "#00add8",
+		icon: "go",
+	},
+	mysql: {
+		name: "MySQL",
+		colour: "#f29221",
+		icon: "mysql",
+	},
+	mongodb: {
+		name: "MongoDB",
+		colour: "#4db33d",
+		icon: "mongodb",
+	},
+	sqlserver: {
+		name: "SQL Server",
+		colour: "#cc2927",
+		icon: "sqlserver",
+	},
+	php: {
+		name: "PHP",
+		colour: "#8892be",
+		icon: "php",
+	},
+	python: {
+		name: "Python",
+		colour: "#306998",
+		icon: "python",
+	},
+	javascript: {
+		name: "JavaScript",
+		colour: "#ffe70b",
+		text: "dark",
+		icon: "javascript",
+	},
+	typescript: {
+		name: "TypeScript",
+		colour: "#007acc",
+		icon: "typescript",
+	},
+	webtrio: {
+		name: "Web trio",
+		colour: "#ff400c",
+		icon: "webtrio",
+	},
+	azure: {
+		name: "Azure",
+		colour: "#0089d6",
+		icon: "azure",
+	},
+	javafx: {
+		name: "JavaFX",
+		colour: "#c91e21",
+		icon: "javafx",
+	},
+	linux: {
+		name: "Linux",
+		colour: "#010101",
+		icon: "linux",
+	},
+	windows: {
+		name: "Windows",
+		colour: "#0078d6",
+		icon: "windows",
+	},
+	astro: {
+		name: "Astro",
+		colour: "#3d50f5",
+		icon: "astro",
+	},
+	rabbitmq: {
+		name: "RabbitMQ",
+		colour: "#ff6600",
+		icon: "rabbitmq",
+	},
+};
+
+interface Props {
+	// tech must be name of the key of one of the technologies
+	code: string;
+
+	size?: "small" | "large";
+}
+
+const { code, size } = Astro.props;
+const tech = technologies[code] as Technology;
+---
+
+<span class={`pill-${size ?? "small"} text-${tech.text ?? "light"}`}>
+	{tech.name}
+</span>
+
+<style define:vars={{ colour: tech.colour }}>
+	span {
+		display: inline-block;
+		background-color: var(--colour);
+		font-weight: bold;
+		text-transform: uppercase;
+		border-radius: 0.5em;
+		padding: 0.5em 1em;
+	}
+
+	.text-dark {
+		color: #000;
+	}
+
+	.text-light {
+		color: #fff;
+	}
+
+	.pill-small {
+		padding: 0.35em 0.5em;
+		border-radius: 0.25em;
+
+		font-size: 0.75em;
+	}
+
+	.pill-large {
+		padding: 0.35 0.75em;
+		border-radius: 0.5em;
+
+		font-size: 0.75em;
+	}
+</style>