cassiaduske.com – Portfolio SitePortfolio 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:
- Flipbook, visible in ‘Speedrunning Magazine Spread’ and Coatesville Area Branch of the NAACP: 59th Annual Freedom Fund
- Image Comparison, visible in ‘Historic Autographs Website’
2023 – take4 (Now)
- 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
<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.
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
- 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.
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.)
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.