Dev.to

How to Build a Portfolio Website with React

Every line of code you write in your portfolio demonstrates what you can build and how you think, solve problems, and stay current with modern web development practices. While a GitHub profile rich with contributions can be equally compelling, having both means you're maximizing your visibility to potential employers –and that's exactly what we'll help you achieve. In this step-by-step tutorial, you'll learn how to build a professional portfolio website using React and Tailwind CSS, with ButterCMS handling your content management.  By the end, you'll have learned how to build a portfolio website with React that showcases your projects and skills while being easy to maintain and update. Table of contents The portfolio we'll be building Tools you'll need to create your React portfolio Getting started: Setting up your React environment Create a basic React component structure for each section How to build the navigation bar How to build the Home component How to build the About component How to build a Skills component How to build a Works component How to build a Contact component How to manage your portfolio content with ButterCMS React portfolio websites you should take inspiration from React portfolio website templates to use if you’re in a hurry Closing thoughts The portfolio we'll be building In this tutorial, we'll build a modern React portfolio website with essential sections that every developer needs:  A home and about section to make a solid first impression   A skills showcase highlighting your technical expertise  A projects section featuring your best work and GitHub contributions  Smooth navigation between sections for a better user experience  A contact section to connect with potential employers  Note: Each section is built as a reusable React component, making your portfolio easy to maintain and update. You can find the complete code in this GitHub repo and follow along step by step.  Below is a GIF showing what we will build in the tutorial: Tools you'll need to create your React portfolio To follow along with this tutorial, you need to have the following: Basic knowledge of React and Tailwind CSS Node.js and Git installed on your system A code editor for writing and editing our code—I recommend using VS code, you can download it here. Below are the tools and platforms we will use to build and deploy our portfolio website: ButterCMS: Rather than hardcoding your portfolio content, we'll use this headless CMS to make your portfolio content dynamic and easy to update. With Butter, you can update your projects without touching code, manage your skills and experience through a user-friendly dashboard, and deploy content changes instantly. Start your free 14-day trial to follow along!  Tailwind CSS: Modern portfolios need to look professional across all devices. Tailwind's utility-first approach helps us build responsive layouts quickly, maintain consistent styling, create smooth hover effects and transitions, and customize the design to match your personal brand. React-scroll: First impressions matter. The react-scroll library helps create smooth scrolling between sections, giving your portfolio a polished, professional feel when visitors navigate through your work React Icons: A portfolio needs visual elements to engage visitors. React Icons gives us access to social media icons for your profiles, tech stack icons for your skills section, and UI icons for navigation and interaction. Axios: Axios is a well-known library that is mostly used to send asynchronous HTTP queries to REST endpoints. When performing CRUD activities, this library comes in quite handy. Using this library, you can talk to the backend. To keep your portfolio dynamic, we'll use Axios to fetch your latest content from ButterCMS, keep your portfolio data up to date, and handle API requests efficiently. Getting started: Setting up your React environment A starter GitHub repository has been created, which already includes the images and data required for this tutorial. This GitHub repository also contains dependencies and configurations for Tailwind CSS and other dependencies such as Axios, React Icons, and React Scroll. Clone the Github repo by running the following in your terminal: git clone -b starter https://github.com/Tammibriggs/portfolio-butterCMS.git Afterward, navigate into the project directory with this command: cd portfolio-butterCMS Open the project in your code editor. If you're using Visual Studio Code, run the command code. in your terminal. You will see the following project folder structure: └── PORTFOLIO-BUTTERCMS/ ├── public ├── src ├── .gitignore ├── package-lock.json ├── package.json ├── postcss.config.js ├── README.md └── tailwind.config.js Next, open your terminal in your project’s directory and run the

Mar 13, 2025 - 20:42
 0
How to Build a Portfolio Website with React

Every line of code you write in your portfolio demonstrates what you can build and how you think, solve problems, and stay current with modern web development practices.

While a GitHub profile rich with contributions can be equally compelling, having both means you're maximizing your visibility to potential employers –and that's exactly what we'll help you achieve.

