Preface#
I started rewriting my personal website last month. Then I finished writing it last week, and what you see now is the completely redesigned website. I have been planning this for a long time, and finally implemented it in the days after escaping from 996. It was a coding marathon, with almost no free time every day, doing something crazy. In fact, when Next.js App Router became stable last month, I also considered refactoring kami, and I did try it. However, after a week, I finally gave up.
https://innei.in/posts/programming/next-app-router-migration-what-is-new-php
So I decided to start over from scratch and rewrite it, and also change the anime style that I have been using for a long time.
::: gallery
:::
The left side is the redesigned version, and the right side is the previous version. There are significant differences in style. The previous color scheme was very chaotic, with no color usage guidelines, and the main and secondary colors were mixed. Now there is only one accent color, and the style is softer and less abrupt.
Color Selection#
This time, except for certain places where color is needed, I used mostly light neutral colors. For the accent color, I browsed several color selection websites and chose several colors that were not bad. The accent color is not unique, but it is fixed for each session. Each time you browse, a color is inserted on the server side to determine what the accent color of this browsing session is. Therefore, the accent color changes after each refresh. And each accent color has a corresponding color combination in dark mode, which is a set of colors.
In this session, the accent color in dark mode is #A0A7D4, while in light mode it is #69a6cc. This is a set of colors.
Currently, the following colors are specified. I am not satisfied with some combinations. Can you help me in the comments?
At the same time, I borrowed (copied) the animation of switching between dark/light mode from Vitepress.
Navigation Bar / Header#
The navigation bar, which is the top bar, is also a very complex part, with a code size of about 1000 lines. Because its interaction logic is quite complex.
First of all, there are four modes for desktop.
- Regular floating bar
- Display article title bar
- Auxiliary navigation bar when the article title bar is displayed and scrolling up
- Blurred navigation bar displayed when the container width is too large and it is not an article
The logic for these 4 scenarios gave me a headache. I also copied the spotlight effect from <cali.so> and so on. The only drawback now is the layout drift caused by framer motion, and there is currently no solution.
Paper#
Regarding the diary section, Shiro still uses "paper" as the medium, and the text is unified as "handwritten notes" from the upcoming Handwritten Notes app in iOS 17, which was announced at WWDC 2023.
I still believe that the medium for these birthday records should be paper. Shiro means "white" in Japanese. And the color of paper is white.
Layout#
The layout of the article preview is different for "handwritten notes", "essays", and "pages".
The biggest difference is in "handwritten notes", which has a three-column layout with paper as the medium in the center. The timeline is on the left, and the article directory is on the right.
Essays and pages have a two-column layout, and the main difference is that the content of the essay is longer and will not be centered to correspond to the article directory.
::: gallery
:::
You may have noticed the percentage on the right, which is actually the reading progress.
When the article directory cannot be displayed, it will be moved to the side.
Real-time Activity#
The real-time activity icons on both sides of the site avatar on the left side of the header are also ideas borrowed from <cali.so>. I wrote a simple app in Swift to achieve real-time reporting of system processes and media information. The link is posted below, and the code is poorly written. Currently, there is only a macOS version, and I don't plan to make a Windows version in the future.
By using the app mentioned above in combination with cloud function + WebSocket, real-time activity display can be achieved.
I added some interesting suffixes to some apps.
For example, if I am using VS Code, it will display Innei is using Code Restart TSServer. For example, Kitty will display Innei is using Kitty to play with cats, and so on.
Of course, you will also receive other notifications, such as new articles being published, and so on.
That's all for now, let's talk again next time.
Since you've read this far, why not give it a Star to show your support?
This article is synchronized and updated to xLog by Mix Space
The original link is https://innei.in/posts/design/new-website-design-about-shiro