关于本站 Under the Hood

I built this website almost entirely through Vibe Coding, with a tech stack of Astro + Tailwind CSS. My own code contribution is less than 10%. Instead of using a coding agent like Claude Code, I had a step-by-step conversation with Gemini 3.0 Pro to construct the entire structure. The basic infrastructure took roughly 20 hours to complete. On this page, I'll showcase the design ideas behind some of the components and interesting details, and then share my motivation for building this site.

In this section, I will introduce the design ideas behind some of the components and a few interesting details.

Inspired by Siddhartha Mukherjee's personal website, which features a consistent black border around his blog posts, giving it a clean, elegant, and cohesive look. My website's unified layout features a white content background "cut out" from a dark #2d3748 backdrop.

The design of the page titles and descriptions is inspired by Brandur's website.

I adopted a classic navigation bar design: website name on the left, main links on the right. It behaves differently depending on the scroll state. Initially, it blends seamlessly with the white main content background. When scrolled, it expands to full width and gains a background color to maintain readability. I also added a "frosted glass" effect, allowing you to faintly see the content sliding behind the navigation bar.

The footer serves as the quiet anchor of this digital space. Rather than a hard stop, it is designed to be a soft transition—a reminder that this website, like a garden, is an organic entity in constant flux.

I centered the design around a bilingual manifesto: "This is a garden, not a museum." To reflect this living nature, the text features a subtle "breathing" interaction; instead of rigid layout shifts, it responds to your cursor with a gentle lift and a soft glow, mimicking the play of light and shadow. Grounded by a fading gradient line and essential connections, it provides a functional yet unobtrusive foundation.

To ensure a smooth bilingual experience, this site uses a lightweight solution built on Nano Stores. It utilizes persistent storage to remember your language preference, ensuring your choice remains saved even after you reload the page. Technically, content visibility is dynamically controlled by updating the data-lang attribute on the root HTML element.

Visually, the toggle button features a dynamic focus: the active language remains sharp, while the inactive option fades into a blur. Additionally, it has a "locked state" mechanism. If a specific post hasn't been translated yet, the toggle automatically locks and displays a tooltip to let you know, preventing you from clicking into a blank page.

For the blog list, I opted for a card-based "Timeline" design. The system automatically groups posts by year and month, arranging them in reverse chronological order. Visually, vertical lines connect the posts within the same month on the left. Each post acts as a node on this timeline; hovering over a card activates the node and subtly highlights the background to guide your focus.

This website also references the design and content of many others, including but not limited to: Shu Ding, Yihui Xie, Paco Coursey, Hux, Andrej Karpathy, Derek Sivers, and Anthony Fu.

Also, special thanks to Arthals (A Shen), whose website originally inspired me to build my own.

The site is mainly divided into three sections: Tech Blog, Brain Dump, and Mini Lab. Here is what they are all about:

In the "Tech Blog", I mainly document my daily pitfalls and trial-and-error as I cross over to learn CS and AI. As a medical student, I often get stuck on basic concepts or configurations, so this serves mostly as my personal mine-clearing log. Occasionally, I'll pretend to be serious and produce some proper notes and summaries. There will inevitably be mistakes, so I highly welcome readers to point them out and help me improve.

"Brain Dump" is exactly what it sounds like: a place to offload the unfiltered fragments in my head. This is where I catch fleeting ideas, jot down scattered thoughts after reading a book or watching a video, and of course, vent some unpolished rants. It doesn't need a rigorous system or a perfect conclusion—it's all about spontaneous logging.

"Mini Lab" is probably the section I find the most fun. It houses small, non-rigorous, and low-credibility "research" inspired by daily life. I enjoy attempting to tackle trivial everyday problems and over-engineer daily life with literature and semi-scientific methods. Given my limited research skills, these investigations are mostly for my own amusement, but if they happen to offer you some practical insights, that's a fantastic bonus.

The biggest motivation for building this site is to cultivate a habit of "active thinking." I want to force my self-driven nature out through output. As I mentioned on the homepage, I started writing this code just after finishing my first semester as a medical student. During those six months, I was exposed to so many things I hadn't considered before, leaving me feeling lost, anxious, and like I was just drifting along doing nothing. This website is my first step toward changing that.

Another goal is to practice the Feynman Technique. Forcing myself to write down what I've learned in plain language really tests how deeply I understand it. I've always felt that I'm not great at expressing my thoughts and feelings, so this is also a personal challenge I've set for myself.

Honestly, I hesitated for a long time. I had the idea to build a personal site early in my freshman year. I had learned the basics of HTML, CSS, and JS, and spent days browsing awesome blogs by amazing developers, but I never dared to actually start. The reason was simple: Imposter Syndrome. I felt I was too ordinary. The people with personal sites all had impressive titles and skills, while I was just a regular medical student who couldn't even organize my own major's notes properly. I constantly thought: my writing is so shallow, it's not even as good as an LLM's answer, who would read it? What's the point? So, I typed npm create astro@latest countless times, only to timidly rm -rf it right after.

But since you're reading this, it means I finally made peace with my Imposter Syndrome. The logic that convinced me was quite simple: nothing is ever going to be perfect anyway. If I keep looking up at those incredible people and trapping myself in perfectionism, I'll never take the first step. This website is not a resume for job hunting, nor a museum to show off achievements. It's just a "digital garden" where I plant some seeds and record my thoughts. I hope it can document my struggles and growth from a small town to a big city, and witness my clumsy but earnest pursuit of "meaning."

Thank you for reading this far. Even if my writing seems a bit naive or shallow, the sheer act of writing it down makes it profoundly meaningful to me. If these ramblings happen to inspire you or spark an urge to start recording your own life, I'd be beyond thrilled. Feel free to drop me an email at kangchengwen@proton.me anytime. Whether it's to point out mistakes, offer advice, share your thoughts, or just chat, I'm looking forward to it. Let's grow together.

Unless otherwise stated, all original articles, text, and visual content on this website are licensed under the CC BY-NC-SA 4.0 license. This means you are free to share and adapt the content, provided you give appropriate credit, do not use it for commercial purposes, and distribute your contributions under the same license.

I plan to open-source the template for this website after making some adjustments, so stay tuned.