Convert logo to SVG, add dark mode, community and service pages (#90)

* Update clients * Add deprecation TODO * Update dependencies * Overhaul games section * Move clients to sollection * Remove books pages * Update articles * Rough support and contact pages * Change logo to SVG * Add community and services page * Change SVG logo * Update footer links * Enable dark mode * Update community page * Fix dark mode * Update dependencies
ChrisChinchilla · Aug 31, 2024 · f9b6b7a · f9b6b7a
1 parent e0f03c9
commit f9b6b7a
Show file tree

Hide file tree

Showing 12 changed files with 541 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -15,52 +15,52 @@
   },
   "dependencies": {
     "@astrojs/markdown-component": "1.0.5",
-    "@astrojs/react": "^3.6.0",
-    "@emotion/react": "^11.13.0",
+    "@astrojs/react": "^3.6.2",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.16.5",
-    "@mui/material": "^5.16.5",
+    "@mui/icons-material": "^6.0.1",
+    "@mui/material": "^6.0.1",
     "@netlify/functions": "^2.8.1",
-    "fast-xml-parser": "^4.4.0",
+    "fast-xml-parser": "^4.4.1",
     "markdown-truncate": "^1.1.1",
     "node-fetch": "^3.3.2"
   },
   "devDependencies": {
-    "@astro-community/astro-embed-youtube": "^0.5.2",
-    "@astrojs/mdx": "^3.1.3",
-    "@astrojs/partytown": "^2.1.1",
+    "@astro-community/astro-embed-youtube": "^0.5.3",
+    "@astrojs/mdx": "^3.1.5",
+    "@astrojs/partytown": "^2.1.2",
     "@astrojs/rss": "^4.0.7",
     "@astrojs/markdown-component": "1.0.5",
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
     "@astrolib/analytics": "^0.5.0",
     "@astrolib/seo": "^1.0.0-beta.5",
-    "@fontsource/albert-sans": "^5.0.13",
-    "@fontsource/bitter": "^5.0.19",
-    "@iconify-json/carbon": "^1.1.36",
-    "@iconify-json/fa": "^1.1.8",
-    "@iconify-json/fluent": "^1.1.59",
-    "@iconify-json/simple-line-icons": "^1.1.8",
-    "@iconify-json/ph": "^1.1.13",
-    "@iconify-json/ri": "^1.1.21",
-    "@iconify-json/simple-icons": "^1.1.110",
-    "@iconify-json/tabler": "^1.1.118",
-    "@tailwindcss/typography": "^0.5.13",
-    "@typescript-eslint/eslint-plugin": "^8.0.0-alpha.54",
-    "@typescript-eslint/parser": "^8.0.0-alpha.54",
+    "@fontsource/albert-sans": "^5.0.14",
+    "@fontsource/bitter": "^5.0.20",
+    "@iconify-json/carbon": "^1.1.37",
+    "@iconify-json/fa": "^1.1.9",
+    "@iconify-json/fluent": "^1.1.63",
+    "@iconify-json/simple-line-icons": "^1.1.9",
+    "@iconify-json/ph": "^1.1.14",
+    "@iconify-json/ri": "^1.1.22",
+    "@iconify-json/simple-icons": "^1.1.115",
+    "@iconify-json/tabler": "^1.1.121",
+    "@tailwindcss/typography": "^0.5.15",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
     "accessible-astro-components": "^2.3.6",
-    "astro": "^4.12.2",
-    "astro-icon": "^1.1.0",
-    "eslint": "^9.7.0",
+    "astro": "^4.15.1",
+    "astro-icon": "^1.1.1",
+    "eslint": "^9.9.1",
     "eslint-plugin-astro": "^1.2.3",
     "limax": "4.1.0",
     "mdast-util-to-string": "^4.0.0",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
     "reading-time": "^1.5.0",
     "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.7",
-    "truncate-html": "^1.1.1",
+    "tailwindcss": "^3.4.10",
+    "truncate-html": "^1.1.2",
     "typescript": "^5.5.4"
   }
 }
diff --git a/src/assets/images/chinch-head.svg b/src/assets/images/chinch-head.svg
diff --git a/src/components/common/LogoChinch.astro b/src/components/common/LogoChinch.astro
@@ -1,6 +1,6 @@
 ---
 import { Image } from 'astro:assets';
-import bgImage from '../../assets/images/chinch-head.png';
+import bgImage from '../../assets/images/chinch-head.svg';
 ---
 <!-- <Picture
 class="mx-auto"
