mobile improvements and showcase zelda-timelines

shawnyama · Sep 2, 2024 · cd91c16 · cd91c16
1 parent 45a3ecd
commit cd91c16
Show file tree

Hide file tree

Showing 12 changed files with 591 additions and 754 deletions.
diff --git a/src/assets/covidconnect.png → src/assets/covid-connect.png b/src/assets/covidconnect.png → src/assets/covid-connect.png
diff --git a/src/assets/zelda-timelines.png b/src/assets/zelda-timelines.png
diff --git a/src/components/About.astro b/src/components/About.astro
@@ -74,7 +74,7 @@ const greeting = greetings[Math.floor(Math.random() * greetings.length)];
  object-fit: cover;
  max-width: 20rem;
  height: auto;
- border: 1px dotted lightcoral;
+ border: 1px dotted var(--strawberry);
  }
 
  @media (max-width: 800px) {

diff --git a/src/components/Connect.astro b/src/components/Connect.astro
@@ -41,7 +41,7 @@ import { links } from "@data/links";
  header {
  font-family: "RPGSystem";
  font-size: 2rem;
- border: 1px dotted lightcoral;
+ border: 1px dotted var(--strawberry);
  background-color: var(--deep-sea);
  color: white;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
@@ -65,7 +65,7 @@ import { links } from "@data/links";
  right: 80%;
  animation-direction: alternate;
  transition: 0.2s;
- color: lightcoral;
+ color: var(--strawberry);
  font-size: 4rem;
  margin-top: -0.6rem;
  }
@@ -76,14 +76,14 @@ import { links } from "@data/links";
  margin-right: 0.5rem;
  vertical-align: middle;
  background-color: hsl(130, 41%, 91%, 0.8);
- border: 1px dashed lightcoral;
+ border: 1px dashed var(--strawberry);
  border-radius: 0.5rem;
  padding: 0.5rem;
  }
  .arrow {
  position: relative;
  color: var(--deep-sea);
- text-shadow: 2px 1px lightcoral;
+ text-shadow: 2px 1px var(--strawberry);
  animation: arrow-animation 1s;
  animation-iteration-count: infinite;
  width: 2rem;
@@ -95,7 +95,7 @@ import { links } from "@data/links";
  }
 
  svg {
- color: lightcoral;
+ color: var(--strawberry);
  height: 4rem;
  transition: 0.1s;
  }

