Constant deprecation and breaking changes in npm packages cause "software rot" even for content-focused frontend micro-sites like my personal portfolio website. Thanks to progressive enhancement and static site building using Eleventy's JAMStack framework, I can still update my content and run my existing npm build jobs, but that's not the biggest problem, anyway.
I've come a long way, from Notepad++, Dreamweaver, Flash and Perl to the ever-channging modern frontend-focused full-stack web development and a diverse range of conceptual approaches, including
- Tutorial-Driven Development (we're all beginners at some point)
- Invoice-Driven Development (driven by customer demands)
- Content-Driven Development (focusing on marketing and SEO)
- Emotion-Driven Development (getting upset about WordPress and Shopware)
- Test-Driven Development (better quality control)
- Test-Assisted Development (a more pragmatic compromise)
- CV-Driven Development (React Recap, Astro, TypeScript, Tailwind)
My personal portfolio project saw a major relaunch in 2021, replacing its initial placeholder-business-card predecessor from 2012.
It's still mostly in the same state, a little less concise and more accessible, thanks to some half-hearted minor updates. The tech stack includes JavaScript/ES6, Babel, ESLint, HTML 5, CSS 3, PostCSS, Stylelint, Eleventy (11ty), Liquid, Netlify (for cloud hosting), CodeceptJS and BrowserStack (for testing), Git and GitHub for versioning and project management, and npm to update most of this software.
Not explicitly listed: http-server for a local preview, PHP for some simple back-end tasks, esbuild as a lightweight alternative to Webpack, and JSDoc as a lightweight alternative to TypeScript.
Having neglected to maintain my personal portfolio website project for a while, it proves that there can be technical debt even in a very small project.
Upgrading and refactoring a portfolio web project
- improve test coverage before anything else
- fix navigation inconsistencies
- fix graphic and typographic inconsistencies
- fix inconsistent code
- upgrade outdated software components
- add case studies
- revise landing pages for specific audiences
- end-customers (startups, small businesses, preferably with an ethcial focus)
- recruiters and "agencies" (B2B web development companies)
- fellow developers to collaborate with
- designers to collaborate with.
While this is still mostly focused on design, content and marketing, the "non-functional" aspects include
- ensure and improve accessibility and usability
- ensure and improve "web performance" (loading speed)
- ensure and improve maintainablility (decrease "technical debt")
- follow modern coding best practices.
Strategies and Synergies
Strategies for better maintainability and coding assistance:
- use popular mainstream tools
- replace Codecept by Cypress or Playwright
- evaluate if Eleventy is still a good choice
- verify that the code still follow current best practices
- verify that LLM-based AI tools can "understand" my code
As a part of my professional marketing strategy,
- ensure that my content is consistent across
- my portfolio website (Ingo-Steinke.de)
- my blog posts (DEV, Open Mind Culture, Substack)
- social media
- CV (PDF documents)
- public profiles (LinkedIn, Freelancermap, GitHub Pages, etc.)
- internal profiles (recruiters, business partners)
- business cards
Atomic Steps
Prioritize, avoid perfection, and split work it into small, actionable units, and use a straightforward tool like GitHub projects to track and organize.
