🚧 This page is under construction. 🚧 Please check back soon for more information.

This website was built using Next.js, a React framework that runs on Node.Js. I started working on this project in January 2024 to learn Reactand practice my web development skills. I showcase my programming and science projects on this website, along with some of my violin recordings.

The website was developed on Google IDX, a web-based IDE that is based on Code OSS. The code for this website is hosted on the GitHub repository linked to the right. The main branch contains all the code that is currently deployed. The development branch contains newer code that hasn't been published yet.

I registered the azhao.dev domain using Cloudflare and deployed it using Cloudflare Workers. This website was built usingNext.js's app router and TailwindCSS for the styling.

Navigation Bar

The navigation bar was implemented in the Navbar component, which I added to the layout.tsx file to automatically render on each page. I also created a separate Socials component to render the social media icons. Each button also has a dark mode image so that it displays well in dark mode.

Home Page

This page was very simple to build. I surrounded everything in a div to add a blue background and rounded corners. I also added shadows to enhance the appearance.

Projects Page

I implemented the project cards in the Project component. Each card was a flex column, containing an image, some text, and buttons. I reused the Socials component for the buttons, and added some rounding and shadows to the cards. Each project card links to a separate project page, like this one.