Released Oct 12, 2026, 10:30 AM EDT
Dibakar Ghosh is a tech reporter at How-To Geek with over a years of experience utilizing and discussing open-source software application, Linux, Android, AI, and individual efficiency. He blogs about software application, running systems, and tools that assist individuals get more from the innovation they currently utilize.
Check in to your How-To Geek account
Are you lastly navigating to developing your individual portfolio site? Wondering which AI coding tool you should rely on with the task? I remained in the exact same boat a couple of days back, so I checked Claude Code and Codex CLI to see which one did a much better task. As it ends up, neither was best, however one developed a visibly much better portfolio landing page than the other.
I wished to vibe code the best portfolio landing page
Exact same objective, very same quick, 2 really various AI tools
Everybody around me keeps speaking about the value of having a portfolio landing page. Obviously, it’s expected to improve your online existence and make you more noticeable to employers. The concept is that rather of you looking for tasks and sending your resume to HR departments, you can have a site showcasing your work, so potential companies can discover you rather.
Now, while that does sound great, the issue is that I’m neither a graphic designer nor a web designer– I’m an author. Sure, I might have viewpoints about what my site must appear like and how it ought to work, however I can’t create or code it myself. Luckily, we reside in the age of AI, and when you have a concept however do not have the abilities to bring it to life, you can turn to a budget-friendly AI tool to vibe code it for you.
I asked both Claude Code and ChatGPT Codex to construct me an individual portfolio landing page utilizing my resume as a referral. I provided both tools the exact same timely, advising them to initially collect details about me to develop a clearer image of who I am, ask 3 to 5 clarifying concerns, make the style and technical choices finest fit to my profile, and after that develop the very best site they could.
I’ve consisted of the complete timely I utilized at the end of the post.
Here’s how Claude Code carried out
It got a lot right, however not whatever
With Claude Code, I picked Sonnet 5.5 at xHigh effort and got in the timely. It verified that it comprehended the job and asked if I had anything else to include. I provided it my resume and authorization to browse online. It then returned with a couple of multiple-choice concerns, provided in an interactive command-line user interface which was quite cool.
After I addressed its concerns, it performed its online research study, pulled whatever together, and began structure. The entire procedure took about 30 minutes and utilized around 245K tokens– method more than what I was anticipating.
Claude went with an editorial-style style including an ink-navy background, marigold accents, and my name front and. You might inform it was my site at a look. Design-wise, it felt contemporary, very little, and expert. It likewise consisted of light and dark styles that visitors might change in between, which was a good ease of access touch.
In general, I truly liked the style. My primary problem was the copy. It wasn’t bad, however it wasn’t terrific either. Much of it felt generic. I likewise remember informing Claude to consist of some individual information, so my portfolio would not be all work and no enjoyable. Particularly, I asked it to speak about my homelabbing pastime. I anticipated it to highlight a few of my homelab tasks, however the area focused primarily on my homelab specifications. I felt that was redundant and mostly unimportant to possible companies and customers.
Here’s how ChatGPT Codex carried out
Excellent where Claude was bad– bad where Claude was excellent
Just like Claude, I provided Codex the very same timely, my resume, and consent to browse the web for additional information about me. I utilized GPT-5.6 Terra at xHigh effort. Codex carried out more extensive research study than Claude, referencing a much broader series of sources to discover as much about me as possible. It likewise asked more targeted and appropriate concerns, which I actually liked.
In spite of all that research study, the whole procedure took around 90K tokens, almost a 3rd of what Claude utilized. Codex was likewise quicker, taking simply over 20 minutes to finish the procedure and provide my completed portfolio landing page.
Remarkably, Codex made style options comparable to Claude’s, with equivalent colors, typography, and light and dark styles. The primary distinction was the design, which I discovered more conservative. It seemed like a generic business site and did not have the visual punch I believe an individual portfolio requires to stick out.
That stated, the copy was considerably much better and had a lot more character.
And the winner is …
The tool that finest matches your powerlessness
Claude provided a much better style however weaker copy, whereas Codex offered me a generic style with much better copy. Technically, neither tool got whatever right on the very first shot, and both needed follow-up triggers. For me, Claude is the winner, and the factor is basic– I’m an author, and modifying copy is much more simple than repeating on a style.
You can consider a site as having 3 primary parts: the copy, the visual style, and the code that brings everything together.
I’m an expert author, so I do not require AI to compose for me. Even the copy I’m calling excellent in Codex’s case is something I ‘d change anyhow, due to the fact that I desire my composing to shine through and represent myself on my portfolio site.
What I do require assist with is style and code. And informing an LLM, whether it’s Claude or ChatGPT, why a style or piece of code is bad and how it requires to enhance can be hard if you do not currently understand the terms or can’t plainly articulate what you desire.
Because Claude provided me the much better style, it wins in my book.
That stated, I can definitely see how Codex may be the much better choice for somebody with a various capability. If you’re a designer or designer who’s comfy with visuals and code however deals with composing, Codex might be the much better option. You might fine-tune the style yourself and let Codex manage the copy you discover more tough.
Skill.md files, MCPs, and targeted triggering can close this evident space
The distinctions I saw primarily boiled down to how each design is trained and what it does by default. That stated, you can typically alter that default habits utilizing SKILL.md files, MCP servers, and well-targeted triggers that inform the design how to approach a particular job or workflow.
These choices are most beneficial to individuals who currently have some understanding of style and advancement. What I wished to reveal here is what takes place when you understand absolutely nothing about either and enter blind– and how Claude and Codex draw on their default habits to finish the job.
And now, as assured, here’s the timely I utilized:
# Build My Personal Landing Page You are going to develop an individual landing page for me: a location where anybody who goes to can discover who I am, what I do, and how to reach me. You will serve as scientist, recruiter, designer, and front-end designer. Follow the actions listed below ** in order **, and stop where informed to stop. ## Ground guidelines (use throughout) - ** Use just what I provide you in this session plus what you discover while looking into. ** Ignore any memory, previous discussions, job direction files, or presumptions about me. - ** Never create anything. ** No fabricated truths, numbers, dates, customers, awards, reviews, or quotes. If something is unidentified, leave it out or ask. - ** Make verifying simple for me. ** When you require me to examine or pick something, do NOT make me compose long responds. - If you have a tool for asking multiple-choice or selectable concerns, utilize it. - Otherwise, reveal a ** numbered list ** so I can respond in a couple of words, e.g. "all good" "3 is wrong, it's 2019" "drop 5 and 8"- ** Protect my personal privacy. ** No home address, contact number, household information, or individual e-mail on the page unless I clearly provide for that function. - ** Be truthful about gain access to. ** If a link can't be opened (login walls, bot stopping, mistakes), inform me which one and ask me to paste its appropriate material or avoid it. Never ever think what a page states.-- ## Step 1: Ask about individual info Your really first message ought to quickly discuss what you're about to do, then ask whether I wish to share individual info with you. Offer examples of what I can share: - Resume or CV: a file course, a file positioned in the existing folder, or pasted text - Links: author/bio pages, portfolio, LinkedIn, GitHub, social profiles, individual blog site - Anything else I desire consisted of or left out Make it clear that sharing is optional. If I do not share anything, you'll investigate me from public sources utilizing simply my name (and manage, if I provide one). ** Stop and wait on my reply. ** ## Step 2: Confirm what you got After I share, note back what you got in one compact summary (e.g., "Resume: found at ./resume.pdf. Links: LinkedIn, GitHub, author page.". If a file course does not exist or a file can't read, state so now. Ask: - ** Continue **, or - ** Add more ** Repeat up until I state continue. ## Step 3: Gather info The course depends upon what I offered you. ** Path A: I shared individual details. ** - Read my resume and bring every link I provided you. Extract whatever helpful. - ** Do not browse the web beyond what I offered. ** ** Path B: I shared absolutely nothing (or just my name/handle). ** - Research me online: author and byline pages, LinkedIn, GitHub, socials, interviews, talks, publications. - ** Identity check: ** many individuals share names. Just utilize a source if it's plainly me (matching deal with, image, company, area, timeline, or links in between my profiles). Reserve anything unsure to verify with me. - Cross-check truths throughout sources. Keep in mind where sources disagree. Conserve your findings to 'research-notes. md' in the working folder, with the source for each truth, so absolutely nothing gets lost throughout actions. ## Step 4: Confirmation screen Present whatever you've collected in a tidy, scannable format, organized by classification (functions and timeline, noteworthy work, abilities and subjects, interests, links, and so on). Number every product. - Mark products you're ** not sure about ** (Path B: possible name crashes or clashing sources) so they stick out. - Let me verify, remedy, or eliminate products with very little effort (see guideline). ** Stop and wait. ** Apply my corrections and upgrade 'research-notes. md'. Was fixed, reveal just the altered products for a last Okay. ## Step 5: Short interview Ask ** 3-- 5 concerns ** that fill the spaces that matter most for constructing a terrific page. Utilize your own judgment: do not ask anything you currently understand. Great locations to probe, if still unidentified: - The primary objective of the page (get employed, draw in customers, display work, individual brand name) - Who will visit it - How I 'd explain myself in one line - Something individual or enjoyable I'm delighted to share - What I'm most happy with Offer quick-pick choices where possible, with space for a totally free response. You might ask all concerns at the same time or in 2 brief rounds. ** Stop and wait on my responses. ** Add them to 'research-notes. md'. ## Step 6: Think deeply about the style (do not ask me) Before composing any code, time out and factor thoroughly about who I am and what page would genuinely fit me. Choose all of this yourself. Do ** not ** ask me about style, due to the fact that I might not understand or care. Think about: - ** Personality and ambiance: ** what my work, composing, and responses state about me, and how the page needs to * feel *. - ** Colour: ** a scheme picked with colour theory that matches that character, with enough contrast in light and dark modes. - ** Typography: ** font style pairing that fits the character (max 2 households). - ** Density: ** very little or expressive/extravagant, based upon the individual. - ** Structure: ** single page or multi-page, based upon just how much genuine material exists. Choose on navigation and menus, and the order of areas. - ** Layout and movement: ** grid, spacing, images treatment, and any animation (purposeful, never ever gimmicky). - ** Copy voice: ** initially individual, matching how I in fact compose and talk. Compose a brief ** style quick ** (5-- 10 lines) summarising your choices and why. Program it to me and wait as 'design-brief. md', then ** continue straight to constructing **. Do not await approval. ## Step 7: Build the site Build the complete website in one go, inside a brand-new folder called 'website/' in the existing working directory site. ** Content ** - Include whatever pertinent and validated. Normal areas: hero (name, one-line positioning, contact us to action), about, what I do, picked work (with genuine links), experience/timeline, beyond work, contact. Relabel, include, combine, or drop areas to fit the individual. - First-person copy that seems like me, particular instead of generic. Prevent filler words like "passionate," "innovative," "results-driven."
- Only consist of realities validated in Step 4 or given up Step 5. ** Must be practical ** - Every button, link, and menu product works. No dead links or '#' placeholders. - Navigation deals with desktop and mobile (consisting of the mobile menu). - There's no backend, so a contact type or button need to utilize 'mailto: '( or link to a contact technique I authorized). Never ever phony a kind submission. - A light/dark mode toggle that appreciates the system setting by default. ** Technical requirements ** - ** It needs to open by double-clicking 'site/index. html 'in a web browser, without any set up, develop action, or regional server. ** Choose the tech appropriately: plain HTML/CSS/JS, numerous connected HTML files, or a structure packed from a CDN just if it still fulfills this guideline. Usage relative courses just; no ES module imports of regional files or 'bring() '. calls to regional files, considering that those break when opened as 'file:// '. - Responsive from 360px phones to big desktops, without any horizontal scrolling. - Accessible: semantic HTML, sensible headings, alt text, keyboard navigation, noticeable focus states, great contrast, appreciates reduced-motion settings. - SEO and sharing: page title, meta description, Open Graph tags, and 'Person 'structured information (JSON-LD) utilizing verified realities just. - Fast and light-weight. No tracking or analytics. - Where I require to include my own possessions (profile image, social sneak peek image), usage plainly significant placeholders (e.g., 'Discover more from PMN S.P.O.R.T.S - A PRIME MEDIA NETWORK BRAND
Subscribe to get the latest posts sent to your email.
