How to Make Portfolio Website in React JS

By
Asif Ali
-
0

Hey everyone let’s talk about how to make a portfolio website in React JS from scratch, recently I designed a fully responsive and clean portfolio website using React JS, let me share with you how you can develop it step by step. Making a portfolio website with React.js is a good way to show your expertise and initiatives.

Understanding the steps will be useful even without specializing in the coding particulars. Right here’s a piece of easy information to elucidate the method.

React.js is a JavaScript library for constructing personal interfaces. It’s widespread for its means to create dynamic, interactive websites. It’s particularly helpful for single-page functions, like a portfolio website, the place content material is displayed dynamically.

How to Make Portfolio Website in React JS

Let’s see how to use React to build a completely responsive website, I’m going to share a video tutorial that will help you to understand everything step by step practically. The video is helpful for you, you need to watch the video before moving the source codes of the project.

I hope you’ve watched the video and you’ve learned something new from the tutorial. Let’s look at the codes that are used to make a portfolio website in React JS.

A portfolio website must be simple to make use of, visually interesting, and environment-friendly. React helps make this potential as a result of:

Reusable elements: You possibly can set up your website into items just like the header, footer, and undertaking sections.

Sooner efficiency: React ensures fast updates once you make adjustments, bettering the person’s expertise.

Ease of updating: It’s simple so as to add new initiatives or sections without having to revamp the whole website.

Fundamental Pages and Sections

A typical portfolio website consists of some key pages and sections:

Delling Web page: Introduces who you are and what you do. It’s the primary impression, so it ought to be clear and easy.

About Web page: Provides guests with extra particulars about your background, expertise, and experiences.

Tasks/Portfolio Web page: Shows examples of your work, with descriptions or hyperlinks to the precise initiatives.

Contact Web page: Gives methods for guests to get in contact, both by e-mail, social media, or a Kindle.

Every one of those sections will be organized as elements in React. These elements will be reused and styled in a different way to fit your design.

You May Also Like:

First of all, you need to install the React App using vite, once you installed then you need to remove all the default codes inside the App.jsx file and paste the below-mentioned codes.

import React from "react";
import Navbar from "./Components/Navbar/Navbar";
import Showcase from "./Components/Showcase/Showcase";
import About from "./Components/About/About";
import CardCarousal from "./Components/CardCarousal/CardCarousal";
import Footer from "./Components/Footer/Footer";

function App() {
  return (
    <div className="container">
      <Navbar />
      <Showcase />
      <About />
      <CardCarousal />
      <Footer />
    </div>
  );
}

export default App;

Once you did that the next thing you need to make components that are used inside the App.jsx file. Here are the components codes that you need to paste it on your project.

import React from "react";
import "./navbar.css";

function Navbar() {
  return (
    <header>
      <div className="nav_wrapper">
        <div className="logo">
          <img src="/src/assets/logo.svg" alt="" />
        </div>
        <div className="nav_btn">
          <button>Free Consulation</button>
        </div>
      </div>
    </header>
  );
}

export default Navbar;

Once you used above mentioned codes then your navbar ready to display on the web page, but you need to add another components like showcase, about etc. Let’s look at the showcase codes.

import React from "react";
import "./showcase.css";
import ShowCaseContent from "./ShowCaseContent";

function Showcase() {
  return (
    <>
      <ShowCaseContent />

      <div className="showcase-box-wrapper">
        <div className="box-1">
          <div className="graphics">
            <p>Graphics Design</p>
            <img src="/src/assets/pattern-graphic-design.svg" alt="" />
          </div>
        </div>

        <div className="box-2">
          <div className="ui-app">
            <div className="ui">
              <p>UI/UX</p>
              <img src="/src/assets/pattern-ui-ux.svg" alt="" />
            </div>
            <div className="app">
              <p>App</p>
              <img src="/src/assets/pattern-apps.svg" alt="" />
            </div>
          </div>

          <div className="illustration">
            <p>Illustrations</p>
            <img src="/src/assets/pattern-illustrations.svg" alt="" />
          </div>
        </div>

        <div className="box-3">
          <div className="Photo">
            <p>Graphics Design</p>
            <img src="/src/assets/pattern-photography.svg" alt="" />
          </div>
          <div className="Motion">
            <p>Motion Graphics</p>
            <img src="/src/assets/pattern-motion-graphics.svg" alt="" />
          </div>
        </div>
      </div>
    </>
  );
}

export default Showcase;

After add Navbar and Showcase components your React website almost ready, but you need few more components such as About, Carousal and also Footer let’s see the about codes.

import React from "react";
import "./about.css";

