How did I build this website

✨ Introduction

I built my website using Next.js and Tailwind CSS. As an excellent SSR front-end framework, Next.js is very easy to learn, and I really like this tool. Before this project, I wasn’t familiar with Tailwind, so I learned it with the help of AI — you can find more details in the article. I also used Codex to assist in building the website, and here I will briefly introduce how AI supported the development process.

🧭 Workflow

I first created a simple prototype using Tailwind CSS via CDN. Although I have experience designing prototypes in Figma, translating a prototype into an actual webpage was still unfamiliar for me — so I wanted to take this opportunity to practice Tailwind.

Originally, I planned to use the shadcn/ui component library. However, in the end, most of the basic components (such as cards and the sidebar) were generated by Codex. I then iterated and refined them until they met my design and usability requirements.

One interesting moment came after I finished the initial version. Codex began reviewing the code and pointed out that the Markdown-reading interface could lead to a potential XSS security issue, because rendering raw HTML from Markdown may execute malicious code. What surprised me is — that exact Markdown-reading method was generated by Codex itself! Based on its suggestion, I replaced it with react-markdown to ensure safe rendering. This made me realize how helpful AI can be in identifying hidden risks before deployment.

🚀 Deployment

I deployed the website through Vercel, which can directly connect to and deploy from a GitHub. And with every push to the main branch, it will automatically deploy your website. I'm very pleased with this website as the first version of my personal webpage, it's a good start.

The article have been polished using ChatGPT 5.2.