Ever since my article on How to Become a Full Stack Developer and Get a Job in 2025 went viral, I’ve received countless DMs, emails, and even WhatsApp messages from readers. People have been asking about everything from learning to code and mastering system design to web design and how AI fits into modern development.
I’ve been taking it one topic at a time. My last piece on system design principles received great feedback, and that encouragement has kept me going.
Lately, I’ve developed a deep interest in UI/UX design – not just out of curiosity, but because so many readers have been requesting a detailed guide. They want one that explains how to learn web design, how to apply it to real-world projects, and how AI is reshaping the field.
Looking back, my journey started six years ago as a software tester. From there, I transitioned into full-stack development, then DevOps. I also explored data analysis, and today I manage a full-time freelancing career alongside my farming work.
One thing I’ve learned along the way is that a strong portfolio can take you to places you’d never imagined.
I’ve had a portfolio for years, but now I’m completely rebuilding it from scratch to make it cleaner, smarter, and more reflective of who I’ve become as a developer.
In this tutorial, I’ll walk you through how I created my new portfolio and show you how you can build yours too – with the right structure, design, and a touch of copywriting magic to make it stand out.
What We’ll Cover:
What is a Portfolio Website and Why Do You Need One?
A portfolio website is your own space on the internet where you can proudly show your best work, projects, and achievements. Think of it as your digital résumé, but far more visual and personal. Instead of just listing your skills or job titles, it lets people actually see what you’ve built, designed, or created, and this tells your story better than any document can.
It helps employers, clients, or collaborators understand your skills, experience, and creativity at a glance. While it’s beneficial for designers, developers, writers, and photographers, anyone who wants to share their work online can create one, from students and freelancers to business professionals.
Here’s why having a portfolio website matters:
A collection of your best work: like a gallery where you keep your most impressive projects, artwork, or achievements all in one place.
Your online identity: It’s your personal brand, showing who you are, what you do, and what makes your work stand out.
A way to showcase your skills: Through images, videos, and live demos, it give people a clear picture of your talent and creativity.
An open door for opportunities: People can visit your site, explore your work, and contact you directly for jobs, collaborations, or freelance work.
A tool for career growth: A well-built portfolio helps you attract clients, get noticed by employers, and open doors to new partnerships.
In simple words, your portfolio website is your professional story told visually – a mix of your work, passion, and personality that helps the world see what you’re capable of.
Important Portfolio Website Components
Now that we know why a portfolio website matters, let’s look at the key components that make it stand out. Each part plays a role in showing who you are, what you can do, and how you can help others.
Since I’m a developer, and the people who have reached out to me are mostly tech enthusiasts, here I’ll give a technical portfolio example. But you can apply the learnings from this guide to build any type of portfolio for any niche/business.
1. Home Page: The First Impression
Your homepage is like the front door to your digital world. It should quickly tell visitors who you are, what you do, and why you’re worth hiring or collaborating with. Keep it clean, simple, and welcoming: just a few strong lines about your skills and what kind of projects you work on.
Tip: Use a short headline like “Hi, I’m Prankur – I build fast, user-friendly web apps.”
2. About Section: Your Story
This is where you make your connection with the audience. Share your journey: how you started, what drives you, and what kind of problems you love solving. Keep it conversational and honest. People love working with real humans, not buzzwords.
Tip: Add a professional but friendly photo (optional) here to make it more personal.
3. Projects / Work Section: Show, Don’t Just Tell
This is the heart of your portfolio. List your best projects – the ones that represent your strongest skills and the kind of work you want to keep doing. Each project should include:
A short description of what it is.
The tools or technologies you used.
The challenge you solved.
A screenshot or live demo link.
GitHub link so that people can see how you code
Tip: 3–6 strong projects are better than 15 average ones. If you’re actively contributing to open source, you should add that to your portfolio, too.
4. Case Studies: Tell the Story Behind the Work
Case studies take your projects one step further. They explain your thinking process and how you understood the client’s problem, what steps you took, and what results you achieved. This helps potential employers or clients see your problem-solving skills, not just your designs or code.
Tip: Keep it short and focus on the “before → after” transformation.
5. Skills & Tools Section
List your key technical and creative skills, like HTML, CSS, JavaScript, React, Figma, or AI.
You can group them as:
Frontend Tools
Backend Tools
Design Tools
AI or Productivity Tools
Tip: Keep the list focused and highlight the tools you actually use, not every tool you’ve ever tried.
6. Testimonials: Social Proof (Optional)
People trust people. Include a few quotes or short testimonials from clients, teammates, or mentors who can vouch for your skills and professionalism. It instantly builds trust and credibility.
If you are just starting, you can add this section later on, as initially you won’t have testimonials. Once you start working, you can politely ask your clients to give their feedback on your work. Just make sure to get their permission to add it to your site.
Tip: Ask for a 2–3 sentence testimonial right after finishing a project.
7. Blog or Articles Section (Optional)
If you write tutorials or share knowledge, add a blog section. It helps you stand out as someone who not only builds but also teaches and communicates ideas clearly. It also boosts SEO and keeps your site fresh.
Tip: Even 2–3 strong, educational articles can make a huge difference.
8. Contact Section: Make It Easy to Reach You
Your contact page should be simple, visible, and welcoming. Include your email, social links (LinkedIn, GitHub, X/Twitter), and maybe a contact form. You can also add a small call to action like:
“Have a project in mind? Let’s connect.”
Tip: Place your contact link in the main menu. Don’t hide it.
9. Résumé / Downloadable CV (Optional)
If you’re job-hunting, include a link to download your latest résumé. You can also add a “quick summary” of your experience, education, and certifications directly on the website.
10. Call to Action (CTA)
Every great portfolio ends with a nudge – a simple next step for your visitor. It could be:
“Let’s build something amazing together.”
“Hire me for your next project.”
“Check out my latest work.”
A clear CTA can help turn a visitor into a lead or follower.
Your portfolio is not just a gallery. It’s a storytelling tool. It tells the world what you can do, how you think, and what makes you unique. Make sure every section serves a purpose, looks clean, and reflects your real personality.
How to Make Your Portfolio Website Stand Out
1. Showcase Your Best Work
Only include your strongest and most relevant projects. Quality matters more than quantity. A few great examples of your work will create a much better impression than a long list of average ones.
2. Use High-Quality Images and Videos
Make sure your work looks clear and professional. Good visuals instantly catch attention and show that you care about presentation. Use clean screenshots, mockups, or short demo videos.
3. Write Clearly and Keep It Short
Explain your work and skills in simple, easy-to-read language. Avoid long paragraphs — most visitors just skim. A few lines that get straight to the point are enough.
4. Tell Your Story
Use your “About Me” section to share your journey — how you started, what you love building, and what kind of work you enjoy most. People connect more with stories than with just titles or resumes.
5. Keep Navigation Simple
Make sure visitors can easily find your projects, contact info, and other key details. A clean menu and clear layout help people focus on your work instead of figuring out where to click.
6. Keep It Updated
Whenever you finish a new project or learn a new skill, add it to your portfolio. An up-to-date portfolio shows that you’re active, learning, and growing in your field.
7. Optimise for SEO
Use the right keywords — the ones people might type when searching for your kind of work (like “frontend developer” or “Figma to code expert”). This helps your site appear in search results. Many AI-powered website builders can assist with basic SEO setup.
How to Use Figma to Design Your Own Portfolio
Designing your own portfolio might sound intimidating at first, but tools like Figma make the process surprisingly intuitive – even if you’re not a professional designer. With Figma, you can visually plan every section of your portfolio before turning it into a live website.
I’ve been learning web design and using Figma for a long time for my client projects. But here, I didn’t build the entire portfolio from scratch. I used Figma’s design inspiration library to get some ideas, and I built the portfolio based on that.
Let’s walk through how you can do that, step by step, using the layout shown below as an example:
1. Start With a Wireframe
Before adding colours or fancy visuals, begin with a simple wireframe. It’s basically a rough sketch of your portfolio layout.
In Figma, you can create frames for each section you want on your site:
Hero section (your name, title, and call-to-action buttons)
“What I Do Best” or skills
Tech stack
Featured projects
Blog or article previews
Services and pricing
Contact form
This helps you get the structure right before focusing on design. Don’t worry about fonts or images yet – just boxes and text placeholders are enough.
Here’s a sample wireframe I created to visualise how everything should look before moving into Figma. It’s always a good idea to sketch or plan your design on paper first, as it helps you get a clear picture of the layout and refine details like colours, fonts, and spacing early on.
Once the wireframe is ready, you can start adding your preferred colours, typography, and images to bring the design to life. If you want to go a step further and understand how to choose the right colour palettes and fonts, it’s worth exploring design psychology — it plays a huge role in how people perceive your work.
2. Add Visual Hierarchy and Colour
Once your structure feels solid, start adding typography and colour to create a visual hierarchy. This helps the viewer’s eyes know where to focus first.
For example, in the sample design above, the hero section (at the top) instantly grabs attention with bold typography (“I build things for the web”) and a subtle background/hero image.
Use Figma’s colour styles to define a consistent palette. Try using about 3 to 4 shades that complement each other. Keep it minimal and professional. For text, you can choose neutral fonts like Poppins, Inter, or Roboto, which look great on both dark and light themes.
3. Create Components for Reuse
Figma allows you to turn recurring UI elements like buttons, cards, and tags into components. In the portfolio example here, notice how every project card, article preview, and pricing box follows the same layout. By creating a single card component and reusing it, you can easily maintain consistency and update everything in one go later.
In this design, I will be using a blog featuring component multiple times, so instead of designing it again and again, I have made it once, and I am now using it multiple times.
4. Add Your Content and Images
Now that your base design is ready, it’s time to make it personal. You can go ahead and replace placeholders with:
Your best project screenshots (use mockups if needed),
Professional headshot or relevant visuals,
Real content, like your bio, skills, and service details.
Make sure you keep the spacing clean. It ensures all sections stay neatly aligned, even when you adjust or add new elements later.
In this hero section, I have used my name and colour and font of my choice on the left, and you can see the Styles showing all the colours I have used across the project.
5. Create Interactive Prototypes
Before exporting your design, use Figma’s Prototype Mode to link different pages together – for example, make “Projects” in the top navigation scroll smoothly to your project section. This gives you a working demo to test how users will experience your portfolio before you even write a single line of code.
You can also share this prototype with friends or mentors for quick feedback.
6. Export or Hand Off for Development
After testing your design in Prototype Mode when you’re satisfied, the final step is the handoff. Use the Export panel to download all required assets (icons, logos, images) in their correct formats. Then share the Figma file and go to Dev Mode, where you can inspect typography, spacing, sizes, and colour values. These exported assets and inspected specs are what developers use to create the live HTML/CSS code.
Note: The Dev Mode in Figma allows you to inspect CSS and export your stuff easily. Since I don’t have a paid Figma plan, I can’t show inspecting and exporting.
Designing your portfolio in Figma gives you full freedom over layout, colour choices, and how you present your personality. Keep it simple, prioritise usability, and design with clarity. Once the layout is complete and tested, converting it into a functional site becomes straightforward.
You can also use auto layout just by right-clicking on the design section components.
Auto Layout allows designers to define rules for spacing, direction, padding, and alignment of elements. This ensures layouts like buttons, lists, and cards instantly adapt (scale/shrink) to content changes or different screen sizes without manual adjustments.
Once you’ve built and tested your Figma layout, converting it into code becomes the easy part.
Tools for Figma to Code Generation
By the time you’re done with the wireframe and colours, and your portfolio is live on Figma, it’s time to convert that Figma design into code. There are two ways to do so:
Manual Method
AI Method
How to Manually Convert Figma Designs to Code
When you design a website or app in Figma, the next big step is turning that design into working code. Traditionally, developers have done this manually: inspecting each element, writing HTML, CSS, and then refining the layout in frameworks like React or Tailwind CSS.
It’s important to understand how this process is normally done by hand. This is the foundation that every frontend developer relies on — and it’s also what helps you evaluate and improve AI-generated code later.
When you design a website or app in Figma, the next step is to translate that visual layout into real HTML, CSS, and JavaScript. Developers usually start by examining each element in the design – its size, spacing, typography, colour, and layout rules – and manually rebuilding it in code.
Exporting Visual Assets
Using Figma’s Export panel, you download only what needs to be recreated visually in code:
icons
illustrations
logos
images or thumbnails
Most structural elements (buttons, cards, sections, containers) are not exported – you’ll need to build them using HTML and CSS.
Rebuilding the Layout with HTML and CSS
You’ll recreate the page section by section:
Setting up the HTML structure
Adding Flexbox or CSS Grid for layouts
Applying typography exactly as specified in Figma
Matching spacing using padding, margins, and gaps
Defining colours using the hex codes from the Figma Inspector
If you’re using Tailwind CSS, this becomes a matter of applying the right utility classes, but the logic remains the same: everything is recreated manually.
Once you have your Figma layout ready, the real work happens inside your code editor (which for me is VS Code). Here’s how developers traditionally rebuild the UI one section at a time.
Set Up Your Project Structure
In VS Code, create your project structure. It’ll look something like this:
project/
├─ index.html
├─ styles.css
├─ /assets
│ ├─ logo.svg
│ ├─ hero-image.png
│ └─ icons/
If you’re using React, this becomes the structure:
src/
├─ App.jsx
├─ components/
├─ index.css
├─ assets/
This structure mirrors what you saw in Figma: each major design section becomes a container or component.
Write the HTML Structure Section-by-Section
Now, you’ll look at the Figma frame and convert it to raw markup.
As an example, let’s look at the Hero Section.
Figma frame shows:
a headline
subtext
a button
an illustration
So your HTML becomes this:
<section class="hero">
<div class="hero-content">
<h1>Modern UI for Everyone</h1>
<p>Beautiful designs built for speed and accessibility.</p>
<button class="cta-btn">Get Started</button>
</div>
<img src="assets/hero-image.png" alt="Hero illustration" class="hero-img" />
</section>
You're essentially mapping each Figma layer onto an HTML element.
Build Layouts Using Flexbox or Grid
In Figma, layouts are visual. In HTML/CSS, you must translate the layout rules.
If Figma shows two columns (text + image), you’ll use Flexbox:
.hero {
display: flex;
align-items: center;
justify-content: space-between;
}
If Figma has a 3-card layout, you’ll use Grid:
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
You literally reconstruct the layout from scratch by interpreting the Figma frame’s structure.
Apply Typography Exactly as in Figma
Next, you’ll go to Figma, select a text layer, and check the Inspector:
Font family: Inter
Font size: 36px
Line height: 44px
Font weight: 700
Letter spacing: -1%
Then recreate it like this:
.hero h1 {
font-family: 'Inter', sans-serif;
font-size: 36px;
line-height: 44px;
font-weight: 700;
letter-spacing: -0.01em;
}
This is why developers need to know their fundamentals: AI tools often miss these fine details.
Recreate Spacing With Padding, Margins, Gaps
In Figma, spacing is visual. But in code, you must calculate and apply it.
Example Figma spacing:
Padding inside a button: 16px vertical / 32px horizontal
Margin below a heading: 24px
Gap between elements: 32px
So you write this code:
.cta-btn {
padding: 16px 32px;
}
.hero h1 {
margin-bottom: 24px;
}
.hero-content {
display: flex;
flex-direction: column;
gap: 32px;
}
Everything must match the design. And in this case, spacing is what makes UI look polished.
Apply Colours Using Figma Hex Codes
In Figma Inspector:
Primary Blue →
#4A78FFBackground →
#F8FAFCText →
#1A1A1A
In your CSS:
body {
background-color: #F8FAFC;
color: #1A1A1A;
}
.cta-btn {
background-color: #4A78FF;
color: white;
}
You’ll need to manually copy each hex code into CSS, as this is where accuracy matters.
(If Using Tailwind) Apply Utility Classes Instead of Writing CSS
Switching back and forth between your Figma design and a separate CSS file can slow down your whole workflow. Tailwind CSS solves this by letting you write styles right inside your HTML using small, reusable utility classes.
In this section, you’ll learn how to take the exact pixel values you see in the Figma Inspector and turn them into Tailwind utilities.
Step 1: Understand Tailwind’s Spacing Scale
Tailwind doesn’t use raw pixel values. Instead, it uses a consistent spacing scale, usually based on a 4px grid.
Here’s the simple rule: Take the pixel value from Figma, divide by 4, and that number becomes your Tailwind utility.
Example:
| Figma | Tailwind | Meaning |
margin-top: 32px | mt-8 | 32 ÷ 4 = 8 → so the class is mt-8 |
Prefixes you should know:
m= marginp= paddingt,b,l,r= top, bottom, left, rightx= horizontal (left + right)y= vertical (top + bottom)
Step 2: Converting Complex Padding
If your Figma element uses different padding for X and Y, convert each side separately.
Example:
| Figma | Tailwind | Meaning |
padding: 16px 32px | py-4 px-8 | 16 ÷ 4 = 4 → py-4 |
32 ÷ 4 = 8 → px-8 |
Step 3: Converting Font Sizes
Tailwind doesn’t use pixel sizes for fonts. Instead, it uses semantic names – almost like T-shirt sizes.
Example:
| Figma Font Size | Tailwind Class | Meaning |
36px | text-4xl | Tailwind’s 4xl matches 36px in the default scale |
This encourages typography consistency, instead of manually choosing random font sizes.
Why This Method Is So Fast
Once you get used to it, the workflow becomes second nature:
Figma value → divide by 4 → apply Tailwind class
No switching files. No naming CSS classes. No extra stylesheet bloat.
Just fast, direct, design-to-code translation.
Try It Yourself
Open a Figma component (like a button or a card) and check its spacing, padding, and font size in the Inspector. Then convert everything using the simple rules above.
Before long, you’ll be turning Figma designs into clean Tailwind code in seconds.
You still translate Figma to code manually.
Alright, back to our workflow:
Making It Responsive
You check how the design should behave on different screen sizes:
stacking vs. side-by-side layouts
font scaling
spacing adjustments
collapsing navigation or rearranging grids
This requires writing responsive styles and breakpoints, which AI tools can attempt but rarely perfect.
Why the Manual Way Is Important
Even though it takes more time, this approach teaches fundamentals that AI tools simply can’t replace:
How spacing systems work
How components behave in real browsers
How layout changes across devices
How to optimise for performance and accessibility
These skills allow you to inspect code intelligently and improve it wherever needed, which is almost always necessary, no matter which tool you use.
How to Use AI Tools to Convert Figma Designs to Code (Optional)
To speed up this process, you can now use AI-powered and automated Figma-to-code tools. These tools analyse the Figma file and instantly generate code that you can integrate into your tech stack.
There are multiple tools available in the market, like V0, Builder.io, and Kombai.
V0 is A Vercel project focused on fast UI generation, integrated with Next.js workflows.
Builder.io is visual CMS with Figma integration and a visual editor that can export components for web apps.
Kombai is an IDE extension that converts selected Figma frames into React/NextJS/React Native code and offers repo-aware features.
Building Live
For demonstration purposes, I’ll be using Kombai, a VS Code extension. And since most of us developers spend a lot of time inside VS Code, it’s the perfect place to test it out.
To install it in VS Code, simply open the Extensions Marketplace, search for 'kombai', click 'Install' and open the extension.
Now, at the agent panel, click on the “Let’s get started” button and sign up or log in with your credentials.
Now it’s time to test the agent for real work. To do so, I’ll be using the Figma file attached to build this portfolio.
A few things to keep in mind as you get going:
You’ll need to enable WebGL if Figma is not working on your browser.
You need to know how to copy the Figma file link and how to export the design from Figma.
To copy the Figma design file link, open your Figma design file and simply select your desired design, select copy/paste, and then select copy link to selection. It will copy the complete design file URL.
You can also copy the link of any Figma component and follow the same approach to get the desired outcome.
Open the agent extension in VSCode and select the Figma (icon) agent at the bottom of the agent toolbar. It will open a new pop-up. In it, paste the link you copied to the design file (check the screenshot below). Then you can prompt the agent with what you want it to do with this Figma file.
In my case, I wanted to replicate the same design, so I gave this prompt along with my Figma design link:
“You are an expert UI/UX designer and your task is to build and replicate the entire Figma design in the HTML/CSS/JS code from the attached URL.“
After confirming this, the agent will start working to replicate the same design as you’ve seen in the Figma file.
And here are the results:
Now you have the full picture of both approaches and when to use each one.
Here is the live Project link - FCC FIGMA TO CODE
Here is the GitHub link for the project code - Github Code
Challenges in AI-Generated Code (and Why Developer Oversight Is Essential)
AI tools can speed up the design-to-code process, but the output is rarely production-ready. Most tools struggle with layout precision, accessibility, and responsiveness, especially in real-world designs. You should expect to review and improve various parts of the generated code, such as:
Spacing and alignment issues: AI may misinterpret padding, margins, or grid spacing, so layouts often need manual adjustment.
Responsive breakpoints: Most tools generate layouts for a single screen size. You still need to add tablet/mobile breakpoints and test them across devices.
Semantic HTML: AI tends to use too many
<div>elements instead of meaningful tags like<header>,<nav>,<section>, or<button>.Accessibility gaps: Missing alt text, improper labels, weak colour contrast choices, and a lack of ARIA(HTML Tags) attributes are common issues.
Utility class overload (in Tailwind-based code): AI outputs long, repetitive class lists that need cleanup for maintainability.
Inconsistent component structure: AI may generate components that aren’t reusable or follow naming conventions, so refactoring is often required.
Tokens and theming: Colours, font sizes, and spacing may not map to design tokens unless manually corrected.
Because of these limitations, AI-generated code should be treated as a starting point, not a final product. You’ll still need to validate the logic, refine the structure, and ensure the final result meets real-world quality standards. AI reduces repetitive work, but you, as the developer, need to ensure the code’s correctness, accessibility, and long-term maintainability.
What I Prefer
The manual method gives you complete control and teaches you the fundamentals, which are essential for understanding how layouts, spacing, and components actually translate into real code.
When you write the HTML, CSS, and component structure yourself, you build a deeper understanding of how layouts, spacing, responsiveness, typography, and accessibility truly work under the hood. These fundamentals are what make you a strong frontend developer, and no automated tool can replace that learning.
AI-assisted design-to-code tools can help with speed – especially in the early stages when you just want a quick starting point. They remove some of the repetitive setup work, but the output almost always needs refinement.
In real projects, the most dependable workflow is a combination of both approaches: Use automation only for the boilerplate, then rely on your own frontend knowledge to clean up, reorganise, and fine-tune the interface so it meets real-world standards.
Personally, I still prefer coding my designs manually because it keeps me connected to the craft and helps me build muscle memory. It’s the only way to fully understand how the design translates into a live, responsive interface and how each decision affects performance and user experience.
AI tools don’t replace frontend developers. They simply support them. They handle repetitive tasks so you can focus on the skills that truly matter: clarity of structure, accessibility, responsive behaviour, and crafting an experience that feels polished and intentional.
Copywriting for Your Portfolio
Now that your portfolio is designed and coded, let’s turn our attention back to what it actually says.
Copywriting is the art of using words to convince people to take a specific action, like buying a product, signing up for a service, or visiting a website. It’s a mix of creativity and marketing, where words are used to sell ideas or products smartly and emotionally.
A copywriter writes many types of content, from sales pages, website text, and social media posts to ad scripts and emails. The goal is simple: to make people take action.
So what makes copywriting effective?
Knowing your audience: A good copywriter understands what people need, what problems they face, and what motivates them.
Using persuasive words: Words that spark emotions and make readers want to act.
Clarity and impact: Keeping the message short, clear, and easy to understand.
Consistent brand voice: Writing in a tone that matches the brand’s personality — whether it’s fun, professional, or inspiring.
How to Use Copywriting in Your Portfolio
Your portfolio isn’t just about showing your work – it’s about telling your story in a way that connects with people. That’s where copywriting comes in. Good copy turns your portfolio from a plain showcase into something that feels personal, clear, and convincing.
Here’s how you can use copywriting effectively while building your portfolio:
1. Start With a Strong Headline
The first line people see should instantly tell them who you are and what you do. For example:
“I build modern, responsive web apps that turn ideas into digital reality.”
Your headline is like your elevator pitch: short, powerful, and clear.
2. Tell Your Story
In the About Me section, don’t just list your skills. You should also tell visitors about your journey. Write about how you got started programming, what you’ve learned along the way, and what drives you. Keep it conversational and real, like you’re talking to a friend.
“I started coding six years ago with simple HTML pages. Today, I design full-stack apps and help startups bring their ideas to life.”
3. Write Benefit-Focused Descriptions
When you show your projects, don’t just describe what you built. Explain why it matters.
Instead of: “I built a task manager app.”
Try: “A simple, clutter-free task manager that helps users stay productive without distractions.”
This small change turns your project into a problem-solving story, not just a tech demo.
4. Add a Call-to-Action (CTA)
Every portfolio should guide visitors toward an action, like contacting you, checking your GitHub, or reading your blog.
Here are some examples:
“Want to collaborate? Let’s build something amazing together.”
“Looking for a developer who writes clean and efficient code? Reach out!”
A clear CTA shows confidence and gives people a direction.
5. Keep It Simple and Authentic
Avoid fancy words or buzzwords. Write like a human, not a brochure. Use simple, clear sentences that sound like your real voice.
Good copywriting is not about being clever – it’s about being clear and honest.
6. Maintain a Consistent Tone
Whether your style is formal or friendly, keep it the same across all pages – home, about, projects, and contact. A consistent tone helps build your personal brand and makes your portfolio feel professional.
Copywriting is the invisible thread that ties your portfolio together. It helps people not just see your work, but feel your story.
Testing Benchmarks for a Portfolio Website
Before your portfolio goes live, it’s important to test it so that you know it looks and works as it’s supposed to. A fast, responsive, and accessible site leaves a strong first impression, and benchmarks help you measure whether it’s up to your standards. And a well-tested site loads faster, ranks better, and gives users (and recruiters) a seamless experience.
Below are the key benchmarks you should always check, along with why they matter.
1. Page Load Time
This is the time it takes for your page to fully load after someone visits it. A fast-loading site feels smooth and professional, while a slow one instantly turns people away.
This matters because most visitors leave if a site takes more than 3 seconds to load. Tools like GTmetrix or Pingdom can help you track and improve page load speed by optimising images and reducing unnecessary scripts.
2. Core Web Vitals (LCP, INP, CLS)
Google uses Core Web Vitals to measure real-world user experience.
LCP (Largest Contentful Paint): How quickly your main content becomes visible.
INP (Interaction to Next Paint): How fast your site responds when users interact.
CLS (Cumulative Layout Shift): How stable your layout is while loading.
These metrics directly affect how users perceive your site and also impact SEO ranking. You can test them on PageSpeed Insights.
3. Mobile Friendliness
Most people will view your portfolio on their phones, so it needs to look and work perfectly on smaller screens.
A mobile-optimised site not only improves user experience but also ranks better on Google’s mobile search results. Use responsive layouts and flexible grids to ensure smooth viewing on all devices.
4. Accessibility Compliance (WCAG)
Accessibility means making your portfolio usable for everyone, including people with disabilities.
This is important because following WCAG standards (like proper colour contrast, keyboard navigation, and alt text for images) shows professionalism and inclusivity. Tools like Lighthouse or WAVE can help you check how your portfolio ranks for key accessibility metrics.
5. SEO Best Practices
SEO isn’t just for businesses. It can also help your personal site appear when someone searches your name or skills.
If you add proper meta tags, structured headings (H1, H2, H3), and descriptive URLs, these features can help recruiters or clients find you more easily. A well-optimised portfolio often performs better on job searches and tech blogs.
6. Responsiveness (Interaction Delay)
Responsiveness measures how quickly your website reacts when users click or scroll. And a laggy interface feels unprofessional and hurts user engagement. By minimising heavy scripts and optimising animations, you ensure smooth, immediate feedback for every action.
7. Security Checks (HTTPS)
Even a simple portfolio needs HTTPS. It builds trust and protects both you and your visitors from data breaches. Browsers like Chrome now flag non-secure sites, so enabling SSL is a must.
8. Resource Size (HTML, CSS, JS, Images)
Heavy resources can slow everything down. Compressing files, minifying CSS/JS, and using next-gen image formats (like WebP) can dramatically improve speed and performance.
9. Browser and Device Compatibility
Not everyone uses Chrome on a laptop. So make sure you test your portfolio across major browsers (Chrome, Firefox, Safari, Edge) and devices (desktop, tablet, mobile). Simulated testing tools like DebugBear or Basemark Web help catch layout issues early.
10. Real User Monitoring (RUM)
Instead of just testing in a lab, RUM captures how real visitors experience your site. This helps you understand performance in real-world scenarios – on different devices, networks, and locations – and adjust your design based on real data.
Hosting Your Portfolio
Now it’s time to push your changes to GitHub and deploy them on a hosting provider of your choice. Hosting services play a crucial role in showcasing your work. Depending on the type of projects you build, here are some of the best free hosting options that I have used so far for my personal and professional projects.
Vercel – Best for Next.js/React projects, offering seamless deployment inside the Vercel ecosystem.
GitHub Pages – Great for hosting static websites and personal portfolios.
Netlify – Ideal for frontend-heavy projects with easy deployment and CI/CD integration.
Your portfolio is ready, and you can share it anywhere with just a link.
How to Use Your Portfolio Effectively
Now that your portfolio is ready, it’s time to use it the right way. Whether you’re applying for a job, pitching to a freelance client, or simply networking with like-minded people, your portfolio is your strongest asset.
Think of it as your digital introduction. It not only shows what you’ve built but also how you think and work. The key is to use it smartly in the right context.
Let’s say you come across a job post or want to reach out directly to a recruiter or a company founder. Instead of just sending a plain résumé, you can make your message stand out by attaching your portfolio link. Here’s an example of how you can do it:
Example email/direct message:
Hi [Hiring Manager/CEO Name],
I’m Prankur, a Full Stack Developer from India with over 6 years of experience building mobile and web applications.
I came across the opening for [Job Title/Role] at your company and believe my skills align perfectly with what you’re looking for.
You can explore my work here: [Portfolio URL]
I’m available to start immediately and excited about the opportunity to contribute to your team and codebase.
Best regards,
Prankur Pandey
This small but professional touch – including your portfolio link in every email, proposal, or LinkedIn message – increases your chances of being noticed. A well-presented portfolio speaks louder than a résumé, and it helps recruiters or clients quickly understand your skills, design sense, and coding depth.
So, don’t just build your portfolio. Use it actively. Share it on job boards, LinkedIn posts, your GitHub bio, or even in casual conversations with potential collaborators. Every share is a new opportunity waiting to unfold.
Q&A
1. Is building a portfolio really important?
Absolutely. Instead of sending out a dozen links to your GitHub, Behance, and LinkedIn, it’s much more effective to combine all your work into one clean, accessible portfolio site. It makes you look organised, professional, and easy to evaluate.
2. Is it worth buying a domain name?
Yes, it is, if you’re serious about your career. Having your own domain (like yourname.dev or yourname.com) gives a personal and professional touch,
But if you’re still learning or just experimenting, it’s fine to start with a free domain. Once you have solid projects to show, investing in your own domain is totally worth it.
3. Can I use AI or no-code tools to build my portfolio?
You can, but if you’re a developer, you should try coding it yourself first. It’s a great way to showcase your creativity and technical control over design and logic. Here’s a simple and straightforward guide to help you get started with that.
Once your design is ready, you can always use AI or no-code tools to speed up the process or automate parts of it. Think of AI as a helper, not a replacement.
4. How can I get AI tools for testing?
It’s easy: visit the official websites of the tools you’re interested in and sign up. Most AI tools offer free trials or limited credits that you can use to explore and test their features based on your workflow and needs.
5. I am just starting. What should I use: AI tools or the Manual Method?
I strongly recommend using the Manual Method as it will help you to understand your craft well, and you will also build muscle memory about a technology and how it works.
6. Which Platform should I use for hosting?
Most of the hosting providers offer a free plan, so you can start with that. Then, when you feel the need to expand your portfolio, switch to a paid plan.
Final Notes
Building a strong portfolio requires time, effort, and attention to detail. But it’s one of the smartest investments you can make in your tech career.
Tools and templates can help speed up the process, but your creativity, skills, and storytelling are what truly make a portfolio stand out. A well-crafted portfolio not only shows what you can build, it reveals how you think and why your work matters.
While you can use design tools, frameworks, or even AI assistance to save time, make sure you understand the basics of design, structure, and usability. The goal isn’t to create something flashy; it’s to produce something clear, professional, and authentic.
Your portfolio is your digital identity, so treat it like your personal brand. Keep refining it as your skills grow and let it evolve alongside your career.
Conclusion
A portfolio isn’t just a website. It’s your story told through your work. It helps employers, clients, and collaborators understand what you do best and why you stand out.
In this article, I’ve shared everything that helped me build and refine my own portfolio, from understanding design structure and copywriting to testing and optimisation benchmarks. My goal is to help you create a portfolio that not only looks great but also opens real opportunities for you.
In my next tutorial, I’ll explore something new for sure.
Design + Creativity+Development + Execution = The Ultimate Developer Stack 🔥
Keep learning, keep building, and most importantly — keep sharing your work.
If you found this article useful, feel free to let me know. I’m always open to learning, collaboration, and new opportunities.
Now it's your turn: what are you building next? Let me know by sending me a DM!
Follow me on 𝕏: Prankur's 𝕏
Connect with me on LinkedIn: Prankur's LinkedIn
Follow me on GitHub: Prankur’s GitHub
View my Portfolio: Prankur's Portfolio