SYSTEM NOTICE

Auto translation by AI. Be sure, accuracy, nuances and authorial intent may not be fully reflected.
見出し画像

A Portfolio Built by a Non-Engineer in 30 Minutes Using Claude Code: Adding it to Your Resume [Career Change Special ②]

AI転職ラボ

Many non-engineers in their 30s and 40s are likely stuck in the document screening phase of their job search.

Even if you write 'Business efficiency improved by AI' on your resume, you still get stuck before the interview. There is a clear reason for this problem.

The evaluation criteria for recruiters have already shifted from 'people who know AI' to 'people who can produce results with AI' (HRAIT 2026 AI Talent Recruitment Guide).

You can no longer pass document screenings with text-only explanations.
There are 47 Claude Code job openings listed on Forkwell Jobs, and what is being asked for in the 12 to 20 million yen annual salary range is whether you have actual working deliverables (Forkwell Jobs Claude Code Job Openings). The AI-Augmented Product Engineer position at JBCC Corporation has a salary range of 7.9 to 20 million yen, and the requirements include practical experience with Claude Code.

However, there is hope.
With Claude Code (an AI assistant that runs on your own PC), even a non-engineer can build a working portfolio site in 30 to 60 minutes. You do not need knowledge of HTML (the basic language that makes up web pages).

If the recruiter clicks the URL on your resume, you can show them your self-made AI skills actually working on the screen.

In this article, I will share how to create a simple portfolio site, how to include it on your resume, and how to present it during an interview.

What you will learn in this article

  • Why a working portfolio is effective for document screening

  • Steps to build a simple site with Claude Code in 30–60 minutes

  • How to add the URL to your resume and write an appeal statement

  • 3 points to note when showing your portfolio in an interview

The real reason you get stuck at document screening

It is not uncommon for people in their 30s and 40s to repeatedly receive rejection notices from job sites.

You polished your resume with ChatGPT and added your AI usage experience.
You also wrote your daily work improvement episodes in a reasonably concrete way.

Even so, you get stuck at the document screening.

The reason is simple.
What recruiters are looking at is not the quality of your text, but the existence of a tangible product.

In the 2026 recruitment scene, descriptions of 'I can use AI' are everywhere.
We have reached a stage where it is no longer possible to differentiate yourself from other applicants with just the text in your documents.

This is where having one deliverable that actually works on the screen becomes effective.

Why a working portfolio is effective for document screening

The evaluation criteria in the hiring market have shifted significantly over the past six months.
The 2026 HRAIT Hiring Guide states it this way.
Recruiters' interest has shifted from those who know AI to those who can deliver results with AI (HRAIT).

In a text-only resume, I can explain that I can deliver results with AI.
However, an explanation and reality are two different things.
In a recruiter's mind, the more words used in an explanation, the more the credibility of the content actually decreases.

If there is a URL to a portfolio site that works on the screen, the impression changes.
This is because, during a 3-second document scan, a moment is created where they can touch something real rather than just text.

In fact, the number of non-engineers incorporating Claude Code into their work is increasing.

Mr. KAWAI has shared his experience of using Claude Code to build 21 Skills (dedicated AI assistants trained on work procedures) in about a week while working as a one-person marketing department (KAWAI note).

Kazutaka Otsuji has published a case study of an AI company where he has Claude Code run 7 departments in a zero-employee environment (Kazutaka Otsuji note).

What these two have in common is that they present their own work environments exactly as they are to the outside world.
When you publish something that works, you gain trust many times faster than with text.

Recruiters react the same way.
Material that allows them to confirm in one minute of clicking that this person is truly hands-on will boost the pass rate for document screening.

3 Steps to Create a Simple Portfolio with Claude Code

This is the main topic.
Even as a non-engineer, you can create a working portfolio site in 30 to 60 minutes.
Let's look at it in order.

Step 1: Organize the content to include (20 minutes)

First, list the elements you want to put on the site in bullet points.
Assume a structure that is completed on a single page.

Examples of elements to include:

  • Self-introduction (Name, summary of work history, 3 lines)

  • List of self-made Skills (about 3 created for work improvement)

  • Work improvement achievements (time saved or number of items processed)

  • Screenshots of deliverables (examples of meeting minutes formatting, PDF processing output, etc.)

Here, recall the 3 work scenarios covered in parts 83-85 (meeting minutes / PDF & data / email & Web) Skills.
By including them as a set of 3, you can leave the impression on the viewer that you are someone who delivers results across multiple tasks.

If you ask Claude Code, "Organize the overview of my 3 self-made Skills into under 300 characters for a portfolio site," it will handle everything, including formatting the text.

Step 2: Generate the HTML site (30 minutes)

Once the content is decided, give the following instructions to Claude Code.

ポートフォリオサイトを1ページのHTMLで作ってください。
内容はステップ1で整理した自己紹介とSkill3本を反映。
デザインはシンプル・ダーク基調・スマホ対応。
余計な装飾はなし、読みやすさ優先で。

Claude Code can automatically generate static HTML files folder by folder (25 Things You Can Do with Uravation).
Even if you don't write a single line of code, you will have a complete set of files in your hands.

