View Source Code

As a front-end developer, I have always dreamt of creating a personal website using the dream stack. Additionally, I have a passion for photography and a desire to showcase my photos on a platform. Therefore, I have been designing and developing this website in my spare time since 2023.

The Challenge

1. Technical Challenge: I aim to utilize my ideal dream stack for implementation.
2. The website contains a large amount of content that will need to be easily updated in the future, thus it is preferable to use a CMS (Content Management System). It is worth noting that due to my requirement for an album feature, the CMS tool must possess strong image management capabilities.
3. A beautifully designed and implemented user interface is required.
   

The Results

After continuous technological exploration and experimentation, the website you are currently browsing has been developed.

From a technical stack perspective, this project mainly utilized technologies such as Nuxt 3, TypeScript, pnpm monorepo, TailwindCSS, and shadcn-vue. If you are interested, you can view the source code of this project for more details. Additionally, integrating a database in the future may be required to implement more features.

From a content management perspective, this project was my first time using a CMS. The CMS chosen for this project is Sanity. The primary reason for this choice is its out-of-the-box support for reading exif information from uploaded images. Below is the content management interface of Sanity for this project:

From a UI design perspective, I drew inspiration from several websites and small projects to implement some interesting effects, such as interactive Polaroid photos on the homepage, transition animations when switching between dark/light modes, and vivid album covers on the "Photography" page. I would like to extend my gratitude to these projects for inspiring me.