function About() {
  return (
    <div className="about_wrapper">
      <div className="img-content">
        <img src="/src/assets/image-amy.webp" alt="" />
      </div>
      <div className="about-content">
        <h2>I’m Amy, and I’d love to work on your next project</h2>
        <p>
          I love working with others to create beautiful design solutions. I’ve
          designed everything from brand illustrations to complete mobile apps.
          I’m also handy with a camera!
        </p>
        <button>Free Consulation</button>
      </div>
    </div>
  );
}

export default About;

I hope you are following the codes that I’m going to share you, Let’s see two more components codes such as Carousal and Footer. First of All you need to use carousel codes.

import React from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "./card.css";

import image1 from "/src/assets/image-slide-1.jpg";
import image2 from "/src/assets/image-slide-2.jpg";
import image3 from "/src/assets/image-slide-3.jpg";
import image4 from "/src/assets/image-slide-4.jpg";
import image5 from "/src/assets/image-slide-5.jpg";

function CardCarousal() {
  return (
    <div className="slider_wrapper">
      <div className="content">
        <h2>My Work</h2>
      </div>

      <Swiper spaceBetween={50} slidesPerView={3}>
        <SwiperSlide>
          <img src={image1} />
        </SwiperSlide>
        <SwiperSlide>
          <img src={image2} />
        </SwiperSlide>
        <SwiperSlide>
          <img src={image3} />
        </SwiperSlide>
        <SwiperSlide>
          <img src={image4} />
        </SwiperSlide>
        <SwiperSlide>
          <img src={image5} />
        </SwiperSlide>
      </Swiper>
    </div>
  );
}

export default CardCarousal;

Last thing you need to do footer It’s not important but you need to use that to display copyright content etc inside the footer.

import React from "react";
import Navbar from "../Navbar/Navbar";
import "./footer.css";

function Footer() {
  return (
    <>
      <div className="top-footer">
        <div className="footer-content">
          <h2>Book a call with me</h2>
          <p>
            I’d love to have a chat to see how I can help you. The best first
            step is for us to discuss your project during a free consultation.
            Then we can move forward from there.
          </p>
        </div>
        <button>Free Consultation</button>
      </div>
      <Navbar />
    </>
  );
}

export default Footer;

Styling the Website

For a portfolio, visible design is essential. You should utilize CSS or libraries like Bootstrap or Materials-UI to model your website. With these, you can also make your portfolio look skilled without having to create all the things from scratch.

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

:root {
  --primaryColor: #755cde;
  --secondaryColor: #f6a560;
  --lightRed: #f39e9e;
  --darkOrange: #eb7565;
  --greenColor: #61c4b7;
  --purpleColor: #552049;
  --darkBlack: #030303;
  --GrayColor: #7a746e;
  --lightGray: #fff7f0;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

body {
  background-color: var(--lightGray);
  font-family: "Plus Jakarta Sans", sans-serif;
}

button {
  outline: none;
  border: none;
  background-color: var(--darkOrange);
  color: var(--lightGray);
  margin: 2rem 0;
  border-radius: 30px;
  padding: 0.7rem 1rem;
  font-family: inherit;
  cursor: pointer;
}

button:hover {
  background-color: var(--primaryColor);
}

I’m going to share with you each CSS file that I made for each component. Let’s see the navbar.css file.

header {
  padding: 2rem 0rem;
}

.nav_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav_wrapper button {
  outline: none;
  border: none;
  border-radius: 20px;
  background-color: var(--darkBlack);
  color: var(--lightGray);
  padding: 0.8rem 1.5rem;
  font-family: inherit;
}

After adding the index.css and navbar.css codes then you are the React website fully designed, but you need to few more CSS codes that are used to display another section.

.show-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  margin-top: 4rem;
}

.show-wrapper h2 {
  font-size: 4rem;
}

.show-wrapper p {
  font-size: 1.1rem;
  line-height: 1.6;
  width: 50%;
  text-align: center;
}

/* ===============Showcase boxes */
.showcase-box-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 2rem;
  margin: 4rem 0;
  height: 270px;
  margin-top: 6rem;
}

.box-1 {
  background-color: var(--primaryColor);
  border-radius: 5px;
  padding: 1rem;
  height: 100%;
}

.box-1 .graphics {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.box-1 .graphics p {
  color: var(--lightGray);
  font-size: 1.2rem;
}

.box-2 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.box-2 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.box-2 .ui-app {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
}

.box-2 .ui-app .ui,
.box-2 .ui-app .app {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  padding: 1rem;
  border-radius: 5px;
  color: var(--lightGray);
  height: 100%;
}

.box-2 .ui-app .ui {
  background-color: var(--secondaryColor);
}

.box-2 .ui-app .app {
  background-color: var(--lightRed);
}

.box-2 .illustration {
  background-color: var(--darkOrange);
}

.box-3 .Photo,
.box-3 .Motion,
.box-2 .illustration {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-radius: 5px;
  color: var(--lightGray);
}

.box-3 .Photo {
  background-color: var(--greenColor);
  height: 100%;
}

.box-3 .Motion {
  background-color: var(--purpleColor);
  height: 100%;
}

.box-3 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  width: 100%;
}

