Improve portfolio section

References #2

2 files changed, 144 insertions, 64 deletions

diff --git a/src/partials/MainWrapper.astro b/src/partials/MainWrapper.astro
deleted file mode 100644
index cceda92..0000000
--- a/src/partials/MainWrapper.astro
+++ /dev/null
@@ -1,64 +0,0 @@
-<main>
-	<slot/>
-</main>
-
-<style is:global lang="scss">
-	@import "../../styles/shared.scss";
-
-	li > time {
-		font-family: $monoFontStack;
-	}
-
-	main {
-		box-sizing: border-box;
-		margin: 0.75rem 1rem 3rem;
-		padding: 1.5rem 3rem;
-		border-radius: $floatingRadius;
-		box-shadow: $shadow;
-		margin-bottom: auto;
-
-		align-self: center;
-
-		max-width: 82ch;
-		font-size: 1.2rem;
-
-		background-color: $lightAlt;
-
-		a {
-			color: $accentDark;
-			transition: color 0.2s ease-in-out;
-
-			&:hover {
-				color: $accent;
-			}
-		}
-
-		> * {
-			margin-block: 0.75em;
-		}
-
-		> p > code {
-			word-break: break-word;
-			font-family: $monoFontStack;
-
-			color: $accentDark;
-			background-color: #f6f6f6;
-		}
-
-		h1 {
-			font-size: 2.75rem;
-			line-height: 1;
-			margin-bottom: 1rem;
-		}
-
-		p.meta {
-			display: block;
-			font-size: 0.85rem;
-			margin-bottom: 1rem;
-		}
-
-		pre {
-			overflow: scroll;
-		}
-	}
-</style>
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>