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?

• Important Portfolio Website Components

• How to Make Your Portfolio Website Stand Out

• How to use Figma to Design Your Own Portfolio

• Tools for Figma to Code Generation

• Copywriting for Your Portfolio

• Testing Benchmarks for a Portfolio Website

• Hosting Your Portfolio

• How to Use Your Portfolio Effectively

• Q&A

• Final Notes

• Conclusion

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 → #4A78FF

• Background → #F8FAFC

• Text → #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:

Prefixes you should know:

• m = margin

• p = padding

• t, b, l, r = top, bottom, left, right

• x = 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:

Step 3: Converting Font Sizes

Tailwind doesn’t use pixel sizes for fonts. Instead, it uses semantic names – almost like T-shirt sizes.

Example:

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

A blog sounded like a good solution for this, so I set out to build one. In this article, I will walk you through how I did it with Next.js.

The basic idea here was to build a website where I wouldn’t need to write code in the future. I just wanted to be able to add the URL of a new article to a JSON file, and the website would extract information like the title, date, cover image, and description and then update itself with it. No database.

To understand how I would go about it, I checked the metadata of the HTML text from each of the platforms I considered. I used my articles, of course, like the one in the project folder. I found out that most of them used Open Graph metadata. So, that was easy to scrape. But, I also found out that some information wasn’t in the meta tags – instead, it was in the JSON-LD. At the end of the day, I ended up using both in my functions.

What we’ll cover:

1. How the Blog Site Works

2. The Structure of an Article on the Blog

3. How the Search Feature Works

4. The Project Structure

5. Steps to Build the Blog

6. Conclusion

Pre-requisites

Understanding this article requires some knowledge of programming and web development. You need to have basic knowledge of HTTP, HTML, CSS, JavaScript, and React to be able to follow along easily.

If you don't have those skills, you may still be able to understand the general structure and working principles.

How the Blog Site Works

The project consists of client components and server components. It is a website, so ideally, it's just a front-end. But it has to fetch data from URLs – and doing that from the client-side won’t work due to CORS blocking, as the requests will be emanating from a browser. So, it has to run on the server.

The fetchArticles() function runs on the server – then this happens:

The fetchArticles() function accesses the URLs, extracts and processes the HTML and JSON Linked Data objects from the response, and returns an array of Article objects to the Home page.

The HomePage component is a client side component that has another component in it, named HomeClient. This HomeClient is a client side component. It has to be because it has useState hooks.

But the HomePage component calls the fetchArticles() function and sets the articles constant (which is an array of Article objects, as defined by the interface in the ArticleCard.tsx file). The articles constant is then passed down to the HomeClient component as a prop.

Inside the HomeClient component, there are two components – the Hero component, and the MainBody component. The Hero component shows the welcome message, and also has the search bar. The MainBody component is where the tags and the article grid are. Logic for filtering articles are also in the MainBody component.

Inside the MainBody component, there is the ArticleCard component that takes the filtered array of Article objects from the MainBody as props, and renders an article card for each. These cards are rendered inside the grid in the MainBody component.

What does an article look like?

The articles are defined by an interface:

export interface Article {
  id: number;
  title?: string;
  description?: string;
  publishedDate?: string;
  url: string;
  imgUrl?: string;
  siteName?: string;
  tags?: string[];
}

The interface, as shown above, specifies that the object will have eight properties, of which only the id and url are compulsory. Those compulsory properties are actually what’s needed in the JSON file from which the web server will read.

When the URL is visited by the server, the title, description, and other properties (except the tags) are obtained automatically and populated. Then the object is created.

The article cards consist of the article’s cover image, the name of the platform where it was published, the date published, the title, and a description. All of this is wrapped in an anchor linking to the URL. The tags are not visible on the cards, but are used in filtering operations.

How does the search feature work?

There's a reason why the Hero component and the MainBody component are in the same parent component. That wasn't my initial design, but after I saw that the search bar would look better in the Hero component, and that I needed to set the searchTerm state in the Hero component and use it in the MainBody component, that became the best option for me: to put both of them in the same parent, so I could pass down the useState hook as props into both of them.

The search feature works basically by filtering the articles array based on the tags selected, or the search term entered. Here is what the code looks like:

 useEffect(() => {
    const anyTagActive = isActive.some((val) => val);

    const filtered = articles.filter((article) => {
      console.log('Search term: ' + searchTerm || 'searchTerm');
      const searchMatch =
        article.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        article.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        article.tags?.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase())) ||
        article.siteName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        article.publishedDate?.toLowerCase().includes(searchTerm.toLowerCase());


        console.log('This is the searchMarch: ' + searchMatch || 'FALSE searchMatch');
        console.log(article.title || 'article.title no wan show');

      const tagMatch = article.tags?.some((tag) => {
        const index = tags.indexOf(tag);
        return index !== -1 && isActive[index];
      }) || false;

      if (anyTagActive) {
        return tagMatch && searchMatch; // Only return articles if tag is active and search matches
      }

      return searchMatch; // If no tags active, return all that match the search term
    });

    setFilteredArticles(filtered);
  }, [articles, searchTerm, isActive]);

Here, we use a useEffect() hook to monitor for changes in the articles, searchTerm, and isActive constants. isActive is a useState() hook that has an array of boolean values the length of the tags array.

const [isActive, setIsActive] = useState(tags.map(() => false));

Here, the filtered constant is equal to the filtered values of articles.

const filtered = articles.filter();

Inside the filter method is where the arrow function with the logic for filtering is written – (article) => {//logic}. We have two constants: tagMatch and searchMatch. The searchMatch constant is true when the title, description, tags, site name, or published date includes the search term. Else, it's false. The tagMatch constant is true when any tag from the article's array of tag is present in the tag list, and also has a corresponding isActive value of true.

If any tag at all is active, then the results for both tagMatch and searchMatch are returned, but if no tag at all is active, then only the searchMatch is returned as true.

The filtered article list is what is then passed into the ArticleCard component.

<ArticleCard articles={filteredArticles} />

Project Structure

This is what the project file structure looks like:

At the root, we have the config files and node_modules which is not displayed here. The public folder holds all the images and icons. Then, in the src folder, we have app, component, and utils.

The components folder holds the files for the components – the nav bar, footer, hero, main body and article card. The utils folder has all the functions that run in the background and do not need to render anything. The fetchArticles function is there, along with other functions for extracting the date published, title, description, image URL, and others from HTTP responses gotten from the article URLs. The app folder has the favicon, the global CSS stylesheet, the page and layout files, articles.json which is the JSON file where I add new article URLs for rendering, a test HTML file (wsl.html), and the about/ and api/ directories.

Inside the about folder, we have the about page, and inside the API folder, we have tthe folder, metadata-local-test which is no longer relevant to the project. I used it initially to create an internal API to fetch from the URLs. But I later restructured the codebase.

Steps to Build the Blog

1. Install Next.js

To install Next.js, navigate to the folder where you want the project to reside and open that location in your terminal. Then type the following:

npx create-next-app@latest

You're going to be met with the following prompts:

2. Navigate to your newly created project folder and install dependencies

In the newly created project folder, run the project in development mode to preview your newly created Next project. You will be shown a message directing you to localhost on port 3000. Now, it's time for us to start creating what we want.

Now, one more thing you'll need to do. In the project, I used lucide-react to get one of the icons, and cheerio to extract data from the HTML. So, you’ll need to install those dependencies.

To install lucide-react, use this command in the project folder:

npm install lucide-react

Then install cheerio:

npm install cheerio

3. Change the title and description in the page metadata

The title is what shows up at the top of your browser tab when you open up the website. Right now, it should be showing 'Create Next App.' We don't want that.

Since this is not just HTML, there is no index.html to change the title in the header element. Rather, Next.js provides us a Metadata object we can use to change things like that. And it'll be in the layout.tsx file in the app or src folder. Head over there and change it to whatever you want the title to be. I’m using “Chidiadi Portfolio Blog”.

4. Create the necessary components

Navigate to the side panel, and under the src folder, create a components folder. This is where the components will live. Here, create the article card, footer, main body and nav bar.

For the Navbar, this is the code:

export default function Navbar(){
    return(
        <>
        <div className="text-3xl md:text-base flex w-[100vw] md:w-[98.2vw] lg:w-[98.8vw] h-[60px] bg-black text-white px-0 md:px-7 md:py-2 items-center justify-center md:justify-between">
            <h1 className="font-bold">CHIDIADI   ANYANWU</h1>
            <div className="hidden md:block flex space-x-4">
                <a href="/" className="hover:text-gray-400">Blog</a>
                <a href="/about" className="hover:text-gray-400">About</a>    
            </div>
        </div>
        </>
    );
}

Here's what the Hero component looks like:

"use client";

import { Search } from 'lucide-react';
import { useState } from 'react';

interface HeroProps {
    searchTerm: string;
    setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
  }
export default function Hero({ searchTerm, setSearchTerm }: HeroProps) {
    const [buttonColor, setButtonColor] = useState('');

    return (
        <div className="bg-[url('/img-one-1.jpg')] bg-cover bg-center bg-no-repeat flex flex-col items-center justify-center h-[400px] relative">
           <div className=" absolute inset-0 bg-black opacity-60"></div> 
            <h1 className="text-4xl text-white font-bold text-center z-10">My Portfolio Blog</h1>
            <p className="mt-4 mx-4 text-xlarge text-white md:text-xl text-justify md:text-center z-10" style={{ fontFamily: "Cormorant Garamond" }}>
                My name is Chidiadi Anyanwu. I am a technical writer with a strong background in networking. 
                I write about Networking, Cloud, DevOps, and even sometimes web development like this one. I built this
                website with Next.js, and there's also an <a href="/" className="text-blue-500 hover:text-blue-700 hover:underline">article about that.</a>
                  This website holds my technical articles in one place. It is a repository of my written works.
            </p>
            <div id="searchbar" className="h-9xl mt-4 flex align-items-center justify-center w-full" >

                <form onSubmit={(e) => {e.preventDefault();  setSearchTerm(searchTerm);}} className="group mt-4 relative w-[70%] md:w-[50%]">
                    <input  value={searchTerm} onChange={(e) => setSearchTerm(e.target.value) } onFocus={()=>{setButtonColor('bg-blue-500'); console.log('input focused')}} onBlur={()=>{setButtonColor('');}}type="search" placeholder="Search Chidiadi's articles" className="h-[50px] w-full px-[48px] border-3 border-blue-300 rounded-[25px] focus:outline-none focus:border-blue-500 text-black bg-white"/>
                    <button className={`h-[42px] w-[42px] absolute right-0 mr-1.5 mt-1 rounded-[50%] bg-blue-300 ${buttonColor}`}>
                        <Search  className='m-auto text-white'/>
                    </button>
                </form>

            </div>
        </div>
    );
}

In this file, we created the HeroProps interface to accept the search props. Then we deconstructed both searchTerm and setSearchTerm from it as props to the Hero component. We’ll make it a client component 'use client' because of the buttonColor useState() hook that changes when the search bar is clicked and sets the search button background color.

The MainBody component looks like this:

"use client";

import { useEffect, useState } from 'react';
import ArticleCard, { Article } from './ArticleCard';

interface MainBodyProps {
  searchTerm: string;
  articles: Article[];
}

export default function MainBody({ searchTerm, articles }: MainBodyProps) {
  // Get articles from JSON file and create array of article objects

  const [filteredArticles, setFilteredArticles] = useState<Article[]>([]);

  const tags = ["Networking", "Cloud", "DevOps", "Web Dev", "Cybersecurity"];
  const [isActive, setIsActive] = useState(tags.map(() => false));


  // Filter articles based on search term and active tags
  useEffect(() => {
    const anyTagActive = isActive.some((val) => val);

    const filtered = articles.filter((article) => {
      console.log('Search term: ' + searchTerm || 'searchTerm');
      const searchMatch =
        article.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        article.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        article.tags?.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase())) ||
        article.siteName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        article.publishedDate?.toLowerCase().includes(searchTerm.toLowerCase());


        console.log('This is the searchMarch: ' + searchMatch || 'FALSE searchMatch');
        console.log(article.title || 'article.title no wan show');

      const tagMatch = article.tags?.some((tag) => {
        const index = tags.indexOf(tag);
        return index !== -1 && isActive[index];
      }) || false;

      if (anyTagActive) {
        return tagMatch && searchMatch; // Only return articles if tag is active and search matches
      }

      return searchMatch; // If no tags active, return all that match the search term
    });

    setFilteredArticles(filtered);
  }, [articles, searchTerm, isActive]); 

  console.log(filteredArticles);

  return (
    <div className='scroll-smooth'>
      <div id="tags" className="flex w-full h-[200px] md:h-[60px] justify-center gap-5 py-4 flex-wrap max-w-[100vw] scroll-smooth">
        {tags.map((tag, index) => (
          <p
            key={index}
            onClick={() => {
              const newIsActive = [...isActive];
              newIsActive[index] = !newIsActive[index];
              setIsActive(newIsActive);
            }}
            className={`h-[48px] w-[140px] border-3 rounded-[40px] px-2 py-2 text-center font-bold ${
              isActive[index]
                ? 'bg-black border-black text-white hover:bg-gray-700 hover:border-gray-700'
                : 'border-blue-500 hover:bg-blue-500 hover:text-white'
            }`}>
            {tag}
          </p>
        ))}
      </div>

      <div id="articlegrid" className="w-[100vw] md:w-[98vw] grid gap-2 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 mt-5 px-3 py-3">
        <ArticleCard articles={filteredArticles} />
      </div>
    </div>
  );
}

Here, we have props from the parent component too, but we only need the articles fetched and the search term. We don't need to set the fetch term from this component.