In this step-by-step tutorial, you'll learn how to build a professional portfolio website using React and Tailwind CSS, with ButterCMS handling your content management. 

By the end, you'll have learned how to build a portfolio website with React that showcases your projects and skills while being easy to maintain and update.

Table of contents

  • The portfolio we'll be building
  • Tools you'll need to create your React portfolio
  • Getting started: Setting up your React environment
  • Create a basic React component structure for each section
  • How to build the navigation bar
  • How to build the Home component
  • How to build the About component
  • How to build a Skills component
  • How to build a Works component
  • How to build a Contact component
  • How to manage your portfolio content with ButterCMS
  • React portfolio websites you should take inspiration from
  • React portfolio website templates to use if you’re in a hurry
  • Closing thoughts

The portfolio we'll be building

In this tutorial, we'll build a modern React portfolio website with essential sections that every developer needs: 

  • A home and about section to make a solid first impression  

  • A skills showcase highlighting your technical expertise 

  • A projects section featuring your best work and GitHub contributions 

  • Smooth navigation between sections for a better user experience 

  • A contact section to connect with potential employers 

Note: Each section is built as a reusable React component, making your portfolio easy to maintain and update. You can find the complete code in this GitHub repo and follow along step by step. 

Below is a GIF showing what we will build in the tutorial:

Portfolio landing page

Tools you'll need to create your React portfolio

To follow along with this tutorial, you need to have the following:

  • Basic knowledge of React and Tailwind CSS
  • Node.js and Git installed on your system
  • A code editor for writing and editing our code—I recommend using VS code, you can download it here.

Below are the tools and platforms we will use to build and deploy our portfolio website:

  • ButterCMS: Rather than hardcoding your portfolio content, we'll use this headless CMS to make your portfolio content dynamic and easy to update. With Butter, you can update your projects without touching code, manage your skills and experience through a user-friendly dashboard, and deploy content changes instantly. Start your free 14-day trial to follow along! 

  • Tailwind CSS: Modern portfolios need to look professional across all devices. Tailwind's utility-first approach helps us build responsive layouts quickly, maintain consistent styling, create smooth hover effects and transitions, and customize the design to match your personal brand.

  • React-scroll: First impressions matter. The react-scroll library helps create smooth scrolling between sections, giving your portfolio a polished, professional feel when visitors navigate through your work

  • React Icons: A portfolio needs visual elements to engage visitors. React Icons gives us access to social media icons for your profiles, tech stack icons for your skills section, and UI icons for navigation and interaction.

  • Axios: Axios is a well-known library that is mostly used to send asynchronous HTTP queries to REST endpoints. When performing CRUD activities, this library comes in quite handy. Using this library, you can talk to the backend. To keep your portfolio dynamic, we'll use Axios to fetch your latest content from ButterCMS, keep your portfolio data up to date, and handle API requests efficiently.

Getting started: Setting up your React environment

A starter GitHub repository has been created, which already includes the images and data required for this tutorial. This GitHub repository also contains dependencies and configurations for Tailwind CSS and other dependencies such as Axios, React Icons, and React Scroll.

Clone the Github repo by running the following in your terminal: 

git clone -b starter https://github.com/Tammibriggs/portfolio-butterCMS.git

Afterward, navigate into the project directory with this command: 

cd portfolio-butterCMS

Open the project in your code editor. If you're using Visual Studio Code, run the command code. in your terminal. You will see the following project folder structure:

    └── PORTFOLIO-BUTTERCMS/
        ├── public
        ├── src
        ├── .gitignore
        ├── package-lock.json
        ├── package.json
        ├── postcss.config.js
        ├── README.md
        └── tailwind.config.js

Next, open your terminal in your project’s directory and run the following command to install the project’s dependencies:

    npm install

Once all the project dependencies are installed, start the development server with this command:

    npm start

Once you run that command, your project will be up and running on localhost, and you will be provided a URL. You can visit the URL in your browser to view the project:

Terminal showing localhost running the project.

Create a basic React component structure for each section

