aboutsummaryrefslogtreecommitdiff
path: root/src/partials
diff options
context:
space:
mode:
Diffstat (limited to 'src/partials')
-rw-r--r--src/partials/Footer.astro62
-rw-r--r--src/partials/Header.astro87
-rw-r--r--src/partials/TechnologyBadge.astro216
3 files changed, 189 insertions, 176 deletions
diff --git a/src/partials/Footer.astro b/src/partials/Footer.astro
index 0bb0570..2265576 100644
--- a/src/partials/Footer.astro
+++ b/src/partials/Footer.astro
@@ -1,43 +1,49 @@
---
-import { useTranslations } from "../i18n"
+import { useTranslations } from "../i18n";
const t = useTranslations(Astro.currentLocale);
---
<footer>
- <p>
- Copyright &copy; 2023-{new Date().getFullYear()} Ariel Costas Guerrero. {t.footer.copyright}
- </p>
+ <p>
+ Copyright &copy; 2023-{new Date().getFullYear()} Ariel Costas Guerrero. {
+ t.footer.copyright
+ }
+ </p>
- <p>
- {t.footer.contentLicencedUnder} <a
- href={`https://creativecommons.org/licenses/by-sa/4.0/deed.${Astro.currentLocale}`}
- >CC BY-SA 4.0</a>.
+ <p>
+ {t.footer.contentLicencedUnder}
+ <a
+ href={`https://creativecommons.org/licenses/by-sa/4.0/deed.${Astro.currentLocale}`}
+ >CC BY-SA 4.0</a
+ >.
- {t.footer.sourceCodeAvailableOn} <a href="https://github.com/arielcostas/costasdev">GitHub</a>
- {t.footer.andIsLicencedUnder} <a
- href="https://joinup.ec.europa.eu/collection/eupl/eupl-text-11-12"
- >{t.footer.eupl} 1.2</a>
- </p>
+ {t.footer.sourceCodeAvailableOn}
+ <a href="https://github.com/arielcostas/costasdev">GitHub</a>
+ {t.footer.andIsLicencedUnder}
+ <a href="https://joinup.ec.europa.eu/collection/eupl/eupl-text-11-12"
+ >{t.footer.eupl} 1.2</a
+ >
+ </p>
</footer>
<style lang="scss">
- @use "../../styles/shared.scss" as *;
+ @use "../../styles/shared.scss" as *;
- footer {
- background-color: $dark;
- color: $light;
- text-align: center;
+ footer {
+ background-color: $dark;
+ color: $light;
+ text-align: center;
- padding: 0.5rem 1rem;
-
- a {
- color: $accentLight;
- }
+ padding: 0.5rem 1rem;
- p {
- max-width: 82ch;
- margin-inline: auto;
- }
- }
+ a {
+ color: $accentLight;
+ }
+
+ p {
+ max-width: 82ch;
+ margin-inline: auto;
+ }
+ }
</style>
diff --git a/src/partials/Header.astro b/src/partials/Header.astro
index bd8c9d6..6df38e8 100644
--- a/src/partials/Header.astro
+++ b/src/partials/Header.astro
@@ -1,60 +1,67 @@
---
import { getRelativeLocaleUrl } from "astro:i18n";
-import { useTranslations } from "../i18n"
+import { useTranslations } from "../i18n";
const t = useTranslations(Astro.currentLocale);
---
<header>
- <a href={getRelativeLocaleUrl(Astro.currentLocale!, "")}>{t.header.home}</a>
- <a href={getRelativeLocaleUrl(Astro.currentLocale!, "trajectory")}>{t.header.trajectory}</a>
- <a href={getRelativeLocaleUrl(Astro.currentLocale!, "portfolio")}>{t.header.portfolio}</a>
- <a href={getRelativeLocaleUrl("es", "blog")}>{t.header.blog}</a>
- <a href={getRelativeLocaleUrl(Astro.currentLocale!, "contact")}>{t.header.contact}</a>
+ <a href={getRelativeLocaleUrl(Astro.currentLocale!, "")}>{t.header.home}</a>
+ <a href={getRelativeLocaleUrl(Astro.currentLocale!, "trajectory")}
+ >{t.header.trajectory}</a
+ >
+ <a href={getRelativeLocaleUrl(Astro.currentLocale!, "portfolio")}
+ >{t.header.portfolio}</a
+ >
+ <a href={getRelativeLocaleUrl("es", "blog")}>{t.header.blog}</a>
+ <a href={getRelativeLocaleUrl(Astro.currentLocale!, "contact")}
+ >{t.header.contact}</a
+ >
</header>
<style lang="scss">
- @use "../../styles/shared.scss" as *;
+ @use "../../styles/shared.scss" as *;
- header {
- color: $accent;
+ header {
+ color: $accent;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- gap: 2rem;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 2rem;
- padding: 2rem;
+ padding: 2rem;
- a {
- text-decoration: none;
- font-weight: 700;
- font-size: 1.2rem;
- text-transform: uppercase;
- transition: color 0.2s ease-in-out,
- border-bottom-color 0.2s ease-in-out;
- color: $accent;
- line-height: 1;
- border-bottom: 2px solid transparent;
+ a {
+ text-decoration: none;
+ font-weight: 700;
+ font-size: 1.2rem;
+ text-transform: uppercase;
+ transition:
+ color 0.2s ease-in-out,
+ border-bottom-color 0.2s ease-in-out;
+ color: $accent;
+ line-height: 1;
+ border-bottom: 2px solid transparent;
- &:hover {
- color: $accentDark;
- border-bottom-color: currentColor;
- }
+ &:hover {
+ color: $accentDark;
+ border-bottom-color: currentColor;
+ }
- &.active {
- color: $accentDark;
- }
- }
- }
+ &.active {
+ color: $accentDark;
+ }
+ }
+ }
- @media (max-width: $breakpointTablet) {
- }
+ @media (max-width: $breakpointTablet) {
+ }
- @media (min-width: $breakpointTablet) {
- }
+ @media (min-width: $breakpointTablet) {
+ }
- @media (min-width: $breakpointDesktop) {
- }
+ @media (min-width: $breakpointDesktop) {
+ }
</style>
diff --git a/src/partials/TechnologyBadge.astro b/src/partials/TechnologyBadge.astro
index 09cd377..c5e170e 100644
--- a/src/partials/TechnologyBadge.astro
+++ b/src/partials/TechnologyBadge.astro
@@ -1,95 +1,95 @@
---
interface Technology {
- name: string;
- colour: string;
- text?: "light" | "dark";
- icon: string;
+ 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",
- },
+ 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;
+ // tech must be name of the key of one of the technologies
+ code: string;
- size?: "small" | "large";
+ size?: "small" | "large";
}
const { code, size } = Astro.props;
@@ -97,38 +97,38 @@ const tech = technologies[code] as Technology;
---
<span class={`pill-${size ?? "small"} text-${tech.text ?? "light"}`}>
- {tech.name}
+ {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;
- }
+ 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-dark {
+ color: #000;
+ }
- .text-light {
- color: #fff;
- }
+ .text-light {
+ color: #fff;
+ }
- .pill-small {
- padding: 0.35em 0.5em;
- border-radius: 0.25em;
+ .pill-small {
+ padding: 0.35em 0.5em;
+ border-radius: 0.25em;
- font-size: 0.75em;
- }
+ font-size: 0.75em;
+ }
- .pill-large {
- padding: 0.35 0.75em;
- border-radius: 0.5em;
+ .pill-large {
+ padding: 0.35 0.75em;
+ border-radius: 0.5em;
- font-size: 0.75em;
- }
+ font-size: 0.75em;
+ }
</style>
generated by cgit v1.3 (git 2.53.0) at 2026-04-12 04:52:09 +0000