To render the tags, I first created the array of tags and an array of boolean values to record the states of the tags (whether they're active or inactive).

const tags = ["Networking", "Cloud", "DevOps", "Web Dev", "Cybersecurity"];
const [isActive, setIsActive] = useState(tags.map(() => false));

Then, inside the return statement, I mapped through the tag array to render them one by one. The onClick event handler also works here to make sure that the isActive state for that particular tag is toggled when it is clicked.

So how does this work? It creates a new array called newIsActive that is a copy of the isActive array. It then gets the particular tag by index number and inverts it. Then it sets the isActive array to this new array.

{tags.map((tag, index) => (
          <p
            key={index}
            onClick={() => {
              const newIsActive = [...isActive];
              newIsActive[index] = !newIsActive[index];
              setIsActive(newIsActive);
            }} . . .

This is the code for the ArticleCard:

import React, { useState } from 'react';
import Image  from 'next/image';

export interface Article {
  id: number;
  title?: string;
  description?: string;
  publishedDate?: string;
  url: string;
  imgUrl?: string;
  siteName?: string;
  tags?: string[];
}

interface ArticleProps {
  articles: Article[];
}

const ArticleCard = ({ articles }: ArticleProps) => {

  return (
    <>
    {articles ?

      (articles.map((item, id) => (
        //anchor tag for the link
        <a key={id}  href={item.url} className='max-w-[350px] mx-auto mb-5'>
            <div className="sm:w-[350px] hover:brightness-70" data-title={item.title} data-description={item.description} data-published-date={item.publishedDate} data-tag="Networking" data-site-name={item.siteName}>
            <Image
              src={item.imgUrl || '/img-2.jpg'} 
              alt={item.title || 'Article Image'}
              width={350}
              height={400}
              className="object-cover rounded-[10px]"
            />
            <div className="flex h-[43px] text-[14px] text-gray-500 gap-2">
                <p id="Platform" className="py-2 h-[42px] md:text-sm mt-auto mb-auto">{item.siteName}</p>
                <div className="h-1 w-1 bg-black rounded-full mt-auto mb-auto bg-gray-500"></div>
                <p id="publishedDate" className="py-2 h-[42px] mt-auto mb-auto">{item.publishedDate}</p>
            </div>
            <h1 id="titleOfArticle" className="font-bold text-base md:text-3xl">{item.title}</h1>
            <br/>
            <p className='w-full md:w-[350px]'>{item.description}</p>
            </div>
        </a>
      )))
      :

      ( Array(6).fill(0).map((item, id) => (
        <div key={id} className="w-full md:w-[350px] h-[350px] bg-gray-500 mx-auto mb-5 hover:brightness-80 rounded-[10px] animate-pulse"></div>
      )))
    }
    </>
  );
};

export default ArticleCard;

Here, we defined and exported the Article interface so that we can create Article objects in the MainBody. Then, we created an interface to pass down the props of an array of Article objects.

Next, there's this part to ensure it renders something even if for some reason no Article object was passed:

{
    article?
    ( {/*If article exists, render this*/} )
    :
    ( {/*Else, render this */} )
}

Our fail-safe here is an empty array of six objects with the Tailwind animate-pulse:

 ( Array(6).fill(0).map((item, id) => (
        <div key={id} className="w-full md:w-[350px] h-[350px] bg-gray-500 mx-auto mb-5 hover:brightness-80 rounded-[10px] animate-pulse"></div>
      )))

I could have made this part much better, but I was feeling a little lazy. I also used the Image from Next, instead of the regular img. This requires that you edit the next.config.ts file. I had to go add all the paths that the images could possibly be loaded from:

Just like in the screenshot above, the syntax is:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
        {
            protocol:"https",
            hostname:"licdn.com",
            pathname:"/**"
        },
        {
            protocol:"",
            hostname:"",
            pathname:""
        }
        ],
    },
};
export default nextConfig;

It takes a remotePatterns array that consists of remote pattern objects, which have a protocol, hostname, and pathname property. Make sure the protocol and hostname properties are not empty like in the second object in the code sample above. That would cause errors. It’s either the objects are populated properly or they’re deleted.

The Footer looks like this:

export default function Footer() {

    return (
        <footer className="bg-gray-100 text-center py-4 mt-10">
            <div className="flex align-items-center justify-center text-sm text-blue-400 font-bold">
                <a href="/" className="hover:text-blue-600">Home</a>
                <p> &nbsp; &nbsp; | &nbsp; &nbsp; </p>
                <a href="/about" className="hover:text-blue-600">About</a>
            </div>
            <p className="text-sm text-gray-600">© {new Date().getFullYear()} Chidiadi Anyanwu. All rights reserved.</p>
            <p className="text-sm text-gray-600">Built with Next.js and Tailwind CSS</p>
        </footer>
    );

}

This new Date().getFullYear() helps me get the current year all the time.

5. Place the components properly

The nav bar and footer components are things that will not change no matter the page you visit. So they should be placed in a more permanent and untouched location. We can put both of them in the root layout.tsx file like this:

 <body className={`${geistSans.variable} ${geistMono.variable} antialiased scroll-smooth`}>
      <Navbar />
      {children}
      <Footer />
  </body>

{children} is where the contents from page.tsx will enter. So, we sandwiched all the other content in the Nav bar and footer. Apart from adding <link /> tags for fonts (because this is where the root HTML is), we really don't have business with this file again.

Now, in the same app/ folder where this layout file is, create the <HomeClient /> file. This is how it looks:

'use client';

import { useState } from 'react';
import Hero from '../components/hero';
import MainBody from '../components/mainbody';
import { Article } from '../components/ArticleCard';

interface Props {
  initialArticles: Article[];
}

export default function HomeClient({ initialArticles }: Props) {
  const [searchTerm, setSearchTerm] = useState<string>('');
  const [articles, setArticles] = useState<Article[]>(initialArticles);

  return (
    <div>
      <Hero searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
      <MainBody searchTerm={searchTerm} articles={articles} />
    </div>
  );
}

Then, put the HomeClient component inside the page.tsx file:

import { fetchArticles } from '../utils/fetchArticles';
import HomeClient from './HomeClient';

export const revalidate = 3600;

export default async function HomePage() {
  const articles = await fetchArticles(); 

  return <HomeClient initialArticles={articles} />;
}

The server is set to fetch the articles at build time, and fetch again (revalidate) every hour (3600s). So, it doesn't fetch the articles from the URLs upon user request of the page.

Initially, it worked by fetching any time the component was mounted, but I noticed that this caused the page to load very slowly. The articles didn't pop-up on time, because there's a lot of fetching to be done.

In that same app/ directory, create an about/ folder, and create the page.tsx for that route:

import Image from "next/image";
export default function About() {
    return (
        <>
            <div className="flex items-center justify-center">
                <div className="margin-auto w-[90vw] md:w-[60vw] lg:w-[50vw] h-[450px] hover:bg-gray-100 border-1 md:border-2 border-gray-200 shadow-sm flex flex-wrap  items-center justify-center gap-2 mt-10 mb-10 rounded-lg">
                    <Image
                        src="/MyPhotoChidiadi.jpg" 
                        alt="Avatar"
                        className="rounded-[50%] h-30 w-30"
                        width={120} 
                        height={120} 
                    />
                    <div className="w-[90%] mx-auto">
                        <h1 className="text-xl text-center my-1 font-bold">About Me</h1>
                        <p className="text-justify my-3">
                            My name is Chidiadi Anyanwu. I love breaking down complex concepts.
                            I write about Networking, Cloud, DevOps, and even sometimes web development. 
                            You can connect with me by following any of the links below.
                        </p>
                        <hr className="border-gray-300 my-3" />
                        <div className="flex gap-7 w-full my-3 justify-center"> 
                            <a href="https://github.com/chidiadi01">
                                <Image src='/github-icon.svg' alt="github logo" width={24} height={24} />
                            </a>
                            <a href="https://linkedin.com/in/chidiadi-anyanwu">
                                <Image src='linkedin-icon.svg' alt="linkedin logo" width={24} height={24}/>
                            </a>
                            <a href="https://x.com/chidiadi01">
                                <Image src='x-2.svg' alt="x logo" width={24} height={24}/> 
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

6. Create the utils folder and all the functions

The next step is to create all these files.

Under the same app/ directory, create the utils/ folder. app/utils/. Then start with the fetchArticles() function. The fetchArticles() function is what accesses the API route in the project to obtain the array of Article objects from an array of URLs. The fetchArticles() function returns an array of those objects which are then stored in the articles variable. It looks like this:

import { getPublishedDate } from './getPublishedDate';
import { getTitle } from './getTitle';
import { getImageURL } from './getImageURL';
import { getDescription } from './getDescription';
import { getPlatform } from './getPlatform';
import articleFile from '../app/articles.json';
import { Article } from '../components/ArticleCard';
import * as cheerio from 'cheerio';

export async function fetchArticles(): Promise<Article[]> {
  console.log('Fetching articles...');
  const results = await Promise.all(
    articleFile.articles.map(async (item) => {
      //Validate URL first
       if (!item.url || typeof item.url !== 'string' || item.url.trim() === '') {
        console.warn(`Invalid URL: ${item.url}`);
        return null; // Skip this item
      } 
      console.log('The URL: ' + item.url);
      let data;
      try {

        // Fetch metadata and HTML from the URL
        const response = await fetch(item.url, {
          headers: {
            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36',
            'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
            'Accept-Language': 'en-US,en;q=0.5',
            'Referer': 'https://www.google.com/', 
          },
        });

        console.log('Fetched: '+ item.url);

        if (!response.ok) {
          console.error(`HTTP error! Status: ${response.status} for URL: ${item.url}`);
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const html = await response.text();
        const $ = cheerio.load(html);
        const jsonScript = $('script[type="application/ld+json"]').html();

        console.log('Gotten HTML response');

        if (!jsonScript) {
          throw new Error('No JSON-LD script found on page');
        }

        const metadata = JSON.parse(jsonScript);
        console.log('Gotten metadata');


        // Combine metadata and HTML into a single object
        data = { metadata, html };
      } catch (error) {
        console.error(`Failed to fetch metadata for URL: ${item.url}`, error);
        return null;
        console.log('The default empty object has been returned here');
      }

      // Use the combined data (metadata and HTML) to construct the article object
      if(getTitle(data) && getDescription(data) &&
         getPublishedDate(data) && getImageURL(data) &&
         getPlatform(data) || (item.title && item.description &&
         item.image)) {
        return {
        ...item,
        id: item.id ?? 0,
        tags: item.tags ?? [],
        title: getTitle(data) || item.title || 'No title',
        description: item.description || getDescription(data) || 'No description',
        publishedDate: getPublishedDate(data) ?? 'No date',
        imgUrl: getImageURL(data) || item.image || '/img-2.jpg',
        siteName: getPlatform(data) || data.metadata?.publisher?.name || 'Unknown site',
        url: item.url || '',
      } as Article;
      console.log('Proper item returned');
      } else { return null; }
    })
  );

  // Filter out null values and sort the articles by published date in descending order
  const filteredResults = results.filter((article): article is Article => article !== null);
  const sortedResults = filteredResults.sort((a, b) => {
    const dateA = new Date(a.publishedDate || '').getTime();
    const dateB = new Date(b.publishedDate || '').getTime();
    return dateB - dateA;
  });
  console.log(sortedResults);
  return sortedResults;
}

It maps through the articles in the articleFile, which is the JSON file with an array of objects with article URLs. For each of them, it sends a request to the URL, and from the data gotten, returns an Article object. Then, the array of objects created, results, is first filtered to remove null objects, and sorted in descending order by their date properties. So, the latest article shows up first.

It’s then assigned in the HomeClient component:

 const articles = await fetchArticles();

In the fetchArticles() code above, you can see that some other functions were used to extract the properties from the URLs, and assign them. Also, during deployment, I found that Substack couldn’t be accessed by the server, so I’m going to add code to allow creation of Article objects from an RSS feed. That will be in the project repository.

Now, let's talk about the other functions.

The getTitle() function:

import * as cheerio from 'cheerio';

export function getTitle(data:any): string {
    if(!data) return 'Title Loading . . .';

    if (data?.html) {
        const $ = cheerio.load(data?.html);
        const ogTitle = $('meta[property="og:title"]').attr('content') || $('title').text();
        return ogTitle;
    }

        return 'The Title of The Article';
    }

This is a very simple function. It takes the data parameter, and if there's no data, it returns Title loading . . .. But if there is data, it checks to see if there's HTML in the data. If there is, it then uses cheerio to load the HTML text and extract the title from the Open Graph title metadata or from the <title> tag in the HTML header. Else, it returns The Title of the Article.

Here, we use jQuery-like syntax $ to select the HTML elements, like in $('title'). The data taken as a parameter is the response gotten from a HTTP request to the article's URL.

The getDescription() function:

import * as cheerio from 'cheerio';

export function getDescription(data: any): string {
  if (!data) return 'Description Loading . . .';

  if (data?.metadata || data?.html) {
    const $ = cheerio.load(data?.html || '');
    const description = data?.metadata?.description ?? $('meta[property="og:description"]').attr('content') ?? 'No description found';
    return description;
  }

  return 'No description found';
}

The getURL() function:

import * as cheerio from 'cheerio';

export function getURL(data: any): string{
    if(!data) return 'url';

    if(data?.metadata || data?.html){
        const $ = cheerio.load(data?.html);
        const url = data?.metadata.url || $('meta[property="og:url"]').attr('content');
        return url;
    }
    return 'url';
}

This function is not really used to get the URL of the article for use in the object. Rather, it is used to get the URL for another function, getPlatform(). It works the same way as the ones we discussed before.

The getPlatform() function:

import { getURL } from './getURL';

export function getPlatform(data: any): string {
    if (!data) return 'Platform1';

    const url = getURL(data);

    if (data?.html) {
      const regex = /^(?:https?:\/\/)?(?:www\.)?([^\/\n]+)\.(?:[a-zA-Z]{2,})/;
      const platform = url.match(regex);
      return platform?.[1].toUpperCase() || 'Platform2'; 
    }

    return 'Platform3';
  }

This function is meant to extract the name of the platform where the article is posted. I toyed with various ideas for how this should work. One of them was using the siteName property in the OG meta tags, but I realised from my inspection that not all platforms had it populated in a helpful way. So, the results gotten from that method would be too unpredictable.

So I decided to use regex (Regular Expressions) to extract the site name from the URL. As you can see from the code, I didn't achieve a perfect result, but it is usable.

First of all, it gets the URL of the article with the getURL() function. Then, it uses regex:

/^(?:https?:\/\/)?(?:www\.)?([^\/\n]+)\.(?:[a-zA-Z]{2,})/

Here, / and / at the beginning and end are to start and end the regex string. The caret ^ marks the beginning of a line.

Then, we have four groups ()()()(). The first one is a non-captured group (?: ). That means whatever text that matches that should be grouped together in a string, but should not be captured to be assigned to the variable. It captures any text with a 'http' in it, with or without the s s?, and with two slashes after. The forward slashes were escaped with backward slashes so they can be recognised as literal characters. Then, the whole group itself is made optional by adding the question mark after it (...)?. So, whether such a group is matched or not, the code works.

The second group is also a non-capturing group, also denoted by ?: being the first thing inside the bracket. This one matches any 'www.' in the string. It's also optional. A URL may not necessarily be written with it.

The third group is a capturing group as it doesn't have ?: inside the brackets. Rather, it has a character class in it []. But it's a negated class [^ ]. It makes sure that the class does not contain a newline character n (the newline character n is not a string of letter n – that's why it is escaped) or a forward slash /, because a URL is supposed to be one line, and not multiple lines. The + means one or more characters, ([^\/\n]+). Whatever is in this group will get captured in the variable.

Then, the next one matches a dot (it is escaped with a backslash \.). After that is the last group which is also non-capturing and matches any character which is alphanumeric, capital or small letter [a-zA-Z], that occurs more than two times {2, }.

So, if we have 'https://www.linkedin,com' we would have an array of captured groups ['https://www.linkedin.com','https://','www.','linkedin','com']. Group 1 = 'https://', group 2 = 'www.', group 3 ='linkedin', group 4 = 'com'. But since only group 3 is a captured group, others will be discarded, and we have an array with only two items, the full string, and the captured group: ['https://www.linkedin.com','linkedin'].

So, here, we return the second item in the array. The first item is always the full string we matched.

return platform?.[1].toUpperCase()

This doesn't account for sub domains, though. This is tricky because sometimes you want to use the name of the subdomain (as in my Substack), and sometimes you want to use the name of the domain. So, I left it like that.

The getImageURL() function:

import * as cheerio from 'cheerio';

export function getImageURL(data: any): string {
    if (!data) return '/img-2.jpg'; 

    if (data?.metadata || data?.html) {
        const $ = cheerio.load(data?.html);
        const ogImage = $('meta[property="og:image"]').attr('content') || data?.metadata.image;
        return ogImage || '/img-2.jpg'; 
    }

    return '/img-2.jpg'; 
}

This function works just like others, and obtains the cover image URL from either the Open Graph image meta tag $('meta[property="og:image"]').attr('content') or || the image property in the JSON-LD data data?.metadata.image.

The getPublishedDate() function:

import * as cheerio from 'cheerio';

export function getPublishedDate(data: any): string {

  if (!data) return 'Date';

  const publishedDate = data?.metadata?.datePublished;

  if (publishedDate) {
    const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
    return new Date(publishedDate).toLocaleDateString('en-US', options);
  }

  if (data?.html) {
    const $ = cheerio.load(data?.html);
    const ogPublishedTime = $('meta[property="article:published_time"]').attr('content') ||
                            $('meta[property="og:published_time"]').attr('content') || 
                            $('meta[name="pubdate"]').attr('content');

    if (ogPublishedTime) {
      const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
      return new Date(ogPublishedTime).toLocaleDateString('en-US', options);
    }
  }
  return 'Date';
}

This function is especially useful because of the need to convert the date from the ISO 8601 format (2025-04-07T10:47:19+00:00) to the more readable format I want (April 7, 2025). Here, I used the .toLocaleDateString() JavaScript function to make it work (see the (MDN).

7. Create your JSON file

Now, remember that we're building this to be able to pull URLs from a JSON file to put together and render the web page. That JSON file is the starting point of everything. I believe by now you're getting an error concerning that. So we need to create the JSON file.

In the app/ directory, create a new file and name it articles.json.

Then populate it like in this file below – an array of objects with id, URL, tags, and so on. Even though we are not trying to get the title, description, and everything from this file directly, I put in that feature. If you go back to our fetchArticles() function, you'll see that for most of the properties, whatever you write here will override what was gotten from the URLs.

It was partly a fail-safe because I thought that LinkedIn would block all requests, and as you can see from my blog already, some description tags were not well organized. So, we can replace them later with a cleaner description just by modifying this file.

{
    "articles": [
        {
            "id": 1,
            "url": "https://thenetworkbits.substack.com/p/an-overview-of-json",
            "tags": ["Web Dev", "DevOps", "Cloud"],
            "title": "",
            "description": "",
            "image": ""
        },
        {
            "id": 2,
            "url": "https://websecuritylab.org/how-safe-is-public-wi-fi-a-network-engineer-explains/",
            "tags": ["Networking", "Cybersecurity"],
            "title": "",
            "description": "",
            "image": ""
        },
        {
            "id": 3,
            "url": "https://www.freecodecamp.org/news/automate-cicd-with-github-actions-streamline-workflow/",
            "tags": ["DevOps"],
            "title": "",
            "description": "",
            "image": ""
        }
    ]
}

Here, we have an "articles" object with an array of objects, each of which have "id", "url", "tags", "title", "description", and "image" properties. You don't necessarily need the values of all of these except the ID and URL, but the keys have to be there to prevent errors.

8. Add the finishing touches

Now you can add your own favicon in the app directory. It could be a 24px by 24px file, or 48px by 48px file. It doesn't necessarily have to be in the app directory or be an icon file or be named 'favicon' – but I did it that way. You can just add this in the HTML header of your layout.tsx file which is your Next.js version of index.html. The favicon is the icon that shows on the tab in your browser when you open the page.

<link rel="icon" href="/favicon.ico" sizes="any" />

You can also read the Next.js documentations on that here: Metadata Files: favicon, icon, and apple-icon | Next.js. Then add your images to your public/ directory. Be sure to name them correctly, and reference them correctly.

Now, if your development server was down, spin it up again to see your end results!

npm run dev

Conclusion

If you've read this far, then you must be really interested in seeing the results of all this :) I already have that covered. Here's the blog. You can go through it and interact with it.

Also, this is the codebase. Feel free to fork it, clone it, and interact with it as well. If you enjoyed the article, please share it with others. You can also connect with me on LinkedIn or X. Thanks for reading.

As a developer, having a portfolio is important. It’s your personal space to showcase your skills, share projects, and impress potential employers. Whether you’re aiming to build an online presence, share your work with friends, or take your career to the next level, a portfolio is the perfect way to highlight what you can do.

In this article, I’ll guide you through building a simple portfolio website using just HTML and CSS. By the end, you’ll have a fully functional portfolio site ready to share with anyone.

What the Finished Portfolio Looks Like:

Before we get started, here’s a preview of what your portfolio will look like once we’re done:

If you’d prefer to skip ahead, you can get the full code on GitHub.

Here’s what we’ll cover:

• Project Overview and Setup

• How to Build the Header and Hero Section

• How to Build the About Section

• How to Build the Work Section

• How to Build the Contact Section and Footer

• Wrapping Up

Project Overview and Setup

Before we start coding, let’s take a look at the basic structure of the project. Here's how everything will be organized:

/assets
  - background_image.jpg
  - user.png
  - icon-github.svg
  - icon-twitter.svg
  - logo1.png
  - logo2.png
  - logo3.png
index.html
styles.css

This folder structure keeps things neat and organized. The /assets folder will hold all of your images and icons that will be used throughout the website, while the index.html file will contain the structure of your portfolio, and styles.css will control how everything looks.

Setting Up the HTML File

Let's start with the basic HTML structure. Open your index.html file and add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Spruce - Dev Portfolio</title>
  </head>
  <body>
    <!-- Content will go here -->
  </body>
</html>

Here’s a breakdown of what this code does:

1. DOCTYPE: This tells the browser that this is an HTML5 document.

2. meta charset: Defines the character encoding, which helps display text properly.

3. meta viewport: Ensures the website is responsive on different screen sizes.

4. link to styles.css: Links the styles.css file for styling your website.

5. title: This is the text that appears in the browser tab when you open the website.

Now that our HTML file is set up, we’ll move on to the CSS.

Setting Up the CSS File

Let’s now add some basic styling using a CSS reset. This helps eliminate browser inconsistencies by normalizing styles across different browsers.

Here’s the basic CSS reset you’ll need:

/**
 * CORE CONFIG
 * This powers everything from utility class generation to breakpoints
 * to enabling/disabling pre-built components/utilities.
 */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: sans-serif;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  letter-spacing: -0.01em;
}

/* All elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
}

:focus {
  outline: 2px dashed #00ff19;
  outline-offset: 0.25rem;
}

main:focus {
  outline: none;
}

This reset clears any default margins and paddings, ensuring that your layout remains consistent across browsers. You can find more info about what the code does in the comments.

Sizing and Spacing with Utopia

For spacing and typography, we’ll use a flexible system from Utopia, a tool designed to make responsive typography easier to implement. Here’s the CSS that will give us scalable, adjustable spacing and font sizes:

/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
}

/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);
}

These CSS variables give you flexible, responsive font sizes and spacing, based on the viewport size. For instance, --step-5 corresponds to the largest font size, which you will use for main headings (h1), and smaller sizes like --step-1 for text that's less prominent.

How Typography and Spacing Work Together

To apply these scalable values, we’ll use the following for headings:

h1,
.h1 {
  font-size: var(--step-5);
}

h2,
.h2 {
  font-size: var(--step-4);
}

h3,
.h3 {
  font-size: var(--step-3);
}

h4,
.h4 {
  font-size: var(--step-2);
}

h5,
.h5 {
  font-size: var(--step-1);
}

Here, the h1 will be the largest size (using --step-5), and h2 will be a little smaller (--step-4), continuing down to h5. These variables ensure the text adjusts to different screen sizes and maintains consistent visual hierarchy.

Defining Constants for Layouts and Spacing

We can also define some utility classes and wrappers for more consistent layouts across the website. Here's how we can define some constants for layout styling:

/* define some constants */
.flex {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
@media (max-width: 468px) {
  .flex {
    flex-wrap: wrap;
  }
}
.flex_center {
  justify-content: center;
}
.flex_around {
  justify-content: space-around;
}
.flex_between {
  justify-content: space-between;
}
@media (max-width: 468px) {
  .flex_around {
    justify-content: center;
  }
  .flex_between {
    justify-content: center;
  }
}
.text_center {
  text-align: center;
}
.text_right {
  text-align: right;
}

/* define spacing */
.padding-top-3xs {
  padding: var(--space-3xs);
}

These classes allow you to quickly apply flexible layouts and spacing throughout your design. The .flex class will apply Flexbox, while .flex_center centers the content. There are also responsive adjustments for smaller screens like wrapping flex items when necessary.

Creating the Wrappers

To help structure your layout neatly and consistently, we’ll use wrappers. Wrappers ensure that content is centered and doesn’t stretch too far on wide screens:

/* create the wrappers */
.wrapper {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}
.wrapper_inner {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

The .wrapper class ensures that the content doesn’t get too wide, while .wrapper_inner adds another layer of control for inner sections like a main content area or smaller containers.

How to Build the Header and Hero Section

Now that our project structure is ready, let’s get into building the first major sections: the Header and Hero. These sections are your site’s first impression, giving visitors a sense of who you are while offering easy navigation.

HTML for the Header and Hero

Here’s the HTML structure for both sections:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Spruce - Dev Portfolio</title>
  </head>
  <body>
    <header class="site_header">
      <div class="wrapper_inner">
        <nav class="site_header_nav">
          <ul role="list" class="flex flex_center">
            <li><a href="#0">HOME</a></li>
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#work">WORK</a></li>
            <li><a href="#contact">CONTACT</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main>
      <section id="hero">
        <div class="wrapper">
          <div class="wrapper_inner">
            <div class="text_center hero_content">
              <h1 class="h2">Spruce Emmanuel</h1>
              <p class="h5">WEB DEVELOPER && TECHNICAL WRITER</p>
            </div>
          </div>
          <ul role="list" class="flex flex_between hero_social">
            <address>Port Harcourt, Nigeria</address>
            <ul role="list" class="flex">
              <li>Find me online</li>
              <li>
                <a href="https://github.com/iamspruce" target="_blank">
                  <img src="/assets/icon-github.svg" alt="GitHub" width="24" height="24" />
                </a>
              </li>
              <li>
                <a href="https://x.com/sprucekhalifa" target="_blank">
                  <img src="/assets/icon-twitter.svg" alt="Twitter" width="24" height="24" />
                </a>
              </li>
            </ul>
          </ul>
        </div>
      </section>
    </main>
  </body>
</html>

Header breakdown:

• Navigation: The navbar lets users quickly jump to key sections like Home, About, Work, and Contact. It’s centered using the .flex and .flex_center classes, making it clean and accessible.

• Flex layout: Links are laid out horizontally using .flex for a smooth, modern look.

Hero breakdown:

• Hero content: This is where you introduce yourself. Your name and title are centered with padding to give it space and clarity.

• Hero social: Below your bio, we’ve added your location and social links. These are aligned with .flex to keep everything neat and easy to navigate.

CSS for Header and Hero

Here’s the CSS to style these sections:

Header styling:

/* Style the header */
.site_header {
  padding: var(--space-s) 0;
  background: linear-gradient(rgba(26, 26, 64, 0.9), rgba(26, 26, 64, 0.9));
}

.site_header_nav ul li a {
  text-decoration: none;
  color: #fff;
}

• .site_header: Adds padding and a dark gradient for a sleek background.

• .site_header_nav ul li a: Removes link underlines and makes the text white for a modern, bold look.

Hero styling:

/* Hero section styling */
.hero_content {
  padding: var(--space-3xl) 0;
}

.hero_content h1 {
  margin-bottom: var(--space-s);
}

.hero_social {
  padding-top: var(--space-3xl);
}

/* General styling for the hero section */
section {
  padding: var(--space-2xl) var(--space-l);
}

section#hero {
  background: linear-gradient(rgba(26, 26, 64, 0.9), rgba(26, 26, 64, 0.9)),
    url("/assets/background_image.jpg");
  padding-bottom: 4px;
  background-size: cover;
  background-position: top;
  background-attachment: scroll;
  color: #fafafa;
  --color-accent: #8a2be2;
}

• .hero_content: Adds padding to keep the content spacious.

• .hero_social: Makes room for the social media links to stand out.

• section#hero: Sets a stylish gradient background with an image, ensuring the hero section feels engaging and visually striking.

Here’s what it looks like at this point:

How to Build the About Section

The About Section lets you introduce yourself and share your professional journey, giving visitors a glimpse of who you are and what you do.

HTML for the About Section

Here’s the HTML structure for the About Section:

<section id="about">
  <div class="wrapper">
    <div class="text_center">
      <h2>
        I am a web developer and technical writer. I write articles on web development and programming.
      </h2>
    </div>
    <div class="wrapper_inner">
      <div class="about_content flex flex_around">
        <figure class="about_figure text_center">
          <img width="200px" height="200px" src="/assets/user.png" alt="Developer" class="about_img" />
          <figcaption class="about_caption">Spruce ❤️</figcaption>
        </figure>
        <p class="h5">
          Born in Nigeria, I've spent 4+ years building with and writing about JavaScript. I help companies market their products and services through technical writing.
        </p>
      </div>
    </div>
  </div>
</section>

Breakdown of the About section:

• Introduction: A short and clear statement about your role as a developer.

• About content: The profile image and bio are positioned side by side with a flex container for balance.

• Figure and image: The profile image is displayed within a <figure> tag, with a caption below it.

• Text: A brief bio explaining your background and expertise.

CSS for the About Section

Here’s the CSS styling for the About section:

About section styling:

/* About section */
.about_content {
  padding: var(--space-xl) 0;
  transform: skewX(-10deg);
}

@media (max-width: 468px) {
  .about_content {
    transform: skewX(0deg);
  }
}

.about_figure {
  padding: var(--space-xl) 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 2px solid #ccc;
  display: inline-block;
  padding: 5px;
}

.about_img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

.about_caption {
  padding: var(--space-3xs) 0;
}

section#about {
  background-color: #ffffff;
  color: #333;
  --color-accent: #ffd700;
}

Breakdown of the CSS:

• Skew effect: The .about_content class gives the section a dynamic look with a slight skew, which is removed on small screens.

• Figure styling: The profile image gets padding and a subtle box shadow to help it stand out.

• Image styling: The image fills the space proportionally, ensuring it doesn't distort.

• Caption styling: Padding around the caption provides better spacing.

About section preview:

This is what your About Section will look like after applying these styles:

How to Build the Work Section

The Work Section is where you can showcase the companies or projects you’ve worked with or contributed to. This section helps to demonstrate your experience and the impact you've made, while providing visitors with visual examples of your professional background.

HTML for the Work Section

Here’s the HTML structure for the Work Section:

<section id="work">
  <div class="wrapper_inner">
    <div class="text_center">
      <h4 class="h5">
        So far I've helped 20+ companies build their web presence and
        improve their technical documentation.
      </h4>
      <ul role="list" class="work_logos flex flex_center">
        <li>
          <img src="/assets/logo1.png" alt="Acme Corp" />
        </li>
        <li>
          <img src="/assets/logo2.png" alt="Acme Innovations" />
        </li>
        <li>
          <img
            src="/assets/logo1.png"
            alt="Acme Solutions"
            width="50"
            height="50"
          />
        </li>
        <li>
          <img src="/assets/logo3.png" alt="Acme Technologies" />
        </li>
        <li>
          <img src="/assets/logo1.png" alt="Acme Enterprises" />
        </li>
      </ul>
    </div>
  </div>
</section>

Breakdown of the Work section:

• Introduction: The <h4> element introduces the work experience with a statement highlighting how you've helped companies with their web presence and technical documentation.

• Logos: The logos of the companies you've worked with are placed inside an unordered list (<ul>). Each logo is wrapped in a list item (<li>) for better structure and layout.

• Flexbox layout: The logos are positioned in a flexible layout using the flex and flex_center classes. This ensures that the logos are evenly spaced and centered horizontally within the section.

CSS Styling for the Work Section

Now let’s add some style to the Work section to make it visually appealing and responsive.

Work section styling:

/* work section */
.work_logos {
  margin-top: var(--space-xl);
}

section#work {
  background-color: #87ceeb;
  color: #0c0c0c;
  --color-accent: #2e8b57;
}

How to Build the Contact Section and Footer

The Contact Section and Footer provide a space for visitors to reach out to you and a final touch for the webpage. It’s essential to have an easy-to-use form for inquiries, along with a footer that includes your copyright information.

HTML for the Contact Section and Footer

Here’s the HTML structure for the Contact Section and Footer:

<section id="contact">
  <div class="wrapper">
    <div class="text_left">
      <p>
        Want to work together? <br />
        I'd love to hear from you.
      </p>
    </div>

    <div class="wrapper_inner">
      <h5 class="h3">Contact Me</h5>
      <form action="" method="post" class="contact_form">
        <div class="flex">
          <div class="form_group">
            <label for="name">NAME</label>
            <input type="text" id="name" name="name" />
          </div>
          <div class="form_group">
            <label for="email">EMAIL</label>
            <input type="email" id="email" name="email" />
          </div>
        </div>
        <div class="form_group">
          <label for="message">Message</label>
          <textarea id="message" name="message"></textarea>
        </div>
        <button type="submit">SEND MESSAGE</button>
      </form>
    </div>
  </div>
</section>


<footer>
  <section id="footer">
    <div class="wrapper">
      <div class="text_right">
        <p>&copy; 2025 Spruce Emmanuel</p>
      </div>
    </div>
  </section>
</footer>

Breakdown of the HTML:

• Contact section: This section includes a welcoming text that invites users to reach out, followed by a contact form with fields for the user’s name, email, and a message.

• Footer: The footer includes copyright information, ensuring that visitors know who owns the content. It’s placed at the bottom of the page and gives a professional touch to the site.

CSS for the Contact Section and Footer

Now let's style the Contact Section and Footer to make them both user-friendly and visually appealing.

Contact section styling:

/* contact section */
.contact_form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form_group {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

textarea {
  resize: vertical;
  height: 150px;
}

button[type="submit"] {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #0056b3;
}

Footer section styling:

/* footer section */
section#footer {
  padding: var(--space-l) var(--space-l);
}

Wrapping Up

And there you have it! You've just built a simple portfolio website using only HTML and CSS. You've learned how to structure your project, apply a CSS reset, and create responsive typography and layout systems that scale beautifully across different screen sizes.

By following this guide, you now have a portfolio that you can be proud of and share with friends, family, or potential employers. The beauty of this project is that you can continue to expand and personalize it by adding new sections, showcasing more of your work, or experimenting with JavaScript to add interactive elements.

If you're interested in exploring more advanced features or learning how to host your portfolio online, check out my tutorial on How to Host Your Project on GitHub – Explained With Examples.

If you have any questions, feel free to find me on Twitter at @sprucekhalifa, and don’t forget to follow me for more tips and updates. Happy coding!

With just a few simple steps, you can create a personalized GitHub profile that showcases your skills, projects, and personality. Let's dive in.

Create A New Repository

Go to GitHub and click on the "New" button to create a new repository.

button to create new repository

Setup Your Repository

You should see a new page where you can create the new repo and it should look something like this:

new repository form page

Make sure the name of the repository is the same as your GitHub username, otherwise this won't work.

after filling the details

You can see that after entering your username, there's a new note showing right below the repository name field that says, "this will create a special repository that you can use to add a README.md to your GitHub profile. Make sure it’s public and initialize it with a README to get started."

The error for the repository name is showing because I already have my profile, you won't face this issue.

So, lets do this. First, keep the GitHub repository public and not private.

Then click on the add a README file checkbox so that after creating the repository, GitHub will automatically add a README file to that repository.

Next, click the "Create repository" button.

After successfully creating the repository, you should be redirected to the repository page, and you should see the README.md file.

repository page after successfully creating the repository

Add ReadMe Content

Now, click on the "Edit README" button that should be on the right side of the page

Paste the following text into your README.md file

# Hi, I'm <YOUR NAME>! 👋

I am a passionate M.Tech CS student at IIT Kharagpur, driven by a curiosity for technology and a love for writing. My journey involves delving into the world of computer science, exploring new ideas, and sharing my insights with the community.

![<username>'s Stats](https://github-readme-stats.vercel.app/api?username=<username>&theme=vue-dark&show_icons=true&hide_border=true&count_private=true)

## 🚀 About Me

- 🔭 I'm currently pursuing my Master's in Computer Science at IIT Kharagpur.
- 📝 I write in-depth, long-form articles on my website [theenthusiast.dev](https://theenthusiast.dev), accumulating over 20k views within just 2 months.
- 🌐 Proud member of the [Hackernoon Blogging Fellowship](https://hackernoon.com/), contributing to the tech community.
- ✍️ Content Writer at [freeCodeCamp](https://www.freecodecamp.org/), gearing up to share valuable insights with the global coding community.

## My Articles
- [JavaScript Engine and Runtime Explained](https://www.freecodecamp.org/news/javascript-engine-and-runtime-explained/)


## Tech Stack
[![My Skills](https://skillicons.dev/icons?i=js,html,css,wasm)](https://skillicons.dev)

## 🌱 Currently Exploring

- 🚀 Learning Full Stack Web Development
  - Exploring the ins and outs of React and Redux for dynamic front-end experiences.
  - Navigating through the world of React Router for seamless page transitions.
  - Styling with Tailwind CSS to create modern and responsive user interfaces.
  - Building server-side applications with Django, a powerful Python web framework.
  - Diving into PostgreSQL for efficient and scalable database management.

 ## 🏆 Achievements

- 🌟 Completed Hacktoberfest 2023 - Contributed to open source projects and celebrated the spirit of collaboration.


## 📬 Get in Touch

- Connect with me on [Twitter](https://twitter.com/introvertedbot)
- Read more of my articles on [theenthusiast.dev](https://theenthusiast.dev)

Thanks for stopping by! Let's connect and explore the fascinating world of technology together. 🚀



<!--

Here are some ideas to get you started:

- 🔭 I’m currently working on ...
- 🌱 I’m currently learning ...
- 👯 I’m looking to collaborate on ...
- 🤔 I’m looking for help with ...
- 💬 Ask me about ...
- 📫 How to reach me: ...
- 😄 Pronouns: ...
- ⚡ Fun fact: ...
-->

In the above content, there are three places where you need to add your username:

• The first one is in the first line: put your name instead of <YOUR NAME>
• In the second statement, there are two places where you should put your username instead of <username>
• In the tech stack section I have added very few tech stacks just for this tutorial but you can add even more by adding the names of the tech. Head over to their docs to learn more about adding other icons.

Also, modify all the other fields according to your needs, all the information is personal so you have to edit most of the information. I have given my information here, so that you'll just need to fill up your details and get an updated profile pretty fast.

Commit Changes

committing changes

That's it. Click on "Commit changes" and you should have a great looking GitHub profile page.

Head over to your Profile page by replacing your username in the following URL https://github.com/<username> and you should see your updated GitHub profile page.

My profile page looks like this:

Now your GitHub profile page is personalized and ready to impress!

Share your updated profile on Twitter or LinkedIn and tag me—I'd love to check them out.

If you have any feedback or questions, feel free DM me on twitter or LinkedIn

This article will show more advanced usage of the jQuery Terminal library. If you want something more basic, you can check this article: How to create interactive terminal like website with JavaScript that is written for more entry level programmers. You can also read it (or skim it) first before you begin reading this one.

Table of Contents

• What is the terminal and its history?

• What is jQuery Terminal?

• Base html file

• How to Initialize the Terminal

• Welcome message

• Line Gaps

• How to Add Colors to ASCII Art

  • Terminal Formatting

  • How to Use the Lolcat Library

  • Rainbow ASCII Art Greetings

  • How to Make the Greeting Text White

• How to Make Your First Command

• Default Commands

• How to Make Help Commands Executable

• Syntax Highlighting

• Tab Completion

• How to Add Shell Commands

• How to Improve Completion

• Typing Animation Command

• Credits Command

• Prefilled Commands

• Sharing Link to Terminal Session

• Working Terminal Portfolio Demo

• Adding Executables to Home Directory

• What Next?

• Share what you’ve created

What is the terminal and its history?

Terminals have a long history. It started as an upgrade from punch cards. Computers back in the day used teletypes, which was just a keyboard and a printer. You'd type on the keyboard, and the keystrokes would be sent to the computer (usually mainframe) and the output got printed on a printer.

Later on, the teletypes were replaced with terminals. A terminal was like the dump computer we see today. It was a CRT Monitor with a keyboard. So instead of getting the output on the printer, it would be displayed on the monitor.

Today we still use this type of interface (the Command Line) to talk with computers.

The command line is a terminal emulator and is a big part of Unix systems, like GNU/Linux or MacOS. On Windows, you have PowerShell or cmd.exe file that allows you to type commands and get responses in the form of text. You can also install GNU/Linux system on Windows in the form of WSL. CLI interfaces are used mostly by power users, developers, and system administrators.

If you're new to the command line, you can read this article: Command Line for Beginners – How to Use the Terminal Like a Pro [Full Handbook].

What is jQuery Terminal?

jQuery Terminal is a JavaScript library. It's a plugin for the jQuery library. jQuery Terminal is more like a framework that has jQuery as its dependency. We'll mostly use JavaScript and very little jQuery in this article.

Let's create our terminal-based portfolio using jQuery Terminal.

Base HTML file

The first thing you need to do is to include jQuery and jQuery Terminal library in your project.

This is a basic HTML file:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css"/>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script>
<script src="my-terminal.js"></script>
</body>
</html>

Then inside the my-terminal.js file, we will write our code in JavaScript.

How to Initialize the Terminal

To create a basic terminal, you need to put in this code:

const commands = {};

const term = $('body').terminal(commands);

The string 'body' indicates the CSS selector where terminal should be created. Here we use 'body' so the terminal will be the only thing on the page. But it doesn't have to be full screen. You can create a website where the terminal is only part of the page, like in a window that looks like part of the Operating System.

The first argument to the terminal method is called an interpreter. It's a way to add your commands. An object is the simplest way to create them. See creating the interpreter to learn more.

If the terminal font is too small, you can make it a little bit bigger with CSS custom properties (also known as CSS variables):

:root {
    --size: 1.2;
}

Welcome Message

The first thing we need to do is to get rid of the default greeting message and replace it with nice-looking custom ASCII Art. We will use the Filget library written in JavaScript to do this.

There are a few Figlet libraries on npm. We will use a package named figlet.

The first thing you should do is pick the right font. Go to figlet playground and write the text you want for your greeting. We will use "Terminal Portfolio" and click "Test All". It should display your text with all the fonts. Scroll through the list and pick the font you like.

I picked a font "slant" that looks like this:

You can copy this text and put into a string, but you will have issues like with the backslash that needs to be escaped using quote characters.

const greetings = `  ______                    _             __   ____             __  ____      ___     
 /_  __/__  _________ ___  (_)___  ____ _/ /  / __ \\____  _____/ /_/ __/___  / (_)___ 
  / / / _ \\/ ___/ __ \`__ \\/ / __ \\/ __ \`/ /  / /_/ / __ \\/ ___/ __/ /_/ __ \\/ / / __ \\
 / / /  __/ /  / / / / / / / / / / /_/ / /  / ____/ /_/ / /  / /_/ __/ /_/ / / / /_/ /
/_/  \\___/_/  /_/ /_/ /_/_/_/ /_/\\__,_/_/  /_/    \\____/_/   \\__/_/  \\____/_/_/\\____/`

const term = $('body').terminal(commands, {
    greetings
});

NOTE: The second argument to the jQuery Terminal is an object with options – we used a single option greetings.

This doesn't look good and it's hard to modify. Also, if you create the greeting by hardcoding a string, it may get distorted on smaller screens. That's why we will use the figlet library in JavaScript.

First, we need to include the figlet library in HTML:

<script src="https://cdn.jsdelivr.net/npm/figlet/lib/figlet.js"></script>

To initialize the library in JavaScript, we need to load the fonts:

const font = 'Slant';

figlet.defaults({ fontPath: 'https://unpkg.com/figlet/fonts/' });
figlet.preloadFonts([font], ready);

This code will load the 'Slant' font and call the function ready when the font is loaded.

So we need to write this function:

function ready() {

}

Now we can do two things, we can put the initialization of jQuery Terminal inside that function:

let term;

function ready() {
   term =  $('body').terminal(commands, {
      greetings
   });
}

With this, we can use the greeting option. But we can also use the echo method to render the greeting, and when initializing the terminal we will put null or false as a greetings to disable the default one:

const term = $('body').terminal(commands, {
    greetings: false
});

function ready() {
   term.echo(greetings);
}

This will work better because the library will initialize the terminal immediately and will not need to wait for loading the fonts.

Note that we still need to define the greetings using figlet. To do this we can write this function:

function render(text) {
    const cols = term.cols();
    return figlet.textSync(text, {
        font: font,
        width: cols,
        whitespaceBreak: true
    });
}

This function uses the figlet::textSync() method to return a string and use terminal::cols(), to get the number of characters per line. With this, we can make our text responsive.

This function can be used inside ready.

function ready() {
   term.echo(render('Terminal Portfolio'));
}

This will create a string and pass it to the echo method. But this will be the same as with:

term.echo(greeting);

And our hard-coded greetings. So if you resize the terminal, the greetings can still get distorted. To make the text responsive, you need to echo a function. This function will be called on each re-render of the terminal, which will happen when you resize the page.

We can use the arrow function for this:

function ready() {
   term.echo(() => render('Terminal Portfolio'));
}

If you want to add some text below the ASCII art, you can do this by concatenating the string after render:

function ready() {
   term.echo(() => {
     const ascii = render('Terminal Portfolio');
     return `${ascii}\nWelcome to my Terminal Portfolio\n`;
   });
}

NOTE: If you run this code, you will notice that there is an empty line after the ASCII art. This is because the figlet library adds some spaces after the text.

To get rid of this, you can use string::replace() with a regular expression that will remove all spaces and newlines from the end.

We can't use string::trim(), because we don't want to remove the leading lines:

function render(text) {
    const cols = term.cols();
    return trim(figlet.textSync(text, {
        font: font,
        width: cols,
        whitespaceBreak: true
    }));
}

function trim(str) {
    return str.replace(/[\n\s]+$/, '');
}

You can also pause the terminal when it loads the fonts:

const term = $('body').terminal(commands, {
    greetings: false
});

term.pause();

function ready() {
   term.echo(() => render('Terminal Portfolio')).resume();
}

You can can chain terminal methods, the same as with jQuery.

Line Gaps

If the font you pick creates gaps between the lines, like in this image with font ANSI Shadow:

You can remove the gaps by adding the ansi option set to true. The option was added specifically to fix an issue with displaying ANSI Art.

term.echo(() => render('Terminal Portfolio'), { ansi: true });

The above ASCII Art will look like this:

How to Add Colors to ASCII Art

You can spice up your ASCII Art by using a library called lolcat. lolcat is a Linux command that can style text in the terminal with rainbow colors. There is also a library called isomorphic-lolcat, that you can use in JavaScript to make your ASCII Art in rainbow colors.

Terminal Formatting

To use the lolcat library, you first need to know how to change the colors of the terminal.

You can do this using low-level formatting that looks like this:

[[b;red;]some text]

The whole text is wrapped in brackets and the formatting of the text is in additional brackets, where each argument is separated by a semicolon. To learn more about the syntax, you can read the Wiki Article: Formatting and Syntax Highlighting.

Here, we'll only use a basic change of color. Instead of red, you can use CSS color names, hex color, or rgb().

How to Use the Lolcat Library

To use the library, we first need to include it in HTML:

<script src="https://cdn.jsdelivr.net/npm/isomorphic-lolcat"></script>

To format the string with colors, we can use this function:

function rainbow(string) {
    return lolcat.rainbow(function(char, color) {
        char = $.terminal.escape_brackets(char);
        return `[[;${hex(color)};]${char}]`;
    }, string).join('\n');
}

function hex(color) {
    return '#' + [color.red, color.green, color.blue].map(n => {
        return n.toString(16).padStart(2, '0');
    }).join('');
}

The lolcat.rainbow will call a function in every character from the input string, and pass color as an object with RGB values and the character.

Rainbow ASCII Art Greetings

To use this code, you need to wrap the call to render with rainbow:

function ready() {
   term.echo(() => {
     const ascii = rainbow(render('Terminal Portfolio'));
     return `${ascii}\nWelcome to my Terminal Portfolio\n`;
   }).resume();
}

You can also use two calls to echo, since only the Figlet message needs to be executed inside the function:

function ready() {
   term.echo(() => rainbow(render('Terminal Portfolio')))
       .echo('Welcome to my Terminal Portfolio\n').resume();
}

You'll notice that when you resize the window, the rainbow changes randomly. This is the default behavior of lolcat. To change it, you need to set the random seed.

function rand(max) {
    return Math.floor(Math.random() * (max + 1));
}

function ready() {
   const seed = rand(256);
   term.echo(() => rainbow(render('Terminal Portfolio'), seed))
       .echo('Welcome to my Terminal Portfolio\n').resume();
}

function rainbow(string, seed) {
    return lolcat.rainbow(function(char, color) {
        char = $.terminal.escape_brackets(char);
        return `[[;${hex(color)};]${char}]`;
    }, string, seed).join('\n');
}

The rand function returns a pseudo-random number from 0 to max value. Here we created a random value from 0 to 256.

How to Make the Greeting Text White

As we showed previously, you can make the text white with terminal formatting. You can use:

• [[;white;]Welcome to my Terminal Portfolio]

• [[;#fff;]Welcome to my Terminal Portfolio]

• [[;rgb(255,255,255);]Welcome to my Terminal Portfolio]

Moreover, if you include additional file XML formatting, you can use XML-like syntax. That makes formatting much easier.

<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/xml_formatting.js"></script>

After including the above file in HTML, you can use CSS named colors as XML tags:

<white>Welcome to my Terminal Portfolio</white>

The XML formatting supports more tags like links and images. See Extension XML Formatter for more info.

NOTE: XML formatter is a function added to $.terminal.defaults.formatters, which transforms the input XML-like text into terminal formatting. You can add the same to your own formatters.

How to Make Your First Command

After the greeting, we can write our first command. It will be helpful and will work with any commands we add later.

const commanns = {
    help() {

    }
};

This will be our help command where we'll add a list of commands available to our terminal portfolio. We will use Intl.ListFormat, which creates a list of elements with and before the last element.

const formatter = new Intl.ListFormat('en', {
  style: 'long',
  type: 'conjunction',
});

To create a list, we need to use formatter.format() and pass an array of commands. To get that array we can use Object.keys():

const commands = {
    help() {
        term.echo(`List of available commands: ${help}`);
    }
};

const command_list = Object.keys(commands);
const help = formatter.format(command_list);

When you type help you should see:

List of available commands: help

You also need to add the echo command:

const commands = {
    help() {
        term.echo(`List of available commands: ${help}`);
    },
    echo(...args) {
        term.echo(args.join(' '));
    }
};

Now the help command works:

List of available commands: help and echo

But if you try to execute 'echo hello' you will get an error:

[Arity] Wrong number of arguments. The function 'echo' expects 0 got 1!

By default, jQuery Terminal checks the number of arguments and the number of parameters the function accepts. The problem is that the rest operator makes all arguments optional and the length function property is 0. To fix the issue we need to disable the Arity check with an option:

const term = $('body').terminal(commands, {
    greetings: false,
    checkArity: false
});

Now the echo commands should work.

Default Commands

By default, the jQuery Terminal has two default commands:

• clear: this command clears everything on the terminal.

• exit: this command exits from nested interpreters.

You can disable them by passing the name to the option and setting it to false. Since we won't use nested interpreters, we can disable exit:

const term = $('body').terminal(commands, {
    greetings: false,
    checkArity: false,
    exit: false
});

But clear can be useful. So we can add it to the list of commands:

const command_list = ['clear'].concat(Object.keys(commands));

How to Make Help Commands Executable

We can make the UX better to allow clicking on the command and execute it just like when the user types it.

We will need a few things to do this. First, we need to add formatting to each command and add an HTML class attribute. We can also make the command white so it's more visible.

const command_list = Object.keys(commands);
const formatted_list = command_list.map(cmd => {
    return `<white class="command">${cmd}</white>`;
});
const help = formatter.format(formatted_list);

Next is to add affordance. To indicate that the user can click the command, we need to change the cursor in CSS:

.command {
    cursor: pointer;
}

The last step is to execute the command when the user clicks the command. We need to add an event handler with jQuery (jQuery Terminal dependency) or we can use the native browser addEventListener. Here we use jQuery:

term.on('click', '.command', function() {
   const command = $(this).text();
   term.exec(command);
});

terminal::exec() is a way to execute a command programmatically, just like user would type it and press enter.

You can test it by typing help and clicking help again.

Clicking echo will print an empty line. We can fix it by checking if the array of arguments is not empty, before executing terminal::echo():

const commands = {
    echo(...args) {
        if (args.length > 0) {
            term.echo(args.join(' '));
        }
    }
};

Now clicking on echo will only show the executed command.

NOTE: If for any reason you don't want to show the prompt and the command that has been executed, you can silence the exec by passing true as the second argument.

term.exec('help', true);

Syntax Highlighting

As we discussed earlier, we can use custom syntax highlighting of our shell by pushing a function into $.terminal.defaults.formatters.We can also use the $.terminal.new_formatter helper function.

Let's make our commands white as we type them. The formatter can be an array (of regex and replacement), or a function. We have a fixed number of commands and we only want to make those that are on the list white. We can do this by adding a regular expression:

const any_command_re = new RegExp(`^\s*(${command_list.join('|')})`);

This regular expression will check if, at the beginning of the string, there is an optional whitespace and one of the commands. Right now the regex will look like this: /^\s*(help|echo)/. This is how to create new formatter:

$.terminal.new_formatter([any_command_re, '<white>$1</white>']);

If you would like to make command arguments in different colors, you'll need a function, where you will use String::replace().

const re = new RegExp(`^\s*(${command_list.join('|')}) (.*)`);

$.terminal.new_formatter(function(string) {
    return string.replace(re, function(_, command, args) {
        return `<white>${command}</white> <aqua>${args}</aqua>`;
    });
});

This is just an example of using String::replace. If you have just one replacement, you can use an array. This will be the same:

const re = new RegExp(`^\s*(${command_list.join('|')})(\s?.*)`);

$.terminal.new_formatter([re, function(_, command, args) {
    return `<white>${command}</white><aqua>${args}</aqua>`;
}]);

NOTE: If you add the class <white class="command"> to the formatter, you will be able to click on the typed command to execute it again.

Tab Completion

Another feature we can add is to complete the command when you press the tab key. This is super easy – we only need to add the completion option set to true:

const term = $('body').terminal(commands, {
    greetings: false,
    checkArity: false,
    exit: false,
    completion: true
});

Now when you type h and press tab, it will complete the command help for you.

How to Add Shell Commands

Now we can add the most important commands that allow us to navigate through the portfolio. We will implement directories as the main entry point so the user will need to type the ls command to see a list of things, cd into that directory, and ls again to see the contents.

const directories = {
    education: [
        '',
        '<white>education</white>',

        '* <a href="https://en.wikipedia.org/wiki/Kielce_University_of_Technology">Kielce University of Technology</a> <yellow>"Computer Science"</yellow> 2002-2007 / 2011-2014',
        '* <a href="https://pl.wikipedia.org/wiki/Szko%C5%82a_policealna">Post-secondary</a> Electronic School <yellow>"Computer Systems"</yellow> 2000-2002',
        '* Electronic <a href="https://en.wikipedia.org/wiki/Technikum_(Polish_education)">Technikum</a> with major <yellow>"RTV"</yellow> 1995-2000',
        ''
    ],
    projects: [
        '',
        '<white>Open Source projects</white>',
        [
            ['jQuery Terminal',
             'https://terminal.jcubic.pl',
             'library that adds terminal interface to websites'
            ],
            ['LIPS Scheme',
             'https://lips.js.org',
             'Scheme implementation in JavaScript'
            ],
            ['Sysend.js',
             'https://jcu.bi/sysend',
             'Communication between open tabs'
            ],
            ['Wayne',
             'https://jcu.bi/wayne',
             'Pure in browser HTTP requests'
            ],
        ].map(([name, url, description = '']) => {
            return `* <a href="${url}">${name}</a> &mdash; <white>${description}</white>`;
        }),
        ''
    ].flat(),
    skills: [
        '',
        '<white>languages</white>',

        [
            'JavaScript',
            'TypeScript',
            'Python',
            'SQL',
            'PHP',
            'Bash'
        ].map(lang => `* <yellow>${lang}</yellow>`),
        '',
        '<white>libraries</white>',
        [
            'React.js',
            'Redux',
            'Jest',
        ].map(lib => `* <green>${lib}</green>`),
        '',
        '<white>tools</white>',
        [
            'Docker',
            'git',
            'GNU/Linux'
        ].map(lib => `* <blue>${lib}</blue>`),
        ''
    ].flat()
};

This is our basic structure. You can edit it and add your own information. First, we will add a cd command that changes the directory.

const root = '~';
let cwd = root;

const commands = {
    cd(dir = null) {
        if (dir === null || (dir === '..' && cwd !== root)) {
            cwd = root;
        } else if (dir.startsWith('~/') && dirs.includes(dir.substring(2))) {
            cwd = dir;
        } else if (dir.startsWith('../') && cwd !== root &&
                   dirs.includes(dir.substring(3))) {
            cwd = root + '/' + dir.substring(3);
        } else if (dirs.includes(dir)) {
            cwd = root + '/' + dir;
        } else {
            this.error('Wrong directory');
        }
    }
};

This will handle all the cases of changing the directory. Next is to add a prompt.

To see what directory we are in, we need to add a custom prompt. We can create a function as a prompt option:

const user = 'guest';
const server = 'freecodecamp.org';

function prompt() {
    return `<green>${user}@${server}</green>:<blue>${cwd}</blue>$ `;
}

And use it as an option:

const term = $('body').terminal(commands, {
    greetings: false,
    checkArity: false,
    completion: true,
    exit: false,
    prompt
});

The green color don't look very good, so we can use a color from Ubuntu to make the terminal look more real. We can overwrite the default XML color tags like this:

$.terminal.xml_formatter.tags.green = () => {
    return `[[;#44D544;]`;
};

Next is the ls command.

function print_home() {
     term.echo(dirs.map(dir => {
         return `<blue class="directory">${dir}</blue>`;
     }).join('\n'));
}

const commands = {
    ls(dir = null) {
        if (dir) {
            if (dir.match(/^~\/?$/)) {
                // ls ~ or ls ~/
                print_home();
            } else if (dir.startsWith('~/')) {
                const path = dir.substring(2);
                const dirs = path.split('/');
                if (dirs.length > 1) {
                    this.error('Invalid directory');
                } else {
                    const dir = dirs[0];
                    this.echo(directories[dir].join('\n'));
                }
            } else if (cwd === root) {
                if (dir in directories) {
                    this.echo(directories[dir].join('\n'));
                } else {
                    this.error('Invalid directory');
                }
            } else if (dir === '..') {
                print_home();
            } else {
                this.error('Invalid directory');
            }
        } else if (cwd === root) {
            print_home();
        } else {
            const dir = cwd.substring(2);
            this.echo(directories[dir].join('\n'));
        }
    }
};

Similar to the green we had before, the blue color is not that great. So we can use the color from Ubuntu again. To do this, we need to use the same custom XML tags for the color blue:

$.terminal.xml_formatter.tags.blue = (attrs) => {
    return `[[;#55F;;${attrs.class}]`;
};

We added the HTML class for a reason. Let's change directory when the user clicks the directory. Just like we did with commands, we can invoke the cd command the same way as as a user would type it.

term.on('click', '.directory', function() {
    const dir = $(this).text();
    term.exec(`cd ~/${dir}`);
});

NOTE: if you have long command and want to get the text for that command, it's better to use: $(this).data('text'). When the single formatting is wrapped (when text is longer than the width of the terminal) the .text() will no longer have full text, but the full text is always in the data-text HTML attribute.

We also need to update our CSS to change the cursor:

.command, .directory {
    cursor: pointer;
}

How to Improve Completion

Our completion is not perfect as it only completes the commands. If you'd like to have completion that also handles directories, you need to use a function:

const term = $('body').terminal(commands, {
    greetings: false,
    checkArity: false,
    completion(string) {
        // in every function we can use `this` to reference term object
        const cmd = this.get_command();
        // we process the command to extract the command name
        // and the rest of the command (the arguments as one string)
        const { name, rest } = $.terminal.parse_command(cmd);
        if (['cd', 'ls'].includes(name)) {
            if (rest.startsWith('~/')) {
                return dirs.map(dir => `~/${dir}`);
            }
            if (rest.startsWith('../') && cwd != root) {
                return dirs.map(dir => `../${dir}`);
            }
            if (cwd === root) {
                return dirs;
            }
        }
        return Object.keys(commands);
    },
    prompt
});

NOTE: The string argument was left as documentation. It can be used if you only want to complete a single word.

Typing Animation Command

Another command that we will add is an animated joke. We will print random jokes using an API that looks like the user typing.

We will use the Joke API for this purpose.

The API returns JSON with two types of responses: twopart and a single. This is the code that prints the text on the terminal:

// we use programming jokes so it fit better
// developer portfolio
const url = 'https://v2.jokeapi.dev/joke/Programming';
const commands = {
    async joke() {
        const res = await fetch(url);
        const data = await res.json();
        if (data.type == 'twopart') {
            // as said before in every function, passed directly
            // to the terminal, you can use `this` object
            // to reference terminal instance
            this.echo(`Q: ${data.setup}`);
            this.echo(`A: ${data.delivery}`);
        } else if (data.type === 'single') {
            this.echo(data.joke);
        }
    },
}

To add typing animation, you need to add an option to the echo method:

this.echo(data.joke, { delay: 50, typing: true });

There is one caveat: if you have a sequence of typing animations, you need to await for the previous one to finish (the echo will return a promise when animating). When creating such animation you can wrap your code with animation method:

// we use programming jokes so it fits better
// developer portfolio
const url = 'https://v2.jokeapi.dev/joke/Programming';
const commands = {
    async joke() {
        const res = await fetch(url);
        const data = await res.json();
        if (data.type == 'twopart') {
            // this method allow to create sequence of animations
            this.animation(async () => {
                // as said before in every function, passed 
                // directly to terminal, you can use `this` object
                // to reference terminal instance
                // and since we use arrow function we reference
                // this from joke function/command
                await this.echo(`Q: ${data.setup}`, {
                    delay: 50,
                    typing: true
                });
                await this.echo(`A: ${data.delivery}`, {
                    delay: 50,
                    typing: true
                });
            });
        } else if (data.type === 'single') {
            this.echo(data.joke, {
                delay: 50,
                typing: true
            });
        }
    }
};

You can read more about typing animation in this article: Typing Animation.

Credits Command

The last command we will add is a credits command where we will list the JavaScript libraries we used:

const commands = {
    credits() {
        return [
            '',
            '<white>Used libraries:</white>',
            '* <a href="https://terminal.jcubic.pl">jQuery Terminal</a>',
            '* <a href="https://github.com/patorjk/figlet.js/">Figlet.js</a>',
            '* <a href="https://github.com/jcubic/isomorphic-lolcat">Isomorphic Lolcat</a>',
            '* <a href="https://jokeapi.dev/">Joke API</a>',
            ''
        ].join('\n');
    }
};

This is an example of another way to print something on the terminal – if you return something from a function it will be printed. You can also return a Promise, so you can send an AJAX request to the server and print the results.

Prefilled Commands

You can make it easier for users to know what to do with the terminal, especially if they are not that familiar with Unix. You can do this by executing example commands:

term.exec(command)

You can also use animation with exec:

term.exec(command, { typing: true, delay: 50 });

Sharing Link to Terminal Session

Another cool thing that I will show you is recording commands in the URL. You can create whole terminal session and save it in a URL hash. To start recoding a session you need to execute the following:

term.history_state(true);

When you execute the command echo x, it should create a URL hash that looks like this: #[[0,1,"echo%20x"]].

To stop recording, you can use:

term.history_state(false);

You can write this into a command record start | stop, so it will be easier to record sessions.

The last thing to do to restore the session is to use the option execHash: true.

const term = $('body').terminal(commands, {
    /* rest of the options */
    execHash: true
});

When you do this and refresh the page, while having the URL hash with the session, it should replay the session and you should see same output as you did when you recorded it.

If you want the exec to be animated you can use this option:

const term = $('body').terminal(commands, {
    /* rest of the options */
    execHash: true,
    execAnimation: true
});

To share the link, it’s better to use a URL shortener like TinyURL. Make sure you test the shortened URL to see if it works.

How to Add Executables to the Home Directory

Another thing you can do to improve the portfolio is to help your visitor learn what commands they can use, by introducing executable when running ls. They will look like binaries on the Linux system.

// not every command needs to be binary
// we picked those three that works more like real programs
const files = [
    'joke',
    'credits',
    'record'
];

function print_home() {
     term.echo(dirs.map(dir => {
         return `<blue class="directory">${dir}</blue>`;
     }).join('\n'));
     term.echo(files.map(file => {
         return `<green class="command">${file}</green>`;
     }).join('\n'));
}

With this, you will be able to click the command and execute it. So your visitors will know that they can run joke command without the need to type help command. For this to work, we need one last change, adding class to the green XML tag:

$.terminal.xml_formatter.tags.green = (attrs) => {
    return `[[;#44D544;;${attrs.class}]`;
};

Working Terminal Portfolio Demo

Here is a fully working Demo of our Interactive Terminal Portfolio Website.

What Next?

You can add a lot of commands to this portfolio. The only limitation is your imagination.

You can check these examples for inspiration:

• CodePen Collection with jQuery Terminal Demos.

• Retro (Vintage) Terminal CodePen Demo.

• jQuery Terminal Examples Page.

• Terminal 404 Error Page.

• Fake GNU/Linux Terminal.

If you have an idea that is not listed here, you can ask on StackOverflow with jquery-terminal tag. If you have something more time consuming, you can also ask for paid support.

Share what you’ve created

If you create a cool terminal portfolio, you can share it and tag me on Twitter. I would love to take a look. Especially if you create something more than what’s included in the tutorial. You can also share on a terminal chat on my website (it’s a similar terminal portfolio, but with chat).

Imagine a space that not only highlights your finest achievements but also attracts potential clients and makes a memorable impact on every visitor.

This guide will help you navigate creating an outstanding personal portfolio. We'll dissect the process from choosing an eye-catching layout to crafting content that tells your story. It'll all be aimed at building a page that resonates with who you are and the value you bring.

But the journey doesn't end here. Diving deeper, you'll learn more strategies and insights to help you elevate your portfolio beyond the ordinary. Are you ready? Let's step into the realm of crafting a portfolio that's not just seen but remembered.

Table Of Contents

1. The Importance of a Personal Portfolio Website
2. How to Choose the Right Domain Name
3. How to Design Your Portfolio Site
4. How to Pick the Right Tools
5. How to Showcase Your Best Work
6. How to Craft Your Brand Story and Unique Voice
7. How to Add Additional Content
8. Essential Pages for Your Portfolio
9. How to Organize the Home Page
10. How to Keep Your Portfolio Fresh
11. Conclusion

Short Summary

1. Building a great personal portfolio page is crucial for showcasing your skills and personality in the digital realm.
2. This step-by-step guide will help you overcome common challenges like starting, structuring, and designing your portfolio effectively.
3. Learn how to choose the right domain, design your site, showcase your best work, and craft a unique voice to make a lasting impression.
4. Discover the essential elements, additional content options, social media strategies, and SEO techniques to maximize your portfolio's impact.

Why is a Personal Portfolio Website Important?

Your portfolio, much like a shop's facade or what you wear, communicates your personal style and standards, offering a reflection of your professional identity.

The structure of your website, the projects you spotlight, and the narrative you weave about your journey play a pivotal role in this representation.

While some have navigated their way to impressive careers without a digital footprint, these days it's become more and more important to have a solid personal portfolio. This is particularly true for tech professionals—ranging from software engineers to data scientists and AI experts.

This digital domain gives you a place to show what sets you apart, embodying the core of your unique value proposition. Without this platform, you leave your professional narrative to chance, permitting others to assemble a fragmented view of your persona.

Not having an online personal portfolio could well dictate whether you secure your dream position and successfully establish a strong personal brand, versus fading into the background. In the digital-first era we navigate, a personal portfolio transcends mere benefit—it emerges as an essential instrument for personal branding.

How a Personal Portfolio Helps You

For engineers seeking to carve out a distinctive identity in the tech landscape, the quest to showcase what makes you unique is paramount. While GitHub serves as a testament to your technical abilities, it often speaks a language too specialized for a broader audience.

Similarly, YouTube offers a platform for personality-driven exposure, but the prospect of speaking to a camera for hours may not align with your preferred mode of expression. Herein lies the unparalleled value of a personal portfolio page: it stands as one of the most effective mediums to represent yourself.

When you're creating your personal portfolio, it's crucial to demonstrate your expertise and establish your credibility. This demands clear and concise communication, directly engaging potential clients or employers, showcasing your skills, and fostering an online presence.

These are not mere suggestions but critical measures for contemporary professionals. By crafting a portfolio that not only displays your work but propels your career forward, you assert a distinctive presence in the competitive realm of technology, ensuring your unique contributions are both seen and valued.

How to Choose the Right Domain Name

When setting up your personal portfolio website, selecting the perfect domain name is a crucial decision that can impact your online presence significantly.

Your domain name is essentially your online identity, so it's important to choose wisely to make a lasting impression on your visitors and potential clients.

Choosing my domain name - vaheaslanyan.com

For my personal portfolio page, I like to keep it simple: firstname+lastname.com or just firstname.com. So for me it is: vaheaslanyan.com. (My firstname + lastname.com)

Other examples are

1. JohnDoe.com: This is the most direct approach, using both your first and last name. It's professional and clear for anyone looking for your work.
2. AlexJohnson.dev: For those in the tech industry, using a domain extension like .dev can highlight your area of expertise.
3. MichaelRoberts.design: Similar to the .dev extension, using .design can be a great choice for professionals in fields like graphic design, UX/UI, or related areas.
4. Elena.co: If your first name is unique enough, or if you prefer a shorter URL, you might use just your first name with a less common extension like .co.
5. MaxCreates.com: If "Max" is your nickname and you're in a creative industry, this domain clearly indicates what you do and who you are.

My name coming up in Google search results

Importance of a Domain Name

Your domain name is the first thing users see when they land on your website, so it should be memorable, easy to spell, and reflect your brand identity.

Here's why it's critical:

• It Reflects Your Brand: A well-chosen domain name can effectively convey your unique voice and what you have to offer. If it is your project portfolio website, then something that reflects your name or nickname is a great way to accomplish this.
• It Improves Search Engine Ranking: Having relevant keywords in your domain name can positively impact your website's SEO.
• It Attracts Potential Clients: A professional and catchy domain name can pique the interest of potential clients and make your website stand out.

Tips for Choosing the Perfect Domain Name

• Keep It Simple: Opt for a domain name that is easy to remember and type.
• Include Keywords: If possible, incorporate relevant keywords related to your industry or profession.
• Consider Your Niche: Ensure your domain name aligns with the type of work showcased on your portfolio.
• Avoid Numbers and Hyphens: Numbers and hyphens can be confusing and are often forgotten when typing a domain name.
• Check Availability: Verify that the domain name you want is not already taken and is available for purchase. You can use namecheap.com, godaddy.com and many other online hosting websites.

How to Design Your Portfolio Site

When selecting a design for your portfolio website, it’s important that the theme reflects your professional brand. For example, lawyers typically want a theme that suggests reliability and authority, while educators might choose a Learning Management System (LMS) to share courses.

To find the right design, websites like Envato, ThemeForest, and Figma templates are useful. It's helpful to plan what you want on each page before deciding on a design.

Here's how to approach this process:

Understand Your Brand: First, define what your brand represents and the impression you want to make. Whether your style is modern and sleek or more traditional and professional, your website's design should align with this.

My personal portfolio homepage

Research Design Options: Explore various design templates on platforms like Envato, ThemeForest, and Figma. These resources offer a wide array of designs suited to different professions, aiding in finding one that matches your vision.

Different site design options

Functionality and Features Needs: Consider the features essential for showcasing your work effectively. For a digital artist, high-resolution galleries might be key, while a developer might need support for embedding code snippets.

Press releases on my site

Sketch Your Layouts: Draft a basic layout for each page of your website before committing to a design. This helps visualize how the design will accommodate your content.

Example wireframes for creating a personal portfolio

Prioritize Simplicity and User Experience: A design that's easy to navigate and not overly complicated will keep the focus on your portfolio and provide a better experience for your visitors.

An example of a simple website design

Ensure Compatibility and Responsiveness: The design should look good and function well across all devices and browsers. Responsiveness ensures your website adapts to any screen size.

An example of a responsive site that looks good on both desktop and mobile

Customization Flexibility: Look for a design that offers customization. Being able to adjust elements like colors, fonts, and layout means you can tailor the design to fit your brand perfectly.

An example of a flexible design

Test and Gather Feedback: If possible, test the design with some of your content and ask for feedback from colleagues or mentors. Their insights can help you gauge the design's effectiveness in presenting your work.

By carefully choosing a design that represents your professional brand, you create a strong foundation for a portfolio website that effectively showcases your skills and communicates your unique value to visitors.

How to Pick the Right Tools

Choosing the right tools to build your portfolio involves understanding your needs, evaluating available options, and selecting solutions that align with your skills and goals.

This chapter guides you through this process, from deciding between coding your own site vs using a no-code platform to selecting the perfect hosting provider.

Understand Your Needs

First, it's important to identify your field: are you in the tech industry, or are you in some other line of work?

Your field of work significantly influences your choice of portfolio tools. Tech professionals might lean towards custom-coded sites to showcase their coding prowess, while those in non-tech fields may prefer no-code builders for their convenience and ease of use.

Next, you'll want to evaluate your skills to decide how to actually create the site. Do you want to code your own portfolio, or choose a no-code solution?

Assess your skills honestly. If you're comfortable with coding, a custom-built site might be the best way to showcase your technical abilities. For those without coding skills or a desire to learn, no-code platforms offer a practical and efficient alternative.

Then you'll want to set your website goals and objectives. Define what you want your portfolio to achieve. Are you looking to attract freelance clients, land a full-time job, or simply showcase your work? Your goals can influence the choice of platform, design, and content of your portfolio.

Options for Tech Professionals

Coding your own portfolio from scratch offers complete control over design and functionality, allowing you to create a unique and personalized online presence. It also showcases what you can do with code.

Benefits of Custom Coding

• Customization: Tailor every aspect of your site to fit your personal brand.
• Skill Demonstration: Showcase your coding ability to potential employers or clients.

Recommended Technologies and Frameworks

• HTML, CSS, and JavaScript Basics: The foundation of web development, essential for any custom-built portfolio.
• Advanced Frameworks: Utilize React, Angular, or Vue to create dynamic and responsive sites.

Hosting Solutions for Coders

• GitHub Pages: A free option for hosting simple, static sites.
• Netlify and Vercel: Provide more flexibility and support for dynamic sites built with advanced frameworks.

No-Code Solutions for Non-Tech Professionals

No-code platforms have democratized web design, enabling anyone to create beautiful, functional websites without writing a single line of code.

Comparing Popular No-Code Platforms

• WordPress: Versatile and widely used, with extensive themes and plugins.
• Webflow: Offers unparalleled customization and flexibility without requiring coding knowledge.
• Squarespace: Known for its ease of use and stunning, design-forward templates.

How to Choose the Right Hosting Option

Your hosting provider impacts your site's loading speed, uptime, and overall user experience, making it a crucial factor in your portfolio's success.

Some Common Hosting Providers

• Namecheap: Offers affordable, reliable hosting with excellent customer support.
• Alternative Options: Explore other reputable providers like Bluehost and SiteGround based on your specific needs.

Choosing the right tools for your personal portfolio requires a thoughtful evaluation of your needs, skills, and goals. Whether through custom coding or no-code platforms, the perfect portfolio is within reach.

By carefully selecting the right tools and platforms, you can create a portfolio that not only showcases your work but also helps you achieve your career aspirations.

How to Showcase Your Best Work

When setting up your portfolio page, it's essential to showcase projects that reflect your current focus in software engineering, data science, AI, or whatever area of tech you call home.

Select projects that are recent and demonstrate your skills and interests in these areas, ensuring your portfolio aligns with the professional direction you're aiming for.

Categorize Your Projects

Divide your projects into categories like software development, data analysis, or artificial intelligence to help visitors navigate your portfolio more easily.

The project section on my personal portfolio site with clear sections for different topics

This organization allows you to display a broad skill set, making it clear you're well-versed in multiple aspects of tech. It also helps visitors quickly find projects that align with their specific interests or needs.

Provide Detailed Project Descriptions

For each project, write a brief description that outlines the project's goals, your role in its development, and the technology used. Highlight any unique challenges you encountered and how you overcame them, showcasing your problem-solving skills.

Example of some project descriptions listing the challenge, goal, technologies used, etc.

These descriptions give context to your work and help visitors understand the depth of your technical expertise and creativity.

Use High-Quality Visuals and Code Snippets

Incorporate clear screenshots of your projects or UI designs, and consider including code snippets to illustrate the quality of your coding practices.

A high quality visual

Visuals help convey the complexity and functionality of your projects, while code snippets can give fellow tech professionals insight into your technical approach. Together, they provide a comprehensive view of your capabilities.

Include Client or Collaborator Testimonials

Testimonials from clients, colleagues, or collaborators can add credibility to your portfolio. Positive feedback on your technical skills, work ethic, and ability to deliver solutions can significantly enhance your professional image.

Examples from my testimonials page

These testimonials act as a form of social proof, validating your expertise in your field.

Highlight Achievements and Contributions

Showcase any recognitions, certifications, or contributions to open-source projects.

For example, if you've received a "Developer of the Month" award from a well-known tech community, obtained a certification in Advanced Machine Learning from a reputable online platform, or contributed to open-source projects on GitHub like TensorFlow or Apache Spark, make sure these are prominently featured.

Some of my own milestones throughout my career

Highlighting such achievements, like winning a hackathon or being part of a team that developed a widely used software tool, showcases your commitment and active engagement in the tech community.

It also positions you as a dedicated and accomplished professional, underlining your contributions and achievements within the fields of software engineering, data science, and AI.

Feature Interactive Demos

Where possible, include interactive demos of your projects or links to live sites where visitors can see your work in action. This not only makes your portfolio more engaging but also lets visitors experience the usability and functionality of your creations firsthand.

Interactive demos can be particularly compelling for projects in AI and data science, where results and data visualizations play a crucial role.

To effectively include interactive demos or links to live sites in your portfolio, consider these approaches:

1. Embed Project Videos: Create short video demonstrations of your projects and embed them directly into your portfolio. These videos can guide viewers through the functionality and features of your creations, providing a dynamic way to showcase your work.
2. Use GitHub Pages: For software engineering projects, deploy your web applications or tools on GitHub Pages, providing a direct link in your portfolio. This free hosting service allows you to present live versions of your projects, making them accessible to anyone.
3. Interactive Data Visualization Tools: For data science projects, utilize tools like Tableau Public or D3.js to create interactive visualizations of your data analyses. Embed these visualizations in your portfolio to let visitors interact with the data, understand your analytical skills, and appreciate the insights you've uncovered.
4. Host on Cloud Platforms: Use cloud platforms like Heroku or Netlify to deploy your projects and include the live links in your portfolio. These platforms support a wide range of programming languages and frameworks, making them suitable for showcasing both frontend and backend projects.
5. Demo Notebooks for AI Models: Share Jupyter notebooks via platforms like GitHub or NBViewer that demonstrate the workings of your AI models. These notebooks can include code, visualizations, and explanations, offering a comprehensive view of your project's development process and results.
6. Create an Interactive Portfolio Section: Design a specific area of your portfolio dedicated to interactive demos. This section can include thumbnails or icons representing each project, which visitors can click on to explore the demo or live site.
7. Use Code Sandboxes: For smaller projects or code snippets, use online code editors like CodePen or JSFiddle to create live previews. These platforms allow you to write HTML, CSS, and JavaScript in the browser and share interactive versions of your work.

By incorporating these methods, you can make your portfolio more engaging and provide potential employers or clients with a hands-on understanding of your projects' usability, functionality, and the innovative solutions you bring to the table in software engineering, data science, and AI.

Regularly Update Your Portfolio

Keep adding new projects and updating your portfolio to reflect your latest work and ongoing learning in the tech field. This demonstrates your commitment to staying current with technological advancements and your continuous professional development. An up-to-date portfolio shows you're actively involved in your field and passionate about your work.

By tailoring your portfolio with these considerations in mind, you ensure it effectively showcases your expertise in software engineering, data science, and AI. This approach not only highlights your technical skills but also your adaptability and ongoing growth in these rapidly evolving fields.

How to Craft Your Brand Story and Unique Voice

Crafting your brand's voice is a vital aspect of the brand's identity, serving as the embodiment of its personality across all forms of communication. A well-defined brand voice not only distinguishes a brand in a crowded market but also establishes a consistent and relatable presence that resonates with its target audience.

This chapter delves into the intricate process of sculpting your brand's unique voice and narrative, ensuring it aligns with its core values, mission, and the expectations of its audience.

Understanding Your Brand's Core

The journey to crafting your brand's voice begins with a deep dive into its essence. This involves clarifying your brand's mission, values, and the unique proposition it offers to its audience.

A brand voice that is in harmony with these core aspects will not only be authentic but also compelling to your target audience.

Identify Your Audience

Understanding and identifying your target audience as a developer is pivotal to creating a personal portfolio website that resonates with the right people, whether they are potential employers, clients, students for your courses, or collaborators. Here's how to refine your approach based on who you're speaking to most often:

For Educators and Course Creators

If analytics or feedback suggests that a significant portion of your visitors (like the 90% in the example) are potential students interested in your courses, your portfolio should position you as a subject matter expert and a capable educator. Here's how:

• Showcase Educational Content: Highlight courses you've created, workshops you've conducted, and any educational materials you offer. Use clear, engaging descriptions and include student testimonials to underscore the value of your courses.
• Demonstrate Expertise: Include a detailed "About Me" section that outlines your credentials, experience, and any awards or recognitions you've received in your field. This helps build trust and establish your authority.
• Provide Free Resources: Offering free tutorials, blog posts, or downloadable resources can be a great way to showcase your knowledge and teaching style, encouraging visitors to engage with your paid courses.
• Engage with Interactive Demos: Use interactive elements or demos related to your courses to engage visitors and give them a taste of what you offer, making your site and courses more memorable.

For Developers Seeking Employment

If your primary goal is to attract potential employers, your portfolio needs to emphasize your technical skills, projects, and the professional value you bring. Here's how to tailor your site:

• Highlight Relevant Projects: Showcase a selection of projects that are most relevant to the types of roles you're seeking. Include detailed case studies that walk through your problem-solving process, technologies used, and the outcomes achieved.
• Professional Narrative: Use the "About Me" section to narrate your professional journey, emphasizing experiences and skills that align with your career aspirations. Mention any collaborative projects to demonstrate teamwork and communication skills.
• Testimonials from Colleagues: Including endorsements from past colleagues, supervisors, or collaborators can add credibility and provide insight into your working style and contributions to a team.
• Technical Blog: If you maintain a blog, focus on posts that highlight your expertise, insights into technology trends, and solutions to common problems in your field. This not only showcases your knowledge but also your ability to communicate complex ideas clearly.

General Tips for Identifying Your Audience

• Survey Your Visitors: Simple surveys or feedback forms on your website can provide direct insights into who your visitors are and what they're looking for.
• Analyze Website Analytics: Use tools like Google Analytics to understand the demographics, interests, and behavior of your site's visitors. Look for patterns in the pages visited, the content engaged with, and the referral sources.
• Social Media Insights: If you use social media to share your work or insights, platforms like Twitter, LinkedIn, and Instagram provide analytics that can help you understand your followers' profiles and preferences.
• Competitor Analysis: Look at the portfolios of peers in your field. Notice who their target audience seems to be and how they engage with them. This can offer clues about your own audience.

Identifying and understanding your target audience allows you to craft a portfolio that speaks directly to their needs and interests. Whether you're teaching, seeking employment, or offering freelance services, a focused approach ensures that your portfolio resonates with the right people, making it a powerful tool in achieving your professional goals.

Craft Your Brand Narrative

Once you have a clear understanding of your brand's core and its audience, the next step is to weave your brand narrative.

This narrative should tell the story of your brand—where it comes from, what it stands for, and where it is headed.

The narrative becomes the foundation upon which your brand voice is built, ensuring that every message you convey is coherent and aligned with your brand's story.

Be Aware of the Tone of Your Voice

The tone of your brand voice can vary depending on the context and the platform, but it should always reflect your brand's personality.

Whether it's confident and authoritative, friendly and conversational, or inspirational and aspirational, the tone should be consistent across all channels to maintain brand recognition and loyalty.

Consistency Is Key

Maintaining consistency in your brand voice across all platforms and touchpoints is crucial. This consistency helps in building trust and credibility with your audience. It ensures that no matter where or how your audience encounters your brand, they receive the same experience and message.

Evolve Your Voice

While consistency is essential, it's also important to allow your brand voice to evolve with your audience and the market. Stay open to feedback and be willing to adjust your voice as needed to ensure it remains relevant and engaging to your audience.

Crafting your brand story and unique voice is not a one-time effort but an ongoing process of refinement and evolution.

By staying true to your brand's core, understanding your audience, and being consistent yet flexible in your approach, you can create a brand voice that not only defines your brand's identity but also builds lasting connections with your audience.

How to Add Additional Content

Enhancing your personal portfolio website with a variety of content not only enriches the visitor's experience but also showcases the breadth of your capabilities. Here are some key additions that can transform your site:

Client Testimonials and Peer Reviews

Incorporate feedback from previous clients or colleagues to highlight your skills and professionalism. Testimonials lend authenticity and foster trust in your portfolio.

Example: a section titled "What People Are Saying" can feature a carousel of quotes from past clients, such as: "Alex transformed our brand's vision into reality with exceptional design and attention to detail. Working with them was a game-changer!" – Jamie, Brand Manager

Detailed Case Studies

Showcase your standout projects with comprehensive case studies. These narratives offer a deep dive into your creative process, problem-solving abilities, and the impact of your work.

Example: a page dedicated to a rebranding project for a local café, including the challenge ("Revitalizing a beloved local brand"), the process (from initial sketches to final design choices), and the impact (increased customer engagement and sales).

Blog Insights

A blog section can serve as a platform for sharing your expertise, industry insights, or personal reflections. It reflects your dedication to your craft and ensures your site remains vibrant with new content.

Example: a series of posts under "Design Insights," with entries like "The Future of Web Design: Trends to Watch" or "My Creative Process: From Concept to Completion," providing readers with valuable knowledge and a peek into your creative world.

Behind-the-Scenes Glimpses

Offer a look into your creative journey through behind-the-scenes content like sketches, mood boards, or early designs. This transparency into your process can fascinate visitors and add depth to your work presentation.

Example: a gallery called "The Making of a Logo," featuring early sketches, revisions, and commentary on the thought process behind each stage, culminating in the final design.

Engaging Interactive Elements

Incorporate dynamic features such as sliders, animations, or interactive galleries. These elements can make your portfolio more engaging and leave a lasting impression on visitors.

Example: an interactive gallery for a photography portfolio, where visitors can filter images by theme or color. Hovering over an image reveals the project name and details, while clicking enlarges the photo with a detailed caption.

Awards and Honors

Highlight any accolades or recognitions you've received. Showcasing your achievements adds prestige to your portfolio and distinguishes you from your peers.

Example: a "Recognition" section displaying badges or trophies from design competitions, accompanied by a brief description of the award and the project that won it, such as "Winner of the 2023 Design Innovation Award for the Eco-Friendly Packaging Series."

Video Demonstrations

Embedding video content, whether project walkthroughs or client feedback, can provide an immersive experience. Videos add a dynamic layer to your presentation, making your work more relatable and memorable.

Example: a video walkthrough of a mobile app design process, starting from wireframes to the finished product, with voiceover explaining design choices, challenges overcome, and user feedback incorporated into the final version.

Infographics and Data Visualizations

For those whose work involves data, adding infographics or visualizations can compellingly present complex information. This not only showcases your ability to simplify intricate data but also your creative approach to visual communication.

Example: an infographic titled "The Impact of Good Design on User Engagement," showcasing statistics on user retention, satisfaction, and conversion rates before and after a website redesign, highlighting your ability to drive results through design.

Diversifying the content on your personal portfolio website with additions like testimonials, in-depth case studies, and interactive elements enriches your online presence. Such enhancements not only amplify the appeal and credibility of your portfolio but also demonstrate your comprehensive skill set and creativity.

What Pages You Need in Your Portfolio

To make your personal portfolio website truly unforgettable, paying close attention to its structure and content is paramount.

The goal is to showcase not just your work and abilities, but to establish a holistic online platform that mirrors your professional identity. Integrating specific essential pages is critical for a detailed presentation of your competencies to prospective employers or clients.

Here’s a detailed guide on the essential pages that are fundamental to a standout personal portfolio:

Home Page: The Gateway to Your Professional Universe

The home page serves as the initial welcome to your professional domain, providing a brief yet impactful overview of your identity and offerings. This first impression is vital, setting the tone for the visitor's experience on your site.

My home page

Your home page should emphasize:

• Engaging Introduction: Introduce yourself with a quick mention of your professional designation and expertise.
• Visual Elements: Incorporate captivating visuals or a portfolio reel to immediately draw attention to your work.
• Navigation Tips: Direct visitors smoothly to different site sections with clear navigation aids.

Portfolio Section: A Display of Your Expertise

This core section is where you showcase your finest work. Organizing this area thoughtfully ensures that visitors can easily navigate through your projects. You should include:

• Organization by Category: Group projects by theme, type, or sector for straightforward browsing.

Projects organized by category on my personal portfolio page - Python, Statistics, Machine Learning, and NLP

• Project Summaries: Provide a concise description of each project, outlining your role, the methodology, and the results.

Example project summary on my portfolio

• High-Resolution Media: Present your work with high-quality images or videos to fully convey its quality.

About Me Page: Your Professional Narrative

This page allows you to forge a deeper connection with your audience by sharing your story, ambitions, and what makes you unique. It should cover:

• Professional Background: Share your career path, educational achievements, and significant milestones.

Some of my personal milestones

• Skills and Expertise: Spotlight the abilities that distinguish you in your field.

A page on my portfolio showing my "digital DNA" - the skills I'd like to showcase

• Personal Insights: Offering a peek into your personal hobbies or interests can make you more approachable and relatable.

Services Offered: How You Can Assist Clients

If your portfolio is meant to attract freelance or consulting work, clearly detail the services you provide. This section should convey:

• Services List: Enumerate the services you offer, such as design, consulting, or writing.

A section on my site describing the courses I offer/topics I teach about

• Unique Advantages: Describe what sets your services apart from the competition.
• Workflow Description: Outline your process from the initial contact to project completion, offering potential clients a glimpse into your working style.

Contact Information: Simplifying Communication

For potential collaborations, it’s essential to make reaching out as simple as possible. Your contact page should include:

• Various Contact Methods: Provide a contact form, email, and possibly a phone number for easy communication.

My contact information page on my personal portfolio site

• Social Media Profiles: Guide visitors to your professional social media pages.
• Geographic Details: If applicable, mention your location or time zone.

Client Testimonials: Evidence of Your Expertise

Testimonials from previous clients or colleagues act as a strong endorsement of your skills and dependability. Consider featuring:

• Client Feedback: Include concise, meaningful quotes from clients about their satisfaction with your work.

Some of my client's testimonials

• Project Links: Optionally, connect these testimonials to specific projects they refer to.
• Client Images or Logos: Adding photos or logos of the client's company can add credibility to each testimonial.

Incorporating these key pages into your personal portfolio website not only effectively showcases your skills but also offers a complete picture of your professional sphere.

By meticulously designing each section, you can cultivate a digital presence that draws in potential clients or employers, showcases your proficiency, and distinguishes you in your industry.

How to Organize the Home Page

Now let's talk about how to strategically organize the homepage of your personal portfolio website. The essence of the homepage is to succinctly represent you and ignite the curiosity of visitors to delve into your portfolio page. Essential sections include:

1. Navigation Bar

A well-designed navigation bar is your visitor's roadmap to your website. It should be intuitive and straightforward, guiding them through your site with ease.

Navigation section of my site

Include links to your portfolio, about page, services, and contact information. Ensure it's accessible from every page, providing a seamless browsing experience.

2. Header Hero

Your header hero acts as the first impression and the hook that draws visitors in. This section should feature a striking, high-quality image or a dynamic slider that represents your work or persona.

Accompany this visual with a bold, concise statement about who you are and what you do. This is your chance to make an impact, so choose words and images that resonate with your professional identity and goals.

Homepage displaying the header hero image on my site

My hero image has my name in large print, and informs viewers that I specialize in compter science, data science, and AI.

3. Your Skills

Highlighting your skills is crucial in showcasing your competencies to potential clients or employers.

Create a visually engaging section where you list your primary skills, perhaps using icons or progress bars for a more dynamic presentation. Focus on the skills that set you apart and are most relevant to the work you want to attract.

Some of my skills listed on my site

On my site, I emphasize that I've had experience managing teams, optimizing performance, and building AI-driven products, for example.

4. Your Case Studies

Case studies are powerful testimonials of your work history and success stories. Dedicate a section to showcase selected projects that highlight your problem-solving skills, creativity, and the value you’ve brought to previous engagements.

For each case study, provide context, your role, challenges, solutions, and results. Including impactful visuals or links to the projects can greatly enhance this section.

5. Your Milestones

This section is a timeline or a list of significant achievements, awards, recognitions, or other milestones in your career. It's a narrative of your professional journey and successes.

Presenting this information in a chronological timeline or a visually engaging infographic can help tell your story compellingly and succinctly.

You can list achievements such as starting a company, graduating from a degree program, reaching a certain number of followers on social media, and so on.

6. Testimonials (What others say about you)

Testimonials from past clients, colleagues, or employers lend credibility and trust to your professional image. Select quotes that reflect your work ethic, impact, and personality.

Displaying these testimonials with the name, title, and, if possible, a photo of the person providing them adds authenticity and a personal touch.

7. Technical Skills

In addition to your general skills, it's important to specifically highlight your technical skills. This section should detail the tools, technologies, software, and programming languages you are proficient in.

Using logos or icons of these technologies can make this section more visually appealing and easier to scan for visitors who are quickly trying to gauge your technical capabilities.

My "digital DNA"

For example, my "digital DNA" is made up of C++, Java, JavaScript, Python, React, and other popular technologies.

Beyond these, your homepage doesn't require additional content. It's vital to capture the visitor's attention quickly with compelling visuals and effective copywriting, given the short window to make an impact.

Do's for a Captivating Homepage

• Be Concise: Ensure your message is clear and to the point.
• Use Endorsement Logos: Incorporate logos of companies you've appeared on to build trust.
• Display Technical Stack Logos: Show the technologies you're proficient in using their logos.
• Showcase a Case Study Gallery: Highlight your best work in an easily navigable gallery.
• Include a Dynamic Header: Use an engaging hero section to make a strong first impression.
• Highlight Recent Work: Give visitors a glimpse of your latest projects to show you're active and relevant.
• Use Testimonials Strategically: Place client testimonials where they'll have the most impact, showcasing your reliability and skill.

Don'ts for Your Homepage

• Avoid Random Placement: Structure your content logically – don't place information haphazardly.
• Steer Clear of Long Paragraphs: Keep your homepage breezy and easy to read with short, impactful statements.
• Don't Overwhelm with Content: Your homepage isn't the place to squeeze in every detail of your portfolio.
• Avoid Image Neglect: Images are crucial for visual engagement, so don't omit them.
• Resist Clutter: Keep the design clean and focused to improve user experience.
• Avoid Technical Jargon: Use language that's accessible to all visitors, not just industry insiders.
• Skip the Hard Sell: Present your skills and achievements without being overly aggressive.

Effective organization of your homepage is key to creating a memorable and professional personal portfolio website.

By following these guidelines, you ensure that your homepage not only accurately represents your professional persona but also encourages further exploration of your portfolio, opening up new opportunities for engagement and collaboration.

How to Keep Your Portfolio Fresh

Keeping your portfolio updated is crucial for reflecting your evolving skills, expertise, and experiences. An engaging and current portfolio not only captivates potential clients and visitors but also illustrates your dedication to your profession. Here are strategies to ensure your portfolio remains fresh and appealing:

Continuously Update with New Work

Regularly add your latest and greatest projects to your portfolio. This demonstrates your active involvement in your field and your commitment to quality and innovation. It's a way to showcase your growth and adaptability over time.

Revamp Your Portfolio's Design

Periodically rejuvenating the design of your portfolio website can keep it looking modern and fresh. An updated design can better engage visitors and reflect your ability to stay in tune with the latest trends and technologies in design.

Showcase Testimonials and Recognitions

Incorporate new testimonials from clients or colleagues, as well as any recent awards or honors you've received. This external validation of your work adds credibility and can significantly influence potential clients' perceptions of your expertise.

Maintain an Active Blog

A blog can be a dynamic component of your portfolio, offering insights into your work process, industry observations, or detailed project breakdowns. Regular posts keep your site content fresh and can help establish you as a thought leader in your field.

Leverage Social Media

Use social media platforms to highlight recent projects, achievements, and updates from your portfolio. A robust social media presence can extend your reach, attract a broader audience, and keep your work in the spotlight.

Incorporate Interactive Elements

Adding interactive elements, such as animations or interactive galleries, can refresh the user experience on your site. These elements can make your portfolio more memorable and engaging.

Feedback Loop

Invite feedback on your work and website from peers and mentors. Implementing constructive feedback can improve your portfolio's effectiveness and demonstrate your commitment to excellence and continuous improvement.

Diversify Your Content

Show a range of projects and skills, including collaborative works, to display the breadth of your capabilities. This diversity can attract a wider array of clients interested in different aspects of your expertise.

Stay Relevant with Trends

Keep abreast of the latest trends in your industry and incorporate them into your work and portfolio presentation. This shows that you are forward-thinking and capable of adapting to change.

By employing these strategies, you can ensure that your portfolio remains an accurate, engaging representation of your professional journey and capabilities. Regular updates and a proactive approach to showcasing your achievements can significantly enhance your portfolio's appeal, making it a powerful tool for attracting new opportunities and clients.

Conclusion

When it comes to crafting a standout personal portfolio page, remember that simplicity and showcasing your best work are key. By following the step-by-step guide outlined in this blog, you can create a compelling portfolio that effectively highlights your skills and talents.

Start by organizing your projects in a clean and visually appealing layout. Use high-quality images and concise descriptions to provide visitors with a clear understanding of your work. Remember, your portfolio is a reflection of you and your brand.

Don't forget to include a call to action that prompts visitors to take the next step, whether it's contacting you for collaborations or viewing more of your work. Engage your audience with a clear message and encourage them to explore further. Ready to elevate your online presence? Take the first step and build that portfolio.

Resources

Kickstart your journey in technology with our specialized program that dives into Artificial Intelligence (AI) and machine learning. This initiative is crafted to build your programming expertise, supplemented with dedicated mentorship and career guidance to pave your way in the tech industry.

Propel your career forward with this curated list of resources, focused on tangible outcomes:

• How to Enter Gen AI in 2024: This guide breaks down the essentials of emerging AI technologies and prepares you for future trends.
• Land Your Software Engineering Internship: This resource provides step-by-step instructions for finding and landing a valuable internship in software engineering, giving you a competitive edge.
• Machine Learning Fundamentals eBook: Begin your exploration of machine learning with this eBook, which provides a concise overview of its core principles and techniques.

For access to these resources and detailed information about our program, visit LunarTech's website. Embark on your tech career path with the right tools and support from LunarTech.

Connect with Me:

• Follow me on LinkedIn for a ton of Free Resources in CS, ML and AI
• Visit my Personal Website
• Subscribe to my The Data Science and AI Newsletter

About the Author

I'm Vahe Aslanyan, specializing in the world of computer science, data science, and artificial intelligence. Explore my work at vaheaslanyan.com. My expertise encompasses robust full-stack development and the strategic enhancement of AI products, with a focus on inventive problem-solving.

I've consistently aimed to revolutionize technical education, striving to set a new, universal standard. As we wrap up this handbook, I want to say a big thank you for spending time with it. Sharing what I've learned has made me think more about my work. I hope what we've gone through together helps you move forward in tech.

Knowing how to handle content is important when creating a personal website for yourself or a client.

This is because maintaining and updating a site can result in substantial expenses if you don't do it correctly. This is even more the case if you're building for someone with a non-technical background.

To address this, you can integrate your website with a headless CMS service that offers an API for content management and updates. In this case, we will utilize Sanity for this purpose.

Table of Contents:

1. What is Sanity?
2. Step 1: Install Next.js
3. Step 2: Setup Sanity Studio
4. Step 3: Mount Sanity Studio into Next.js
5. Step 4: Create Content Schemas
6. Step 5: Query Data using GROQ
7. Step 6: Display Content in your Next.js App
8. Fix Studio Layout
9. Step 7: Deployment
10. Setup Sanity Webhooks for Studio Update
11. What Next?

What is Sanity?

Sanity is a headless CMS framework for managing content. It provides tools to leverage APIs to connect to your web app providing instantaneous, rich and automated infrastructure for managing content on the cloud.

With Sanity, you can hook up pages or content that require regular updating to the studio and manage them from the content lake without having to touch code frequently. This makes the content creation and management process accessible to more people regardless of their technical background.

In this post, you'll learn how to use Sanity as a data source to build a portfolio site with Next.js 13 and Tailwind CSS. You'll also learn how to host it on Vercel and set-up webhooks to trigger deployments.

Here is a screenshot of what the portfolio site will look like. Some of the designs for this site were inspired by Tailwind's Spotlight Portfolio Template.

Finished personal project

Want to play around with it? Check out the live demo. Also, you can find the source code for the project on GitHub.

Step 1: Install Next.js

Open a terminal and run this command to install the latest version of Next.js:

npx create-next-app@latest

Select all your preferred install options. Except for the project name, I'll go with the default options.

√ What is your project named? ... sanity-nextjs-site
√ Would you like to use TypeScript with this project? ... Yes
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use Tailwind CSS with this project? ... Yes
√ Would you like to use `src/` directory with this project? ... No
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias? ... No

This should install all the required dependencies, including Tailwind CSS into the project folder. To see it live run the command below:

cd sanity-nextjs-site

npm run dev

Visit http://localhost:3000 to see the site.

Step 2: Setup Sanity Studio

Sanity studio is Sanity's open source single-page app for managing your data and operations. This is the interface from which you can create, delete, and update your data within Sanity.

Install Sanity Studio

Open up a new terminal outside of your Next.js application and type the commands below:

mkdir sanity-studio

cd sanity-studio

npm create sanity@latest

Once your run the command in your terminal, you'll be prompted to select a login provider from the list of options. If you already have an account, it will authenticate your account and automatically log you in or else you can create a new account on Sanity.

Once your account has been successfully authenticated, more prompts will be provided in the terminal to configure your project. Here are the options set for the studio:

$ Project name: Sanity Next.js Site
$ Use the default dataset configuration?: Yes
$ Project output path: C:\Users\USER\Desktop\sanity-studio
$ Select project template: Clean project with no predefined schemas
$ Do you want to use TypeScript? Yes
$ Package manager to use for installing dependencies?: npm

Once completed, this should install Sanity studio locally. To see the studio, run npm run dev and visit localhost:3333, log into your account using the same method used in creating your account, and you should see the studio running locally.

Step 3: Mount Sanity Studio into Next.js

You can choose to host your studio separately, but in this tutorial you'll be mounting it together with your Next.js application using the next-sanity toolkit.

End the server running your Next app and run this command:

npm install sanity next-sanity

And then on the sanity-studio directory running the studio locally, copy the schema folder and sanity.config.ts file and paste into the root of your Next.js app.

The folder structure should look like this:

├── .next
├── app/
├── node_modules/
├── public/
├── schemas/
│   └── index.ts
├── .eslintrc.json
├── .gitignore
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
├── sanity.config.ts
├── tailwind.config.js
└── tsconfig.json

Next, inside the sanity.config.ts file, add a basePath key and give it a value of /studio or any valid URL path where you would like your studio to live.

// sanity.config.ts

import { defineConfig } from "sanity";
import { deskTool } from "sanity/desk";
import { schemaTypes } from "./schemas";

export default defineConfig({
  name: "sanity-nextjs-site",
  title: "Sanity Next.js Site",
  projectId: "ga8lllhf",
  dataset: "production",
  basePath: "/studio",
  plugins: [deskTool()],
  schema: { types: schemaTypes },
});

Here's a breakdown of each property:

• name: Used to differentiate workspaces. Not compulsory for single workspace setup.
• title: Title of your project. This will show up on the Studio.
• projectId: This is a unique ID that points to the Sanity project you're working with.
• dataset: The name of the dataset to use for your studio. Common names are production and development.
• basePath: This is the URL path where your studio will be mounted.
• schema: The object where your schema files will be defined.

Create the Studio Component

This is where the studio page will be mounted within your Next app. You can name this file whatever you prefer, but it must match with the basePath key specified inside the sanity.config.ts file. In my case, the file name will be studio.

To create the studio route, we'll utilize Next.js dynamic segments. Inside the app directory, create a studio/[[...index]]/page.tsx file.

app/
└── studio/
    └── [[...index]]/
         └── page.tsx

With this, when you visit any route that matches with /studio, the studio component page.tsx will be rendered.

To complete this setup, paste this code inside the component:

// app/studio/[[...index]]/page.tsx

"use client";

import { NextStudio } from "next-sanity/studio";
import config from "@/sanity.config";

export default function Studio() {
  return <NextStudio config={config} />;
}

First, NextStudio is imported from the next-sanity library and the configuration file is imported from the sanity.config.ts file you created earlier.

Now run npm run dev and visit localhost:3000/studio. You will get a prompt to add localhost:3000 as a CORS origin to your Sanity project. Just click continue to add the URL.

Once added, log into your Sanity account using the same method you used in creating your account and you should see the Studio mounted into your Next.js application as shown in the image below:

With the studio now running in your Next.js app, you don't need the separate sanity-studio directory anymore. You can delete or close it.

By default, the studio will be blank because you haven't created any schemas files. Let's do that in the next section.

Step 4: Create Content Schemas

Schemas are essentially a way of organizing datasets in a database depending on what type of content you need.

Since we're building a portfolio site, we'll create schemas to handle projects, profile, and so on. To be more specific, you'll create three schemas files for this portfolio project:

• profile: Schema file for defining your personal information like name, about, skills, and so on.
• project: Schema file for your projects.
• work: Schema file for defining your work experience.

Let's start with the profile schema.

Profile Schema

Inside the schemas directory, create a profile.ts file.

touch schemas/profile.ts

Let's start by defining the basic properties of a schema file.

// schemas/profile.ts

import { defineField } from "sanity";
import { BiUser } from "react-icons/bi";

const profile = {
  name: "profile",
  title: "Profile",
  type: "document",
  icon: BiUser,
  fields: [],
};

export default profile;

Each schema file must contain a name, title, and type property. Here's a brief breakdown of the function of each property:

• The name key is the property that is used to reference a schema in the query language. The value must be a unique value to avoid conflating schemas.
• title defines what the schema type is called in the Studio UI.
• type defines what schema type you're working with. The document value will tell the studio that it should make it possible to make new documents.
• The icon is an optional property you can add alongside the title. To use the icon, install the react-icons library with the command npm install -D react-icons
• The fields array, is where the individual input fields will be defined. Here are the fields for the profile schema:

fields: [
    defineField({
      name: "fullName",
      title: "Full Name",
      type: "string",
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: "headline",
      title: "Headline",
      type: "string",
      description: "In one short sentence, what do you do?",
      validation: (Rule) => Rule.required().min(40).max(50),
    }),
    {
      name: "profileImage",
      title: "Profile Image",
      type: "image",
      description: "Upload a profile picture",
      options: { hotspot: true },
      fields: [
        {
          name: "alt",
          title: "Alt",
          type: "string",
        },
      ],
    },
    {
      name: "shortBio",
      title: "Short Bio",
      type: "text",
      rows: 4,
    },
    {
      name: "email",
      title: "Email Address",
      type: "string",
    },
    {
      name: "location",
      title: "Location",
      type: "string",
    },
    {
      name: "fullBio",
      title: "Full Bio",
      type: "array",
      of: [{ type: "block" }],
    },
    {
      name: "resumeURL",
      title: "Upload Resume",
      type: "file",
    },
    {
      name: "socialLinks",
      title: "Social Links",
      type: "object",
      description: "Add your social media links:",
      fields: [
        {
          name: "github",
          title: "Github URL",
          type: "url",
          initialValue: "https://github.com/",
        },
        {
          name: "linkedin",
          title: "Linkedin URL",
          type: "url",
          initialValue: "https://linkedin.com/in/",
        },
        {
          name: "twitter",
          title: "Twitter URL",
          type: "url",
          initialValue: "https://twitter.com/",
        },
        {
          name: "twitch",
          title: "Twitch URL",
          type: "url",
          initialValue: "https://twitch.com/",
        },
      ],
      options: {
        collapsed: false,
        collapsible: true,
        columns: 2,
      },
    },
    {
      name: "skills",
      title: "Skills",
      type: "array",
      description: "Add a list of skills",
      of: [{ type: "string" }],
    },
 ],

To understand how fields work, visualize each field object as a HTML <input> that will be available in the studio. The value in each input will be exported to a JSON object you can use to inject your data. You can add as many fields, but each must contain a name, title, and type property.

The defineField() helper function helps enable auto-completion of field types in your schema file.

Sanity comes with its own built-in schema types: number, datetime, image, array, object, string, url, and more. You can check out the full list of schema types here.

To expose this newly created schema file to the Studio, you need to import it into the schemas array inside the schemas/index.ts file:

// schemas/index.ts

import profile from "./profile";

export const schemaTypes = [profile];

Now you can start working with it from within the studio. Visit your studio at localhost:3000/studio or whatever path you used to mount it. Then click on the Profile tab and select the edit button on the top corner to start editing the fields.

This is what that looks like:

Fill in all the fields and click publish once completed. This will append the data into a parsed JSON document. To view this JSON output, click the menu button on the top right corner and hit "Inspect" or simply hold down Ctrl Alt I on your keyboard.

Here's what the structure for the profile schema looks like:

Inspect schema document

With this, you can easily query the data to fetch the exact content you need in your front-end. Let's do that in the next section.

Step 5: Query Data using GROQ

GROQ (Graph-Relational Object Queries) is Sanity's query language designed to query collections of largely schema-less JSON documents. The idea behind the query language is to be able to describe exactly what information you need from your schema, or filter certain data, and return only specific elements from your data

To start using GROQ, first create a sanity/sanity.client.ts file in your project root directory.

mkdir sanity && touch sanity/sanity.client.ts

Paste the code into this file:

// sanity/sanity.client.ts

import { createClient, type ClientConfig } from "@sanity/client";

const config: ClientConfig = {
  projectId: "ga8lllhf",
  dataset: "production",
  apiVersion: "2023-07-16",
  useCdn: false,
};

const client = createClient(config);

export default client;

• apiVersion: The version of the Sanity API you're using. For the latest API version, use your current date in this format YYYY-MM-DD.
• useCdn is used to disable edge cases

What this file does is provide a few configurations that will be defined in each query so this is just to avoid repeating it every time. Now for the main query, create a sanity/sanity.query.ts file.

touch sanity/sanity.query.ts

Note: There is not clear-cut way to arrange or name these files so feel free to change it up as needed.

Here's the basic query for the profile schema:

// sanity/sanity.query.ts

import { groq } from "next-sanity";
import client from "./sanity.client";

export async function getProfile() {
  return client.fetch(
    groq`*[_type == "profile"]{
      _id,
      fullName,
      headline,
      profileImage {alt, "image": asset->url},
      shortBio,
      location,
      fullBio,
      email,
      "resumeURL": resumeURL.asset->url,
      socialLinks,
      skills
    }`
  );
}

Here we created an exported async function called getProfile() that returns a groq fetch query wrapped with the client config created in the first step.

The groq query starts with an asterisk (*) which represents every document in your dataset followed by a filter in brackets. The filter above returns the schema that has a _type of "profile".

_Schema JSON showing profile schema type

The filter is followed by curly braces which contains specific content from the dataset needed like: fullName, headline, profileImage and so on. This is called projections in the Sanity docs and it returns the entire data as an array.

If you want to learn more about querying using GROQ, I suggest you go through the how queries work section in the documentation. For syntax highlighting of your GROQ query, install the sanity.io extension available on the Visual Studio Code marketplace.

We're done with the configuration you need to start using your content. Let's look at how to display this content in your Next application.

Step 6: Display Content in your Next.js App

This section is broken down into two separate parts: Displaying the hero section, and about page content.

Add Types to Data Content

Since you're using TypeScript for this project, it is important to first provide the types for the data coming from the studio.

Create a types/index.ts file in the root directory and add the profile type below:

// types/index.ts

import { PortableTextBlock } from "sanity";

export type ProfileType = {
  _id: string,
  fullName: string,
  headline: string,
  profileImage: {
    alt: string,
    image: string
  },
  shortBio: string,
  email: string,
  fullBio: PortableTextBlock[],
  location: string,
  resumeURL: string,
  socialLinks: string[],
  skills: string[],
};

PortableTextBlock is a unique type coming from Sanity that properly defines the data type for the rich text editor.

Now you've defined the types for your content, it's easier to visualize the data you're expecting in your studio.

Display Hero Section

First, remove all the styling inside the global.css file, except for the necessary Tailwind imports at the top. Then clear everything inside the root page.tsx file of your Next.js app and paste the following code inside:

// app/page.tsx

import { getProfile } from "@/sanity/sanity.query";
import type { ProfileType } from "@/types";
import HeroSvg from "./icons/HeroSvg";;

export default async function Home() {
  const profile: ProfileType[] = await getProfile();

  return (
    <main className="max-w-7xl mx-auto lg:px-16 px-6">
      <section className="flex xl:flex-row flex-col xl:items-center items-start xl:justify-center justify-between gap-x-12 lg:mt-32 mt-20 mb-16">
        {profile &&
          profile.map((data) => (
            <div key={data._id} className="lg:max-w-2xl max-w-2xl">
              <h1 className="text-3xl font-bold tracking-tight sm:text-5xl mb-6 lg:leading-[3.7rem] leading-tight lg:min-w-[700px] min-w-full">
                {data.headline}
              </h1>
              <p className="text-base text-zinc-400 leading-relaxed">
                {data.shortBio}
              </p>
              <ul className="flex items-center gap-x-6 my-10">
                {Object.entries(data.socialLinks)
                  .sort()
                  .map(([key, value], id) => (
                    <li key={id}>
                      <a
                        href={value}
                        rel="noreferer noopener"
                        className="flex items-center gap-x-3 mb-5 hover:text-purple-400 duration-300"
                      >
                        {key[0].toUpperCase() + key.toLowerCase().slice(1)}
                      </a>
                    </li>
                  ))}
              </ul>
            </div>
          ))}
        <HeroSvg />
      </section>
    </main>
  );
}

• First the getProfile query is imported from the sanity.query.ts file which is a filtered-down version of our data coming from the schema.
• ProfileType is imported to add types to the data.
• The profile array is mapped inside the component to return the headline, shortBio, and socialLinks.
• <HeroSvg /> is essentially an svg element imported as a react component added just for UI aesthetics. You can download the HeroSVG icon component.

Here's the resulting output:

hero section output

To speed things up, I've created the navbar and footer navigation components. Simply download the directory and import them into the layout.tsx file like so:

// app/layout.tsx

import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import Navbar from "./components/global/Navbar";
import Footer from "./components/global/Footer";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Sanity Next.js Portfolio Site",
  description: "A personal portfolio site built with Sanity and Next.js",
  openGraph: {
    images: "add-your-open-graph-image-url-here",
  },
};

export default function RootLayout({children}: {children: React.ReactNode}) {
  return (
    <html lang="en">
      <body className={`${inter.className} bg-zinc-900 text-white`}>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  );
}

With these components, the home page should look like this:

home page with navbar and footer components

Display About Page

Let's build the about page using content from the getProfile query as well. In this section you'll need to install a React library called PortableTextBlock by Sanity. This library will allow you easily de-structure the block content of the rich text editor.

To install this package run npm install -D @portabletext/react and I'll explain how to use it later on.

Create an about folder inside the app directory and add a page.tsx file inside this new folder. You can also do this quickly using the following command:

mkdir app/about && touch app/about/page.tsx

Here's the code snippet for the about page:

// app/about/page.tsx

import Image from "next/image";
import { getProfile } from "@/sanity/sanity.query";
import type { ProfileType } from "@/types";
import { PortableText } from "@portabletext/react";
import { BiEnvelope, BiFile } from "react-icons/bi";

export default async function About() {
  const profile: ProfileType[] = await getProfile();

  return (
    <main className="lg:max-w-7xl mx-auto max-w-3xl md:px-16 px-6">
      {profile &&
        profile.map((data) => (
          <div key={data._id}>
            <section className="grid lg:grid-cols-2 grid-cols-1 gap-x-6 justify-items-center">
              <div className="order-2 lg:order-none">
                <h1 className="lg:text-5xl text-4xl lg:leading-tight basis-1/2 font-bold mb-8">
                  I&apos;m {data.fullName}. I live in {data.location}, where I
                  design the future.
                </h1>

                <div className="flex flex-col gap-y-3 text-zinc-400 leading-relaxed">
                  <PortableText value={data.fullBio} />
                </div>
              </div>

              <div className="flex flex-col lg:justify-self-center justify-self-start gap-y-8 lg:order-1 order-none mb-12">
                <div>
                  <Image
                    className="rounded-2xl mb-4 object-cover max-h-96 min-h-96 bg-top bg-[#1d1d20]"
                    src={data.profileImage.image}
                    width={400}
                    height={400}
                    quality={100}
                    alt={data.profileImage.alt}
                  />

                  <a
                    href={`${data.resumeURL}?dl=${data.fullName}_resume`}
                    className="flex items-center justify-center gap-x-2 bg-[#1d1d20] border border-transparent hover:border-zinc-700 rounded-md duration-200 py-2 text-center cursor-cell font-medium"
                  >
                    <BiFile className="text-base" /> Download Resumé
                  </a>
                </div>

                <ul>
                  <li>
                    <a
                      href={`mailto:${data.email}`}
                      className="flex items-center gap-x-2 hover:text-purple-400 duration-300"
                    >
                      <BiEnvelope className="text-lg" />
                      {data.email}
                    </a>
                  </li>
                </ul>
              </div>
            </section>

            <section className="mt-24 max-w-2xl">
              <h2 className="font-semibold text-4xl mb-4">Expertise</h2>
              <p className="text-zinc-400 max-w-lg">
                I&apos;ve spent few years working on my skills. In no particular
                order, here are a few of them.
              </p>

              <ul className="flex flex-wrap items-center gap-3 mt-8">
                {data.skills.map((skill, id) => (
                  <li
                    key={id}
                    className="bg-[#1d1d20] border border-transparent hover:border-zinc-700 rounded-md px-2 py-1"
                  >
                    {skill}
                  </li>
                ))}
              </ul>
            </section>
          </div>
        ))}
    </main>
  );
}

• Similar to the home page, we're also fetching the data from the getProfile query and assigning the ProfileType for type safety.
• The profile data is also mapped to get the individual properties: fullName, location, fullBio, profileImage, resumeURL, email, and skills array.
• The portable text editor was de-structured using the <PortableText /> component which takes in a value prop that receives the content of the rich text editor.

Adding the image from Sanity's CDN should throw an error in Next.js since you haven't added Sanity's image source hostname in your next.config.ts file. Here's how to do it in Next.js 13:

// next.config.ts

/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "cdn.sanity.io",
        port: "",
      },
    ],
  },
};

Here's the resulting output:

About page

Work Experience

In a typical portfolio site, you may need to create a list of past work experience. This is what the schema would look like:

Create a schemas/job.ts file and paste the following code:

// schemas/job.ts

import { BiBriefcase } from "react-icons/bi";

const job = {
  name: "job",
  title: "Job",
  type: "document",
  icon: BiBriefcase,
  fields: [
    {
      name: "name",
      title: "Company Name",
      type: "string",
      description: "What is the name of the company?",
    },
    {
      name: "jobTitle",
      title: "Job Title",
      type: "string",
      description: "Enter the job title. E.g: Software Developer",
    },
    {
      name: "logo",
      title: "Company Logo",
      type: "image",
    },
    {
      name: "url",
      title: "Company Website",
      type: "url",
    },
    {
      name: "description",
      title: "Job Description",
      type: "text",
      rows: 3,
      description: "Write a brief description about this role",
    },
    {
      name: "startDate",
      title: "Start Date",
      type: "date",
    },
    {
      name: "endDate",
      title: "End Date",
      type: "date",
    },
  ],
};

export default job;

To expose this new schema file to the studio, add it to the schemaTypes array inside the schemas/index.ts and you should see it in your studio.

Here's the resulting output:

job schema fields in sanity studio

Click the create button and add as many records as you want. Now you can move on to querying the data.

Similar to how the profile schema was queried inside the sanity.query.ts file, you will do that for the job schema too:

// sanity/sanity.query.ts

export async function getJob() {
  return client.fetch(
    groq`*[_type == "job"]{
      _id,
      name,
      jobTitle,
      "logo": logo.asset->url,
      url,
      description,
      startDate,
      endDate,
    }`
  );
}

Next add the types for the returned dataset:

// types/index.ts

export type JobType = {
  _id: string;
  name: string;
  jobTitle: string;
  logo: string;
  url: string;
  description: string;
  startDate: Date;
  endDate: Date;
};

And then to display it in your front-end, create a Job.tsx file inside the components directory and add the following code:

// app/components/Job.tsx

import Image from "next/image";
import { getJob } from "@/sanity/sanity.query";
import type { JobType } from "@/types";

export default async function Job() {
  const job: JobType[] = await getJob();

  return (
    <section className="mt-32">
      <div className="mb-16">
        <h2 className="font-semibold text-4xl mb-4">Work Experience</h2>
      </div>

      <div className="flex flex-col gap-y-12">
        {job.map((data) => (
          <div
            key={data._id}
            className="flex items-start lg:gap-x-6 gap-x-4 max-w-2xl relative before:absolute before:bottom-0 before:top-[4.5rem] before:left-7 before:w-[1px] before:h-[calc(100%-50px)] before:bg-zinc-800"
          >
            <a
              href={data.url}
              rel="noreferrer noopener"
              className="min-h-[60px] min-w-[60px] rounded-md overflow-clip relative"
            >
              <Image
                src={data.logo}
                className="object-cover"
                alt={`${data.name} logo`}
                fill
              />
            </a>
            <div className="flex flex-col items-start">
              <h3 className="text-xl font-bold">{data.name}</h3>
              <p>{data.jobTitle}</p>
              <small className="text-sm text-zinc-500 mt-2 tracking-widest uppercase">
                {data.startDate.toString()} - {data.endDate.toString()}
              </small>
              <p className="text-base text-zinc-400 my-4">{data.description}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

To view the component, you can import it into the home page:

// Note: This is a truncated version of the home page (app/page.tsx) file to illustrate how the Job component is declared.

import { getProfile } from "@/sanity/sanity.query";
import type { ProfileType } from "@/types";
import HeroSvg from "./icons/HeroSvg";
import Job from "./components/Job"; // import job component

export default async function Home() {
  const profile: ProfileType[] = await getProfile();

  return (
    <main className="max-w-7xl mx-auto lg:px-16 px-6">
      <section> // code truncated for brevity
        <HeroSvg />
      </section>
      <Job /> // declare job component
    </main>
  );
}

Here's the resulting output:

work experience section

By now, you should have a clear understanding of the necessary steps to showcase content with Sanity: Create schema file, > Query the dataset > Display the content in your application.

Let's now focus on configuring data for dynamic routes in your application and leveraging it to construct the projects page.

Project Schema

As always, you'll start by creating the schema file:

touch schemas/project.ts

Here's the code for the schema fields:

import { BiPackage } from "react-icons/bi";
import { defineField } from "sanity";

const project = {
  name: "project",
  title: "Project",
  description: "Project Schema",
  type: "document",
  icon: BiPackage,
  fields: [
    {
      name: "name",
      title: "Name",
      type: "string",
      description: "Enter the name of the project",
    },
    defineField({
      name: "tagline",
      title: "Tagline",
      type: "string",
      validation: (rule) => rule.max(60).required(),
    }),
    defineField({
      name: "slug",
      title: "Slug",
      type: "slug",
      description:
        "Add a custom slug for the URL or generate one from the name",
      options: { source: "name" },
      validation: (rule) => rule.required(),
    }),
    {
      name: "logo",
      title: "Project Logo",
      type: "image",
    },
    {
      name: "projectUrl",
      title: "Project URL",
      type: "url",
    },
    {
      name: "coverImage",
      title: "Cover Image",
      type: "image",
      description: "Upload a cover image for this project",
      options: { hotspot: true },
      fields: [
        {
          name: "alt",
          title: "Alt",
          type: "string",
        },
      ],
    },
    {
      name: "description",
      title: "Description",
      type: "array",
      description: "Write a full description about this project",
      of: [{ type: "block" }],
    },
  ],
};

export default project;

Next, expose the schema to the schemaTypes array:

import job from "./job";
import profile from "./profile";
import project from "./project";

export const schemaTypes = [profile, job, project];

Visit your studio, click the project schema, and add as many projects as you want. You can download the asset files used for each project from the repository.

Sanity studio showing project schema fields

Here's the query to get all the projects:

// sanity/sanity.query.ts

export async function getProjects() {
  return client.fetch(
    groq`*[_type == "project"]{
      _id, 
      name,
      "slug": slug.current,
      tagline,
      "logo": logo.asset->url,
    }`
  );
}

Next, add the types.

// types/index.ts

export type ProjectType = {
  _id: string;
  name: string;
  slug: string;
  tagline: string;
  projectUrl: string;
  logo: string;
  coverImage: {
    alt: string | null;
    image: string;
  };
  description: PortableTextBlock[];
};

And then display the content in your front-end.

mkdir app/projects && touch app/projects/page.tsx

This will create a page.tsx file inside a directory called project. Here's the code for the projects:

// app/projects/page.tsx

import Image from "next/image";
import Link from "next/link";
import { getProjects } from "@/sanity/sanity.query";
import type { ProjectType } from "@/types";

export default async function Project() {
  const projects: ProjectType[] = await getProjects();

  return (
    <main className="max-w-7xl mx-auto md:px-16 px-6">
      <section className="max-w-2xl mb-16">
        <h1 className="text-3xl font-bold tracking-tight sm:text-5xl mb-6 lg:leading-[3.7rem] leading-tight">
          Featured projects I&apos;ve built over the years
        </h1>
        <p className="text-base text-zinc-400 leading-relaxed">
          I&apos;ve worked on tons of little projects over the years but these
          are the ones that I&apos;m most proud of. Many of them are
          open-source, so if you see something that piques your interest, check
          out the code and contribute if you have ideas for how it can be
          improved.
        </p>
      </section>

      <section className="grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5 mb-12">
        {projects.map((project) => (
          <Link
            href={`/projects/${project.slug}`}
            key={project._id}
            className="flex items-center gap-x-4 bg-[#1d1d20] border border-transparent hover:border-zinc-700 p-4 rounded-lg ease-in-out"
          >
            <Image
              src={project.logo}
              width={60}
              height={60}
              alt={project.name}
              className="bg-zinc-800 rounded-md p-2"
            />
            <div>
              <h2 className="font-semibold mb-1">{project.name}</h2>
              <div className="text-sm text-zinc-400">{project.tagline}</div>
            </div>
          </Link>
        ))}
      </section>
    </main>
  );
}

Here's the resulting output:

project page

Display Dynamic Routes

Each project card is wrapped in a link that points to their respective page based on the slug: /projects/${project.slug}. With this, the dynamic component can be easily created in next.js

Create a folder called [project] (wrapped in square brackets) inside the projects directory, and add a page.tsx file.

You can also do this via the terminal:

mkdir app/projects/[project] && touch app/projects/[project]/page.tsx

This folder enclosed in square brackets is known as a dynamic segment in Next.js, and it allows the component to be mounted based on the params property.

Since you've already created the project schema type, all that's left is to query the dataset to fetch single projects.

Here's the query to get single projects:

// sanity/sanity.query.ts

export async function getSingleProject(slug: string) {
  return client.fetch(
    groq`*[_type == "project" && slug.current == $slug][0]{
      _id,
      name,
      projectUrl,
      coverImage { alt, "image": asset->url },
      tagline,
      description
    }`,
    { slug }
  );
}

To fetch the slug from the route, we've added a parameter called slug into the function, which will allow the getSingleProject function to be called with the respective slug using the Next.js params property.

// app/projects/[project]/page.tsx

import Image from "next/image";
import { Metadata } from "next";
import { getSingleProject } from "@/sanity/sanity.query";
import type { ProjectType } from "@/types";
import { PortableText } from "@portabletext/react";
import fallBackImage from "@/public/project.png";

type Props = {
  params: {
    project: string;
  };
};

// Dynamic metadata for SEO
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const slug = params.project;
  const project: ProjectType = await getSingleProject(slug);

  return {
    title: `${project.name} | Project`,
    description: project.tagline,
    openGraph: {
      images: project.coverImage?.image || "add-a-fallback-project-image-here",
      title: project.name,
      description: project.tagline,
    },
  };
}

export default async function Project({ params }: Props) {
  const slug = params.project;
  const project: ProjectType = await getSingleProject(slug);

  return (
    <main className="max-w-6xl mx-auto lg:px-16 px-8">
      <div className="max-w-3xl mx-auto">
        <div className="flex items-start justify-between mb-4">
          <h1 className="font-bold lg:text-5xl text-3xl lg:leading-tight mb-4">
            {project.name}
          </h1>

          <a
            href={project.projectUrl}
            rel="noreferrer noopener"
            className="bg-[#1d1d20] text-white hover:border-zinc-700 border border-transparent rounded-md px-4 py-2"
          >
            Explore
          </a>
        </div>

        <Image
          className="rounded-xl border border-zinc-800"
          width={900}
          height={460}
          src={project.coverImage?.image || fallBackImage}
          alt={project.coverImage?.alt || project.name}
        />

        <div className="flex flex-col gap-y-6 mt-8 leading-7 text-zinc-400">
          <PortableText value={project.description} />
        </div>
      </div>
    </main>
  );
}

Since the data coming from the dataset is a single project and not an array, no de-structuring is required.

Here's the resulting output:

Dynamic project page

Add Loading States

Next.js 13 introduced a special file loading.js that helps you create an instant loading state from the server while the content of a route segment loads. This helps users understand the app is responding and provides a better user experience.

With this special file, you can create a loading state that mimics the UI of the single project page easily.

Create a loading.tsx file inside the [project] directory and add the code snippet:

// projects/[project]/loading.tsx

export default function Loading() {
  return (
    <div className="max-w-3xl mx-auto lg:px-0 px-8">
      <div className="flex items-center justify-between mb-6">
        <span className="w-52 h-11 bg-[#1d1d20] rounded-sm animate-pulse"></span>
        <span className="w-20 h-11 bg-[#1d1d20] rounded-sm animate-pulse"></span>
      </div>
      <div className="w-full h-96 mb-8 bg-[#1d1d20] rounded-sm animate-pulse"></div>
      <div className="flex flex-col gap-y-2">
        <span className="w-full h-5 bg-[#1d1d20] rounded-sm animate-pulse"></span>
        <span className="w-full h-5 bg-[#1d1d20] rounded-sm animate-pulse"></span>
      </div>
    </div>
  );
}

Here's the resulting output:

dynamic project page showing next.js instant loading state

Fix Studio Layout

You may have noticed the navbar and footer components are showing up in the studio route. This is because these components we're defined in the root layout —which applies to all routes in the application.

navbar and footer components in studio page

To fix this, you'll have to create a separate layout.tsx file for the studio component:

Create two folders wrapped in parenthesis inside the app directory. Name one folder (site), and the other (studio). These folders are wrapped in parenthesis to prevent Next.js from mounting them as routes.

Move all the files in the app directory that relates to the next app except the studio folder, global.css and favicon.ico into the (site) directory, and then move the studio folder inside the (studio) directory.

The only files that will live in the app root is global.css and favicon.ico.

Here's what your new folder structure should look like:

app/
├── (site)/
│   ├── about/
│   ├── components/
│   ├── icons/
│   ├── projects/
│   ├── layout.tsx
│   └── page.tsx
├── (studio)/
│   └── studio/
├── favicon.ico
└── global.css

Once completed, create a layout.tsx file inside the (studio) directory and paste the following code snippet inside:

import "../globals.css";

export default function StudioLayout({children}: {children: React.ReactNode}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Update all the imports that may have changed, run your server again and you should see your studio up and running, without the components.

Studio page without navbar and footer components

Step 7: Deployment

Deploying a Sanity powered Next.js application is a pretty straightforward process. Follow this guide to set-up your account and deploy with Vercel.

After successfully deploying your site, visit the studio route; your-site-name/studio, and you should get a prompt to add the URL to the CORS setting in Sanity:

Sanity CORS settings prompt

Simply click "continue" and follow the on-screen instructions to do so. If successful, you should be able to see your studio.

Setup Sanity Webhooks for Studio Update

Updates made to your site would be triggered only on build time. What this means is that if you update a field in your studio using the hosted link, you would have to manually trigger a deployment on Vercel to see the changes.

Having to trigger the deployment server each time can be a cumbersome task, especially when building for a client.

In this section, I'll guide you through the steps to manually deploy your site whenever a change is made to your studio using Sanity GROQ-powered Web Hooks.

Create a Deploy Hook on Vercel

First, you will need the URL endpoint from your hosting service to trigger the deployment.

Navigate to your project settings on Vercel and click the Git tab. Under the Deploy Hooks section, choose a name for your hook and the select the branch that will be deployed when the generated URL is requested.

creating the hook

Submit the form and copy the URL endpoint generated by Vercel.

Trigger Hook Using Sanity GROQ-powered Webhooks

Visit sanity.io/manage, pick your project, navigate to the API section and click on the "Create webhook" button.

Sanity GROQ-powered Webhooks

Fill in the form with information about the hook you want to create.

• Name: Portfolio Deployment.
• Description: Trigger rebuild when portfolio content is created, updated, and deleted.
• URL: [Paste the URL endpoint generated by Vercel here].
• Dataset: The dataset to apply the hook to.
• Trigger on: Check the "create", "update", and "delete" boxes.

Leave filter and projection inputs blank so the hook will be applied to all documents, and for the rest of the fields, leave it as is and hit save.

sanity groq powered hook created

Now visit your hosted studio and update any document. Once you click publish, this should trigger the deploy hook and update your site when completed.

deploy hook triggering deployment on Vercel

Another good alternative to setting up live updates in your Sanity/Next.js app is using Incremental Static Regeneration (ISR), which is a better option if you're building a large scale application.

And that's it! You can see the Live Preview here and find the GitHub URL here.

What Next?

Although this tutorial covered a lot of useful information, there are still many more possibilities with Sanity that you can explore.

You can customize your studio, integrate third-party APIs, build a storefront with Shopify, and much more.

If you found this article enjoyable and want to dive deeper into the world of Sanity, I recommend checking out the following resources:

• Customizing the Portable Text Editor
• How to Create a Singleton Document
• Syntax Highlight Code Block

Thanks for reading. Share, and subscribe to my blog for future updates.

GitHub | Twitter | Blog | LinkedIn

It's not a big secret that building a developer portfolio can greatly increase your chances of getting hired.

Everyone tells you that. But, they don't always tell you what makes a good one.

You see, many portfolios are generic and rather uninspiring. If your portfolio looks just like everyone else's, then how can you expect it to stand out?

Well, it won't stand out.

But don't worry – I've been there. My first portfolio was bland, uninspiring, and had many of the not-to-do's I talk about in this post.

However, I'm an ex-marketer, turned developer, I know how to make something stand out. I've made ad campaigns that have skyrocketed sales and had people talking. I realized I needed to think like a marketer to make my portfolio stand out.

The good news is that the same principles can be applied to your portfolio to level it up. If you read this guide and implement the tips, you'll raise your portfolio above the sea of other junior developers trying to stand out.

Before we launch into the five tips to level up your portfolio, let's just make sure we are on the same page.

What is a portfolio?

A portfolio is a way for you to showcase who you are, what skills you have, and most importantly the work you've done.

As a developer, your portfolio is going to be in the form of a website. The main goal of this website is to showcase yourself and your work in the best way possible.

It needs to make you stand out and it needs to make employers think "Whoa! I'd like to work with this person". Ultimately it will need to show them that you could be awesome to work with so they are compelled find out more about you.

A portfolio should therefore include some standard elements. Below are the bare minimum elements your portfolio must include.

The bare minimum of a portfolio

These are the non-negotiables of any developer portfolio:

1. Responsive design (learn about how to do that here)
2. Projects showcasing your work
3. An "about me" section or somewhere people reading your site can learn about you
4. Your portfolio needs to be accessible
5. Your portfolio should have a custom domain. Buy a domain name – you can get them for less than $10. Don't send people to 39238834.netfily.com
6. A way for people to contact you, preferably your email

If you have these six non-negotiables on your portfolio, you are off to a good start.

Now let's look at five ways you can level up your portfolio, starting with a non-obvious one.

Five things you can do to level up your developer portfolio

1. Know your target audience

One area that can help level up your portfolio is knowing exactly what the purpose of your portfolio is. That is, who is this portfolio for?

If I asked you what the purpose of your portfolio was, does the output match that? Let's say, for example, the purpose of your portfolio is to land your first junior developer role. Then your portfolio is going to look very different from someone who is looking to be a freelance web developer.

Therefore the first thing you need to do is ask what is the purpose of your portfolio. Start broad and then try to refine it. Keeping with the junior developer role example, you could refine it down to a junior frontend developer specializing in React.

If you are a junior frontend developer, then your portfolio won't need things like the generic skill cards below.

These cards are better suited for someone who is looking for freelance work.

When you know the purpose of your portfolio, you can better tailor the information to communicate why someone should help you achieve your purpose.

2. Level up your project details

This is the most important section of your portfolio, and it is the one section I often see that is not well-executed.

If you browse something like r/webdev and search "portfolio" let me tell you what you're going to see if you click 90% of those portfolios and look at projects. You're going to see a calculator app, a weather app, tic tac toe, a movie finder app, "insert big website" clone, and so on.

Now, don't get me wrong – these are useful projects for learning the skills they require. And people have spent time making them. The problem is that everyone builds the same stuff. You can often just follow along with a tutorial and create them without much thought.

There are two problems here.

The first is that you are not differentiating yourself. If I'm HR or the hiring manager why should I pick your calculator app over the other 30 in the inbox? Also, how can I trust that you built this thing yourself and that you didn't just copy/paste code from a tutorial?

The second is that most people just put the project in, link to the GitHub repo, and maybe a live demo. This doesn't tell the person who is potentially going to hire you a lot, and it doesn't give them much reason to employ you over everyone else who has done the same.

So then, how do you make your projects section stand out? Let's look at a few ways you could level up the projects section of your portfolio.

Add original projects

You don't have to reinvent the wheel or make the next great social media application. But it would be great if you tried to use a different API instead of the standard weather API.

You could for instance create a surf report app that is the same as a weather app but instead you are calling different endpoints. This shows me that you know how to call an API outside of a tutorial.

If you're not sure how to make your own original project then check out this guide on how to plan and build a programming project for beginners.

Give some details about the project

The first problem is that many projects are unoriginal. The second is that most people don't give more than the basic details about the project.

What will make you stand out is giving some details about your project. When I say details, what I mean is give me a story about the project. The best portfolios I see tell me about the project don't just show it to me.

Try answering some of these questions.

• Why did you choose to build this project?
• What challenged you when making this project?
• What did you learn from making this project?
• What learnings have you taken with you into other projects?
• What would you do differently next time?
• Did you get stuck at any point? How did you get unstuck?
• What was your process for completing this project? Did you do wireframes, make a Trello board, or did you just get stuck into it?

If you answer these questions and craft them into a few succinct paragraphs, I will now know a lot more about your abilities as a developer. I can see what interests you, how you overcome challenges, how you learn from those challenges, and what skill level you are.

You're already well on your way to standing out if you follow this tip.

3. Remove Unnecessary Fluff from Your Portfolio

Sometimes the best thing you can do to improve your portfolio is to remove things.

You should remove things that add no value to your target audience and things that reduce your credibility.

Here is a list of things you to remove and why.

1. Step-by-step tutorial projects. These projects hurt your credibility. They are unoriginal, they don't show me what you can do. Rather, they show me that you can copy what someone else does.
2. Projects not related to development or the job you are trying to land. These just aren't relevant to your target audience.
3. If one of your Projects is the portfolio itself. Why get rid of this? The reason is that they are on your portfolio now. They are interacting with the project. So save space for another project.
4. Skill progress bars. While they look cool, they are bad. If you're a junior you probably know 10% JavaScript, would you want to represent that? What the heck does 80% CSS mean? If you remove one thing, please make it these.
5. If your portfolio is a carbon copy of someone else's portfolio – start over. It's not cool for starters. Plus, I want to see what you're capable of doing, not what you're capable of copying. It can come back to hurt you in the long run.

4. Give your about me some personality

There is this song by Paul Kelly called "Every F$*#%) City" and the general idea of the song is that every city is the same. Well, I've seen a lot of portfolio's and a lot of them look the same.

The section that often comes off as the same is the about me section. Let's look at an example below.

"Hi, my name's Jonny Lucky, a Full-Stack Web Developer from Example Town. I love building websites that solve life's unique problems.

I work primarily with MongoDB, Express, React, Node, and GraphQL and have set up countless WordPress and Shopify websites. My previous career was as an IT Consultant, E-commerce Business Owner, and Digital Marketer. I also really enjoy tinkering with CSS.

In my spare time, I play video games and also work out."

Hello Jonny Lucky, or was it Lucy Lovely? I forgot because I'm the HR person and I've read 50 of these portfolios and they are all very similar.

If I were to change your name, town, and tech stack, many of these candidates would just become one.

To be fair, there are some personal touches like the that they "play video games and also workout". But, guess what? A lot of other applicants also enjoy these things.

Can you see the problem, if you have an about me section like the above? You won't stand out and you'll come across as a little stiff.

Your about me needs to be a little bit spicy, it needs to show your personality and experience. Because your personality is different from other people, so your about me section should be too.

Let's have a look at mine to give you an idea of what you should be shooting for. I've gotten a few compliments on it.

"I'm an ex-marketer who loves building things with code.

I first became enthralled with programming in 2015. I was in San Francisco with my brother in law and he was telling me about this thing called Python and how it could automate things. As a person who looks for efficiencies, I was hooked.

I jumped right into Python on my flight back to Australia. Soon, I was automating my own things. I made a bot to book classes at the gym, one to send weekly reports to my boss and I even made one to like my girlfriend's content on Instagram. Unfortunately, that is as far as it went. Shortly after, I got promoted. So, I had less time to learn and I let programming fall by the wayside.

But, then Covid hit and suddenly I had more time without my commute. So, I started learning again. Specifically, I learned web development, as I had things I wanted to build for myself.

After a few months of self-teaching, I knew this was what I wanted to do for my career. So, I signed up for the coder academy Bootcamp and put my heart and soul into it. I was coding every day, late into the night, and on weekends. Until I was ready to be unleashed on production code.

Since the boot camp, I have grown as a developer, working alongside senior developers who have helped me raise my standards for what's expected of any web application.

I'm now seeking a full-time role where I can contribute my skills both in coding and business to help a company achieve their goals."

As you can see my about me section is unique to me. I'd say there isn't another soul on the planet who could write the same about me section without telling some lies.

Now, your about me section doesn't have to be zany, it can be professional. But, and this is a key point...

You need to make it interesting so the person reading it wants to continue reading it.

To make your about me section interesting, you can try things like stories and anecdotes. Try and weave them in with the key points you want to get across.

Another way to think of it is, if you are invited in for an interview would your about me be interesting enough that the person interviewing you would say "hey, I loved that story about X on your portfolio"? If it can do that you're winning because you've opened up more dialogue.

In the end, you're trying to spark interest in the person looking at your portfolio.

Think about it like this. If HR has 50 applications to get through, they are only going to interview 5 of those people.

If your about me section is a bland generic version like the first one, they are likely to just skim through it and onto your next section. If nothing else on your portfolio stands out, then they'll move on to the next application until something does jump out at them. You want to grab their attention and make them shift you to the interview pile.

Since most portfolios are generic, it doesn't take much to stand out. If you have less experience than someone else but their portfolio is generic and yours isn't, I'd argue you are more likely to get picked for an interview.

Why? Because we like to work with people we like, and if you show that you're an interesting unique person, I'd probably like to at least find out more about you.

5. Throw some Sprinkles on it

One of the most important lessons I was taught early on in my coding Bootcamp was that you need the doughnut before the sprinkles.

Looking at this analogy in regards to your portfolio, the doughnut is all the other things I have listed above. You need the baseline requirements of a portfolio like solid projects, an interesting about me section, and responsive design.

The sprinkles should come after you have all the basics. So, if you followed the tips above you have the doughnut. Now, you can start to make your portfolio shine.

Add things that make a prospective employer go wow! You can add amazing animations like Christopher Cherupil, cool transition effects like Philippe Neveu, or dark mode like Jhey Tompkins.

I added a Zelda-themed modal to make sure a prospective employer grabbed my résumé before they left my old portfolio site. I just made sure I had the basics first.

You can also go wild with your ideas, just make sure you execute them. You don't want unpolished sprinkles that could take away from your doughnut's main elements.

Summary

If you read this post and thought, oh man my portfolio is quite generic – don't fret. You now have 5 things you can do to level up your portfolio so that it moves from the "forgotten" pile to the "give this person an interview" pile.

I can frequently be found in portfolio advice threads on Reddit and Twitter trying to offer advice to people trying to break into the industry.

When you're done leveling up your portfolio, and you're looking for some feedback on it, make sure to Tweet it to me with a link to your site.

If you have a portfolio you're proud of or you're looking for feedback on it, follow me on twitter and tweet the link to me so I can look over it and give you some feedback.

If you have an awesome one I might even add it to my portfolios that pop list.

If you are a web developer or a web designer, it is essential for you to have a portfolio website. It lets you provide information about yourself and showcase your best work with your relevant skills and experience.

In this blog post, I will discuss some of the benefits of creating a portfolio website. Then I'll show you how to create a beautiful responsive portfolio website for yourself using HTML, CSS, JavaScript and Bootstrap version 5.

Here's an interactive scrim about how to create a portfolio website using HTML, CSS, JS, and Bootstrap 5:

Table Of Contents

• Benefits of having a portfolio website
• What is Bootstrap?
• Folder Structure
• How to Add a Navigation Menu to Your Portfolio
• How to Add a Hero Header to the Portfolio
• How to Make the About Section
• How to Make the Services Section
• How to Add Dark Background Color to Navbar on Page Scroll
• How to Build the Portfolio Section
• How to Build the Contact Section
• How to Build the Footer Section
• Adding Final Touches
• Conclusion

Benefits of having a Portfolio Website

Having a portfolio website has several benefits, including:

• it provides a platform to showcase your relevant skills and experience
• it shows your personality
• it lets hiring managers find you instead of you reaching out to them
• you are easily searchable on search engines like Google

What is Bootstrap?

Bootstrap is a popular front-end CSS framework which is used to develop responsive and mobile friendly websites. The latest release of Bootstrap is version 5. You can find the official documentation of Bootstrap 5 here.

Folder Structure

We will now start working on creating the portfolio website.

First, let's create the folder structure. You can get the project starter files on GitHub. Also, you can visit here to see the live demo of this project.

Project Folder Structure

The folder structure consists of index.html, style.css, and script.js files and an images folder. We'll write all CSS in the style.css file and the JavaScript in the script.js file .

In the index.html file, you can see the HTML boilerplate code with the Bootstrap CDN, font awesome kit, and a link to the external style sheet and JavaScript.

Here, the script.js file is loaded after loading all the HTML code.

How to Add a Navigation Menu to Your Portfolio

Now, let's work on adding a navigation menu in our project. It will help visitors find the relevant info they're looking for.

We will use Bootstrap's fixed-top class in nav element to keep the navbar at the top of the page. The navbar also has a navbar-brand class where we keep the name of the person as a brand.

<nav class="navbar navbar-expand-lg fixed-top navbarScroll">
        <div class="container">
            <a class="navbar-brand" href="#">Brad</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#portfolio">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>
                </ul>

            </div>
        </div>
    </nav>

The navbar has the following features:

• It has six links: home, about, services, portfolio, contact, and footer
• It has a transparent background. We will add a dark background on page scrolling later.
• It toggles on smaller devices

You can find more details regarding Bootstrap 5 navbar features here.

However, the navbar has a problem while scrolling. It's fully transparent throughout the page which causes readability issues. We will fix this issue after we complete the Services section to make you understand the issue properly.

How to Add a Hero Header to the Portfolio

Now, we will be adding a hero image with some text in the center. A hero image is a web design term which refers to a high quality full width image that displays the company or individual's main goals, a representative image, photo, or other eye-catching elements. It helps attract users to your site.

 <!-- main banner -->
    <section class="bgimage" id="home">
        <div class="container-fluid">
            <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hero-text">
                <h2 class="hero_title">Hi, it's me Brad</h2>
                <p class="hero_desc">I am a professional freelancer in New York City</p>
            </div>
            </div>
        </div>
    </section>

Also, let's add the CSS for the above code in the style.css file:

/* hero background image */
.bgimage {
    height:100vh;
    background: url('images/heroImage.jpeg');
    background-size:cover;
    position:relative;
}
/* text css above hero image*/
.hero_title {
    font-size: 4.5rem;
}
.hero_desc {
    font-size: 2rem;
}
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

Here we can see that the section has an id named bgimage which is responsible for displaying the background hero image with full width. It also displays some text in the center above the background image with the help of the above CSS.

This is how the site looks so far with the navbar and the hero section:

Hero Image with Navbar

How to Make the About Section

The About page contains important information about you and your background. Visitors to your portfolio site can get to know you through the information you provide in this page.

We will be adding an image to the left side of the row, and on the right side we will add our quick introduction in this section. Let's demonstrate it using the code below:

<!-- about section-->
    <section id="about">
        <div class="container mt-4 pt-4">
            <h1 class="text-center">About Me</h1>
            <div class="row mt-4">
                <div class="col-lg-4">
                    <img src="images/about.jpeg" class= "imageAboutPage" alt="">
                </div>

                <div class="col-lg-8">
                    <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged

                    </p>
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <ul>
                                <li>Name: David Parker</li>
                                <li>Age: 28</li>
                                <li>Occupation: Web Developer</li>

                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul>
                                <li>Name: David Parker</li>
                                <li>Age: 28</li>
                                <li>Occupation: Web Developer</li>

                            </ul>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                        </p>
                    </div>
                </div>
            </div>
    </section>

Let's add some CSS for the left side image:

/* about section image css */
.imageAboutPage {
    width: 100%;
}

This will create an about section. You can modify the content based on your use cases. We have added classes named mt-4 and pt-4 with container class which will set the margin top and padding top to 1.5 rem.

The row has two columns. One has the col-lg-4 class for displaying the image which will occupy the left column with a 4-part grid for large screens.

The next column is assigned a class of col-lg-8 which will occupy the right column with an 8-part grid for larger screens. For medium and small screens they will overlap with each other which we can see in the below GIF file:

About Section

How to Make the Services Section

This section helps convert website visitors into potential clients. This is where you explain what specific services you offer, and where you niche down your offered services.

Let's add the code for this section and describe it below:

<!-- services section-->
    <section id="services">
        <div class="container">
            <h1 class="text-center">Services</h1>
            <div class="row">
                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class="fas servicesIcon fa-clock"></i>
                            <h4 class="card-title mt-3">Website Development</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>
                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class='fas servicesIcon fa-layer-group'></i>
                            <h4 class="card-title mt-3">Website Design</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class='far servicesIcon fa-check-circle'></i>
                            <h4 class="card-title mt-3">Website Deployment</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>
            </div>

            <div class="row">
                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class='fas servicesIcon fa-search'></i>
                            <h4 class="card-title mt-3">SEO</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class='fas servicesIcon fa-shield-alt'></i>
                            <h4 class="card-title mt-3">DevOps</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card servicesText">
                        <div class="card-body">
                            <i class='fas servicesIcon fa-wrench'></i>
                            <h4 class="card-title mt-3">QA</h4>
                            <p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the card's content.
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
    </section>

Since this website is targeted towards web developers and designers, I've included some of the services which a web developer or designer might offer.

We have used bootstrap cards to display services. Our services section has 2 rows and 3 columns each. For large screens with a width greater than or equal to 992px, three cards are displayed in a row. For screens less than 992px wide, only a single card is displayed in a row.

You can find more about bootstrap breakpoints here.

Also, there are fonts added in each card to make them look better.

Without CSS, the services section would look like this :

So, let's add some CSS to increase the font icon font size and card height and add some extra color when a user hovers over a card.

/* services section css */
.servicesText.card {
    height: 280px;
    cursor: pointer;
  }
.servicesIcon {
    font-size: 36px;
    text-align: center;
    width: 100%;
}
.card-title {
    text-align: center;
}
.card:hover .servicesIcon {
    color: #008000;
}
.servicesText:hover {
    border: 1px solid #008000;
}

This is how our services section looks now:

Services

How to Add Dark Background Color to Navbar on Page Scroll

If you look into the above gif properly you will see that the navbar is transparent throughout the page which causes readability issues. So let's work on fixing this issue.

We will write some JavaScript and CSS in order to resolve this problem. We will add a navbarDark class in order to show a dark background color for the navbar on page scroll.

For that we need to go to the script.js file and add the following code:

// add class navbarDark on navbar scroll
const header = document.querySelector('.navbar');

window.onscroll = function() {
    var top = window.scrollY;
    if(top >=100) {
        header.classList.add('navbarDark');
    }
    else {
        header.classList.remove('navbarDark');
    }
}

Now, let's break down the above code:

• The header holds the value of the nav element since the querySelector method returns the first element that matches the CSS selector (which is .navbar in this case).
• window.onscroll fires up when the scroll event happens.
• window.scrollY returns the number of pixels that the document is scrolled vertically and its value is assigned to a variable named top.
• If the value of top is greater than or equal to 100, it adds a class of navbarDark to the header.

Let's quickly add CSS for the navbarDark class. For that, go to your style.css file and add the following code:

/* display background color black on navbar scroll */
.navbarScroll.navbarDark {
    background-color: black;
}

This is how the navbar will look now:

Dark background color on Navbar on page scroll

How to Build the Portfolio Section

This section includes your best work. People can see what you are capable of doing, and showcasing strong past work will definitely attract more potential clients or recruiters. So only add your best work in this section.

We will use Bootstrap cards to display the portfolio projects. There will be 2 rows and each row will have 3 columns of cards.

This will be the code for portfolio section:

<!-- portfolio section-->
    <section id="portfolio">
        <div class="container mt-3">
            <h1 class="text-center">Portfolio</h1>
            <div class="row">
                <div class="col-lg-4 mt-4">
                    <div class="card">
                        <img class="card-img-top" src="images/portfolioImage1.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">YouTube Clone</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card portfolioContent">
                        <img class="card-img-top" src="images/portfolioImage4.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">Quiz App</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card portfolioContent">
                        <img class="card-img-top" src="images/portfolioImage3.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">Product Landing Page</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-lg-4 mt-4">
                    <div class="card portfolioContent">
                        <img class="card-img-top" src="images/portfolioImage4.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">Messaging Service</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card portfolioContent">
                        <img class="card-img-top" src="images/portfolioImage1.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">Twitter Clone</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mt-4">
                    <div class="card portfolioContent">
                        <img class="card-img-top" src="images/portfolioImage4.jpg" alt="Card image" style="width:100%">
                        <div class="card-body">
                            <h4 class="card-title">Blog App</h4>
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="text-center">
                                <a href="#" class="btn btn-success">Link</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>