Building My Portfolio Site with AI: Why Process Beats Tools

This article describes the author's process of building a personal portfolio website named "Qiumu Workshop" (aicultiv.com) with the help of AI-assisted coding, referred to as "Vibe Coding." The site serves as a unified entry point for the author's scattered content across blogs, public articles, and code repositories.

Site Structure: Three Core Sections

1. Project Records

The author documents the development process for each project, capturing the motivation, technology choices, problems encountered, and solutions. This serves as a personal knowledge base for future reference.

For example, why a project was started, which technologies were selected, what issues arose, and how they were resolved.

These records go beyond listing project names; they preserve the reasoning and troubleshooting steps that might be forgotten over time.

2. Project Details

Individual projects are expanded into detailed case studies. This separates deep technical walkthroughs from the higher-level project records, making the information easier to digest.

For instance, an AI application's technical stack and overall architecture; the end-to-end workflow from data preparation through model training to deployment.

This structure avoids overwhelming the reader with too much detail in a single record.

3. Personal Capability Matrix

The author maps their technical skills to concrete projects to provide evidence beyond a simple keyword list on a resume. The matrix covers backend development, database optimization, service deployment, large model applications, Agent, RAG, and computer vision.

For example, backend development links to specific practices, AI applications link to relevant technologies, and computer vision links to actual work done. This reveals strengths and gaps in the author's experience.

AI-Assisted Development: Lessons Learned

Aligning Granularity

After major code changes, the author asks AI to reorganize the codebase and align the granularity of components. This helps maintain consistency.

Previously, much time was spent researching, building pages, and tweaking styles. With Vibe Coding, efficiency improved significantly.

However, the author emphasizes that vague prompts like "build me a personal website" produce generic templates with a strong "AI flavor" that may not fit the actual content.

Specific instructions about page organization, component implementation, and style adjustments yield better results.

Iterative Refinement After Generation

The author advises against using AI-generated boilerplate for project descriptions and capability summaries, because only the author knows the real problems solved and the exact contributions made. AI can polish wording but cannot fabricate experience.

AI-generated code also requires debugging; the author still needs to read code, check logs, and verify behavior.

AI acts as an on-demand discussion partner and assistant for partial tasks, but it cannot replace human decision-making.

AI boosts efficiency but cannot fully become the tool that makes decisions for me.

Retrospective and Future Plans

Building the site prompted a review of the author's technical trajectory. Some completed projects contained valuable content worth organizing; some skills lacked project backing and should not be overstated.

The author plans to maintain four channels long-term: blog for technical articles, public account for practice reflections, GitHub for code repositories, and the personal site as the hub that connects them all.

The site is live but content will be added gradually, starting with existing materials and expanding with future projects.

The article concludes by asking readers whether they prefer writing continuous articles or building a portfolio site, and teases a follow-up post covering the full end-to-end process from server setup to personal brand launch.