Portfolio & Markdown Rendering

2024-09-19 22:00:35 +00:00 · 2023-11-13 18:27:13 -07:00 · 2023-11-13 18:27:13 -07:00 · 422fe1e396
commit 422fe1e396
parent 515254a1dc
23 changed files with 7001 additions and 3901 deletions
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@ -0,0 +1,35 @@
+.interactive {
+  &:hover { filter: brightness(0.95); scale: 0.95; }
+  &:active { filter: brightness(0.9); scale: 1.05; }
+  transition: scale 0.6s cubic-bezier(0.34, 1.54, 0.64, 1);
+
+  padding: .5rem .75rem;
+  border-radius: 1rem;
+  cursor: pointer;
+}
+
+.panel {
+  padding: .5rem .75rem;
+  border-radius: 1rem;
+  background-color: var(--accent-dark-e1);
+}
+
+.markdown {
+  :is(h2,h3,h4) {
+    // margin top, unless we follow another header
+    margin-top: 1rem;
+    & + :is(h2,h3,h4) {
+      margin-top: 0;
+    }
+
+    // markdown headers aren't links
+    > a {
+      color: inherit;
+      text-decoration: none;
+      cursor: inherit;
+    }
+  }
+
+  // spacing between blocks in text
+  p, pre { margin-bottom: .5rem; }
+}
--- a/assets/styles/misc.scss
+++ b/assets/styles/misc.scss
@ -3,8 +3,10 @@
  color-scheme: dark;
  --accent-dark: hsl(270, 90%, 5%);
  --accent-light: hsl(293, 88%, 84%);
-
+  --accent-dark-e1: hsl(270, 90%, 10%, 0.5);
  background-color: var(--accent-dark);
