Dibakar Ghosh is a tech journalist at How-To Geek with over a decade of skills the insist of and writing about open-offer instrument, Linux, Android, AI, and interior most productiveness. He writes about instrument, operating programs, and tools that again other folks rating more from the skills they already insist.
Signal in to your How-To Geek tale
Are you finally getting spherical to building your interior most portfolio net suppose material? Questioning which AI coding tool you ought to nonetheless belief with the job? I became once in the same boat about a days in the past, so I tested Claude Code and Codex CLI to behold which one did an even bigger job. As it looks, neither became once excellent, but one built a noticeably greater portfolio touchdown page than the other.
I desired to vibe code the superb portfolio touchdown page
Same arrangement, same brief, two very diversified AI tools
Everybody spherical me retains talking regarding the significance of having a portfolio touchdown page. It looks that, it’s purported to enhance your online presence and create you more visible to recruiters. The muse is that as a change of you browsing for jobs and sending your resume to HR departments, you would possibly want to perhaps well in actual fact dangle a net page showcasing your work, so skill employers can catch you as a change.
Now, whereas that does sound nice, the field is that I’m neither a graphic dressmaker nor a net based developer I’m a creator. Scamper, I’m in a position to also dangle opinions about what my net suppose material ought to nonetheless behold cherish and the procedure in which it would nonetheless characteristic, but I cannot develop or code it myself. Fortuitously, we dwell in the age of AI, and in case you dangle an idea but lack the abilities to remark it to life, you would possibly want to perhaps well also flip to an cheap AI tool to vibe code it for you.
So, I asked both Claude Code and ChatGPT Codex to develop me a interior most portfolio touchdown page the insist of my resume as a reference. I gave both tools the same suggested, instructing them to first rating data about me to develop a clearer image of who I’m, quiz three to five clarifying questions, create the develop and technical choices handiest suited to my profile, after which develop the handiest net suppose material they’ll.
Ive incorporated the total suggested I ragged at the tip of the article.
Right here’s how Claude Code performed
It acquired so a lot appropriate, but no longer all the issues
With Claude Code, I chosen Sonnet 5.5 at xHigh effort and entered the suggested. It confirmed that it understood the project and asked if I had one thing else else so that you just can add. I gave it my resume and permission to search online. It then got here serve with about a a few-more than a few questions, presented in an interactive repeat-line interface which became once reasonably chilly.
After I answered its questions, it carried out its online compare, pulled all the issues collectively, and started building. Your total route of took about Half-hour and ragged spherical 245K tokens advance bigger than what I became once looking out at for.
Claude went with an editorial-vogue develop featuring an ink-navy background, marigold accents, and my name entrance and center. That you just can even command it became once my net suppose material at a look. Make-wise, it felt contemporary, minimal, and legitimate. It additionally incorporated gentle and shadowy themes that company can also switch between, which became once a nice accessibility contact.
Total, I after all cherished the develop. My major criticism became once the reproduction. It wasn’t contaminated, but it wasn’t big both. Noteworthy of it felt generic. I additionally recall telling Claude to encompass some interior most miniature print, so my portfolio would no longer be all work and no stress-free. Specifically, I asked it to chat about my homelabbing passion. I anticipated it to highlight some of my homelab projects, however the part focused mostly on my homelab specs. I felt that became once redundant and largely irrelevant to skill employers and purchasers.
Right here’s how ChatGPT Codex performed
Genuine the put Claude became once contaminated — contaminated the put Claude became once honest
As with Claude, I gave Codex the same suggested, my resume, and permission to search the earn for more data about me. I ragged GPT-5.6 Terra at xHigh effort. Codex carried out more thorough compare than Claude, referencing a mighty wider differ of sources to study as mighty about me as that you just would possibly want to perhaps well also ponder. It additionally asked more focused and related questions, which I after all cherished.
Additionally, no subject all that compare, your total route of took spherical 90K tokens, simply about a third of what Claude ragged. Codex became once additionally sooner, taking correct over 20 minutes to total the arrangement and produce my carried out portfolio touchdown page.
Surprisingly, Codex made develop choices same to Claude’s, with similar colours, typography, and gentle-weight and shadowy themes. The major difference became once the structure, which I stumbled on more conservative. It felt cherish a generic company net suppose material and lacked the visual punch I deem a interior most portfolio must face out.
That talked about, the reproduction became once vastly greater and had so a lot more persona.
And the winner is …
The tool that handiest complements your musty options
Claude delivered an even bigger develop but weaker reproduction, whereas Codex gave me a generic develop with greater reproduction. Technically, neither tool acquired all the issues appropriate on the first strive, and both required notify-up prompts. But for me, Claude is the winner, and the arrangement being straightforward I’m a creator, and adorning reproduction is far simpler than iterating on a develop.
That you just can even ponder a net page as having three major parts: the reproduction, the visual develop, and the code that brings it all collectively.
I’m a legitimate creator, so I build no longer need AI to put in writing for me. Truly, even the reproduction I’m calling honest in Codex’s case is one thing I’d change anyway, because I desire my writing to shine by procedure of and signify myself on my portfolio net suppose material.
What I build need again with is develop and code. And telling an LLM, whether or no longer it’s Claude or ChatGPT, why a develop or part of code is contaminated and the procedure in which it must enhance shall be subtle in case you build no longer already know the terminology or cannot clearly direct what you cherish to dangle.
Since Claude gave me the greater develop, it wins in my e book.
That talked about, I’m in a position to completely deem about how Codex shall be the greater pick for any individual with a definite skill location. For these who’re a dressmaker or developer who’s blissful with visuals and code but struggles with writing, Codex shall be the greater more than a few. That you just can even refine the develop your self and let Codex tackle the reproduction you catch more anxious.
Talent.md recordsdata, MCPs, and focused prompting can stop this obvious gap
The differences I noticed mostly advance down to how every model is trained and what it does by default. That talked about, you would possibly want to perhaps well also assuredly commerce that default conduct the insist of SKILL.md recordsdata, MCP servers, and properly-focused prompts that command the model advance a particular project or workflow.
Then all all over again, these options are most helpful to of us that dangle already acquired some data of develop and vogue. What I desired to level to here is what occurs in case you know nothing about both and chase in blind and the procedure in which Claude and Codex fall serve on their default behaviors to rating the job finished.
And now, as promised, here’s the suggested I ragged:
# Make My Private Touchdown Page
That you just can even very properly be going to develop a interior most touchdown page for me: a local the put someone who visits can study who I'm, what I build, and attain me. You can act as researcher, interviewer, dressmaker, and entrance-cease developer. Educate the steps below **in expose**, and hand over the put really helpful to hand over.
## Floor options (apply all the procedure by procedure of)
- **Utilize handiest what I give you on this session plus what you catch whereas researching.** Ignore any memory, past conversations, mission instruction recordsdata, or assumptions about me.
- **Never create one thing else.** No made-up info, numbers, dates, purchasers, awards, testimonials, or quotes. If one thing is unknown, chase away it out or quiz.
- **Construct confirming easy for me.** If it is advisable to me to envision or establish one thing, build NOT create me write long replies.
- For these who dangle a tool for asking a few-more than a few or selectable questions, insist it.
- Otherwise, level to a **numbered checklist** so I'm in a position to answer in about a phrases, e.g. "all good", "3 is wrong, it's 2019", "drop 5 and 8".
- **Offer protection to my privacy.** No residence address, cellphone quantity, household miniature print, or interior most electronic mail on the page except I explicitly give them for that arrangement.
- **Be appropriate about entry.** If a link cannot be opened (login partitions, bot blocking off, errors), command me which one and quiz me to stick its related suppose material or skip it. Never wager what a page says.
---
## Step 1: Build an recount to about interior most data
Your very first message ought to nonetheless mercurial level to what you're about to construct, then quiz whether or no longer I desire to part interior most data with you. Give examples of what I'm in a position to part:
- Resume or CV: a file route, a file positioned in the most modern folder, or pasted text
- Hyperlinks: creator/bio pages, portfolio, LinkedIn, GitHub, social profiles, interior most weblog
- The rest I desire incorporated or excluded
Construct it clear that sharing is non-compulsory. If I build no longer part one thing else, you will compare me from public sources the insist of correct my name (and tackle, if I give one).
**Cease and take a seat up for my answer.**
## Step 2: Affirm what you acquired
After I part, checklist serve what you acquired in one compact abstract (e.g., "Resume: found at ./resume.pdf. Links: LinkedIn, GitHub, author page."). If a file route doesn't exist or a file cannot be read, recount so now. Then quiz:
- **Continue**, or
- **Add more**
Repeat unless I recount proceed.
## Step 3: Opt up data
The route relies on what I gave you.
**Path A: I shared interior most data.**
- Read my resume and salvage every link I gave you. Extract all the issues helpful.
- **Impact no longer search the earn past what I supplied.**
**Path B: I shared nothing (or handiest my name/tackle).**
- Research me on the earn: creator and byline pages, LinkedIn, GitHub, socials, interviews, talks, publications.
- **Identity check:** many folk part names. Handiest insist a offer if it's clearly me (matching tackle, photo, employer, jam, timeline, or hyperlinks between my profiles). Position apart one thing else uncertain to substantiate with me.
- Irascible-check info all the procedure by procedure of sources. Demonstrate the put sources disagree.
Assign your findings to `compare-notes.md` in the working folder, with the provision for every truth, so nothing will get misplaced all the procedure by procedure of steps.
## Step 4: Confirmation veil
Fresh all the issues you dangle gathered in a gorgeous, scannable structure, grouped by category (roles and timeline, necessary work, abilities and topics, pursuits, hyperlinks, and tons others). Number every item.
- Sign items you're **in doubt about** (Path B: that you just would possibly want to perhaps well also ponder name collisions or conflicting sources) so they stand out.
- Let me confirm, appropriate, or remove items with minimal effort (deem about flooring options).
**Cease and wait.** Apply my corrections and change `compare-notes.md`. If one thing else became once corrected, level to handiest the changed items for a final OK.
## Step 5: Short interview
Build an recount to **35 questions** that receive the gaps that subject most for building a huge page. Utilize your luxuriate in judgment: build no longer quiz one thing else you realize. Genuine areas to probe, if nonetheless unknown:
- The major arrangement of the page (rating employed, entice purchasers, showcase work, interior most label)
- Who will consult with it
- How I'd describe myself in one line
- One thing interior most or stress-free I'm cheerful to part
- What I'm most pleased with
Offer like a flash-pick options the put that you just would possibly want to perhaps well also ponder, with room for a free answer. That you just can even quiz all questions true now or in two brief rounds.
**Cease and take a seat up for my solutions.** Add them to `compare-notes.md`.
## Step 6: Specialize in deeply regarding the develop (build no longer quiz me)
Ahead of writing any code, live and arrangement conscientiously about who I'm and what page would truly match me. Resolve all of this your self. Impact **no longer** quiz me about develop, because I'm in a position to also no longer know or care.
Protect stop into tale:
- **Personality and vibe:** what my work, writing, and solutions recount about me, and the procedure in which the page ought to nonetheless *feel*.
- **Coloration:** a palette chosen with coloration concept that matches that persona, with enough incompatibility in gentle and shadowy modes.
- **Typography:** font pairing that suits the persona (max 2 families).
- **Density:** minimal or expressive/extravagant, per the person.
- **Construction:** single page or multi-page, per how mighty right suppose material exists. Additionally establish on navigation and menus, and the expose of sections.
- **Structure and circulate:** grid, spacing, imagery therapy, and any animation (purposeful, never gimmicky).
- **Reproduction suppose:** first person, matching how I after all write and talk.
Then write a brief **develop brief** (510 traces) summarising your choices and why. Indicate it to me and place it as `develop-brief.md`, then **proceed straight to building**. Impact no longer take a seat up for approval.
## Step 7: Make the earn suppose material
Make the total role in one chase, interior a peculiar folder named `role/` in the most modern working directory.
**Voice**
- Comprise all the issues related and confirmed. Weird and wonderful sections: hero (name, one-line positioning, name to circulate), about, what I build, chosen work (with right hyperlinks), skills/timeline, past work, contact. Rename, add, merge, or drop sections to suit the person.
- First-person reproduction that sounds cherish me, particular reasonably than generic. Protect far flung from filler phrases cherish "passionate," "innovative," "results-driven."
- Handiest encompass info confirmed in Step 4 or given in Step 5.
**Must nonetheless be realistic**
- Every button, link, and menu item works. No pointless hyperlinks or `#` placeholders.
- Navigation works on desktop and mobile (along with the mobile menu).
- There just isn't any longer any backend, so a contact maintain or button have to insist `mailto:` (or link to a contact arrangement I accredited). Never faux a maintain submission.
- A gentle/shadowy mode toggle that respects the system setting by default.
**Technical requirements**
- **It have to open by double-clicking `role/index.html` in a browser, with no install, develop step, or local server.** Resolve the tech accordingly: ugly HTML/CSS/JS, a few linked HTML recordsdata, or a framework loaded from a CDN handiest if it nonetheless meets this rule. Utilize relative paths handiest; no ES module imports of local recordsdata or `salvage()` calls to local recordsdata, since these damage when opened as `file://`.
- Responsive from 360px telephones to nice desktops, with no horizontal scrolling.
- Accessible: semantic HTML, logical headings, alt text, keyboard navigation, visible focal level states, honest incompatibility, respects reduced-circulate settings.
- search engine marketing and sharing: page title, meta description, Originate Graph tags, and `Particular person` structured recordsdata (JSON-LD) the insist of confirmed info handiest.
- Snappy and gentle-weight. No tracking or analytics.
- Where I have to add my luxuriate in sources (profile photo, social preview image), insist clearly marked placeholders (e.g., ``) and a placeholder image or styled box that also looks to be intentional. Never insist stock photos of random other folks.
- Perfect, properly-commented code, so a non-developer can edit text later.
## Step 8: Affirm earlier than handing off
Take a look at your luxuriate in work the insist of no subject tools you dangle:
- Every interior link and anchor options to one thing that exists; every referenced file exists in `role/`.
- Exterior hyperlinks are the explicit URLs from `compare-notes.md`.
- HTML is right, with no console errors in the JavaScript.
- For these who can also open the page in a headless browser or take screenshots, check it at mobile and desktop widths in both gentle and shadowy mode, and fix one thing else damaged.
- Every truth on the page looks in `compare-notes.md`.
Fix any complications you catch earlier than interesting on.
## Step 9: Hand-off
Give me a brief exhibit masking:
- The total path to open the positioning
- Which placeholders I have to change, and the put
- The absolute best formulation to edit the text later
- Anything you left out and why
