diff options
| author | Ariel Costas Guerrero <ariel@costas.dev> | 2025-06-05 20:03:27 +0200 |
|---|---|---|
| committer | Ariel Costas Guerrero <ariel@costas.dev> | 2025-06-05 20:03:27 +0200 |
| commit | a2830a0dd6f634147456406c7855881ff298078e (patch) | |
| tree | 93af1b60258b0b19a739b294fa31f201c2d64158 /src/partials/TechnologyBadge.astro | |
| parent | a423c9b15bdf43d28390fb0424dfeec012d82828 (diff) | |
Refresh portfolio design and fonts
Diffstat (limited to 'src/partials/TechnologyBadge.astro')
| -rw-r--r-- | src/partials/TechnologyBadge.astro | 134 |
1 files changed, 0 insertions, 134 deletions
diff --git a/src/partials/TechnologyBadge.astro b/src/partials/TechnologyBadge.astro deleted file mode 100644 index c5e170e..0000000 --- a/src/partials/TechnologyBadge.astro +++ /dev/null @@ -1,134 +0,0 @@ ---- -interface Technology { - name: string; - colour: string; - text?: "light" | "dark"; - icon: string; -} - -export const technologies: { [key: string]: Technology } = { - java: { - name: "Java", - colour: "#e76f00", - icon: "java", - }, - dotnet: { - name: ".NET", - colour: "#512bd4", - icon: "dotnet", - }, - go: { - name: "Go", - colour: "#00add8", - icon: "go", - }, - mysql: { - name: "MySQL", - colour: "#3a75b0", - 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", - }, - azure: { - name: "Azure", - colour: "#0089d6", - icon: "azure", - }, - 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> |
