A portfolio is one of the best things a developer can make for himself as it showcases all the knowledge he has about that programming language in which he made the portfolio and all of his past works with some additional info.
Making a portfolio in HTML and CSS is fine, but making it in React will give it a boost which it requires to leave an impact and showcase the level of skills that we have as React developers.
It will also decrease the amount of time and effort required to make with HTML and CSS as we will be –
- Dividing the whole app into components makes it easier to handle and debug
- Using data dynamically and not hard-coding it.
In this blog, we will make a Portfolio in React with all the points covered in the above statements.
Index
Getting Started
To make a portfolio in React, we will most definitely be needing the latest versions of npm and node.js installed with create-react-app to reduce the time.
For styling our App, we will use Bootstrap5 with vanilla CSS, and for icons that will be used, font-awesome will be used.
A portfolio should contain all our skills and previous work which according to us is the best and can be showcased with little information about us and a place to contact us for further details.
We will all make this in our app with React with dynamic data.
Before getting started, this is what our portfolio will look like.
The CSS part will not be discussed here as we want you to do that part yourselves.
Let’s begin….
Creating the React App – Portfolio in React
It’s very easy to create a React App – just go to your working directory in any of your preferred IDEs and enter the following command in the terminal.
npx create-react-app portfolio-in React
If you are unsure how to properly set up a create-react-app project you can refer to the official guide here at create-react-app-dev.‌‌
After the setup, run npm start in the same terminal to start the localhost:3000 where our React app will be hosted. We can also see all our changes there.
Explaining the structure of the App
As told above, we will be making this portfolio in React and thus will be dividing our App into components, one for each section.
This way we can easily give time to each section, and deal with all its respective problems saving tons of effort and time.
import React from "react";
import Hero from "./Hero";
import About from "./About";
import Services from "./Services";
import Projects from "./Projects";
import Contact from "./Contact";
const App = () => {
return (
<>
<Hero />
<About />
<Services />
<Projects />
<Contact />
</>
);
};
export default App;
In the above code, we can very clearly see that there are five components or five sections in our App.
These sections will contain their own set of data which will be fetched dynamically from our Data.js file. We will see that component later in this blog with how to fetch data without using hooks.
Let’s discuss each of these components.
Working on Components – UI for our Portfolio in React
Data Component
This component (as we have discussed write from the beginning) contains all the data that our App needs which will be fetched dynamically into their respective Components with the help of the map method – we will discuss later in each component
This contains data in the form of an array containing objects with key and value pairs as shown –
export const slider = [
{
text: "HTML",
width: "65%",
},
{
text: "CSS",
width: "70%",
},
{
text: "Bootstrap",
width: "70%",
},
{
text: "JS",
width: "55%",
},
{
text: "React JS",
width: "65%",
},
];
This is only one of the many arrays that we have formed to pass dynamically into their respective components.
This data not only contains string but font-awesome icons, bootstrap classes, styles, links, and images which will be fetched dynamically.
Hero Component
Let’s start working on the UI of our portfolio, starting with the hero section which will briefly give our intro like name, photo, and who are we?
Everything in this section is hardcoded, even the image is directly imported from the src folder and used as shown in the code.
We have also used the typewriter to give its effect. This was possible by using an npm package – react-simple-typewriter as it also reduces a lot of time and effort.
import React from "react";
import { Typewriter } from "react-simple-typewriter";
import Ateev1 from "./Ateev-1.jpg";
const Hero = () => {
return (
<>
<div className="container-fluid">
<div className="row mt-3">
<div id="main_hero">
<div className="col-7 px-5 mx-4 main_hero">
<div className="fs-3 px-3 text-2">Hi there, my name is</div>
<div className="text-1">Ateev Duggal</div>
<div className="fs-4 px-3 text-2">
I am
<span className="fs-2 fw-bold text-3" style={{ color: "orange" }}>
<Typewriter
loop
cursor
cursorStyle="|"
typeSpeed={100}
deleteSpeed={70}
delaySpeed={1000}
words={["Developer", "Blogger", "Freelancer"]}
/>
</span>
</div>
</div>
<div className="col-4" id="image_hero">
<img src={Ateev1} alt="Ateev" className="image_hero" />
</div>
</div>
</div>
</div>
</>
);
};
export default Hero;
About Component
This section will contain the details about us like skills, education qualification, certifications, etc.
But I have only shown my skills with a button to download CV on click. You can add other details too if you want.
import React from "react";
import { slider } from "./Data";
import Resume from "./Resume_New.pdf";
const About = () => {
return (
<>
<div className="container-fluid">
<div className="row mt-5">
<div className="col-12 text-center fw-bold fs-1 mb-5" id="heading">
About <span style={{ color: "orange" }}> Me</span>
<hr
style={{
width: "10%",
margin: "auto",
height: "7%",
}}
/>
</div>
<div className="col-6 px-5 fs-4 pt-5 mt-2" id="text_about">
My name is <span style={{ color: "orange" }}>Ateev Duggal</span>,
and I am a freelance front-end-web developer and a blogger with a
highly qualified and self-attained skill set which contains most
used and compatible JS framework - React JS.
<div className="d-flex justify-content-between mt-5">
<a href={Resume} download>
<button className="btn text-white fs-4 fw-bold">
Download CV
</button>
</a>
<a
href="https://www.linkedin.com/in/ateev-duggal-937795182/"
className="text-white fw-bold text-decoration-none fs-4 px-3"
target="true"
>
<button className="btn text-white fs-4 fw-bold px-3">
Let's chat
</button>
</a>
</div>
</div>
<div className="col-6 pt-5" id="stats_about">
{slider.map((Val) => {
const { text, width } = Val;
return (
<>
<div className="mb-3">
<span className="fw-bold fs-6">{text}</span>
<div className="slider">
<div
className="inner-slider"
style={{ width: `${width}` }}
></div>
</div>
</div>
</>
);
})}
</div>
</div>
</div>
</>
);
};
export default About;
As you can see, we have used the map method to fetch the data from the Data.js component.
The data is also an array of multiple objects with key and value pairs which contains the width of our range sliders in% with a string.
export const slider = [
{
text: "HTML",
width: "65%",
},
{
text: "CSS",
width: "70%",
},
{
text: "Bootstrap",
width: "70%",
},
{
text: "JS",
width: "55%",
},
{
text: "React JS",
width: "65%",
},
];
Fetching the string is an easy task, we have to use the map method and write the name of the key in curly braces as shown.
But the tricky part is to display styles dynamically. It can be done simply by using the backticks(“), and writing the key inside it with the dollar sign as shown –
style={{ width: `${width}` }}
And we get something like this
We can also add the values in percentages in front of the languages or inside the progress bar with a different color. The designing part will be totally up to us to decide and change.
In the above image, there is a button that says download CV.
It can be easily made just by copying the CV in pdf format or whichever we have – it doesn’t matter, in the src folder and importing it as usual. Now by using the download attribute of the <a> tag we can make that happen
import Resume from "./Resume_New.pdf";
<a href={Resume} download>
<button className="btn text-white fs-4 fw-bold">
Download CV
</button>
</a>
Services Component
This section will tell us what type of services we can offer to the client. Similar to the About Component, here also we have dynamically fetched our data from Data Component.
This time, there are font-awesome too which will be displayed dynamically as well.
import React from "react";
import { services } from "./Data";
const Services = () => {
return (
<>
<div className="container-fluid">
<div className="row mt-5">
<div
className="col-12 text-center fw-bold fs-1 mb-5 pb-3"
id="heading"
>
<span style={{ color: "orange" }}>My</span> Services
<hr style={{ width: "10%", margin: "auto", height: "7%" }} />
</div>
{services.map((Val) => {
const { icon, heading, text } = Val;
return (
<>
<div className="col-lg-3 col-md-6 col-sm-6 card bg-transparent border-0 text-center py-4 px-2">
<div className="card-img-top">
<i className={`${icon} fs-1 icon`}></i>
</div>
<div className="card-body">
<div
className="fs-4 fw-bold pb-3 card-title"
style={{ color: "orange" }}
>
{heading}
</div>
<div className="fs-6 card-text">{text}</div>
</div>
</div>
</>
);
})}
</div>
</div>
</>
);
};
export default Services;
Project Component
This is where we start showcasing our talent, the work that we have done so far, and all the projects that we have made either with React or with any other programming language.
There will be images in this section that will be fetched dynamically from the Data Component. Follow the steps given to do so –
- Make a folder in the public folder of our React App – for our convenience, we have named it Images
- Put all of your images in that folder
- Write down the path of every image as the value of the kay and value pairs as shown –
export const projects = [
{
image: "./Images/template1.png",
heading: "Yoga Template",
link: "https://ateevduggal.github.io/yoga-template/",
},
{
image: "./Images/template2.png",
heading: "Consultancy Template",
link: "https://ateevduggal.github.io/Consultancy---Template/",
},
{
image: "./Images/template3.png",
heading: "Restaurant Template",
link: "https://ateevduggal.github.io/Restaurant/",
},
{
image: "./Images/SPA.png",
heading: "Tekolio SPA",
link: "https://tekolio-react-9tjfdrwwu-ateevduggal.vercel.app/",
},
{
image: "./Images/dictionary-app.png",
heading: "Dictionary App",
link: "https://dictionary-app-xi.vercel.app/",
},
{
image: "./Images/google.png",
heading: "Live Wildfire App using NASA API",
link: "https://dictionary-app-xi.vercel.app/",
},
];
4. Call the array using the map method
import React from "react";
import { projects } from "./Data";
const Projects = () => {
return (
<>
<div className="container">
<div className="row mt-5">
<div
className="col-12 fs-1 fw-bold text-center mb-5 pb-3"
id="heading"
>
<span style={{ color: "orange" }}>My</span> Projects
<hr
style={{
width: "10%",
margin: "auto",
height: "7%",
}}
/>
</div>
{projects.map((Val, key) => {
const { image, heading, link } = Val;
return (
<>
<div
className="col-md-4 col-sm-6 card bg-transparent border-0 text-center pb-4"
key={key}
>
<div className="card-img-top">
<a href={`${link}`}>
<img
src={image}
alt={heading}
className="w-100 p-3"
id="card-img"
/>
</a>
</div>
<div
className="fw-bold fs-5 card-title"
style={{ color: "orange" }}
>
{heading}
</div>
</div>
</>
);
})}
<div className="text-center col-12 mt-5">
<a
href="https://github.com/Ateevduggal?tab=repositories"
target="true"
>
<button
className="btn text-white fs-5 px-3 fw-bold col-3"
id="btn"
>
View More
</button>
</a>
</div>
</div>
</div>
</>
);
};
export default Projects;
This will be our final product –
Contact Component
The Contact Us section of a portfolio is also the main section of a portfolio as it tells the client where to contact you in terms of any query or if he/she wants to hire you.
Generally, this section consists of a form that the client files and sends that form to you via mail by clicking the submit button, but here we have done something different.
Despite making a contact form, we have attached our different social media accounts for them to contact us via these which also includes an option for mail.
This too was fetched dynamically from the Data Component in the same way as we have done until now.
import React from "react";
import { social } from "./Data";
const Contact = () => {
return (
<>
<div className="container-fluid">
<div className="row mt-5">
<div
className="col-12 text-center fw-bold fs-1 text-black px-5 mb-5"
id="heading"
>
Contact<span style={{ color: "orange" }}> Me</span>
<hr
style={{
width: "10%",
margin: "auto",
height: "7%",
}}
/>
</div>
<div className="col-2"></div>
<div className="col-12 mt-3 text-center" id="section2">
{social.map((Val) => {
return (
<>
<a
href={`${Val.link}`}
key={Val.id}
target="_blank"
rel="noopener noreferrer"
className="mx-3"
>
<i className={`${Val.icon}`} id="icons"></i>
</a>
</>
);
})}
</div>
<div className="w-100 my-4"></div>
</div>
</div>
</>
);
};
export default Contact;
Conclusion
A portfolio is a collection of our data like our education, skills, past experiences, projects, etc displayed on a single page with some styling to make it more attractive and easy to read as nobody wants to read-only text and find the important points in between them.
If React helps us in achieving that in a short amount of time and effort, go for it and that’s what we have done within this blog. We have made a Portfolio in React.
You can form the app if you want. visit my GitHub profile for that.
Greetings! Very helpful advice within this post! It is the little changes that produce the largest changes. Many thanks for sharing!