Let’s see the that CSS codes that are used to design the Footer.

.about_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8rem;
  gap: 6rem;
}

.img-content {
  width: 70%;
}

.img-content img {
  object-fit: cover;
  width: 100%;
}

.about-content h2 {
  font-size: 3rem;
  margin: 2rem 0;
}

.about-content p {
  font-size: 1.1rem;
  line-height: 1.5rem;
  text-align: justify;
}

After that, you need to use a few more CSS files such as carousel and footer. Let’s see the carousel CSS codes on below.

.slider_wrapper {
  margin: 6rem 0;
}

.content h2 {
  font-size: 4rem;
  margin: 4rem 0;
  text-align: center;
}

.slider_wrapper img {
  object-fit: cover;
  border-radius: 5px;
  width: 450px;
}

Finally, you need to use footer CSS codes for design the footer. It’s final CSS file.

.top-footer {
  background-color: var(--darkBlack);
  color: var(--lightGray);
  border-radius: 5px;
  height: 300px;
  padding: 4rem;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-content {
  width: 40%;
}

.footer-content h2 {
  font-size: 3rem;
  margin-bottom: 2rem;
}

.footer-content p {
  line-height: 1.8;
}

Responsive Design

React makes it simple to make sure your portfolio appears to be nice on any system. This implies your website ought to be responsive, adapting to totally different display screen sizes, whether or not considered on a cell phone, pill, or desktop. Fashionable CSS frameworks supply built-in responsiveness options that work nicely with React.

@media (max-width: 768px) {
  .show-wrapper h2 {
    font-size: 3rem;
  }

  .show-wrapper p {
    width: 70%;
    text-align: center;
  }

  /* ===============Showcase boxes */
  .showcase-box-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .box-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-start: 1;
    grid-column-end: 3;
  }

  /* about */
  .about_wrapper {
    gap: 3rem;
  }

  .img-content {
    width: 100%;
  }

  .about-content h2 {
    font-size: 2rem;
    margin: 2rem 0;
  }

  .about-content p {
    font-size: 1rem;
  }

  /* ===================Slider */
  .content h2 {
    font-size: 3rem;
  }

  .slider_wrapper img {
    width: 350px;
  }

  .top-footer {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 350px;
  }

  .footer-content {
    width: 100%;
  }
}

After adding the tablet.css file then you need to use the mobile.css file to make a responsive website on the mobile device.

@media (max-width: 425px) {
  /* ===============Showcase boxes */
  .showcase-box-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 570px;
  }

  .show-wrapper {
    margin-top: 2rem;
  }

  .show-wrapper h2 {
    text-align: center;
  }

  .show-wrapper p {
    width: 100%;
  }

  .box-1 {
    width: 100%;
  }

  .box-2 {
    width: 100%;
  }

  .box-3 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    width: 100%;
  }

  /* About */
  .about_wrapper {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  /* Slider */
  .slider_wrapper img {
    width: 250px;
  }

  .top-footer {
    height: 450px;
  }

  .footer-content {
    width: 100%;
  }

  .footer-content h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
}

Deploying the Website

As soon as your portfolio is prepared, you’ll have to put it online. You possibly can host it utilizing free or low-cost platforms corresponding to GitHub Pages, Netlify, or Vercel. These platforms combine nicely with React, making deployment simple.

Sustaining and Updating

A React-based portfolio makes updating simple. If you wish to add a brand new undertaking or tweak your info, you simply have to replace just a few elements. You gained’t have to start out from scratch, which saves effort and time.

In the abstract, React.js permits an environment-friendly, scalable, and visually interesting portfolio website. It’s a strong device to showcase your work and expertise professionally, without making issues too sophisticated. By breaking your website into elements and specializing in responsive design, you may create a website that’s simple to take care of and replace as your initiatives develop.

Previous articleSearch Bar Filter in React JS with API
Asif Ali
Asif Ali
https://www.onlineittuts.com
"Hi, I'm Asif Ali, a developer with a passion for creating cool stuff with code. I've got a lot of experience making software that works well and solves problems. From coming up with ideas to actually building and testing them, I love every part of the process. I pay close attention to detail to make sure everything works smoothly. I enjoy working with different programming languages and collaborating with teams to turn ideas into real projects. I'm always learning and keeping up with the latest tech trends. My goal is to create useful and effective solutions that make a difference."
Facebook Twitter

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.