+
+  --content-width: min(40rem, 100vw - 2rem)
 }
 body {
  background-color: transparent;
--- a/content/dove_inn.md
+++ b/content/dove_inn.md
@ -0,0 +1,10 @@
+---
+title: 'Dove Inn [DRAFT]'
+description: 'Website remake for a Boutique Bed and Breakfast Hotel'
+tags: ['job', 'web dev']
+sortDate: 2023.09
+image: '/assets/doveinn.webp'
+---
+Remade a website for a Hotel after they lost contact with the original developer.
+- saves owners load of money (significantly cheaper hosting)
+- dramatically improved Performance, Accessability, and SEO.
--- a/content/flappy_birb.md
+++ b/content/flappy_birb.md
@ -0,0 +1,12 @@
+---
+title: 'Android App Development [DRAFT]'
+description: 'Developed, Published, and Monetized a simple arcade-like game made in Java'
+tags: ['projects']
+sortDate: 2019.05
+image: '/assets/flap.webp'
+---
+Independently developed a simple arcade-like game in Java, published and monetized on google play store
+- Created a simple game from scratch using the Processing java library
+- Ported the app to mobile using Android Studio
+- Added ads to the app using google admob
+- Integrated Leaderboard functionality and achievements through Google play games
--- a/content/flatiron.md
+++ b/content/flatiron.md
@ -0,0 +1,31 @@
+---
+title: 'Flatiron School'
+description: 'Intensive 15 week course in full-stack web development'
+tags: ['education', 'web dev']
+sortDate: 2022.08
+image: '/assets/flatiron.webp'
+---
+Flatiron School was an intensive three-and-a-half-month course on full-stack web development that I undertook following my high school graduation. Despite its seemingly brief duration, the program's accelerated and immersive structure maximized its effectiveness, featuring 8-hour sessions from Monday to Friday.
+
+My prior programming knowledge from high school and game modding provided a unique foundation for this course. This familiarity allowed me to swiftly complete the assigned material, enabling me to go well beyond the curriculum, extracting valuable insights, and forging meaningful connections.
+
+## About the Course
+The course was divided into five 3-week-long phases, with 2 weeks dedicated to learning the material and 1 week allocated to creating a project based on the acquired knowledge.
+
+### Phase 0 (Pre-work)
+In the two weeks leading up to the course, participants were instructed to learn the basics of JS/HTML. At the end of this phase, the directive was to apply the acquired knowledge by creating a website. For my website, I developed an early iteration of the point cloud effect visible in the background of this page.
+
+### Phase 1
+Phase 1 focused on learning JS/HTML/CSS, along with interacting with REST APIs. Given my prior completion of the pre-work, I found this phase to be mostly a review. Consequently, I spent a significant amount of time going beyond the curriculum. This included creating the first iteration of my personal site, purchasing a domain, and deploying it with GitHub Pages. Additionally, I delved into custom CSS for Discord and other sites, enhancing my understanding of styling techniques.
+
+### Phase 2
+Phase 2 introduced the concept of React. While I spent less time teaching myself during this phase, as the ideas of state, components, and hooks were new and not entirely intuitive, it marked a significant learning curve.
+
+### Phase 3
+The focus of Phase 3 was on learning Ruby. Given my experience with three programming languages prior to this (Java, Python, and JavaScript), I picked up Ruby very quickly, spending only three days learning its syntax.
+
+### Phase 4
+Phase 4 centered on learning Ruby on Rails, a framework on top of Ruby that was very similar to how we used Ruby for backend development in Phase 3. This allowed me to finish early and begin working on my Phase 5 project ahead of schedule.
+
+### Phase 5
+Phase 5 did not involve learning new material. Instead, participants were tasked with applying what they had learned in a solo project. Having gained a head start from the work done in Phase 4, this phase served as a culmination of the entire course.
--- a/content/high_school.md
+++ b/content/high_school.md
@ -0,0 +1,34 @@
+---
+title: 'High School [DRAFT]'
+description: 'College Level Java, Python for Data Structures and Algorithms and Machine Learning'
+tags: ['education']
+sortDate: 2017.00
+# TODO: image
+---
+Learned a ton about programming in the 4 years I was there
+- awesome courses it offered
+- amazing teacher I had guiding me through it all.
+
+got the following awards while I was there
+- Computer Science Department Award (one of only two recipients)
+- High Honors (Granted based on number of AP and CE classes)
+- Institute of Science and Technology Scholar
+- Faculty Award for Exceptional Students
+- Top 10% of Graduating Class
+
+## AP Computer Science
+In my first 2 years,
+- College level course on Java
+
+## Data Structures and Algorithms and Machine Learning
+last 2 years
+- python, pandas, scikitlearn, keras
+- work with big data, processing it into something that can be easily used in statistics
+- train neural networks
+
+## IT and Security Education
+last 2 years
+- Computer Assembly and Diagnostics
+- Complete understanding of the TCP/IP stack and protocols
+- Network/Security Troubleshooting
+- working with network switches and setting up windows servers in VMS
--- a/content/inhumane_cards.md
+++ b/content/inhumane_cards.md
@ -0,0 +1,9 @@
+---
+title: 'Inhumane Cards [DRAFT]'
+description: 'An online implementation of Cards Against Humanity'
+tags: ['projects', 'web dev']
+sortDate: 2022.11
+image: '/assets/inhumane_cards.webp'
+---
+An online implementation of Cards Against Humanity with a React frontend and a Ruby on Rails Backend.
+- Integrates websockets through Action Cable for a live updating game lobby
--- a/content/minecraft_mods.md
+++ b/content/minecraft_mods.md
@ -0,0 +1,16 @@
+---
+title: 'Minecraft Mods [DRAFT]'
+description: 'Lead full-stack developer'
+tags: ['projects', 'mods']
+sortDate: 2021.08
+image: '/assets/modrinth.svg'
+---
+These are all QOL(quality of life), nice things to have that smooth the edges of a otherwise rough feature in the game.
+
+I am continuing to maintain these to this day
+
+Each project can be read about in detail on [my Modrinth page](https://modrinth.com/user/F53/mods).
+Independently made several quality of life mods for Minecraft Java Edition
+- 42 thousand downloads as of November 2023.
+- experience in working on adding functionality to a large, uncommented codebase
+- early experience with collaborating with others on Github
--- a/content/otd_auto.md
+++ b/content/otd_auto.md
@ -0,0 +1,10 @@
+---
+title: 'Out The Door Auto [DRAFT]'
+description: 'Lead full-stack developer'
+tags: ['job', 'web dev']
+sortDate: 2023.11
+image: '/assets/otd.svg'
+---
+Car sales website seeking an industry-leading user experience.
+
+Started as intern, did an amazing job, got lead role.
--- a/content/web_tools.md
+++ b/content/web_tools.md
@ -0,0 +1,7 @@
+---
+title: 'Web tools [DRAFT]'
+description: '?? PackXBR and CrunchPNG'
+tags: ['projects', 'web dev']
+sortDate: 2023.04
+image: '/assets/packxbr.svg'
+---
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -2,9 +2,9 @@
 export default defineNuxtConfig({
  devtools: { enabled: true },
  typescript: { strict: true, typeCheck: true, shim: false },
-  modules: ['nuxt-lodash', 'nuxt-icon'],
+  modules: ['nuxt-lodash', 'nuxt-icon', '@nuxt/content'],

-  css: ['~/assets/styles/layout.scss', '~/assets/styles/misc.scss', '~/assets/styles/font.scss'],
+  css: ['~/assets/styles/layout.scss', '~/assets/styles/misc.scss', '~/assets/styles/font.scss', '~/assets/styles/components.scss'],

  app: {
    head: {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -12,6 +12,7 @@
    "lint:fix": "eslint . --fix"
  },
  "dependencies": {
+    "@nuxt/content": "^2.9.0",
    "sass": "^1.69.5",
    "scss": "^0.2.4"
  },
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@ -0,0 +1,28 @@
+<template>
+  <main id="markdownPage">
+    <ContentDoc>
+      <template #default="{ doc }">
+        <Meta name="og:image" :content="doc.image" />
+        <article class="panel">
+          <h1>{{ doc.title }}</h1>
+          <ContentRenderer class="markdown" :value="doc" />
+        </article>
+      </template>
+
+      <template #not-found>
+        <p>No content found.</p>
+      </template>
+    </ContentDoc>
+  </main>
+</template>
+
+<style lang="scss">
+#markdownPage {
+  max-width: var(--content-width);
+  padding: 1rem 0;
+
+  article {
+    h1 { font-size: 2rem; }
+  }
+}
+</style>
--- a/pages/index.vue
+++ b/pages/index.vue
@ -12,25 +12,31 @@
      </p>

      <ul class="links wrap gap4 centerChildren">
-        <li>
+        <li class="interactive">
          <NuxtLink to="mailto:fseusb@gmail.com" aria-label="email">
-            <Icon name="material-symbols:mail-rounded" />
+            <Icon name="ri:mail-fill" />
            <span>Email</span>
          </NuxtLink>
        </li>
-        <li>
+        <li class="interactive">
          <NuxtLink to="https://github.com/CodeF53" aria-label="github">
            <Icon name="ph:github-logo-fill" />
            <span>Github</span>
          </NuxtLink>
        </li>
-        <li>
+        <li class="interactive">
          <NuxtLink to="https://dev.to/f53" aria-label="blog">
            <Icon name="ri:article-fill" />
            <span>Blog</span>
          </NuxtLink>
        </li>
-        <!-- <li>
+        <li class="interactive">
+          <NuxtLink to="/portfolio" aria-label="portfolio">
+            <Icon name="ri:file-list-fill" />
+            <span>Portfolio</span>
+          </NuxtLink>
+        </li>
+        <!-- <li class="interactive">
          <NuxtLink to="https://dev.to/f53" aria-label="blog">
            <Icon name="mdi:linkedin" />
            <span>LinkedIn</span>
@ -43,8 +49,9 @@
    <h2>TODO:</h2>
    <ul>
      <li>background: move render to worker thread</li>
-      <li>markdown articles for blogs and experience, filterable, sortable</li>
-      <li>header for non-homepage pages</li>
+      <li>portfolio sorting, filtering</li>
+      <li>self-host blogs</li>
+      <li>layout for non-homepage pages</li>
      <li>duplicate site, but with real name and picture</li>
    </ul>
  </div>
@ -53,7 +60,6 @@
 <style lang="scss">
 #home {
  --imgSize: min(20rem, 50vw, 50vh);
-  --bioSize: min(40rem, 100vw - 2rem);
  @media (max-width: 60rem) {
    flex-direction: column;

@ -68,7 +74,7 @@
  }

  main {
-    max-width: var(--bioSize);
+    max-width: var(--content-width);
  }

  .links {
@ -78,14 +84,7 @@
    li {
      background-color: var(--accent-light);
      &, > * { color: var(--accent-dark); }
-      &:hover { filter: brightness(0.95); scale: 0.95; }
-      &:active { filter: brightness(0.9); scale: 1.05; }
-      transition: scale 0.6s cubic-bezier(0.34, 3, 0.64, 1);
-
      font-weight: bold;
-      padding: .5rem .75rem;
-      border-radius: 1rem;
-      cursor: pointer;

      a {
        display: flex;
--- a/pages/portfolio.vue
+++ b/pages/portfolio.vue
@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { QueryBuilderParams } from '@nuxt/content/dist/runtime/types'
+
+const query: QueryBuilderParams = {
+  path: '/',
+  sort: [{ sortDate: -1 }],
+}
+</script>
+
+<template>
+  <main id="portfolio">
+    <h1>Portfolio</h1>
+    <ul class="results col gap4">
+      <ContentList v-slot="{ list }" :query="query">
+        <li v-for="article in list" :key="article._path" class="interactive panel">
+          <NuxtLink :to="article._path">
+            <div class="wrap spaceBetween">
+              <h2 class="row gap1 centerChildren">
+                <img :src="article.image">
+                <span> {{ article.title }} </span>
+              </h2>
+
+              <div class="alignCenter wrap gap2">
+                <span v-for="(tag, i) in article.tags" :key="i" class="tag">
+                  {{ tag }}
+                </span>
+              </div>
+            </div>
+
+            <p>{{ article.description }}</p>
+          </NuxtLink>
+        </li>
+      </ContentList>
+    </ul>
+  </main>
+</template>
+
+<style lang="scss">
+#portfolio {
+  max-width: var(--content-width);
+  padding: 1rem 0;
+
+  .results {
+    max-width: var(--content-width);
+    list-style: none;
+    padding: 0;
+
+    > li {
+      &, & > * {
+        color: inherit;
+        text-decoration: none;
+      }
+
+      img {
+        height: 1.5rem;
+      }
+
+      .tag {
+        background-color: var(--accent-light);
+        padding: .125rem .5rem;
+        border-radius: 1rem;
+
+        color: var(--accent-dark);
+        font-weight: bold;
+        font-size: 0.9rem;
+      }
+    }
+  }
+}
+</style>
--- a/public/assets/doveinn.webp
+++ b/public/assets/doveinn.webp
--- a/public/assets/flap.webp
+++ b/public/assets/flap.webp
--- a/public/assets/flatiron.webp
+++ b/public/assets/flatiron.webp
--- a/public/assets/inhumane_cards.webp
+++ b/public/assets/inhumane_cards.webp
--- a/public/assets/modrinth.svg
+++ b/public/assets/modrinth.svg
@ -0,0 +1,4 @@
+<svg width="512" height="514" viewBox="0 0 512 514" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="#1bd96a"/>
+  <path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="#1bd96a"/>
+</svg>
--- a/public/assets/otd.svg
+++ b/public/assets/otd.svg
@ -0,0 +1,8 @@
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="256" cy="256" r="256" fill="#0f9ed2"/>
+  <g fill="#fff">
+    <path d="m101.02 175.91c-56.676 0-85.017 24.57-85.017 79.968s28.338 80.199 85.017 80.199c56.502 0 85.017-24.801 85.017-80.199s-28.511-79.968-85.017-79.968zm0 119.84c-36.16 0-49.2-6.49-49.2-39.868s13.039-39.636 49.2-39.636c36.161 0 49.2 6.258 49.2 39.636s-13.038 39.868-49.2 39.868z"/>
+    <path d="m216.62 178.45-23.296 40.331h54.589v114.74h35.988v-114.74h41.55l23.296-40.331z"/>
+    <path d="m496 254.48c0-44.735-29.381-76.027-70.061-76.027h-54.938l-22.948 40.331h77.886c19.471 0 34.422 15.994 34.422 37.782 0 22.253-14.429 37.087-34.422 37.087h-41.725v-56.789h-36.161v96.657h77.886c40.333 0 70.061-34.074 70.061-79.041z"/>
+  </g>
+</svg>
--- a/public/assets/packxbr.svg
+++ b/public/assets/packxbr.svg
@ -0,0 +1,16 @@
+<svg viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="dG" x1="-6" x2="-6" y1="320" y2="0" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2a0000" offset=".00621" /><stop stop-color="#360000" offset=".11258" /><stop stop-color="#3b0000" offset=".26037" /><stop stop-color="#3b0000" offset=".44812" /><stop stop-color="#350000" offset=".63355" /><stop stop-color="#310000" offset=".7064" /><stop stop-color="#3b0000" offset=".83307" /><stop stop-color="#2a0000" offset="1" />
+    </linearGradient>
+    <linearGradient id="lg" x1="-6" x2="160" y1="320" y2="32" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#5c0000" offset=".30864" /><stop stop-color="#ae0606" offset=".35809" /><stop stop-color="#ff0d0d" offset=".51203" /><stop stop-color="#ff0d0d" offset=".81762" /><stop stop-color="#ff2525" offset=".9145" /><stop stop-color="#ff7b7b" offset="1" />
+    </linearGradient>
+  </defs>
+  <path fill="url(#dG)" stroke="url(#dG)" d="m267.05 33.66-79.34 45.807v0.52969l27.713-16v128l-110.85 64v-0.50592l-0.52917 0.50592v-5.2e-4h-5.1e-4l5.1e-4 44.445c-2.1e-4 13.76 6.0368 14.531 13.354 11.531 0.44939-0.22538 0.86386-0.41611 1.3332-0.66042 1.2026-0.62598 2.4737-1.314 3.8261-2.0645 1.3524-0.75043 2.7861-1.563 4.315-2.4381 1.5232-0.87188 3.142-1.8066 4.8669-2.8024 6e-3 -3e-3 0.0116-7e-3 0.0176-0.0103l0.66094-0.076 110.72-63.924c27.713-16 27.713-16 27.713-48v-127.13c1.3e-4 -16.791-9e-3 -24.999-3.7982-31.203z"/>
+  <path fill-opacity=".1" d="m263.24 38.603c-1.7495 0.04215-3.7061 0.588-5.764 1.432-0.44939 0.22538-0.86386 0.41612-1.3332 0.66042-1.2026 0.62598-2.4737 1.3141-3.8261 2.0645-1.3524 0.75043-2.7861 1.563-4.315 2.4381-1.5232 0.87188-3.142 1.8066-4.8669 2.8024-6e-3 0.0033-0.0116 0.0073-0.0176 0.01034l-27.695 15.99v128l-110.85 64.237-5.1e-4 -0.23719 5.1e-4 44.444c-2.1e-4 13.76 6.0365 14.531 13.353 11.531 3.9035-1.9578 8.4868-4.585 14.359-7.9752l110.85-64c13.856-8 20.785-12 24.249-18 3.4641-6 3.464-14 3.4639-30l-0.0176-95.989h5.1e-4l-5.1e-4 -44.445c1.5e-4 -9.8899-3.1186-13.07-7.5897-12.963z"/>
+  <path fill="url(#lg)" stroke="url(#lg)" d="m52.947 33.664c-3.7888 6.2045-3.7978 14.412-3.7977 31.203v127.13c0 32-2.64e-4 32 27.713 48l110.72 63.924 0.66146 0.076c6e-3 3e-3 0.0119 7e-3 0.0176 0.0103 1.7248 0.99584 3.3436 1.9305 4.8669 2.8024 1.5289 0.87511 2.9626 1.6877 4.315 2.4381 1.3524 0.75044 2.6235 1.4385 3.8261 2.0645 0.46939 0.24431 0.88386 0.43505 1.3332 0.66043 7.3169 3.0007 13.354 2.2293 13.354-11.531l5.1e-4 -44.445h-5.1e-4v5.1e-4l-0.52917-0.50591v0.50591l-110.85-64v-128l27.713 16v-0.52917z"/>
+  <path fill-opacity=".22" d="m56.76 38.6c-4.4711-0.10771-7.5899 3.0726-7.5897 12.963l-5.2e-4 44.445h5.2e-4l-0.0176 95.989c-8e-5 16-2.1e-4 24 3.4639 30 3.4641 6 10.392 10 24.249 18l110.85 64c6e-3 3e-3 0.0119 7e-3 0.0176 0.0103 1.7248 0.99581 3.3436 1.9305 4.8669 2.8024 1.5289 0.87511 2.9626 1.6877 4.315 2.4381 1.3524 0.75044 2.6235 1.4385 3.8261 2.0645 0.46939 0.24431 0.88386 0.43504 1.3332 0.66042 7.3169 3.0007 13.354 2.2292 13.354-11.531l5.2e-4 -44.445h-5.2e-4v5.2e-4l-110.85-64v-128l-27.695-15.99c-6e-3 -3e-3 -0.0119-7e-3 -0.0176-0.0103-1.7248-0.99584-3.3436-1.9305-4.8669-2.8024-1.5289-0.87511-2.9626-1.6877-4.315-2.4381-1.3524-0.75041-2.6235-1.4385-3.8261-2.0645-0.46939-0.24431-0.88386-0.43504-1.3332-0.66042-2.0579-0.84395-4.0145-1.3898-5.764-1.432z"/>
+  <path fill="url(#dG)" stroke="url(#dG)" d="m215.34 3.949c-6.8404 0.05066-13.769 4.051-27.625 12.051l-110.85 64c-27.713 16-27.713 16-27.713 48v128.85c-2e-5 31.151-3.7e-4 31.15 28.484 47.596 21.231 12.258 25.776 14.812 40.292 7.5324-7.315 2.9987-13.35 2.2251-13.35-11.532l-5.2e-4 -44.445h5.2e-4v-95.618c5e-5 -32.381-2.6e-4 -32.382 27.713-48.382l55.426-32v-5.2e-4l79.584-45.947c-3.5528-6.1561-10.657-10.257-24.86-18.458-13.505-7.7973-20.258-11.696-27.099-11.646z"/>
+  <path fill="url(#lg)" stroke="url(#lg)" d="m104.66 3.9491c-6.8404-0.050661-13.593 3.8485-27.099 11.646-14.203 8.2-21.307 12.302-24.859 18.457l135.01 77.948c27.713 16 27.713 16 27.713 48.382v95.618h5.2e-4l-5.2e-4 44.445c1e-5 0.85999-0.0238 1.669-0.0698 2.4298s-0.11394 1.4734-0.20361 2.1394c-0.0897 0.66604-0.20073 1.2856-0.33176 1.8614-0.13103 0.57583-0.2821 1.1077-0.45217 1.5978-0.085 0.24505-0.17488 0.47988-0.26923 0.70435-0.0944 0.22446-0.19324 0.43841-0.29663 0.64285s-0.21136 0.39948-0.32349 0.58446-0.22875 0.35999-0.34933 0.52607c-0.12059 0.16608-0.24539 0.32303-0.37414 0.47077s-0.26129 0.28654-0.39791 0.41651-0.27696 0.25105-0.42116 0.36381c-0.1442 0.11275-0.29241 0.21705-0.4439 0.31315s-0.3066 0.18405-0.46509 0.26407c-0.15849 0.08-0.32004 0.15203-0.48524 0.21653-0.3304 0.12899-0.6739 0.22789-1.0294 0.29817-0.3555 0.0703-0.72295 0.1121-1.1012 0.12816-0.37828 0.0161-0.76761 6e-3 -1.1663-0.0274-0.39873-0.0337-0.80684-0.0911-1.2237-0.17002-0.41685-0.0789-0.84219-0.1796-1.2748-0.2992-0.43267-0.11961-0.87264-0.25811-1.3188-0.41393-0.44514-0.15548-0.89663-0.32816-1.3529-0.51522 14.516 7.2798 19.061 4.7262 40.292-7.5318 28.484-16.445 28.484-16.445 28.484-47.596v-128.85c0-32-2.7e-4 -32-27.713-48l-110.85-64c-13.856-8-20.785-12-27.625-12.051z"/>
+</svg>