Sesẻ

My second personal website, with a more traditional center-aligned layout, while inheriting the quirky net-art-ish characteristics from my previous personal website in 2022, albeit in a more coherent manner.

Visit the baoanhpro.vip to see the website.
Take a look at the github repository.

While working on this, I have looked into a lot of other personal website references from my friends and people I know on the Internet: Rachel Yeeun Kim, Katherine Yang, Mai Nguyen, and countless other sources but those 3 are the main influences with a twist of my personality.

Ascii-ish stylized frames and decorative web elements sprinkled here and there.

Another subtle concept is playing around with the text-highlighting/user-select interaction to reveal hidden messages.

To tribute my previous website in 2022, I put its front-end in the rear (in terms of Z axis), which can only reveal itself via the button “’-…__…-‘“. The place also acts as a holder for my ‘Guestbook’ function, in which visitors can leave messages for me directly on the site.

The initial conceptual idea of the site can be observed via the 3D View of the developer tool of Microsoft Edge. Inspect the site to see.

Using a mix of ‘z-index’ and ‘transform-style: preserve-3d’ property, all the layers are arranged in a way that looks like a 3D sculpture when observed through the 3D View tool. This idea is to look at a website from a third-person perspective instead of the usual front-back view.

A special section to attribute to those crossing paths with me in work throughout the previous years.

Under the hood, I used Notion as the CMS backend to update everything on the site. You can view the database on Notion here notion link.

Site is built on Next.js with Tailwind CSS. CMS is from Notion
API with react-notion-render by @9gustin for data rendering and upload-notion-images-to-cloudinary by @guillermodlpa for hosting images form Notion to Cloudinary. Other dependencies include Prisma + PostgreSQL, Framer Motion, probe-image-size, seedrandom, react-lazy-load, … See the Github repository of the site here github link.
Typeface is Alegreya designed by Juan Pablo del Peral, Huerta Tipográfica. Mono typeface is Select Mono designed by MICHAEL McMASTER.