When building a React portfolio project, starting with a clean component-based architecture structure sets you up for success. Think of components as building blocks –each section of your portfolio (Home, About, Skills, etc.) will be its own independent piece that you can develop, style, and update without affecting the others.

First, create a components folder in your src directory with these files:

    └── src/
        ├── assets/
        │   ├── code2.png
        │   └── me.png
        ├── components/
        │   ├── About.jsx
        │   ├── Contact.jsx
        │   ├── Home.jsx
        │   ├── Navbar.jsx
        │   ├── Skills.jsx
        │   └── Works.jsx
        ├── App.js
        ├── index.css
        └── index.js

Let's create a basic component structure. Here's how to set up your About component (the others will follow the same pattern):

    import React from 'react'

    function About() {
      return (
        <div>About</div> 
      )
    }
    export default About

In the About component, you are doing the following:

  • Importing the React library that is required for writing React components.

  • Defining a function called About(), which will serve as your React component that you will use as a reusable UI.

  • Defining what the About component will render on the screen in a return statement. For now, it simply returns a div element with an “About” text.

  • Exporting the About component to other parts of your React application.

Let’s apply the same approach to create the other components. In your Navbar.jsx file, add the following code that defines a Navbar()\ function with a div,\ which displays a “Navbar” text and exports your Navbar component:

    import React from 'react'

    function Navbar() {
      return (
        <div>Navbar</div> 
      )
    }
    export default Navbar

Create similar basic components for Navbar, Home, Skills, Works, and Contact. Each one should import React, define a functional component, and export it. 

Like this:

    import React from 'react'

    function Home() {
      return (
        <div>Home</div> 
      )
    }
    export default Home

Just change the name of the function and the export for the component you’re creating. Also, feel free to change the text within the

.

Now that we have our modular foundation, let's assemble these components in App.js. The order of components matters for both visual hierarchy and SEO:

    import About from './components/About';
    import Contact from './components/Contact';
    import Home from './components/Home';
    import Navbar from './components/Navbar';
    import Skills from './components/Skills';
    import Works from './components/Works';

    function App() {
      return (
        <div >
          <Navbar />
          <Home />
          <About />
          <Skills />
          <Works />
          <Contact />
        </div>
      );
    }

    export default App;

For styling, we are using a combination of Tailwind CSS utilities and custom styles. The base styles in index.css establish the foundation of our portfolio:

This modular approach offers several benefits:

  1. Maintainability: Each component can be updated independently.

  2. Reusability: Components can be reused across different projects.

  3. Organization: It’s easier to find and fix issues when code is separated.

  4. Collaboration: Different team members can work on different components.

For styling, we're using Tailwind CSS because it offers:

  • Rapid prototyping with utility classes

  • Consistent design system

  • Built-in responsive design

  • No context switching between files

Alternative styling approaches you could consider:

  • CSS Modules for better CSS scoping

  • Styled Components for CSS-in-JS

  • SASS for more structured CSS

  • CSS Frameworks like Material UI or Chakra UI

You can find the complete styling in the index.css file of the GitHub repo. I personally prefer Tailwind for portfolios because it allows quick iterations and maintains consistency across components, but choose what matches your workflow best.

Now that we've covered styling options, let's walk through building one of the most important components of your portfolio - the navigation bar.

How to build the navigation bar

Every great portfolio using React needs smooth navigation that just works. Since we're building a single-page application, we'll create a responsive nav bar that lets visitors jump between sections easily and includes quick links to your professional profiles.

This navigation code creates three key elements:

  1. A desktop menu with a smooth-scrolling section links

  2. A mobile-friendly hamburger menu that expands into a full-screen navigation

  3. A social sidebar with icons for your professional profiles