@@ -14,7 +14,7 @@ src={bgImage}
 alt="Chinchilla logo"
 /> -->
 
-<Image src={bgImage} alt="Chinchilla logo" class="mx-auto max-h-28 w-auto"/>
+<Image src={bgImage} alt="Chinchilla logo" class="mx-auto max-w-16"/>
 
 
 <span class="self-center ml-2 text-2xl md:text-xl text-gray-900 whitespace-nowrap dark:text-white font-heading font-semibold">Chris Chinchilla</span

diff --git a/src/components/widgets/Features2.astro b/src/components/widgets/Features2.astro
@@ -39,14 +39,14 @@ const {
             )}
             {title && (
               <h2
-                class="text-4xl md:text-5xl font-subheading font-semibold leading-tighter tracking-tighter mb-4"
+                class="text-4xl md:text-5xl font-subheading font-semibold leading-tighter tracking-tighter dark:bg-slate-900 dark:border-slate-800"
                 set:html={title}
               />
             )}
 
             {subtitle && (
               <p
-                class="max-w-3xl mx-auto sm:text-center text-xl text-gray-700 dark:text-slate-400"
+                class="max-w-3xl mx-auto sm:text-center text-xl text-gray-700 dark:text-slate-400  dark:bg-slate-900 dark:border-slate-800"
                 set:html={subtitle}
               />
             )}

