From 7e53ef09a0e40ad5ae98c209a6371db8ca8aec71 Mon Sep 17 00:00:00 2001 From: Declan Chidlow Date: Tue, 18 Feb 2025 15:49:39 +0800 Subject: [PATCH] Improve portfolio --- src/assets/styles/pages/portfolio.css | 35 +++++++++++++++++++++------ src/pages/index.ori | 5 ++-- src/pages/portfolio.ori | 26 +++++++++++++++----- src/portfolio/adduce.md | 4 ++- src/portfolio/automod.md | 15 ++++++++++++ src/portfolio/capchord.md | 22 +++++++++++------ src/portfolio/meat-typeface.md | 13 ---------- src/portfolio/mutant-remix.md | 12 +++++---- src/portfolio/osseo-flesh.md | 17 +++++++++++++ src/portfolio/pam-carters-poetry.md | 14 ++++++----- src/portfolio_template.ori | 7 +++--- 11 files changed, 118 insertions(+), 52 deletions(-) create mode 100755 src/portfolio/automod.md delete mode 100755 src/portfolio/meat-typeface.md create mode 100755 src/portfolio/osseo-flesh.md diff --git a/src/assets/styles/pages/portfolio.css b/src/assets/styles/pages/portfolio.css index 7df1937a..8cba4dbe 100644 --- a/src/assets/styles/pages/portfolio.css +++ b/src/assets/styles/pages/portfolio.css @@ -1,33 +1,52 @@ .portfolio-items { display: flex; - height: calc(100vh - 8rem); gap: 3rem; - overflow-x: auto; + overflow: auto hidden; scroll-snap-type: x mandatory; - a { + > a, + .not-hoisted > a { display: flex; flex-direction: column; justify-content: center; min-width: calc(100vw - 13rem); - padding: 2rem 1rem; + padding: 2rem; text-decoration: none; scroll-snap-align: center; scale: 0.98; transition: scale 0.25s; - &:hover { + &:hover, + &:focus { scale: 1; } h2 { - font-size: clamp(5.5rem, 7vw, 8rem); + font-size: clamp(2rem, 3.5rem + 3.5vw, 4.5rem); line-height: 1; + margin-bottom: 0.5rem; } p { - font-size: 1.5rem; - margin: 0; + font-size: 1.3rem; + } + } + + .not-hoisted { + display: flex; + flex-direction: column; + gap: 1rem; + + h2 { + font-size: 3rem; + } + + p { + font-size: inherit; + } + + > p { + text-align: center; } } diff --git a/src/pages/index.ori b/src/pages/index.ori index 84a1baef..4b981c2a 100644 --- a/src/pages/index.ori +++ b/src/pages/index.ori @@ -51,12 +51,13 @@

Collection of web bits.

- Also present are all of my microblog posts, which can be accessed along with the rest of my stream of consciousness via the firehose section. Ways to follow and subscribe to my output are indicated on my syndication page. Curious about my tools and setup? My uses page has all the details.

+

Also present are all of my microblog posts, which can be accessed along with the rest of my stream of consciousness via the firehose section. Ways to follow and subscribe to my output are indicated on my syndication page.

+

My uses page has all the details on my tools and setup, the elsewhere section shows my writing or writing I have been involved with outside of this site, and my contact page should be self-explanatory.

Supporting Me

-

If you enjoy or otherwise benefit from the content on this site and/or any of the other things I've made, I'd appreciate if you considered supporting me financially.

+

If you enjoy or otherwise benefit from the content on this site and/or any of the other things I've made, I'd appreciate if you considered supporting me financially.

diff --git a/src/pages/portfolio.ori b/src/pages/portfolio.ori index 3714271d..0ff9be3c 100644 --- a/src/pages/portfolio.ori +++ b/src/pages/portfolio.ori @@ -7,10 +7,24 @@ `

Portfolio

- ${ map(portfolio_data, - (post, key) => - ` -

${ post/title }

-

${ post/tag_line }

- `)} + ${ map(portfolio_data, (item, key) => + `${ item/hoisted ? + ` +

${ item/title }

+

${ item/og_description }

+ ` : '' + }` + )} + +
+ ${ map(portfolio_data, (item, key) => + `${ item/hoisted ? '' : + ` +

${ item/title }

+

${ item/og_description }

+ ` + }` + )} +

See also my published writing elsewhere.

+
`}) diff --git a/src/portfolio/adduce.md b/src/portfolio/adduce.md index bffcb029..fce87f6c 100755 --- a/src/portfolio/adduce.md +++ b/src/portfolio/adduce.md @@ -1,7 +1,9 @@ --- title: Adduce -tag_line: A static site generator with the flexibility to bring web projects to life. +description: Discover Adduce, the flexible static site generator I helped build and now maintain. Learn how I expanded my skills beyond front-end development to create a production-ready tool now powering multiple websites, complete with comprehensive documentation and available as open-source under LGPL v3. +og_description: A static site generator with the flexibility to bring web projects to life. accent_colour: var(--blue) +hoisted: true --- After experimenting with some popular static site generators, I found myself wanting something a bit different -- a tad more conducive to my workflow. So, I figured I'd try making one myself. diff --git a/src/portfolio/automod.md b/src/portfolio/automod.md new file mode 100755 index 00000000..e79e4133 --- /dev/null +++ b/src/portfolio/automod.md @@ -0,0 +1,15 @@ +--- +title: AutoMod +description: Explore my work on AutoMod, a popular moderation bot I developed for Revolt that protects over 100K users across 4,600+ servers. I maintain and host this essential community safety tool, complete with comprehensive documentation and open-source code available under AGPL v3. +og_description: A moderation bot for Revolt that keeps communities safe. +accent_colour: var(--red) +hoisted: true +--- + +AutoMod is a moderation bot for the chat platform [Revolt](https://revolt.chat), of which I am a core team member. It is one of the most popular, bots on the platform being present in some 4600 servers with a total user count of some 100K users. + +I develop, maintain, and host the bot for public usage on the official Revolt instance. It provides commands that make it easy to filter messages, take punitive actions on users, and log actions, among much more. + +All of the bot's details and comprehensive documentation are available on [the website I built and constructed for it](https://automod.vale.rocks). + +The project is open source under the AGPL v3, with all the source code and documentation being [available on GitHub](https://github.com/DeclanChidlow/AutoMod). Contributions are welcome. diff --git a/src/portfolio/capchord.md b/src/portfolio/capchord.md index f012eea3..4bb1bbbb 100755 --- a/src/portfolio/capchord.md +++ b/src/portfolio/capchord.md @@ -1,19 +1,25 @@ --- title: CapChord -tag_line: Self-founded tech support business. +description: Discover CapChord, my adaptive business venture that evolved from specialised closed captioning services to personalised tech support for seniors. Learn how I built a client-focused approach that combines troubleshooting with accessible teaching methods, delivering solutions while empowering clients to better understand their technology. +og_description: Self-founded business. accent_colour: var(--grey) +hoisted: false --- -CapChord is a mobile call-out business that I both personally own and operate. It's dedicated to helping the elderly and those with limited technical knowledge by providing support with a range of digital tasks. +CapChord is my business that has taken on various purposes throughout the years. -## Purpose and Goal +## Captioning -The primary directive of CapChord is to allow those without the necessary knowledge to harness the benefits of modern technology without strife. I ensure that clients can comfortably communicate with loved ones, access essential online services, and enjoy the advantages of the information age. +CapChord started out offering closed captioning services for web content. This is the origin of its name, being a blend of caption and chord[^1]. Though the sudden jump in publicly available AI offerings eventually made this non-viable on a small scale. -## Problems and Thought Process +## Tech Support -I've faced a few problems with CapChord. With no formal training in business I had to learn what was necessary for me to start operation. I also noticed that some clients would need not just help, but a full explanation of what I was doing and how I was doing it to assist them in understanding their own technology. This lead me to tailor my operation to explaining and teaching as well as troubleshooting and fixing in a way that is both efficient and effective. +Following the winding down of captioning services, CapChord pivoted to mobile call-out support dedicated to helping the elderly and those with limited technical knowledge by providing support with a range of digital tasks. -## Lessons Learned +This face-to-face support was vital in helping me learn how to liaise with clients and how to act in a professional environment. I picked up on issues such as some clients needing not just help but a full explanation of what I was doing and how I was doing it to assist them in understanding their own technology. This led me to tailor my operation to explaining and teaching as well as troubleshooting and fixing in a way that is both efficient and effective. -Through this job I've learned much. I've learnt how to liaise with clients, how to act in a professional environment, and the basics of running a business. It's also had a large hand in building my confidence as well as other soft skills. +## Next + +Now CapChord is switching things up and expanding onto its next frontier. + +[^1]: A chord is an action made when typing on a stenotype. It's somewhat equivalent to pressing a key on a keyboard, though that is a gross oversimplification. diff --git a/src/portfolio/meat-typeface.md b/src/portfolio/meat-typeface.md deleted file mode 100755 index 63980c98..00000000 --- a/src/portfolio/meat-typeface.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Osseo Flesh -tag_line: An experiment in fleshy type design and variable axis. -accent_colour: var(--grey) ---- - -I'm near certain that most people, at some point, have fantasised about wielding meat as a writing tool. Well, you needn't wait any longer, as my Osseo Flesh fulfils that dream. - -While studying design, I received the brief of creating a typeface. As long as it had the entire alphabet, both upper and lowercase, anything went. I tested a few considerations, including singed paper, before settling on making a "meat font". - -For a few fleeting moments, I considered using actual meat but thought better and instead took it as a wonderful opportunity to test Adobe Illustrator's 3D tools. Using some interesting texturing, I managed to concoct a fleshy, meaty typeface. - -While cool, this wasn't fit for any actual use, so I pivoted to keeping things flat and pushing boundries with variable axes, inspired by the typeface [Climate Crisis](https://design.google/library/glacial-melt-font). diff --git a/src/portfolio/mutant-remix.md b/src/portfolio/mutant-remix.md index 59d81135..a80e1eee 100644 --- a/src/portfolio/mutant-remix.md +++ b/src/portfolio/mutant-remix.md @@ -1,17 +1,19 @@ --- title: Mutant Remix -tag_line: A website and branding for an emoji pack so good, you'll never want to use another. +description: Explore my web development portfolio featuring Mutant Remix, a distinctive emoji pack I designed for the Revolt chat platform. Discover how I transformed concept designs into an interactive website using my static site generator Adduce, implemented dynamic GitHub API integration, and created playful animations that perfectly capture the emoji pack's unique personality. +og_description: A website and branding for an emoji pack so good, you'll never want to use another. accent_colour: var(--orange) +hoisted: false --- -Mutant Remix is an emoji pack built for the chat platform [Revolt](https://revolt.chat). It combines the blobby shapes of Android's emojis of old with the crisp, bold style of Mutant Standard, creating something new, fresh, and distinct. +Mutant Remix is an emoji pack built for the chat platform [Revolt](https://revolt.chat), of which I am a core member. It combines the blobby shapes of Android's emojis of old with the crisp, bold style of Mutant Standard, creating something new, fresh, and distinct. -I was tasked with building a website for the pack. A previous contributor already had a design in mind, which I fleshed out in Figma, cleaned up, and put to code. I used my static site generator, [Adduce](https://adduce.vale.rocks) and constructed a site that introduces people to the project. +I was tasked with building a website for the pack. A previous contributor already had a design in mind, which I fleshed out in Figma, cleaned up, and put to code. I used my static site generator, [Adduce](https://adduce.vale.rocks), and constructed a site that introduces people to the project. The goal was to keep it simple and to build on the style created by the emojis themselves. This meant keeping things flat, keeping the same palette, and keeping the playful tone. -One of my favourite features that captured the playful feeling were the buttons [on the download page](https://mutant.revolt.chat/downloads) (and the ones on the landing). They rise to your cursor when hovered, and depress when clicked with a springy motion. +One of my favourite features that captures the playful feeling are the buttons [on the download page](https://mutant.revolt.chat/downloads) (and the ones on the landing). They rise to your cursor when hovered and depress when clicked with a springy motion. -The [releases page](https://mutant.revolt.chat/releases) is implemented dynamically with some client side JavaScript that hooks into the GitHub API to ensure that the data is always up-to-date and that contributors needn't manually publish updates. +The [releases page](https://mutant.revolt.chat/releases) is implemented dynamically with some client-side JavaScript that hooks into the GitHub API to ensure that the data is always up-to-date and that contributors needn't manually publish updates. Along with the site, I also updated some of the branding by cleaning things up and creating embed images for the related GitHub repositories. diff --git a/src/portfolio/osseo-flesh.md b/src/portfolio/osseo-flesh.md new file mode 100755 index 00000000..c150f2d1 --- /dev/null +++ b/src/portfolio/osseo-flesh.md @@ -0,0 +1,17 @@ +--- +title: Osseo Flesh +description: Explore Osseo Flesh, my experimental variable axis typeface that transforms typography into visceral art. Discover how I pushed creative boundaries by designing a font that allows users to control the amount of meat, skin, and sinews covering a legible bone structure, inspired by Adobe Illustrator's 3D capabilities and the innovative Climate Crisis typeface. +og_description: An experiment in fleshy typography and variable axis fonts. +accent_colour: var(--grey) +hoisted: true +--- + +I'm near certain that most people, at some point, have fantasised about wielding meat as a writing tool. Well, you needn't wait any longer, as my Osseo Flesh fulfils that dream. + +While studying design, I received the brief of creating a typeface. As long as it had the entire alphabet, both upper and lowercase, anything went. I tested a few considerations, including singed paper, before settling on making a "meat font". + +For a few fleeting moments, I considered using actual meat but thought better of it and instead took it as a wonderful opportunity to test Adobe Illustrator's 3D tools. Using some interesting texturing, I managed to concoct a fleshy, meaty typeface. + +While cool, this wasn't fit for any actual use, so I pivoted to keeping things flat and pushing boundaries with variable axes, inspired by the typeface [Climate Crisis](https://design.google/library/glacial-melt-font). + +The variable axis allows for controlling the amount of meat, skin, and sinews that cover the core bone. The underlying bone type is unaffected by this for the purpose of keeping legibility at every point. diff --git a/src/portfolio/pam-carters-poetry.md b/src/portfolio/pam-carters-poetry.md index 595caddf..82b45ac9 100755 --- a/src/portfolio/pam-carters-poetry.md +++ b/src/portfolio/pam-carters-poetry.md @@ -1,15 +1,17 @@ --- title: Pam Carter's Scriptural Poetry -tag_line: A four book collection of poetry brought to life with splendiferous design. +description: Explore my portfolio showcase of the four-volume collection of Pamela Maitland Carter's poetry I designed and produced. Learn how I mastered complex typesetting challenges unique to poetry, restored historical family photographs, and gained valuable print publication experience while creating professionally published books avaliable for purchace. +og_description: A four-book collection of poetry brought to life with splendiferous design. accent_colour: var(--green) +hoisted: true --- -My grandmother, Pamela Maitland Carter, has been writing poetry for decades. Leveraging my design knowledge and extensive experience with software such as Adobe's Creative Cloud, I compiled many of these poems into a four volume set. +My grandmother, Pamela Maitland Carter, has been writing poetry for decades. Leveraging my design knowledge and extensive experience with software such as Adobe's Creative Cloud, I compiled many of these poems into a four-volume set of print books. -The books contain a mixture of stock photos, photography taken by myself, and remastered photos from the family archives (in some cases meticulously colourised) . +Designing around poetry was a challenging task, as poems place much more emphasis on typesetting than standard prose. Poems have specific line breaks and spacing, non-standard alignments, variable line lengths, and a range of other typographical and layout considerations that are pushed to the forefront given the often minimal text content. -The books feature a combination of stock photos, [my own photography](/photography), and family archive images. Some of these archival photos have been meticulously colourized, while others 'merely' needed restoration. +The books feature a combination of stock photos, [my own photography](/photography), and scanned family archive images where relevant. Many of these archival photos were in black and white, so I had to meticulously colourise them. Others were extremely old and stored in poor conditions, which required me to laboriously restore them to presentable states. -Beyond crafting a polished set of books, the entire process proved an excellent opportunity to broaden my knowledge of press publication and design for physical mediums. +Beyond crafting a polished set of books, the entire process proved an excellent opportunity to broaden my knowledge of print publication and design for physical mediums -- something I had sorely been lacking. -If you'd like a copy, the whole set is [available to purchase on Amazon](https://amazon.com/dp/B0CW1B4V2M). +If you'd like to own a copy for yourself, the whole set is [available to purchase on Amazon](https://amazon.com/dp/B0CW1B4V2M). diff --git a/src/portfolio_template.ori b/src/portfolio_template.ori index c64755f8..7dab884f 100644 --- a/src/portfolio_template.ori +++ b/src/portfolio_template.ori @@ -1,7 +1,7 @@ (post) => main_template.ori({ title: post/title - description: post/tag_line - og_description: post/tag_line + description: post/description + og_description: post/og_description stylesheet: "components/article_header.css" @text: @@ -9,9 +9,10 @@ Portfolio -
+

${ post/title }

+

${ post/og_description}