Building a Carousel View Portfolio Component in React.js and TypeScript

Example from https://abrahamahn.com/

View the full example on my website: https://abrahamahn.com/

Building a Carousel View Portfolio Component in React.js and TypeScript: A Comprehensive Guide

In the competitive world of software engineering and web development, standing out is paramount. One of the most effective ways to demonstrate your unique skill set to potential employers is through a well-designed portfolio. It serves as a tangible proof of your abilities, showcases your personal style, and highlights your grasp of contemporary technologies. Today, we will be using React.js and TypeScript to create an interactive portfolio component that adds a distinct appeal to your professional showcase.

React.js, a popular JavaScript library renowned for its efficient, reusable components, empowers developers to build intricate user interfaces without sacrificing performance. Combining this with TypeScript, a statically typed superset of JavaScript, we ensure type safety and improved maintainability, making our code more robust and easier to refactor. Today’s example is a carousel view portfolio component: a visually appealing, dynamic way to showcase your projects.

By following this guide, you’ll not only walk away with a component to boost your portfolio’s user experience but also gain a deeper understanding of React.js and TypeScript, thus refining your programming prowess.

Part 1: Understanding The Component Structure

Before we dive into the process, let’s clarify what we’re aiming to build. Our objective is a portfolio section, embedded on a webpage, that offers a carousel view. Each slide of this carousel represents a unique portfolio item, featuring project details such as the project link, an image, a brief description, the date it was posted, and relevant categories.

Part 2: Preparing The Ground

To get started, ensure Node.js and yarn are installed on your machine. You should also set up a new React project if one isn’t ready. For this guide, we’re considering a TypeScript-included project.

Part 3: Laying the Foundation with TypeScript Interfaces

Our first significant step is defining the structure of the data we’re dealing with. We’ll use two interfaces for this task: PortfolioProps and PortfolioItem. PortfolioProps is a straightforward interface, holding the reference to the div element containing our portfolio section. On the other hand, PortfolioItem represents a more complex interface that dictates the structure of each portfolio item:

interface PortfolioProps {
  portfolioSectionRef: React.RefObject<HTMLDivElement>;
}

interface PortfolioItem {
  link: string;
  image: string;
  alt: string;
  title: string;
  description: string;
  postedDate: string;
  categories: string[];
}

Part 4: Constructing a List of Portfolio Items

Following the interfaces, we establish an array of PortfolioItem, serving as a repository for our portfolio data. While this data could be fetched from an API or a database, for the sake of simplicity, we're going to hardcode it:

const portfolios: PortfolioItem[] = [
  // Portfolio items here.
];

// This is one of my portfolio example in a JSON format.
  {
    link: "https://auto-connect.netlify.app/",
    image: "assets/portfolio/auto-connect.jpg",
    alt: "Auto Connect",
    title: "Front-end Development",
    description:
      "Auto Connect is a mobile-first web application that presents a carousel view of used cars for sale, allowing users to browse and filter through various categories.",
    postedDate: "2022-12-15",
    categories: ["Web Dev", "UX", "Frontend"],
  }

Part 5: Building The Portfolio Component

Having laid the groundwork, we proceed to construct the Portfolio functional component:

const Portfolio: React.FC<PortfolioProps> = ({ portfolioSectionRef }) => {
  // Component code will be added here.
};

Part 6: Rendering the Carousel View

The crucial part of the Portfolio component is rendering the carousel. It does this by iterating through the list of portfolio items and constructing a carousel item for each one:

return (
  <div className="portfolio" id="portfolio" ref={portfolioSectionRef}>
    <div className="portfolio_container">
      <div className="title">
        <h3>Portfolio</h3>
      </div>
      <div className="carousel_container">
        {portfolios.map((portfolio, index) => (
          // Carousel item will be constructed here.
        ))}
      </div>
    </div>
  </div>
);

Each carousel item will encompass an image, a title, a description, the posting date, and a list of relevant categories. To provide a link to the actual portfolio project, we wrap the image in an anchor tag:

<div key={index} className="carousel">
  <div className="image_container">
    <a href={portfolio.link} target="_blank" rel="noreferrer" className="details">
      <img className="image" src={portfolio.image} alt={portfolio.alt} />
    </a>
  </div>
  // Additional information about the portfolio item will be added here.
</div>

We continue to fill out the rest of the carousel item:

<div className="info_container">
  <div className="info_top">
    <div className="info_top_inner">
      <h3 className="title">{portfolio.title}</h3>
      <p className="date">
        {new Date(portfolio.postedDate).toLocaleDateString("en-US", {
          year: "numeric",
          month: "short",
          day: "numeric",
        })}
      </p>
      // Link and categories will be added here.
    </div>
  </div>
  <p className="description">{portfolio.description}</p>
</div>

For the link, we extract the domain from the URL using a regular expression, and for the categories, we use a map function to render a span for each category:

{portfolio.link && (
  <p className="domain">
    <a href={portfolio.link} target="_blank" rel="noreferrer" className="link">
      {
        portfolio.link.match(
          /(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/
        )?.[1]
      }
    </a>
  </p>
)}
<div className="category">
  {portfolio.categories.map((category, index) => (
    <span key={index} className={`category ${category}`}>
      {category}
    </span>
  ))}
</div>

Part 7: Styling the Carousel View

The final step is to add styling to our carousel view. You can use plain CSS, SCSS, or any other styling library you prefer. In our case, we’ve styled the component to have a certain layout, colors, and typography.

// Add your CSS code here.

That’s it! You’ve now built a carousel view portfolio component using React.js and TypeScript. This component provides a user-friendly way of displaying your work and enhances your portfolio’s overall presentation. As you continue to refine your skills, you can add more interactive features to this component, such as animation and responsiveness.

Remember, the key to becoming a successful software engineer lies in practice and curiosity. Keep building, keep exploring, and never stop learning!