New Website 2020: After 250 hours, a complete rebuild—design, code, and content · Design Engineer from Hamburg, Germany
Finally, after 3 years with 250 hours of work, I finished my longest-running project: A new design and code for my website. Everything is new. I created over 1,400 files with 29,000 lines of code.
Finally, after3 yearswith250 hoursof work, I finished my longest-running project: Acomplete newdesign and code for my website. Everything is new. I created over1,400files with29,000lines of code. There aremultiplereasons it took me a while: I created not only a new design, with a light and dark theme, screen size-dependent grid, and typography. I developed it with a new technology stack, including the static-site generatorGatsby,TypeScript,Styled Components,MDX,GraphQL, andCSS Grid Layout. Light Version HomepageDark Version HomepageI always take the opportunity to learn new things while working on personal projects. This time I intentionally picked TypeScript, even though I knew it would slow me down. I wanted to learn it beyond basic training and theory, which is possible while doing it. I had worked with CSS Grid Layout before, but never with this level of complexity. Likewise, I wrote Unit Tests for every component and screen to get faster with ReactTesting LibraryandJest. The inspiration and design phase took a long time. I had to read many books, study styles, designs, and art to select the direction I was aiming for. JournalFor myJournal, previously called articles, a blog I write since 2006, I re-checked the text of every essay I wrote before and improved the quality of the images. New PagesI created new pages for parts of my website that previously didn’t exist or were not displayed properly. Projects & ShowcasesFor the first time, the website has aProjectssection showing my work, with further showcases for selected projects. HaikuMy Haiku (short Japanese poems) collection was previously loveless, dumped on a single page without proper context. After the relaunch, I dedicated a whole section to theHaiku, including English translations. HaikuSketchnotesI had a collection of my Sketchnotes hosted on a subdomain on Tumblr and wanted to move it back to my website and created my own Sketchnotes section. The Traditional Color of JapanA few years back I created a small project, creating an ASE file out of Traditional Colors of Japanese mentioned in a book with the same title. This project gotan own pageshowing all colors and the books these are from. The Traditional Colors of JapanThe entire project stretched for three years because I didn’t work continuously on the website, and sometimes didn’t do something for multiple months. Making-Of SeriesBut finally, the website is completed, and I deserve a long summer break without screen time. But I plan to release a series of Making-of posts I wrote over the next weeks. It will include a look into my thoughts and inspiration process, the design and development of the website. Stay UpdatedIf you want to be updated, you can follow myRSS/Atom Feed. I set up aNowpage, based on the idea ofDerek Silvers, who created amovementwhen he started his page. The Now page shows what I’m doing right now and will be updated irregularly. Feedback WelcomeYou can always send me a message or feedback, all possibilities to contact or connect me can be found on myAboutpage. I don’t track anything anymore and know nothing any longer about visitors to my website. Blissful ignorance from my side to all this data-driven, growth-driven, customer-satisfaction-driven development. Source CodeIf you’re interested in the code you don’t have to wait until I release the essay, thesource codeis publicly available on GitHub.