Refresh portfolio design and fonts

3 files changed, 9 insertions, 139 deletions

diff --git a/src/partials/Footer.astro b/src/partials/Footer.astro
index bc30217..213aaa8 100644
--- a/src/partials/Footer.astro
+++ b/src/partials/Footer.astro
@@ -39,7 +39,7 @@ import t from "../i18n/es.json";
     }
 
     p {
-      max-width: 82ch;
+      max-width: 60ch;
       margin-inline: auto;
     }
   }
diff --git a/src/partials/Header.astro b/src/partials/Header.astro
index 2ca99bb..500fadd 100644
--- a/src/partials/Header.astro
+++ b/src/partials/Header.astro
@@ -48,11 +48,15 @@ import t from "../i18n/es.json";
   }
 
   @media (max-width: $breakpointTablet) {
-  }
+    header {
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
 
-  @media (min-width: $breakpointTablet) {
+      a {
+        font-size: 1.5rem;
+      }
+    }
   }
 
-  @media (min-width: $breakpointDesktop) {
-  }
 </style>
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>