Skip to main content

cassiaduske.com – Portfolio Site

Portfolio Project

Today

I’m proud to consider this site, cassiaduske.com, to be a portfolio piece in its own right. I build it from the ground up, to showcase my work, my skillset, and make it easy to get in touch.

I feel this site is representative of my belief in an independent internet, where every site has freedom of design and implementation. And I like to try to have fun with that freedom, while upholding accessibility.

Media Components

One of the reasons I’m not on an existing platform is that I want to be able to build custom (often interactive) showcases you can touch that aren’t just images. Too often sites like Behance, instagram, etc. reduce all rich content to images, and the accessibility options to plaintext. To this end, I’ve built my own media components where I can. For example:

All of these are built from accessible markup and display as normal media when JavaScript is not present.

Technology Timeline

cassiaduske.com has gone through a number of iterations over time as I refine it and as I explore new technology. I’ve documented some of that progress below in journal entries for posterity and to try to showcase the process.

  1. 2023/take4 - Svelte

    I’ve moved this site to svelte/sveltekit! Building with svelte has been a blast. Svelte is a compiler, not a runtime, so it gives you some of the advantages of modern javascript sites, but falls back to a functional, normal site like I’ve run before. I’m very satisfied with the development experience and the reliability of experience.

    Pros

    • Svelte’s syntax is concise and effective, and I can build progressive enhancement features in HTML and let svelte write the intermediary code.
    • Sveltekit allows live-editing, static compilation, etc. very pleasantly and is extremely flexible.

    There are a few cons:

    • Because Svelte is compiled (and I like custom media widgets / functionality), building a live post editor that supports more than basic Markdown would be an involved process that might not play to Sveltekit’s strengths, and adapting the editor to Sveltekit’s file storage might not map cleanly. For now, posts still have to be created in an editor like VSCode.

    • As far as I know, the component system doesn’t self-optimize in post, and so tiny ease-of-life components (like a Row component: <div class=row><slot/><row/>) don’t simplify are still part of the hierarchy in production and add to render processing.

    • Svelte has no first-party support for progressive images (yet) means I’ve had to hack together my own support, and every time I rebuild it reoptimizes all the images. Thankfully its live developer mode doesn’t require production rebuilds constantly, like Metalsmith did.

    • SvelteKit takes care of the low level for me, which means I don’t get to obsess over image locations, json filenames, etc.

  2. 2022/take3 - React/Gatsby

    As I build content, I’ve noticed friction with my platform-agnostic build system. My setup is not well-equipped for widgets or advanced functionality (eg. lightboxes, multimedia, complex form behaviour), and I want more from it. I’ve hacked some of these together in the short term, but in the long term I need a more maintainable solution.

    • Multimedia components like flipbooks, image comparisons, etc. are distributed through a separate build system (HTML / Nunjucks, CSS / SCSS, JS) and are difficult to edit and re-use.
    • Components and logic are verbose and complex
      • Progressive images are a great example of this
      • Nothing can be context-sensitive or inherited
    • Verbose vanilla JavaScript for progressive enhancement
    • No live editing/progressive compilation.
    • Single-Pass builds, components don’t know about and can’t interact with other components at build time.
    • Separation of JS and CSS made it difficult to integrate them, so I mostly dont’t, which has led to overly complicated CSS (and restyling components in JavaScript for progressive enhancement).

    React’s component workflow helped solve many of these problems for me, and the editing experience was much nicer, so I started looking for a blog/static-friendly component architecture with progressive enhancement. I tried moving to Gatsby (take3), but it was too slow. Gatsby took more than a minute to process 30 posts, and added significant loading time + download size. React was also too much infrastructure. I wanted the niceties of React development (components, good editing experience, better browing experience), without the bloat or mandatory JavaScript.

    In the end while I’ve gained the experience of rebuilding a significant portion of my site, this is not deployable.

  3. 2021/take2 - Metalsmith

    I overhauled the site to add examples of my work and a bio. I moved to metalsmith, building from template language Nunjucks and extensive SCSS. I created a consistent two-column layout which separates project descriptions + media, trying to compromise between ‘blog post’ layouts and ‘portfolio’/behance layouts that eschew any kind of copy.

    Metalsmith is totally platform-agnostic - you could use it to build websites, e-books, or nearly anything. I also use it to handle some PDF/Document creation internally. This simplicity makes it very powerful and extensible, and it allows me to process images, html, and blog posts through the same engine a variety of potential output formats (ie. website, ebook, slideshow, etc.)

  4. 2020/take1 - Raw HTML/CSS

    I built a contact form from raw HTML/CSS. This was enough to let me start establishing a brand, and it created an easy way to get in touch with me, linkable from anywhere. This version was akin to a link tree.

Project Skills

Motivation

Personal Project. See the rest of my portfolio.