If you want to change the colors or layout, you can ask for additional instructions and it will make the corrections.
You can ask in plain English, such as "Make the header a bit larger" or "Make the Skill section card-style."

Step 3: Publish using a free service (10 minutes)

Once you have the files, upload them to a free hosting service.
Here are three representative ones:

  • GitHub Pages (A free static site hosting service)

  • Cloudflare Pages (Also a free hosting service)

  • Vercel (A site hosting service that is free for personal use)

If you are unsure, it is safest to start with GitHub Pages. It has the most information available, and when you ask Claude Code for instructions, it provides very detailed guidance. None of these charge fees for personal use.
If you ask Claude Code, "Tell me step-by-step from start to finish how to publish this site to GitHub Pages," it will guide you in a way that is almost like having screen captures.

If you get stuck, just tell it, "I stopped here," and describe what is on your screen, and it will give you the next step.

In about 30 to 60 minutes, you will have your public URL.
This is the final deliverable to paste into your resume.

How to paste it into your resume and write an appeal

Once the URL is ready, decide where to paste it in your resume.
Here are three recommended placements:

  • The header section of your resume (near your name and contact information)

  • At the end of your self-promotion section

  • Next to the relevant skill in the "Achievements" section

It is said that recruiters judge documents in 3 seconds (The truth behind the 3 seconds recruiters use to judge documents. Changes in impressions of job seekers who use AI [Includes interview examples]).
The correct approach is to place it where the eye will catch the URL within those 3 seconds.

Here are three examples of how to write an appeal (please use these as writing references).

  • I have published a demonstration of the skills I built myself using Claude Code at the following site: [URL]

  • I have summarized the proof-of-concept results for my work improvements below: [URL]

  • You can see the skills in action at the following site: [URL]

When including numbers, please use empirical data with sources.
Here are some examples of how to write them.

Make sure the numbers are in a format that a recruiter can memorize in 3 seconds.
Instead of saying you improved efficiency, numbers like 90 minutes → 11 seconds are almost certain to leave an impression.

There is one important point to note here.
Distinguish between the actual figures you achieved in your work and the figures you cited as sources.
If they are your own actual figures, you can write them as they are.
If you are citing figures from a source, it is safer to indicate that they are based on industry examples to show they are source-based.

3 Points to Note When Showing Your Portfolio in an Interview

Your portfolio will also be useful in interviews after you pass the document screening.
However, if you show it the wrong way, it can have the opposite effect.
Remember these three points.

Point 1: Finish preparing screen sharing by the day before

Online interviews are on the rise.
If you get stuck because you cannot share your screen at the beginning of the interview, it will lower your impression immediately.

Complete the following three things by the day before.

  • Add the site to your browser bookmarks

  • Test screen sharing once (ask a family member or friend to spend 5 minutes with you)

  • Save a copy as a PDF screenshot in case of unstable connection

People who have backup measures do not panic during the actual event.

Point 2: Decide on a 3-step order for showing it

In the limited time of an interview, just letting them browse the whole site won't convey your message.
If you show it in the following three steps, you can convey the main points within 5 minutes.

  • Step 1: Talk about your awareness of issues during your self-promotion (30 seconds)

  • Step 2: Show a demonstration of one specific skill (2 minutes)

  • Step 3: Communicate results with numbers (30 seconds)

It is important to focus on the demonstration.
Spend more time showing things moving on the screen than reading through slides.

Point 3: Have the mindset of letting the other person touch it

The moment the interviewer shows interest is your biggest opportunity.
It would be a waste to pull back by saying, "I'll send you the materials later."

Paste the browser URL into the chat and have them open it on their end.
Creating a situation where they can interact with it on their own PC will elevate your evaluation.

Applicants who can do this are still only a few percent of the total.
From someone who talks with words to someone who shows things that move.
Just this shift will significantly change the impression you make in an interview.

Summary + Total summary of the two job change specials

With Part 86 (creating your own AI subordinate) and Part 87 (showing a working portfolio to the outside world), you now have a complete set of materials to differentiate yourself from document screening to the interview.

  • Part 86: Utilize an AI subordinate internally that has been trained on your own work data

  • Part 87: Show that track record to the outside world as a working deliverable

From here on, the series enters the next stage.

In Part 88 (Claude Code 30 Skills Practice Pack - 500 yen), I plan to provide 30 skills you can copy and paste today.
In Part 89 (Claude Code Experience Salary Increase Case Study Collection - 500 yen), I plan to share actual scenarios for 5 job types x 3 patterns, along with a work reduction numerical sheet you can use for salary negotiations.

Part 89, in particular, is a collection of concrete examples for turning the portfolio created in this article into material for salary increase negotiations.
If you want to go beyond just writing your Claude Code experience on your resume and take it to the salary negotiation stage, please read through Part 89 with me.

If you found this article helpful, please click the ♡ button; it encourages me to write the next one.

Which of your self-made skills would you like to include in your portfolio?
Let me know in the comments, and I will incorporate it as a priority theme in the Part 89 salary increase case study collection.

Related Articles

いいなと思ったら応援しよう！