Merge pull request 'Favicon, better screen responsive, starting experience layouts' (#6) from website-content-updates into main

Reviewed-on: #6

Dockerfile

@@ -16,10 +16,12 @@ FROM build-deps AS build
 COPY . .
 
 ARG REPO_VERSION_HASH
+ARG BUILD_ENVIRONMENT
 ARG PROJECT_VERSION
 
-RUN echo $"PUBLIC_REPO_VERSION_HASH=${REPO_VERSION_HASH} \n\
-    PUBLIC_PROJECT_VERSION=${PROJECT_VERSION}" >> .env
+RUN echo "PUBLIC_REPO_VERSION_HASH=\"${REPO_VERSION_HASH}\" \n\
+    PUBLIC_BUILD_ENVIRONMENT=\"${BUILD_ENVIRONMENT}\" \n\
+    PUBLIC_PROJECT_VERSION=\"${PROJECT_VERSION}\"" >> .env
 RUN npm run build
 
 FROM httpd:latest AS runtime

public/favicon.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="40mm"
+   height="40mm"
+   viewBox="0 0 40 40"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <rect
+       style="fill:#000000;stroke-width:0.264583"
+       id="rect1"
+       width="58.244999"
+       height="53.954998"
+       x="-6.105"
+       y="-4.2899995" />
+  </g>
+  <g
+     id="layer2">
+    <g
+       id="g1"
+       transform="matrix(3.9840159,0,0,3.9840159,-182.95899,-268.96729)">
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:3.38667px;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#10ac25;fill-opacity:1;stroke:none;stroke-width:0.282222px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="46.9911"
+         y="76.640976"
+         id="text3344-4-5"><tspan
+           id="tspan3346-7-6"
+           x="46.9911"
+           y="76.640976"
+           style="font-size:11.2889px;line-height:1.25;stroke-width:0.282222px">C</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:3.38667px;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#10ac25;fill-opacity:1;stroke:none;stroke-width:0.282222px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="49.597134"
+         y="74.229248"
+         id="text3348-1-8"
+         transform="scale(1.0028223,0.99718564)"><tspan
+           id="tspan3350-3-1"
+           x="49.597134"
+           y="74.229248"
+           style="font-size:4.59543px;line-height:1.25;stroke-width:0.282222px">A</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.38667px;line-height:0%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#10ac25;fill-opacity:1;stroke:none;stroke-width:0.282222px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="24.869509"
+         y="83.989883"
+         id="text3344-5-7-6"
+         transform="matrix(0.89528488,-0.34221418,0.35348636,0.98184609,0,0)"><tspan
+           id="tspan3370-7-8"
+           x="24.869509"
+           y="83.989883"
+           style="font-size:4.18595px;line-height:1.25;stroke-width:0.282222px">P</tspan></text>
+    </g>
+  </g>
+</svg>

src/components/Footer.astro

@@ -0,0 +1,5 @@
+---
+---
+<footer class="flex justify-center items-center text-center">
+    {import.meta.env.PUBLIC_BUILD_ENVIRONMENT || "development"} | {import.meta.env.PUBLIC_REPO_VERSION_HASH || "invalid"}@{import.meta.env.PUBLIC_PROJECT_VERSION || "0.0.0"}
+</footer>

src/components/Navbar.astro

@@ -33,18 +33,18 @@ const navItems = [
 ];
 ---
 
-<header class="navbar lg:flex p-5 gap-5">
+<header class="navbar md:flex p-5 gap-5">
     <Astronav>
         <div class="flex w-full justify-between">
             <a href="/">
                 <Image src={logoTitle} alt="Logo Title" height="50" loading="eager"/>
             </a>
-            <div class="block lg:hidden">
+            <div class="block md:hidden">
                 <MenuIcon class="w-4 h-4 text-gray-800"/>
             </div>
         </div>
-        <MenuItems class="hidden lg:flex">
-            <ul class="flex flex-col lg:flex-row lg:gap-5">
+        <MenuItems class="hidden md:flex">
+            <ul class="flex flex-col md:flex-row md:gap-5">
                 <li>
                     <a href="/">Home</a>
                 </li>

src/env.d.ts

@@ -0,0 +1,9 @@
+interface ImportMetaEnv {
+    readonly PUBLIC_REPO_VERSION_HASH: string;
+    readonly PUBLIC_PROJECT_VERSION: string;
+    readonly PUBLIC_BUILD_ENVIRONMENT: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}

src/layouts/BaseLayout.astro

@@ -1,6 +1,7 @@
 ---
 import '../styles/global.css'
 import Navbar from '../components/Navbar.astro';
+import Footer from '../components/Footer.astro';
 
 const pageTitle = Astro.props.title ? `${Astro.props.title} - Corwin Perren` : "Corwin Perren";
 ---
@@ -8,6 +9,7 @@ const pageTitle = Astro.props.title ? `${Astro.props.title} - Corwin Perren`: "C
 <html lang="en">
 <head>
     <meta charset="UTF-8"/>
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>{pageTitle}</title>
 </head>
@@ -16,5 +18,6 @@ const pageTitle = Astro.props.title ? `${Astro.props.title} - Corwin Perren`: "C
 <main style="padding: 2rem;">
     <slot/>
 </main>
+<Footer/>
 </body>
 </html>

src/layouts/ExperienceLayout.astro

@@ -0,0 +1,6 @@
+---
+import BaseLayout from './BaseLayout.astro';
+---
+<BaseLayout>
+    <slot/>
+</BaseLayout>

src/pages/experience/spacex/avionics-test-engineering-intern.astro

@@ -0,0 +1,9 @@
+---
+import ExperienceLayout from '../../../layouts/ExperienceLayout.astro';
+import {Image} from 'astro:assets';
+
+import spring_2019_interns from "../../../assets/experience/spacex/avionics-test-engineering-intern/spring-2019-interns.jpg";
+---
+<ExperienceLayout>
+    <Image class="mx-auto block" src={spring_2019_interns} alt="spring-2019-interns.jpg" loading="eager"/>
+</ExperienceLayout>

src/pages/experience/spacex/hardware-test-engineer-ii.astro

@@ -0,0 +1,9 @@
+---
+import ExperienceLayout from '../../../layouts/ExperienceLayout.astro';
+import {Image} from 'astro:assets';
+
+import starlink_headquarters_selfie from "../../../assets/experience/spacex/hardware-test-engineer-ii/starlink_headquarters_selfie.jpg";
+---
+<ExperienceLayout>
+    <Image class="mx-auto block" src={starlink_headquarters_selfie} alt="starlink_headquarters_selfie" loading="eager"/>
+</ExperienceLayout>

src/pages/hobby/motorcycling.astro

@@ -0,0 +1,2 @@
+---
+---

src/styles/global.css

@@ -24,6 +24,10 @@ a {
     white-space: nowrap;
 }
 
+
+footer {
+    border-top: 2px solid var(--color-caperren-green);
+}
 /*.astronav-dropdown .group {*/
 /*    background-color: black;*/
 /*}*/