Skip to main content
Cassia Duske Creativity with Moving Parts!

cassiaduske.com – Portfolio Site

Portfolio Project

cassiaduske.com is my portfolio site, which you’re reading right now, probably! I created it to display my work, my skillset, and to create an easy way to contact me.

This site is a portfolio project by itself. I build it from the ground up, and it’s gone through several stages as I try to build my web presence and my portfolio.

I’ve built my own media components where practical. For example:

Technology Timeline

  1. 2023 – take4 (Now)

    I 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 the site regressing in a functional way.

    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:

    • As far as I know, the component system doesn’t self-optimize in post, and so tiny ease-of-life components (like my Row component: <div class=row><slot/><row/>) don’t simplify and still go through the whole component-render pipeline
    • 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
    • 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

    As I built content, I noticed some friction with my platform-agnostic build system. My setup was not well-equipped for any ‘advanced’ functionality beyond markup (lightboxes, multimedia, complex form behaviour), and I wanted more from it. I hacked some of these together in the short term, but in the long term I wanted a more maintainable solution.

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

    React’s component workflow helped solve many of these 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.

  3. 2021 – take2

    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

    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