feat: 2025 theme

.vscode/settings.json

@@ -35,5 +35,8 @@
   "[javascriptreact]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
   },
-  "liveServer.settings.multiRootWorkspaceName": "www-aaronjy-2024"
+  "liveServer.settings.multiRootWorkspaceName": "www-aaronjy-2024",
+  "[css]": {
+    "editor.defaultFormatter": "vscode.css-language-features"
+  }
 }

content/writing/performance-considerations-tcp-game-server.md

@@ -4,8 +4,6 @@ pubdate: 2025-02-23T21:12:37.864Z
 desc: While writing a TCP game server in dotnet for a hobby project, I learned a few ways to improve the efficiency and scalability of the server while running into some performance issues. Here's what I learned!
 ---
 
-# Performance considerations when writing a TCP game server in dotnet
-
 While writing a TCP game server in dotnet for a hobby project (check it out [here](https://github.com/AaronJY/GServer)), I learned a few ways to improve the efficiency and scalability of the server while running into some performance issues.
 
 Here's what I learned!

jsconfig.json

@@ -2,6 +2,8 @@
   "compilerOptions": {
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "checkJs": true,
+    "jsx": "preserve"
   }
 }

src/components/Article/Article.jsx

@@ -2,37 +2,32 @@ import { formatDate } from '@/lib/helpers'
 import { NextSeo } from 'next-seo'
 import Link from 'next/link'
 import React from 'react'
-import * as feather from 'feather-icons'
 
-function Article ({ attributes, html }) {
+function Article({ attributes, html }) {
   return (
-    <section>
+    <>
-      <NextSeo
+      <h1>{attributes.title}</h1>
-        title={attributes.title} description={attributes.desc} openGraph={
+      <article>
-        {
+        <NextSeo
-          title: attributes.title,
+          title={attributes.title} description={attributes.desc} openGraph={
-          description: attributes.desc,
+            {
-          type: 'article',
+              title: attributes.title,
-          article: {
+              description: attributes.desc,
-            publishedTime: attributes.pubdate ?? null
+              type: 'article',
+              article: {
+                publishedTime: attributes.pubdate ?? null
+              }
+            }
           }
-        }
+        />
-      }
+        <div>
-      />
+          <Link href='./'>Back...</Link>
-      <div>
+          {attributes.pubdate && <p>{formatDate(attributes.pubdate)}</p>}
-        <Link href='./'>
+          <div data-test='content' dangerouslySetInnerHTML={{ __html: html }} />
-          <p className='row'>
+        </div>
-            <span className='icon icon-left' dangerouslySetInnerHTML={{ __html: feather.icons['arrow-left'].toSvg() }} />
+      </article>
-            <span>Go back</span>
+    </>
-          </p>
+
-        </Link>
-        <h1>{attributes.title}</h1>
-        <p>{attributes.desc}</p>
-        {attributes.pubdate && <p>{formatDate(attributes.pubdate)}</p>}
-        <hr />
-        <div data-test='content' dangerouslySetInnerHTML={{ __html: html }} />
-      </div>
-    </section>
   )
 }
 

src/components/Footer/Footer.jsx

@@ -2,47 +2,29 @@ import React from 'react'
 
 import style from './Footer.module.css'
 
-function Footer () {
+function Footer() {
   return (
     <footer className={style.footer} data-testid='footer'>
+      <hr />
       <nav>
-        <ul>
+        <div>
-          <li>
+          <span>
             <a href='#'>Back to top</a>
-          </li>
+          </span>{', '}
-          <li>
+          <span>
-            <a href='/static/pgp.txt'>pgp key</a>
+            <a href='/static/pgp.txt'>PGP key</a>
-          </li>
+          </span>{', '}
-          <li>
+          <span>
             <a href='mailto:me@aaronjy.me'>Send me an email</a>
-          </li>
+          </span>
-        </ul>
+        </div>
+
+        <div>
+          <small>2025 Aaron Yarborough</small>
+        </div>
       </nav>
 
-      <nav>
+
-        <ul>
-          <li>
-            <small>
-              2024 Aaron Yarborough, made with{' '}
-              <a
-                target='_blank'
-                rel='nofollow noopener noreferrer'
-                href='https://nextjs.org/'
-              >
-                Next.js
-              </a>{' '}
-              and{' '}
-              <a
-                target='_blank'
-                rel='nofollow noopener noreferrer'
-                href='https://yegor256.github.io/tacit/'
-              >
-                Tacit
-              </a>
-            </small>
-          </li>
-        </ul>
-      </nav>
     </footer>
   )
 }

src/components/Footer/Footer.module.css

@@ -1,7 +0,0 @@
-.footer nav:first-child a {
-  text-transform: lowercase;
-}
-
-.footer nav li {
-  margin-bottom: 0;
-}

src/components/Grid/Grid.jsx

@@ -1,11 +0,0 @@
-import React from 'react'
-
-import style from './Grid.module.css'
-
-function Grid ({ children }) {
-  return (
-    <div className={style.grid}>{children}</div>
-  )
-}
-
-export default Grid

src/components/Grid/Grid.module.css

@@ -1,5 +0,0 @@
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 32px;
-}

src/components/Header/Header.jsx

@@ -7,9 +7,10 @@ function Header () {
   return (
     <header className={styles.header} data-testid='header'>
       <nav>
-        <Link href='/'>Home</Link>
+        <Link href='/'>Home</Link>{', '}
-        <Link href='/writing'>Writing</Link>
+        <Link href='/writing'>Writing</Link>{', '}
-        <Link href='/cv'>CV</Link>
+        <Link href='/cv'>CV</Link>{', '}
+        <Link href='/about'>About</Link>
       </nav>
     </header>
   )

src/components/Header/Header.module.css

@@ -1,9 +1,3 @@
-.header nav {
+.header {
-    display: flex;
+    margin-top: 20px;
-    justify-content: center;
-    gap: 20px;
-}
-
-.header a {
-    text-transform: lowercase;
 }

src/components/Resume/Resume.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import style from './Resume.module.css'
 
-function Resume ({
+function Resume({
   competencies,
   education,
   certifications,
@@ -11,35 +11,20 @@ function Resume ({
 }) {
   return (
     <div className={style.cv}>
-      <div className='sidebar'>
+      <ol>
-        <h2>Core competencies</h2>
+        <li><a href='#experience'>Professional experience</a>
-        <ul>
+          <ol>{experience.map(e =>
-          {competencies.sort().map((c, i) => (
+            <li key={e.position}>
-            <li key={i}>{c}</li>
+              <a href={'#' + e.position}>{e.position}</a>
-          ))}
-        </ul>
-
-        <h2>Certifications</h2>
-        <ul>
-          {certifications.sort().map((c, i) => (
-            <li key={i}>{c}</li>
-          ))}
-        </ul>
-
-        <h2>Languages</h2>
-        <ul>
-          {languages.sort().map((c, i) => (
-            <li key={i}>
-              {c.name} - {c.proficiency}
             </li>
-          ))}
+          )}</ol></li>
-        </ul>
+        <li><a href='#competencies'>Competencies</a></li>
-
+        <li><a href='#competencies'>Certifications</a></li>
-        <h2>Education history</h2>
+        <li><a href='#languages'>Languages</a></li>
-        <p>{education}</p>
+        <li><a href='#education'>Education</a></li>
-      </div>
+      </ol>
       <div>
-        <h2>Professional experience</h2>
+        <h2 id="experience">Professional experience</h2>
 
         {experience.map((exp, i) => (
           <WorkExperience
@@ -53,17 +38,45 @@ function Resume ({
           </WorkExperience>
         ))}
       </div>
+      <div className='sidebar'>
+        <h2 id="competencies">Competencies</h2>
+        <ul>
+          {competencies.sort().map((c, i) => (
+            <li key={i}>{c}</li>
+          ))}
+        </ul>
+
+        <h2 id="certifications">Certifications</h2>
+        <ul>
+          {certifications.sort().map((c, i) => (
+            <li key={i}>{c}</li>
+          ))}
+        </ul>
+
+        <h2 className='languages'>Languages</h2>
+        <ul>
+          {languages.sort().map((c, i) => (
+            <li key={i}>
+              {c.name} - {c.proficiency}
+            </li>
+          ))}
+        </ul>
+
+        <h2 className='education'>Education</h2>
+        <p>{education}</p>
+      </div>
+
     </div>
   )
 }
 
-export default Resume
+export default Resume;
 
-function WorkExperience ({ position, employer, start, end, children }) {
+function WorkExperience({ position, employer, start, end, children }) {
   return (
     <div className={style['work-experience']}>
       <div>
-        <h3>
+        <h3 id={position}>
           {position}
           <br />
           <small>{employer}</small>

src/components/Resume/Resume.module.css

@@ -1,25 +0,0 @@
-.cv {
-  display: flex;
-  flex-direction: row;
-  gap: 25px;
-}
-
-.cv > div:first-child {
-  flex: 1;
-}
-
-.cv > div:last-child {
-  flex: 2;
-}
-
-.cv .work-experience >div:first-child {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-@media (max-width: 768px) {
-  .cv {
-    flex-direction: column;
-  }
-}

src/components/StaticContentList/StaticContentList.jsx

@@ -0,0 +1,19 @@
+import { formatDate } from "@/lib/helpers";
+import Link from "next/link";
+
+export default function StaticContentList({ entries, urlPrefix }) {
+    return (
+        <table>
+            <tbody>
+                {entries.map((e) => (
+                    <tr key={e.slug}>
+                        <td>{!!e.attributes.pubdate && <span>{formatDate(e.attributes.pubdate)}</span>}</td>
+                        <td>
+                            <Link href={`${urlPrefix}${e.slug}`}>{e.attributes.title}</Link>
+                        </td>
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    )
+}

src/layouts/DefaultLayout/DefaultLayout.jsx

@@ -10,11 +10,11 @@ function DefaultLayout ({ children }) {
     <main className={`${style.layout}`}>
       <Head>
         <link rel='preconnect' href='https://fonts.googleapis.com' />
-        <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
+        <link rel='preconnect' href='https://fonts.gstatic.com' crossOrigin='anonymous'/>
         <link href='https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap' rel='stylesheet' />
       </Head>
       <Header />
-      <article>{children}</article>
+      <>{children}</>
       <Footer />
     </main>
   )

src/layouts/DefaultLayout/DefaultLayout.module.css

@@ -1,9 +0,0 @@
-.layout {
-    display: flex;
-    flex-direction: column;
-    min-height: 100dvh;
-}
-
-.layout main {
-    flex-grow: 1;
-}

src/lib/content.js

@@ -52,11 +52,11 @@ export function getStaticEntryProps (contentPath, { params }) {
   return { props: { ...entry, attributes } }
 }
 
-export function getStaticEntryListProps (contentPath, urlPrefix) {
+export function getStaticEntries(contentPath) {
-  const fun = fs.readdirSync(contentPath, { withFileTypes: true })
+  const directoryItems = fs.readdirSync(contentPath, { withFileTypes: true });
-  const entries = fun.map((dirent) =>
+  return directoryItems.map((dirent) =>
     getMarkdownEntry(`${dirent.path}/${dirent.name}`)
-  ).sort((a, b) => new Date(b.attributes.pubdate) - new Date(a.attributes.pubdate))
+  ).sort((a, b) => 
-
+    new Date(b.attributes.pubdate).getTime() - new Date(a.attributes.pubdate).getTime()
-  return { props: { entries, urlPrefix } }
+  );
-}
+}

src/pages/_document.js

@@ -4,7 +4,7 @@ export default function Document () {
   return (
     <Html lang='en'>
       <Head>
-        <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css-1.7.1.min.css' />
+      <link rel="stylesheet" href="https://neat.joeldare.com/neat.css"/>
       </Head>
       <body>
         <Main />

src/pages/about/index.js

@@ -0,0 +1,73 @@
+import ExternalLink from "@/components/ExternalLink/ExternalLink";
+import DefaultLayout from "@/layouts/DefaultLayout/DefaultLayout";
+
+export default function About() {
+  return (
+    <DefaultLayout>
+      <h1>About me</h1>
+      <h2>Where to find me</h2>
+      <section>
+
+        <ul>
+          <li>
+            <strong>
+              <ExternalLink href='https://letterboxd.com/aaronyarbz/'>
+                Letterboxd
+              </ExternalLink>
+            </strong>{' '}
+            is a social platform for film lovers to rate, review, and discover
+            movies, akin to &quot;Goodreads for film.&quot;
+          </li>
+          <li>
+            <strong>
+              <ExternalLink href='https://github.com/AaronJY'>
+                GitHub
+              </ExternalLink>
+            </strong>{' '}
+            is a web-based platform for version control and collaboration on
+            software development projects. Find out what I&apos;ve been working
+            on here!
+          </li>
+          <li>
+            <strong>
+              <ExternalLink href='https://www.linkedin.com/in/aaronjyarborough/'>
+                LinkedIn
+              </ExternalLink>
+            </strong>
+            , unfortunately. A social network for professionals.
+          </li>
+        </ul>
+      </section>
+
+      <h2>Tech I Like</h2>
+      <section>
+        <ul>
+          <li>
+            <strong>Web Development:</strong> I primarily use Node.js with TypeScript
+            (or JavaScript for smaller projects) alongside Next.js to build websites
+            and applications.
+          </li>
+          <li>
+            <strong>Scripting:</strong> My preferred scripting languages are Python
+            and JavaScript, as I&apos;m well-versed in them and they offer extensive
+            libraries that typically cover my needs.
+          </li>
+          <li>
+            <strong>API and Backend Development:</strong> For more robust API or backend
+            architecture, I often choose .NET Core with C# and ASP.NET. The strongly-typed
+            nature of C# and the structured framework of ASP.NET help maintain clean and
+            organised code.
+          </li>
+          <li>
+            <strong>Cloud Hosting:</strong> When possible, I opt for hosting on a
+            DigitalOcean droplet. If more extensive cloud services are required, I usually
+            opt for Google Cloud Platform (GCP), which I find more user-friendly than Azure
+            or AWS. I also self-host services on shared server hosting running Ubuntu Server, typically with Hetzner.
+          </li>
+        </ul>
+
+      </section>
+    </DefaultLayout>
+
+  )
+}

src/pages/cv/index.js

@@ -7,7 +7,6 @@ import { NextSeo } from 'next-seo'
 import Resume from '@/components/Resume/Resume'
 
 export const Title = 'CV'
-export const Description = 'Read about my professional experience as a software engineer, core competencies, and certifications.'
 
 function ResumePage ({
   competencies,
@@ -19,17 +18,13 @@ function ResumePage ({
   return (
     <DefaultLayout>
       <NextSeo
-        title={Title} description={Description} openGraph={
+        title={Title} openGraph={
         {
-          Title,
+          title: Title,
-          Description
         }
       }
       />
-      <section>
+        <h1>{Title}</h1>
-        <h1>{Title} 💼</h1>
-        <p>{Description}</p>
-      </section>
       <section>
         <Resume
           competencies={competencies}
@@ -52,12 +47,14 @@ export function getStaticProps () {
 
   const MDConverter = new showdown.Converter()
 
+  // @ts-ignore
   data.experience = data.experience.map((exp) => ({
     ...exp,
     desc: MDConverter.makeHtml(exp.desc)
   }))
 
   return {
+    // @ts-ignore
     props: { ...data }
   }
 }

src/pages/index.js

@@ -1,21 +1,26 @@
 import Head from 'next/head'
 import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
-import ExternalLink from '@/components/ExternalLink/ExternalLink'
 import Link from 'next/link'
 
-import { Title as WritingTitle, Description as WritingDescription } from './writing'
+import StaticContentList from '@/components/StaticContentList/StaticContentList'
-import { Title as CvTitle, Description as CvDescription } from './cv'
+import { getStaticEntries } from '@/lib/content'
 
-export default function Home () {
+export const getStaticProps = () => ({
+  props: {
+    postEntries: getStaticEntries("content/writing")
+  }
+})
+
+export default function Home({ postEntries }) {
   return (
     <DefaultLayout>
       <Head>
         <meta name='viewport' content='width=device-width, initial-scale=1' />
         <link rel='icon' href='/favicon.ico' />
       </Head>
+      <h1>Hello!</h1>
 
       <section>
-        <h1>Hello! 👋🏻</h1>
         <p>
           I&apos;m Aaron, a Brit living in Newcastle-upon-tyne, UK. I
           work professionally as a Software Engineer, and study
@@ -24,92 +29,13 @@ export default function Home () {
         <p>
           I current work as a Lead Consultant at Hippo Digital, working on public sector project for the Department of Education. You can find out more about my work history <Link href='/cv'>on my CV</Link>.
         </p>
-
-        <div className='row'>
-          <div className='box'>
-            <Link href='/writing' className='box-title'>{WritingTitle}</Link>
-            <p className='box-text'>{WritingDescription}</p>
-            <Link href='/writing' className='box-link'>Read more...</Link>
-          </div>
-
-          <div className='box'>
-            <Link href='/cv' className='box-title'>{CvTitle}</Link>
-            <p className='box-text'>{CvDescription}</p>
-            <Link href='/cv' className='box-link'>Read more...</Link>
-          </div>
-        </div>
       </section>
 
       <section>
-        <h2>Tech I Like</h2>
+        <h2>Recent posts</h2>
-        <ul>
+        <StaticContentList entries={postEntries} urlPrefix={"writing/"} />
-          <li>
-            <strong>Web Development:</strong> I primarily use Node.js with TypeScript
-            (or JavaScript for smaller projects) alongside Next.js to build websites
-            and applications.
-          </li>
-          <li>
-            <strong>Scripting:</strong> My preferred scripting languages are Python
-            and JavaScript, as I&apos;m well-versed in them and they offer extensive
-            libraries that typically cover my needs.
-          </li>
-          <li>
-            <strong>API and Backend Development:</strong> For more robust API or backend
-            architecture, I often choose .NET Core with C# and ASP.NET. The strongly-typed
-            nature of C# and the structured framework of ASP.NET help maintain clean and
-            organised code.
-          </li>
-          <li>
-            <strong>Cloud Hosting:</strong> When possible, I opt for hosting on a
-            DigitalOcean droplet. If more extensive cloud services are required, I usually
-            opt for Google Cloud Platform (GCP), which I find more user-friendly than Azure
-            or AWS. I also self-host services on shared server hosting running Ubuntu Server, typically with Hetzner.
-          </li>
-        </ul>
-
       </section>
 
-      <section>
-        <h2>Where to find me</h2>
-
-        <ul>
-          <li>
-            <strong>
-              <ExternalLink href='https://letterboxd.com/aaronyarbz/'>
-                Letterboxd
-              </ExternalLink>
-            </strong>{' '}
-            is a social platform for film lovers to rate, review, and discover
-            movies, akin to &quot;Goodreads for film.&quot;
-          </li>
-          <li>
-            <strong>
-              <ExternalLink href='https://github.com/AaronJY'>
-                GitHub
-              </ExternalLink>
-            </strong>{' '}
-            is a web-based platform for version control and collaboration on
-            software development projects. Find out what I&apos;ve been working
-            on here!
-          </li>
-          <li>
-            <strong>
-              <ExternalLink href='https://www.linkedin.com/in/aaronjyarborough/'>
-                LinkedIn
-              </ExternalLink>
-            </strong>
-            , unfortunately. A social network for professionals.
-          </li>
-        </ul>
-      </section>
-
-      <section>
-        <h2>About this site</h2>
-        <p>www.aaronjy.me is a static site (i.e. a bunch of HTML, JS, CSS and image files) written in JavaScript using Next.js. Tacit is being used as a micro CSS framework, and various smaller bits of custom CSS have been applied on top.</p>
-        <p>The site is hosted inside a Google Cloud Storage bucket with a load balancer sat in front of it. The load balancer is required as Cloud Storage doesn&apos;t support a) custom domains, b) HTTPS out of the box or c) a global CDN solution.</p>
-        <p>One of the biggest benefits of a website made of simple static files and assets is that I can deploy it easily, almost anywhere, and for very little money.</p>
-
-      </section>
     </DefaultLayout>
   )
 }

src/pages/writing/index.js

@@ -1,45 +1,33 @@
 import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
 import React from 'react'
-import Link from 'next/link'
+import { getStaticEntries } from '@/lib/content'
-import { getStaticEntryListProps } from '@/lib/content'
 import { NextSeo } from 'next-seo'
-import { formatDate } from '@/lib/helpers'
+import StaticContentList from '@/components/StaticContentList/StaticContentList'
 
-export const getStaticProps = () => getStaticEntryListProps('./content/writing', '/writing/')
+export const getStaticProps = () => ({
+  props: {
+    postEntries: getStaticEntries("./content/writing")
+  }
+})
 
 export const Title = 'Writing'
-export const Description = 'A collection of writing and musings on various topics that interest me, as well as technical writing.'
 
-export default function Writing ({ entries, urlPrefix }) {
+export default function Writing ({ postEntries }) {
+
   return (
     <DefaultLayout>
       <NextSeo
         title={Title}
-        description={Description}
         openGraph={
           {
-            Title,
+            title: Title,
-            Description
           }
         }
       />
-      <section>
+      <h1>{Title}</h1>
-        <h1>{Title} ✍🏻</h1>
-        <p>{Description}</p>
-      </section>
 
       <section>
-        {entries.map((e) => (
+        <StaticContentList entries={postEntries} urlPrefix={'writing/'} />
-          <div key={e.attributes.title}>
-            <h2>
-              <Link href={`${urlPrefix}${e.slug}`}>{e.attributes.title}</Link>
-            </h2>
-            {!!e.attributes.pubdate && <p>{formatDate(e.attributes.pubdate)}</p>}
-
-            <p>{e.attributes.desc}</p>
-            <Link href={`${urlPrefix}${e.slug}`}>Read more</Link>
-          </div>
-        ))}
       </section>
     </DefaultLayout>
   )

src/styles/font.css

@@ -1,59 +0,0 @@
-/*
- * Typography Scale CSS
- * Generated with Type Scale Generator
- */
-
- @import url('./vars.css');
-
- :root {
-  --base-size: 17px;
-  --scale-ratio: 1.067;
-  --body-font: "Inter";
-  --body-weight: 400;
-  --body-line-height: 1.5;
-  --body-letter-spacing: normal;
-  --body-color: var(--color-default);
-  
-  --heading-font: var(--body-font);
-  --heading-weight: 700;
-  --heading-line-height: 1.25;
-  --heading-letter-spacing: normal;
-  --heading-color: var(--color-primary);
-}
-
-/* Base styles */
-body {
-  font-family: var(--body-font);
-  font-size: var(--base-size);
-  line-height: var(--body-line-height);
-  letter-spacing: var(--body-letter-spacing);
-  color: var(--body-color);
-}
-
-/* Type scale */
-.smallest { font-size: 0.878rem; }
-.caption { font-size: 0.937rem; }
-.body { font-size: 1rem; }
-h6 { font-size: 1.067rem; }
-h5 { font-size: 1.138rem; }
-h4 { font-size: 1.215rem; }
-h3 { font-size: 1.296rem; }
-h2 { font-size: 1.383rem; }
-h1 { font-size: 1.476rem; }
-
-/* Headings */
-h6, h5, h4, h3, h2, h1 {
-  font-family: var(--heading-font);
-  font-weight: var(--heading-weight);
-  line-height: var(--heading-line-height);
-  letter-spacing: var(--heading-letter-spacing);
-  color: var(--heading-color);
-}
-
-a {
-  color: var(--color-primary);
-}
-
-h2 a {
-  color: var(--heading-color);
-}

src/styles/globals.css

@@ -1,125 +0,0 @@
-@import url('./vars.css');
-@import url('./font.css');
-
-html, body {
-  margin: 0;
-}
-
-body {
-  position: relative;
-  background-color: var(--color-bg);
-}
-
-body::after {
-  content: '';
-  position: absolute;
-  bottom: 2vh;
-  right: 0;
-  width: 100vw;
-  height: 100%;
-  opacity: 0.2;
-  background-repeat: no-repeat;
-  background-position: bottom;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='360' preserveAspectRatio='none' viewBox='0 0 1440 360'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1038%26quot%3b)' fill='none'%3e%3cpath d='M -47.398109710771735%2c191 C 48.6%2c178 240.6%2c108.8 432.60189028922827%2c126 C 624.6%2c143.2 720.6%2c282.4 912.6018902892283%2c277 C 1104.6%2c271.6 1200.6%2c93.6 1392.6018902892283%2c99 C 1584.6%2c104.4 1863.12%2c292.6 1872.6018902892283%2c304 C 1882.08%2c315.4 1526.52%2c185.6 1440%2c156' stroke='rgba(122%2c 122%2c 122%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -191.9102853036337%2c280 C -95.91%2c256.8 96.09%2c173.2 288.0897146963663%2c164 C 480.09%2c154.8 576.09%2c246.8 768.0897146963663%2c234 C 960.09%2c221.2 1056.09%2c108.2 1248.0897146963662%2c100 C 1440.09%2c91.8 1689.71%2c189.6 1728.0897146963662%2c193 C 1766.47%2c196.4 1497.62%2c132.2 1440%2c117' stroke='rgba(122%2c 122%2c 122%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -851.6383122526047%2c117 C -755.64%2c157.8 -563.64%2c331.2 -371.63831225260463%2c321 C -179.64%2c310.8 -83.64%2c67.8 108.36168774739537%2c66 C 300.36%2c64.2 396.36%2c296.4 588.3616877473953%2c312 C 780.36%2c327.6 898.03%2c143.4 1068.3616877473953%2c144 C 1238.69%2c144.6 1365.67%2c280.8 1440%2c315' stroke='rgba(122%2c 122%2c 122%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1038'%3e%3crect width='1440' height='360' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
-  z-index: -1;
-}
-
-ul {
-  margin-left: 0;
-  list-style: inside;
-  list-style-type: circle;
-}
-
-ul li:not(:last-child) {
-  margin-bottom: 10px;
-}
-
-article {
-  border: none;
-  background: none;
-}
-
-article img {
-  border: 1px solid var(--color-default);
-}
-
-pre {
-  background-color: var(--color-default);
-  border-radius: 5px;
-  padding: 18px;
-}
-
-pre code {
-  color: var(--color-bg);
-}
-
-code:not(pre > code) {
-  background-color: var(--color-default);
-  color: var(--color-bg)
-}
-
-.row {
-  display: flex;
-  align-items: center;
-}
-
-.icon {
-  display: inline-flex;
-}
-
-.icon-left {
-  margin-right: 5px;
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-  gap: 1.5rem;
-}
-
-.box {
-  flex-grow: 1;
-  /* border: 1px solid var(--color-default); */
-  /* padding: 1.2rem;  */
-  display: flex;
-  align-items: left;
-  justify-content: center;
-  flex-shrink: 0;
-  flex-basis: 0;
-  flex-direction: column;
-  background-color: var(--color-bg-secondary);
-  border-radius: 0.8rem;
-  padding: 1.25rem 1.5rem;
-}
-
-.box-title {
-  font-weight: 600;
-  color: var(--heading-color);
-}
-
-.box-text {
-  margin: 0.8rem 0;
-}
-
-.sidebar {
-  position: sticky;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-
-@media (max-width: 768px) {
-  .sidebar {
-    position: relative;
-  }
-}
-
-@media only screen and (max-width: 640px) {
-  
-
-  .row {
-    flex-direction: column;
-  }
-}
-
-

src/styles/vars.css

@@ -1,7 +0,0 @@
-:root {
-    --color-default: #00212c;
-    --color-primary: #3777FF;
-    --color-tertiary: grey;
-    --color-bg: #ffffff;
-    --color-bg-secondary: #f2f4ff;
-  }