diff --git a/src/components/widgets/Footer.astro b/src/components/widgets/Footer.astro
@@ -3,36 +3,65 @@ import { Icon } from 'astro-icon/components';
 import { getHomePermalink, getPermalink, getAsset, getBlogPermalink } from '~/utils/permalinks';
 
 const links = [
-  {
-    title: 'Writing',
-    items: [
-    {
-    title: 'Blog',
-    href: getBlogPermalink(),
-  },
+{
+    text: 'About',
+    links: [
+      {
+        text: 'Community & volunteering',
+        href: getPermalink('/community'),
+      },
     ],
   },
   {
-    title: 'Work',
-    items: [
-    {
-    title: 'Clients',
-    href: getPermalink('/clients'),
+    text: 'Writing',
+    links: [
+      {
+        text: 'Blog',
+        href: getBlogPermalink(),
+      },
+      {
+        text: 'Books',
+        href: getPermalink('/books'),
+      },
+    ],
   },
   {
-    title: 'Games',
-    href: getPermalink('/games'),
-  },
+    text: 'Work',
+    links: [
+    {
+        text: 'Work with me',
+        href: getPermalink('/contact'),
+      },
+      {
+        text: 'CV',
+        href: getPermalink('/cv'),
+      },
+      {
+        text: 'Clients',
+        href: getPermalink('/clients'),
+      },
+      {
+        text: 'Games',
+        href: getPermalink('/games'),
+      },
     ],
   },
   {
-    title: 'Activities',
-    items: [
-  {title: 'Videos', href: getPermalink('/videos'),},
-  {title: 'Podcast', href: getPermalink('/podcast'),},
-  {title: 'Events', href: getPermalink('/events'),},
+    text: 'Audio & Video',
+    links: [
+    {
+        text: 'Videos',
+        href: getPermalink('/videos'),
+      },
+      { text: 'Podcast', href: getPermalink('/podcast') },
+      {
+        text: 'Courses',
+        href: getPermalink('/courses'),
+      }
     ],
   },
+  { text: 'Support', href: getPermalink('/support') },
+  { text: 'Events', href: getPermalink('/events') },
 ];
 
 const social = [
@@ -47,7 +76,7 @@ const social = [
 <footer class="border-t border-gray-200 dark:border-slate-800">
   <div class="max-w-6xl mx-auto px-4 sm:px-6">
     <div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">
-      <div class="col-span-12 lg:col-span-4">
+      <div class="col-span-12 lg:col-span-2">
         <div class="mb-2">
           <a class="inline-block text-xl" href={getHomePermalink()}>Chris Chinchilla</a>
         </div>
@@ -63,18 +92,18 @@ const social = [
         </div> -->
       </div>
       {
-        links.map(({ title, items }) => (
-          <div class="col-span-6 md:col-span-3 lg:col-span-2">
-            <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">{title}</div>
-            {items && Array.isArray(items) && items.length > 0 && (
+        links.map(({ text, links }) => (
+          <div class="col-span-3 md:col-span-3 lg:col-span-2">
+            <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">{text}</div>
+            {links && Array.isArray(links) && links.length > 0 && (
               <ul class="text-sm">
-                {items.map(({ title, href }) => (
+                {links.map(({ text, href }) => (
                   <li class="mb-2">
                     <a
                       class="text-gray-600 hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
                       href={href}
                     >
-                      {title}
+                      {text}
                     </a>
                   </li>
                 ))}
@@ -106,7 +135,7 @@ const social = [
           class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 float-left rounded-sm"
         >
         </span>
-        Chris Chinchilla 2023
+        © Chris Chinchilla 2024
       </div>
     </div>
   </div>

diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro
@@ -11,10 +11,6 @@ const links = [
 {
     text: 'About',
     links: [
-      {
-        text: 'Contact',
-        href: getPermalink('/contact'),
-      },
       {
         text: 'Community & volunteering',
         href: getPermalink('/community'),
@@ -37,6 +33,10 @@ const links = [
   {
     text: 'Work',
     links: [
+    {
+        text: 'Work with me',
+        href: getPermalink('/contact'),
+      },
       {
         text: 'CV',
         href: getPermalink('/cv'),

diff --git a/src/components/widgets/Hero.astro b/src/components/widgets/Hero.astro
@@ -1,7 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 import { Image } from 'astro:assets';
-import bgImage from '../../assets/images/chinch-head.png';
+import bgImage from '../../assets/images/chinch-head.svg';
 interface CallToAction {
   text: string;
   href: string;

diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
@@ -4,7 +4,7 @@ import Header from '~/components/widgets/HeaderNoLogo.astro';
 import Footer from '~/components/widgets/Footer.astro';
 import Announcement from '~/components/widgets/Announcement.astro';
 // TODO: Optimise
-import bgImage from '../assets/images/chinch-head.png';
+import bgImage from '../assets/images/chinch-head.svg';
 import { MetaSEO } from '~/types';
 
 export interface Props {

diff --git a/src/pages/community.md b/src/pages/community.md
@@ -7,22 +7,45 @@ I am and have been involved in the following communities and volunteering effort
 
 ## Shut up and write© Berlin
 
-_Main organiser, xx to present_
+_Lead organiser, 2020 to present_
+
 Shut up and write© is a global community dedicated to letting people find the time to write.
 
 There are dozens of global chapters and I run the Berlin chapter with several co-organisers.
 
 The Berlin chapter has the largest membership base and meets the most regularly out of all the global chapters.
 
+## BIRCon
+
+_Co-organiser, 2024 to present_
+
+Myself and four others organised Berlin's first international roleplaying convention and tickets sold out in less than a week.
+
 ## Open music school
 
-_Drum tutor, xx to present_
+_Drum tutor, 2023 to present_
 
 The open music school is part of give something back to berlin and holds multiple free music classes every week, largely aimed at refugees and those on low incomes.
 
 ## Write the Docs
-- I run the Write the Docs meetup in Berlin and have organised other meetups in the past.
+
+_Co-organiser, 2018 to 2021_
+
+- I ran the Write the Docs meetup in Berlin for technical writers.
 - I was on the organising committee for the 2018, 2019, 2020, 2021 EU, and 2019 Australian Write the Docs conferences.
 - I co-organised the "Tool the Docs" devroom at FOSDEM in 2018, 2019, 2021, and 2024.
+
 ## Open source
-I have always been active in open source communities, including regular contributions to: Drupal, CiviCRM, Atom, Visual Studio Code, Webpack, Kubernetes, Obsidian, and Vale. See [my GitHub profile][3] for more.
+
+I have always been active in open source communities, including regular contributions to: Drupal, CiviCRM, Atom, Visual Studio Code, Webpack, Kubernetes, Obsidian, and Vale.
+
+- [Vale VSCode](https://github.com/ChrisChinchilla/vale-vscode)
+- [Pandoc VSCode](https://github.com/ChrisChinchilla/vscode-pandoc)
+- Task Overboard
+- Obsidian Trello
+- [Raycast Trello](https://github.com/raycast/extensions/tree/ff986298ee3ca7ee04f7b3b4d4ca5faecb64fe8f/extensions/trello)
+- Obsidian Vale
+- [Openly Vale style](https://github.com/ChrisChinchilla/Openly)
+- [Apple Vale style guide](https://github.com/ChrisChinchilla/Apple-style-guide)
+
+See [my GitHub profile](https://github.com/chrischinchilla) for more.