diff --git a/src/components/FloppyDisk.astro b/src/components/FloppyDisk.astro
@@ -91,7 +91,7 @@ function lightnessAdjust(color: string, adjustment: number) {
  li {
  display: flex;
  align-items: center;
- border-bottom: 1px solid lightcoral;
+ border-bottom: 1px solid var(--strawberry);
  }
  img {
  width: 28px;

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -17,13 +17,13 @@ import Connect from "./Connect.astro";
  text-align: center;
  font-size: 2rem;
  font-family: "RPGSystem";
- border-top: 1px dotted lightcoral;
+ border-top: 1px dotted var(--strawberry);
  }
 
  footer > div::before,
  footer > div::after {
  margin: 0 1rem;
- color: lightcoral;
+ color: var(--strawberry);
  content: "~";
  }
 </style>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -88,8 +88,8 @@ import { links } from "@data/links";
  color: white;
  font-family: "RPGSystem";
  font-size: 2rem;
- border-top: 1px dotted lightcoral;
- border-bottom: 1px dotted lightcoral;
+ border-top: 1px dotted var(--strawberry);
+ border-bottom: 1px dotted var(--strawberry);
  }
 
  ul {
@@ -116,7 +116,7 @@ import { links } from "@data/links";
  a:hover,
  label:hover {
  cursor: pointer;
- color: lightcoral;
+ color: var(--strawberry);
  }
 
  @media (max-width: 1600px) {
@@ -171,7 +171,7 @@ import { links } from "@data/links";
  }
  ul:last-child {
  margin-left: 0;
- border-top: 1px dotted lightcoral;
+ border-top: 1px dotted var(--strawberry);
  }
  li {
  padding: 0 1rem;

diff --git a/src/components/Projects.astro b/src/components/Projects.astro
@@ -4,11 +4,13 @@ import { Image } from "astro:assets";
 import { YouTube } from "@astro-community/astro-embed-youtube";
 import FloppyDisk from "./FloppyDisk.astro";
 // Import images to be used and insert them into the imageMap
-import covidConnectImg from "@assets/covidconnect.png";
+import covidConnectImg from "@assets/covid-connect.png";
+import zeldaTimelinesImg from "@assets/zelda-timelines.png";
 
 const projects = await Astro.glob("../content/projects/*.md");
 const imageMap: { [key: string]: ImageMetadata } = {
  "Covid Connect": covidConnectImg,
+ "Zelda timelines": zeldaTimelinesImg,
 };
 ---
 
@@ -60,9 +62,7 @@ const imageMap: { [key: string]: ImageMetadata } = {
  {imageMap[frontmatter.title] && (
  <Image src={imageMap[frontmatter.title]} alt="Project image" />
  )}
- {frontmatter.video && (
- <YouTube class="video" id={frontmatter.video} />
- )}
+ {frontmatter.video && <YouTube id={frontmatter.video} />}
  </article>
  </section>
  ))
@@ -74,7 +74,7 @@ const imageMap: { [key: string]: ImageMetadata } = {
  padding: 2rem 0;
  display: flex;
  justify-content: center;
- border-bottom: 1px dotted lightcoral;
+ border-bottom: 1px dotted var(--strawberry);
  }
 
  .project:last-child {
@@ -93,24 +93,28 @@ const imageMap: { [key: string]: ImageMetadata } = {
  gap: 0.5rem;
  margin-top: 1rem;
  flex-direction: column;
+
+ & > li {
+ display: flex;
+ align-items: end;
+ width: fit-content;
+ background-color: var(--green-pastel);
+ padding: 0.4rem;
+ border-radius: 0.5rem;
+ font-size: 1.1rem;
+
+ & > svg {
+ color: var(--deep-sea);
+ height: 1.4rem;
+ margin-right: 0.5rem;
+ }
+
+ & a {
+ text-decoration: underline;
+ }
+ }
  }
- aside > ul > li {
- display: flex;
- align-items: end;
- width: fit-content;
- background-color: var(--green-pastel);
- padding: 0.4rem;
- border-radius: 0.5rem;
- font-size: 1.1rem;
- }
- aside > ul > li > svg {
- color: var(--deep-sea);
- height: 1.4rem;
- margin-right: 0.5rem;
- }
- aside > ul > li a {
- text-decoration: underline;
- }
+
  article {
  flex: 70%;
  gap: 1rem;
@@ -119,19 +123,22 @@ const imageMap: { [key: string]: ImageMetadata } = {
  padding: 0.75rem;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
- border-left: 1px dotted lightcoral;
+ border-left: 1px dotted var(--strawberry);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
+ & img {
+ max-width: 100%;
+ height: 100%;
+ border-radius: 0.25rem;
+ object-fit: contain;
+ }
  }
- article img {
- max-width: 100%;
- height: 100%;
- object-fit: contain;
- }
+
  lite-youtube {
  height: 100%;
  max-width: 100%;
+ border-radius: 0.25rem;
  }
  .technologies li {
  flex: 0 0 33.333333%;
@@ -146,23 +153,27 @@ const imageMap: { [key: string]: ImageMetadata } = {
  justify-content: space-around;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
- }
- aside > ul {
- flex-direction: row;
- justify-content: space-evenly;
- overflow: hidden;
- }
- aside > ul > li {
- display: flex;
- align-items: center;
- max-width: 30%;
- }
- aside > ul > li > * {
- overflow: hidden;
- overflow-wrap: break-word;
- }
- aside svg {
- display: none;
+
+ & > svg {
+ display: none;
+ }
+
+ & > ul {
+ flex-direction: row;
+ justify-content: space-evenly;
+ overflow: hidden;
+
+ & > li {
+ display: flex;
+ align-items: center;
+ max-width: 30%;
+
+ & > * {
+ overflow: hidden;
+ overflow-wrap: break-word;
+ }
+ }
+ }
  }
  aside > ul > li,
  .technologies li > div {
@@ -175,7 +186,7 @@ const imageMap: { [key: string]: ImageMetadata } = {
  border-top-right-radius: 0;
  margin-left: 0;
  padding-top: 0.5rem;
- border-top: 1px dotted lightcoral;
+ background-color: whitesmoke;
  }
  iframe {
  height: 15rem;
@@ -185,6 +196,7 @@ const imageMap: { [key: string]: ImageMetadata } = {
  }
  .technologies {
  border: none;
+ margin-top: 0.5rem;
  }
  .technologies li {
  flex: 0 0 10%;

diff --git a/src/content/about.md b/src/content/about.md
@@ -1,4 +1,4 @@
-I am Shawn - I create **easy to use software** that **engages and maybe even immerses** you. Designing/implementing new interfaces and user-experiences make the gears in my brain smile.
+I am Shawn, I create easy-to-use software that engages and maybe even immerses you. Implementing and designing cutting-edge user experiences with a willingness to challenge conventions is on my agenda! 
 \
 \
-Nowadays, I am a Full-stack Engineer at [Uncharted](https://uncharted.software/) working on a modeling and simulation platform for researchers. On the side I am learning Godot game engine.
+Nowadays, I am a Full-stack Engineer at [Uncharted](https://uncharted.software/) working on a modeling and simulation platform for researchers. On the side I am working on a very experimental 2D platformer using Godot.
diff --git a/src/content/projects/zelda-timelines.md b/src/content/projects/zelda-timelines.md
@@ -0,0 +1,13 @@
+---
+title: Zelda timelines
+technologies: [vuejs, d3js, mermaid]
+color: hsl(103, 33%, 72%)
+year: 2023 - 2024
+links: [
+ {link: https://zeldatimelines.link/, icon: mdi:link},
+ {title: Source code, link: https://github.com/shawnyama/zelda-timelines, icon: mdi:source-repository}
+]
+---
+
+An interactive collection of Zelda timelines that provides an easy way to visualize, absorb and compare the timelines all in one place. Perhaps new conclusions can be made?
+
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -38,6 +38,7 @@ const { title } = Astro.props;
  --green-tint: hsl(130, 41%, 91%);
  --green-pastel: hsl(132, 39%, 83%);
  --deep-sea: hsl(186, 70%, 12%);
+ --strawberry: hsl(0, 85%, 72%);
  }
 
  * {
@@ -80,7 +81,7 @@ const { title } = Astro.props;
  }
 
  ::-webkit-scrollbar-thumb {
- background-color: lightcoral;
+ background-color: var(--strawberry);
  border-radius: 20px;
  border: 0.35rem solid transparent;
  background-clip: padding-box;
@@ -94,19 +95,19 @@ const { title } = Astro.props;
  padding: 1rem;
  border-radius: 0.5rem;
  transition: 0.25s;
- border: 1px dotted lightcoral;
- box-shadow: 5px 4px lightcoral;
+ border: 1px dotted var(--strawberry);
+ box-shadow: 5px 4px var(--strawberry);
  }
 
  h1,
  h2,
  h3 {
  font-family: "Cormorant Garamond", serif;
- color: lightcoral;
+ color: var(--strawberry);
  }
 
  a {
- color: lightcoral;
+ color: var(--strawberry);
  text-decoration: none;
  border-radius: 0.25rem;
  }
@@ -140,9 +141,9 @@ const { title } = Astro.props;
  }
 
  .technologies {
- border: 3px double lightcoral;
+ border: 3px double var(--strawberry);
  border-radius: 0.5rem;
- color: lightcoral;
+ color: var(--strawberry);
  margin-top: 1rem;
  background-color: var(--green-tint);
  }
@@ -153,7 +154,6 @@ const { title } = Astro.props;
  padding: 0 1rem;
  margin: auto;
  margin-top: -0.8rem;
- background: whitesmoke;
  background: linear-gradient(whitesmoke, var(--green-tint));
  }
  ul {
@@ -175,7 +175,7 @@ const { title } = Astro.props;
  border-radius: 0.5rem;
  padding: 0.15rem 0.3rem 0.2rem 0.3rem;
  font-size: 1rem;
- color: lightcoral;
+ color: var(--strawberry);
  background-color: var(--green-pastel);
  text-align: center;
  margin: auto;