From 7e4e1304e6b9e0c5facaedff893fd99190595655 Mon Sep 17 00:00:00 2001 From: Stefan Imhoff Date: Tue, 4 Apr 2023 19:43:10 +0200 Subject: [PATCH] feat: add text for static pages --- src/pages/about.mdx | 20 +++++++++++- src/pages/colophon.mdx | 22 ++++++++++++- src/pages/imprint.mdx | 31 ++++++++++++++++++- src/pages/now.mdx | 11 ++++++- src/pages/tools.mdx | 70 +++++++++++++++++++++++++++++++++++++++++- 5 files changed, 149 insertions(+), 5 deletions(-) diff --git a/src/pages/about.mdx b/src/pages/about.mdx index c3cad64..e661067 100644 --- a/src/pages/about.mdx +++ b/src/pages/about.mdx @@ -6,4 +6,22 @@ title: About import { mapping } from '../mdx-components.ts'; export const components = mapping; -About Page +Welcome! My name is _Stefan Imhoff_, and I am a Senior Front-End Web Developer and Designer from Hamburg, Germany. + +I find inspiration in a wide variety of media, from reading challenging and heterodox [books](https://goodreads.com/kogakure) about philosophy, science, and economics to listening to [podcasts](https://raindrop.io/kogakure/podcasts-24118384), watching [TV shows](https://www.themoviedb.org/u/kogakure/favorites/tv) and [movies](https://www.themoviedb.org/u/kogakure/favorites), and indulging in [Korean](https://www.themoviedb.org/list/8216385) and [Japanese](https://www.themoviedb.org/list/106001) dramas on Netflix. + +As a passionate enthusiast of storytelling, I am convinced that humans understand the world and find meaning through narratives. This fascination has led me to contribute to the propagation of impactful ideas through my writing. Whether I am crafting [essays](/journal/), [Sketchnotes](/sketchnotes/), or [Haiku](/haiku/), I aim to use the power of storytelling to communicate messages that resonate with readers. I have even written a free [book about Ninja and Ninjutsu](https://www.kogakure.de/en/). + +In my spare time, I enjoy exploring nature through activities such as [walking and cycling](https://hamburg.stefanimhoff.de/), and doing [Calisthenics](/calisthenics/). I have a keen appreciation for the beauty of everyday life and find joy in the small things. Whether it’s the peacefulness of a forest, the vastness of the sea, or the grandeur of a mountain, I am constantly inspired by nature’s magnificence. I enjoy both the power of thunderstorms and the warmth of sunny days. + +I see myself as a [Minimalist](/minimalism/), a Stoic, an Introvert, and Japanophile. + +Minimalism allows me to simplify my life and focus on what truly matters. By owning only what I need and cherish, I am able to reduce clutter, increase my sense of contentment, and live with intention. + +Stoicism offers me a practical philosophy of life that emphasizes rationality, self-control, and virtue. By focusing on what is within my control and accepting what is not, I can develop a sense of inner peace, resilience, and purpose, even in the face of adversity. + +As an introvert, I have a special relationship with silence. I’ll pretend to be out when someone knocks at my door unannounced (居留守), put on Do Not Disturb the whole day, and don’t answer calls from unknown numbers. With noise-canceling headphones as my trusty companion, I don’t need constant stimulation to be happy. And when it comes to socializing, I prefer quality to quantity. + +I have a deep appreciation for Japanese culture and aesthetics. From the simplicity and elegance of Japanese design to the philosophies of Wabi Sabi, Shibui, or Ikigai, I find myself constantly inspired. I am fascinated by the history of Japan, from the Samurai code of Bushidō to the ancient Shinto religion. I enjoy exploring traditional Japanese arts such as calligraphy and Sumi-e painting, and admire the natural beauty of Japanese gardens and architecture. Not only that, but I’m learning the Japanese language for a while, but I’m not fluent yet. Through my love for Japan, I seek greater meaning in life and cultivate a sense of harmony with the world around me. + +Thank you for taking the time to learn more about me. I look forward to connecting with you. diff --git a/src/pages/colophon.mdx b/src/pages/colophon.mdx index 98b61ac..520d975 100644 --- a/src/pages/colophon.mdx +++ b/src/pages/colophon.mdx @@ -1,9 +1,29 @@ --- layout: ../layouts/PageLayout.astro title: Colophon +intro: In publishing, a colophon is a brief statement containing information about the publication. --- import { mapping } from '../mdx-components.ts'; export const components = mapping; -Colophon Page +The source code of this website is available on [GitHub](https://github.com/kogakure/website-astro-stefanimhoff.de). You are welcome to learn from the source code and reuse code for your projects. Don’t steal it. Learn from it. Remix. Reuse. Build your own things. 🤘 + +## Design + +- I designed the website myself in [Affinity Designer](https://affinity.serif.com/designer/), using the Japanese art form of _shibui_ (渋い) as a source of inspiration. To learn more about the process, please read the essays about the [inspiration](/new-website-2020-inspiration/) and [design](/new-website-2020-design/). +- The design uses the variable typeface [Secuela](https://fontlibrary.org/en/font/secuela-variable) by [deFharo](https://github.com/defharo). I use a font scale that is based on the golden ratio, and the font scales automatically to the viewport size. +- The Bonsai image on my homepage took [Norio Nakayama](https://www.flickr.com/photos/norio-nakayama/9156103138). +- The minimalistic icons are by [Remix Icon](https://remixicon.com/), which is [Jimmy Cheung](https://github.com/xiaochunjimmy) and [Wendy Gao](https://github.com/wendygaoyuan). + +## Technology + +- The website is built with [Astro](https://astro.build/), the all-in-one web framework. +- I write the code in [Neovim](https://neovim.io/), using [GitHub Copilot](https://github.com/features/copilot). +- My essays are written in [MDX](https://mdxjs.com/), which allows the usage of components in the [Markdown](https://daringfireball.net/projects/markdown/) content. +- The layouts, templates, and components are written in Astro with a few sprinkles of [Svelte](https://svelte.dev/) here and there. +- I use [Tailwind CSS](https://tailwindcss.com/) for my styling. +- The website is hosted on Netlify. +- TODO: JS Libraries +- TODO: Astro Plugins +- TODO: Components Examples diff --git a/src/pages/imprint.mdx b/src/pages/imprint.mdx index 56b0d38..9f6651c 100644 --- a/src/pages/imprint.mdx +++ b/src/pages/imprint.mdx @@ -6,4 +6,33 @@ title: Imprint import { mapping } from '../mdx-components.ts'; export const components = mapping; -Imprint Page +### Contact Person + +Stefan Imhoff \ +Walter-Heitmann-Str. 2 \ +22159 Hamburg \ +[Contact](#) + +### License + +All content has a copyright by _Stefan Imhoff_ unless otherwise stated. You are welcome to learn from the [Source Code](https://github.com/kogakure/website-astro-stefanimhoff.de) and reuse code for your projects. + +The essays in my [Journal](/journal/) on this website have a [Creative Commons](https://creativecommons.org/licenses/by-nc-sa/4.0/) license. + +To use my design (the unique combination of layout, photos, and illustrations), my private photos, personal data, and my logo, you need written permission for any usage. + +In easier words: This is not a free theme. Learn from it. Remix. Reuse. Build your own things. 🤘 + +### Legal Fine Print + +Responsible for content by § 10 paragraph 3 MDStV: Stefan Imhoff. + +### Liability Notice + +Despite careful content control, I don’t take any _liability_ for the content of external links. The content of the linked pages is the sole responsibility of their operators. + +If you find a link on my website that links to websites that violate applicable law, please let me know so that I can remove the link. + +### Data Protection + +I take the protection of your personal data by not collecting any data and strictly adhering to the rules of data protection laws. diff --git a/src/pages/now.mdx b/src/pages/now.mdx index 440a530..1242879 100644 --- a/src/pages/now.mdx +++ b/src/pages/now.mdx @@ -6,4 +6,13 @@ title: Now import { mapping } from '../mdx-components.ts'; export const components = mapping; -Now Page +This is my [Now](https://nownownow.com/) page, an idea by [Derek Silvers](https://sive.rs/) for a website with the focus of what this person is focused on at this point in their life. + +- Building the Design System of XING +- Working from home +- Learning Japanese, Spanish, and Korean on [Duolingo](https://www.duolingo.com/profile/kogakure) +- Creating AI Art with [Stable Diffusion](https://stability.ai/blog/stable-diffusion-public-release), I post my best work on [Instagram](https://www.instagram.com/kogakure.ai.art/) +- Learning to tie [knots](https://www.animatedknots.com/) +- Creating and reviewing highlights with [Readwise](https://readwise.io/i/stefan805) every day +- Connecting ideas with the [Zettelkasten](https://en.wikipedia.org/wiki/Zettelkasten) note-taking methods, using [Obsidian](https://obsidian.md/) +- Always reading at least two or three [books](https://www.goodreads.com/kogakure) at the same time diff --git a/src/pages/tools.mdx b/src/pages/tools.mdx index 2c3415f..0c72d7b 100644 --- a/src/pages/tools.mdx +++ b/src/pages/tools.mdx @@ -1,9 +1,77 @@ --- layout: ../layouts/PageLayout.astro title: Tools +intro: I enjoy learning how other people work, what hardware, software, tools, and gadgets they use. On this page, I present my tools. --- import { mapping } from '../mdx-components.ts'; export const components = mapping; -Tools Page +[Photo of my desk] + +## Home Office + +My desk is a [Jarvis Bamboo Standing](https://www.fully.com/standing-desks/jarvis/jarvis-adjustable-height-desk-bamboo.html) Desk by Fully in 140 cm. The chair is a [Capisco](https://www.fully.com/chairs/for-standing-desks/hag-capisco-chair.html) by HÅG with black leather. I use a [black leather desk pad](https://www.amazon.de/gp/product/B07PXDSSZP/) in 75 cm. I use an aluminum [MacBook stand](https://www.amazon.de/gp/product/B01F01DRW6/) and a [bamboo book rest](https://www.amazon.de/gp/product/B01M8HGTX8/) on my desk. The [BenQ Screenbar Plus](https://www.amazon.de/gp/product/B07GGVNXSW/) provides good lighting. + +## Tech + +My work computer is a [MacBook Pro](https://www.apple.com/macbook-pro/) 16", but I have another older MacBook Pro 15" for my personal things. My mouse is an [Apple Magic Mouse](https://www.apple.com/shop/product/MK2E3AM/A/magic-mouse-white-multi-touch-surface) in black. I use a [Keychron K1 Wireless Mechanical Keyboard](https://www.keychron.com/products/keychron-k1-wireless-mechanical-keyboard) with brown [Gateron Low Profile Mechanical Switches](https://www.keychron.com/products/low-profile-gateron-mechanical-switch-set). I bought a [wooden hand rest](https://www.etsy.com/listing/1258050864/) on Etsy. + +The main display is an [LG 4K monitor](https://www.amazon.de/gp/product/B08FBH1V9R/) with 31.5”, the notebook display is my second screen. For sound, I use two [Creative Pebble](https://www.amazon.de/gp/product/B07VVP8BGD/) loudspeakers, but I have a [Sonos](https://www.sonos.com/) sound system for music. When I am on the road, I use my [Apple AirPods Pro](https://www.apple.com/airpods-pro/). + +I have an [iPhone 13 Mini](https://www.apple.com/shop/buy-iphone/iphone-13) that I use when I’m not at home and an [iPad Pro M2](https://www.apple.com/ipad-pro/) with an [Apple Pencil](https://www.apple.com/apple-pencil/) that I use on the Sofa or when I’m creating digital crafts or notes. I can switch my Keychron keyboard to type on both the MacBook or the iPad. + +Besides that, I have a few backup hard drives for automatic Time Machine backups. I use a [Synology DiskStation DS220+](https://www.synology.com/en-us/products/DS220+) NAS with two 6 TB hard drives in a RAID system with Docker containers as a media server, cloud backup solution, and for network-wide ad blocking with [Pi-hole](https://pi-hole.net/). Additionally, I use a [Raspberry Pi 4](https://www.raspberrypi.com/products/raspberry-pi-4-model-b/) with 8 GB and [Linux Ubuntu](https://ubuntu.com/) for redundancy for the DNS ad blocking. + +## Development + +I use [Neovim](https://neovim.io/) for development, using [LazyVim](https://www.lazyvim.org/) as a plugin manager. I use it in the [Kitty terminal emulator](https://sw.kovidgoyal.net/kitty/) with the [Tmux terminal multiplexer](https://tmux.github.io/). Occasionally, I use [Visual Studio Code](https://code.visualstudio.com/) with the [Neovim extension](https://marketplace.visualstudio.com/items?itemName=asvetliakov.vscode-neovim). I use [LazyGit](https://github.com/jesseduffield/lazygit) for Git. + +- [Kitty](https://sw.kovidgoyal.net/kitty/) +- [Neovim](https://neovim.io/) +- [Visual Studio Code](https://code.visualstudio.com/) +- [Tmux](https://tmux.github.io/) + +## Design + +I love the [Affinity](https://affinity.serif.com/) suite by Serif and use it for all my creative work. I ditched Adobe a few years ago and never looked back. Furthermore, I use all Affinity apps on Desktop and iPad. Additionally, I use [Procreate](https://procreate.com/) on my iPad Pro for creative work. My favorite font app is [Typeface](https://typefaceapp.com/). + +- [Affinity Designer](https://affinity.serif.com/designer/) +- [Affinity Photo](https://affinity.serif.com/photo/) +- [Affinity Publisher](https://affinity.serif.com/publisher/) +- [Procreate](https://procreate.com/) +- [Typeface](https://typefaceapp.com/) + +## Research & Note-Taking + +My favorite writing app is [iA Writer](https://ia.net/writer), I write nearly everything with it, but another writing app I use for my note-taking is [Obsidian](https://obsidian.md/). [DEVONthink](https://www.devontechnologies.com/apps/devonthink) is the app where I store everything, from PDF documents, to inspirational items to references. Everything is synchronized encrypted between all my devices. + +[Raindrop.io](https://raindrop.io/) is my favorite app to save any bookmark and to find anything again in seconds. I have more than 25,000 bookmarks. + +I consume all my content with the [Reeder](https://reeder.app/) app, from RSS Feeds, to Twitter or Reddit threads, to YouTube videos. From there, I transfer everything to [Readwise Reader](https://readwise.io/read) to read it and create highlights to remember and review later in [Readwise](https://readwise.io/). + +- [iA Writer](https://ia.net/writer) +- [Obsidian](https://obsidian.md/) +- [DEVONthink](https://www.devontechnologies.com/apps/devonthink) +- [Raindrop.io](https://raindrop.io/) +- [Reeder](https://reeder.app/) +- [Readwise Reeder](https://readwise.io/read) +- [Readwise](https://readwise.io/) +- [Snipd](https://www.snipd.com/) +- [Overcast](https://overcast.fm/podcasts) +- [MindNode](https://www.mindnode.com/) +- [BibDesk](https://bibdesk.sourceforge.io/) + +## Other + +I use plenty of additional tools, too many to list them all. Here are a few of my favorite apps. + +- [Things](https://culturedcode.com/things/) +- [Raycast](https://www.raycast.com/) +- [Arc](https://arc.net/) +- [Brave Browser](https://brave.com/) +- [Bitwarden](https://bitwarden.com/) +- [ProtonVPN](https://protonvpn.com/) +- [Espanso](https://espanso.org/) +- [Yoink](https://eternalstorms.at/yoink/mac/) +- [Karabiner-Elements](https://karabiner-elements.pqrs.org/)