[{"data":1,"prerenderedAt":364},["ShallowReactive",2],{"blog-\u002Fblog\u002F2026-building-jj-dev":3},{"id":4,"title":5,"body":6,"cover":344,"description":345,"draft":346,"extension":347,"meta":348,"navigation":349,"path":350,"publishedAt":351,"readingTime":344,"seo":352,"series":353,"stem":355,"subtitle":356,"tags":357,"updatedAt":344,"__hash__":363},"blog\u002Fblog\u002F2026-building-jj-dev.md","Building jj-dev",{"type":7,"value":8,"toc":333},"minimark",[9,23,34,37,42,48,58,64,134,137,140,146,150,156,184,187,200,204,210,213,217,220,223,227,233,236,240,243,253,257,260,263,278,281,309,313,319,327,330],[10,11,12,13,17,18,22],"p",{},"Welcome to ",[14,15,16],"code",{},"jj-dev",", the self-coined moniker for a project of mine that has been several years in the making: my personal website. I wanted to dedicate the introductory post for this site to the what, why, and how of this project: what this site is ",[19,20,21],"em",{},"(and is eventually (hopefully) going to be)",", how I created it, and perhaps, most importantly, why I built it.",[10,24,25,26,28,29,33],{},"This post represents the first in a series of explanatory deep dives I want to create to illustrate the process of creating this project. I hope that in documenting my process, showing how the foundational components of an application\u002Ftechnology come together from ideation to implementation, and explaining the design rationale, engineering patterns, and workflows that I have put into place not only serve to make ",[14,27,16],{}," a self-documenting artifact, but also something that ",[30,31,32],"strong",{},"you",", the reader can take in as inspiration and a resource should you choose to create your own website.",[10,35,36],{},"Building software doesn't have to be an arid, leaden process, and I hope if the reader can take anything away from this project or this post, it's that it should be fun! I want this to be a platform for me to express myself, more akin to a metaphorical digital canvas and paintbrush than an exercise in drudgery and monotony. So, if you, the reader, have made it this far, first of all, congratulations, for bearing through my yapping. But more importantly, I look forward to dispelling the myth that technology and software development is some mythical, complex endeavor for introverts sitting behind a glowing screen in a dark room; it's a beautiful, manifold space where we can express ourselves, embrace creativity, and solve problems in a unique and fun way.",[38,39,41],"h2",{"id":40},"a-passion-project-a-headache-and-many-iterations","A Passion Project, a Headache, and Many Iterations",[10,43,44,45,47],{},"Before we get into the current state of things, let's rewind a bit. As a software engineer by trade, a designer and creator by passion, and an easily distracted, project-starter-and-dropper by habit, ",[14,46,16],{}," has been an effort of multiple iterations.",[10,49,50,51,54,55],{},"I've always wanted a personal website, and when I saw the ",[14,52,53],{},"jens-johnson.com"," domain for sale back in 2020, the nascent, naive engineer in me thought ",[19,56,57],{},"\"What the hell, let's buy it and start building.\"",[10,59,60,61,63],{},"This decision resulted in the 6+ year cyclical saga of building, tearing down, designing, and re-building this project. Over the course of resculpting and reimplementing ",[14,62,16],{},", it's gone through a spectrum of different stacks, tools, and technologies, including:",[65,66,67,79,94,112,131],"ul",{},[68,69,70,71,78],"li",{},"A GitHub Sites native-approach using ",[72,73,77],"a",{"href":74,"rel":75},"https:\u002F\u002Fjekyllrb.com\u002F",[76],"nofollow","Jekyll"," templates and flavored markdown",[68,80,81,82,87,88,93],{},"An ",[72,83,86],{"href":84,"rel":85},"https:\u002F\u002Faws.amazon.com\u002Flightsail\u002F",[76],"AWS Lightsail"," deployment with an ",[72,89,92],{"href":90,"rel":91},"https:\u002F\u002Fexpressjs.com\u002F",[76],"Express.js"," backend and React-flavored UI",[68,95,96,97,102,103,108,109],{},"A ",[72,98,101],{"href":99,"rel":100},"https:\u002F\u002Fwww.djangoproject.com\u002F",[76],"Django"," \u002F ",[72,104,107],{"href":105,"rel":106},"https:\u002F\u002Fflask.palletsprojects.com\u002F",[76],"Flask"," Python build ",[19,110,111],{},"(oof, that one was painful)",[68,113,114,115,102,120,102,125,130],{},"A pure ",[72,116,119],{"href":117,"rel":118},"https:\u002F\u002Fvuejs.org\u002F",[76],"Vue",[72,121,124],{"href":122,"rel":123},"https:\u002F\u002Fvuetifyjs.com\u002F",[76],"Vuetify",[72,126,129],{"href":127,"rel":128},"https:\u002F\u002Fwww.typescriptlang.org\u002F",[76],"TypeScript"," stack",[68,132,133],{},"... and countless others",[10,135,136],{},"Each of these approaches has had roughly the same pattern:",[138,139],"iteration-cycle",{},[10,141,142,143,145],{},"I suppose ",[14,144,16],{}," has been the perfect microcosm of my ADHD \u002F obsessive personality: I get hyperfocused on something, build momentum, but then it tapers off. This time I wanted to do things differently, and hopefully this inaugural post highlights just that.",[38,147,149],{"id":148},"creating-it-right-this-time","Creating It Right This Time",[10,151,152,153,155],{},"My previous efforts on ",[14,154,16],{}," taught me a few things:",[157,158,159,165,171],"ol",{},[68,160,161,164],{},[30,162,163],{},"Maintainability"," is a key feature for this project: it should be lightweight enough to maintain \u002F support after it has been scaffolded and created. I want my portfolio \u002F personal site to be self-sustaining: once the bones are in place, upkeep and overhead should be minimal.",[68,166,167,170],{},[30,168,169],{},"Don't reinvent the (digital) wheel",": The web application development space is one of the most wonderfully supported and maintained software engineering areas. There is a vast wealth of resources for projects like this, for all facets, from testing to accessibility. Learn to leverage and build upon the primitives rather than recreating them.",[68,172,173,176,177,179,180,183],{},[30,174,175],{},"Personal touch is a key feature, not an afterthought."," I want ",[14,178,16],{}," to be a representation of me, Jens Johnson, not a soul-less, corporate-y resume wrapper that reads like a LinkedIn page. Sure, I want to highlight my professional skills and accomplishments; those are important. But they are no less important than showing the other facets of me: my passion for environmental stewardship and nature, my musings and ramblings on technology and culture, my not-so-precise-and-technical baking skills (of which I am still honing). I hope this can serve to be a window into all things ",[19,181,182],{},"me",", and that needed to be a foundational consideration when beginning this undertaking.",[10,185,186],{},"In addition to these, a fourth, more novel finding:",[157,188,190],{"start":189},4,[68,191,192,195,196,199],{},[30,193,194],{},"Embrace and harness agentic development."," Don't run from the ",[19,197,198],{},"\"AI boogeyman\"","; learn how to leverage agents to automate the monotonous, tedious parts of the process: making stylistic tweaks, improving CI\u002FCD, bolstering monitoring and observability, and so much more. This piece has been crucial for me in accelerating the development of this project as a solo developer, and it is, in general, one of the facets of development in which I see some of the most untapped sources of engineering capabilities. Agentic development and design represents the modern frontier of software engineering, and I would be remiss if I didn't focus on its incorporation into this project.",[38,201,203],{"id":202},"putting-the-foundation-in-place-project-goals","Putting the Foundation in Place: Project Goals",[10,205,206,207,209],{},"Alright, moving forward. I knew I needed to create something maintainable, that was future-proofed and iteration-optimized, something that was integratable with the vast web application resource ecosystem, something with my personal touch and ethos baked into the very foundation, and something that could support agentic development workflows. These were the \"guardrails\" of ",[14,208,16],{}," that helped me shape the goals for this project.",[211,212],"goals-carousel",{},[38,214,216],{"id":215},"the-stack","The Stack",[218,219],"stack-blocks",{},[10,221,222],{},"As you can see here, the stack is a representation in and of itself of the project's goals: lightweight but robust, customizable but maintainable, and personal but extensible.",[38,224,226],{"id":225},"rooted-in-nature-the-design","Rooted in Nature: The Design",[10,228,229,230,232],{},"I wanted ",[14,231,16],{}," to be something that imbued naturistic concepts and principles, not a tech-heavy digitally-washed splash of pixels. As such, an integral part of the design process was looking out(side) to nature to derive tokens and a design framework that reflected that:",[234,235],"design-inspiration",{},[38,237,239],{"id":238},"component-architecture-atomic-but-loosely","Component Architecture: Atomic, But Loosely",[10,241,242],{},"One of the biggest design pain-points for me for a UI application like this is defining the component organization pattern for the project. I settled on an atomic design-esque approach which helps me organize primitives for extensibility and reusability, as well as partition dedicated, feature-tied widgets that build on those primitives:",[244,245,250],"pre",{"className":246,"code":248,"language":249},[247],"language-text","components\u002F\n├── brand\u002F          ← global, branding (i.e. logos, wordmarks, etc.)\n├── containment\u002F    ← containers and content organization (i.e. cards, surfaces)\n├── data\u002F           ← dedicated data display (i.e. status badge, tables, etc.)\n├── feedback\u002F       ← interactivity and responsiveness (i.e. scroll progress, alerts)\n├── layout\u002F         ← layout assistance and organization (i.e. navigation, footer)\n├── primitives\u002F     ← atomic primitive foundationals (i.e. heroes, parallax)\n└── widgets\u002F        ← custom-tailored page sections that build on all of the above\n","text",[14,251,248],{"__ignoreMap":252},"",[38,254,256],{"id":255},"intuitive-cicd-orchestration","Intuitive CI\u002FCD Orchestration",[10,258,259],{},"Full disclosure here: I do not claim to be a DevOps veteran or expert. However, I know that the best projects and software are supported by robust build tooling and pipelines. Part of this process was integrating a three-fold branch and deploy model:",[261,262],"branch-table",{},[10,264,265,266,269,270,273,274,277],{},"This segregation allows me to cleanly distinguish feature deploys on a dedicated ",[14,267,268],{},"feat\u002F*"," branch, stage them on the long-lived ",[14,271,272],{},"staging"," branch for live QA, and when ready, open a ",[14,275,276],{},"staging → main"," promotion PR automatically through GitHub Actions to push them to production.",[10,279,280],{},"Some other facets of my CI\u002FCD process:",[65,282,283,298,301],{},[68,284,285,286,291,292,297],{},"Git hooks supported by ",[72,287,290],{"href":288,"rel":289},"https:\u002F\u002Flefthook.dev\u002F",[76],"Lefthook"," and ",[72,293,296],{"href":294,"rel":295},"https:\u002F\u002Fcommitlint.js.org\u002F",[76],"Commitlint"," automate the necessary linting, testing, validation, and artifact generation steps of the pipeline.",[68,299,300],{},"Automated version control steps ensure changelog validation, release tagging, and versioning to mitigate version conflicts and ensure parity, consistency, and transparency.",[68,302,303,308],{},[72,304,307],{"href":305,"rel":306},"https:\u002F\u002Fdocs.github.com\u002Fen\u002Factions",[76],"GitHub Actions"," acts as a source of truth for CI\u002FCD: seamless integration with code changes to the repo ensures that actions provide clean workflows for maintaining the project.",[38,310,312],{"id":311},"whats-next","What's Next?",[10,314,315,316,318],{},"To the reader: I thank you for your patience in sifting through my verbosity in explaining this project, and I hope this post can be of some value to you if you're thinking of starting your own, or looking at ways to improve. As I continue to expand ",[14,317,16],{},", I look forward on taking you along for the journey: the fun parts, the painful debugging, and everything in between.",[10,320,321,322,326],{},"Have something you want me to dig into further on the next post? Let me know: ",[72,323,325],{"href":324},"mailto:jens@jens-johnson.com?subject=jj-dev%20blog%20feedback","jens@jens-johnson.com",".",[10,328,329],{},"Til next time,",[10,331,332],{},"J",{"title":252,"searchDepth":334,"depth":334,"links":335},2,[336,337,338,339,340,341,342,343],{"id":40,"depth":334,"text":41},{"id":148,"depth":334,"text":149},{"id":202,"depth":334,"text":203},{"id":215,"depth":334,"text":216},{"id":225,"depth":334,"text":226},{"id":238,"depth":334,"text":239},{"id":255,"depth":334,"text":256},{"id":311,"depth":334,"text":312},null,"The introductory meta-post: how I built this site, why I'm here and (maybe) why you're reading this.\n",false,"md",{},true,"\u002Fblog\u002F2026-building-jj-dev","2026-05-25",{"title":5,"description":345},{"name":5,"part":354},1,"blog\u002F2026-building-jj-dev","A portfolio, a passion project, or something else?",[358,359,360,361,362],"Design","Process","Web Development","Nuxt","Tailwind","Zjy8dO1ya6HsxIX7RE3MHsx2T4lIg3hctIABt1Wkcqk",1781317868781]