The code uses React's useState hook for menu toggling and react-scroll for smooth navigation, while Tailwind handles the responsive design and animations. You can find the complete code here:

    //Navbar.jsx

    // Import necessary dependencies
    import React, { useState } from 'react'; 
    // Import icons we'll use for our navbar
    import {
      FaBars,
      FaTimes,
      FaGithub,
      FaLinkedin,
    } from 'react-icons/fa';
    import { HiOutlineMail } from 'react-icons/hi';
    import { BsFillPersonLinesFill } from 'react-icons/bs';
    // Import Link for smooth scrolling between sections
    import { Link } from 'react-scroll';

    const Navbar = () => {
      // State to handle mobile menu toggle (open/closed)
      const [nav, setNav] = useState(false);
      const handleClick = () => setNav(!nav);

      return (
        // Main navbar container - fixed at top, full width
        <div className='fixed w-full h-20 flex justify-between items-center px-4 bg-slate-900 text-gray-300'>
          {/* Your logo or brand name */}
          <div>
            <h1 className='font-thin text-2xl italic font-serif'>TB</h1>
          </div>

          {/* Desktop Menu - hidden on mobile, flex on medium screens and up */}
          <ul className='hidden md:flex gap-x-8'>
            <li>
              <Link to='home' smooth={true} duration={500}>
                Home
              </Link>
            </li>
            {/* ... other menu items ... */}
          </ul>

          {/* Hamburger Icon - visible only on mobile */}
          <div onClick={handleClick} className='md:hidden z-10 cursor-pointer'>
            {!nav ? <FaBars size={20} /> : {20} />}
          </div>

          {/* Mobile Menu - full screen overlay */}
          <ul className={!nav ? 'hidden' : 'absolute top-0 left-0 w-full h-screen bg-slate-900 flex flex-col justify-center items-center'}>
            <li className='py-6 text-4xl'>
              <Link onClick={handleClick} to='home' smooth={true} duration={500}>
                Home
              </Link>
            </li>
            {/* ... other mobile menu items ... */}
          </ul>

          {/* Social icons - hidden on smaller screens, shown on large screens */}
          <div className='hidden lg:flex fixed flex-col top-[35%] left-0'>
            <ul>
              {/* LinkedIn - sliding animation on hover */}
              <li className='w-40 h-14 flex justify-between items-center ml-[-100px] hover:ml-[-10px] duration-300 bg-blue-600'>
                <a href="https://linkedin.com" className='flex justify-between items-center w-full text-gray-300 px-4'>
                  LinkedIn <FaLinkedin size={30} />
                </a>
              </li>
              {/* ... other social links ... */}
            </ul>
          </div>
        </div>
      );
    };

    export default Navbar;

How to build the Home component

First impressions matter - your Home component is the hero section that immediately tells visitors who you are and what you do.

The code below creates a responsive landing page with:

  • A compelling headline and introduction

  • Your professional photo

  • A stylish "About Me" button with hover animation

  • Smooth scrolling between sections

To personalize your home component, don’t forget to:

  1. Replace the placeholder text with your actual experience

  2. Update image import with your photo

  3. Adjust gradient colors to match your brand

Go to the Home.jsx file under src/components and implement this by updating your code with the following:

    //Home.jsx
    // Import required components and assets
    import React from 'react';
    import { HiArrowNarrowRight } from 'react-icons/hi'; // Arrow icon for button
    import me from '../assets/me.png'; // Your profile photo
    import { Link } from "react-scroll"; // For smooth scrolling

    const Home = () => {
     return (
       // Main container - full screen with dark background
       <div name="home" className="h-screen w-full bg-[#0a192f]">
         {/* Content wrapper - centers content and handles responsive layout */}
         <div className="max-w-screen-lg mx-auto flex flex-col items-center justify-center h-full px-4 md:flex-row">
           {/* Left side - Text content */}
           <div className="flex flex-col justify-center h-full">
             {/* Main headline */}
             <h2 className="text-4xl sm:text-7xl font-bold text-white">
               I'm a Full Stack Web Developer
             
             {/* Brief introduction */}
             

               I have 4 years of experience in graphics design and web development.
               Currently, I love to work on web application using technologies like
               React, Tailwind, Next.js and Mongodb.
             
             {/* About Me button with hover effect */}
             

               
                 About Me
{/* Right side - Profile image */}
my profile
); }; export default Home;