Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "How to Build a Complete React Portfolio Website Tutorial - Step by Step Tutorial", we will learn how to create it following these simple easy steps.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
Get Source Code.
If interested in watching the video before running the code below, you can click the play button to get started.
Why Create This Project?
Creating this React Portfolio Website serves three major purposes:
Showcase Your Skills Professionally:
A well-crafted portfolio is your digital handshake. It shows clients not just what you know, but how you apply it—clean code, responsive design, and UI/UX flow.
Build Real-World Experience:
You’ll learn how to structure a real web app with reusable components, responsive layouts, animations, routing, and project integration—everything employers actually care about.
Stand Out in a Crowded Field:
A live React portfolio sets you apart. It tells a story, adds credibility, and builds confidence in your skills. It’s not just a project—it’s a personal brand.
Setting Up the Project
Create a Project Folder:
- Make a new folder, for instance, “portfolio-website”.
- Open this folder in your VS Code editor.
Initialize the Project:
npm create vite@latest ./ -- --template react
npm install
npm run dev
Modify folder and CSS Files:
- In this tutorial, we're going to be using Tailwind CSS.
- TailwindCSS Setup
- Remove the default assets folder and App.css file.
- Replace the content of index.css with the provided CSS code.
@import "tailwindcss";
* {
scroll-behavior: smooth;
scroll-margin-top: 50px;
}
@theme {
--main-color: #80db66;
--primary-color: #2d2e36;
--secondary-color: #e2ecf6;
--text-color: #b0aac0;
--meta-text-color: #9b9db1;
--section-bg: #212228;
--main-border: #474747;
--transparent-bg: rgba(0, 0, 0, 0.6);
--508: 508px;
--250: 250px;
--animate-zoom: zoom 5s linear infinite alternate;
--animate-rotate: rotate 5s linear infinite;
}
@layer components {
.outline-btn {
@apply border border-(--main-color) text-white rounded-sm py-2 px-7 font-semibold hover:bg-(--main-color) uppercase transition-all duration-300 ease-in hover:text-gray-800;
}
.transparent-header {
@apply absolute left-0 top-0 w-full z-20 py-5 md:px-20 px-10 transition duration-300 ease-in;
}
.sticky-menu {
@apply fixed top-0 left-0 w-full z-20 bg-(--primary-color) py-3 transition duration-300 ease-in;
}
.white-filled-btn {
@apply border border-transparent text-(--primary-color) bg-(--secondary-color) rounded-sm py-2 px-7 font-semibold cursor-pointer hover:bg-transparent hover:border-(--secondary-color) hover:text-(--secondary-color) uppercase transition-all duration-300 ease-in;
}
}
@keyframes zoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
Creating the Components
- Component.jsx
0 Comments
We are happy to hear from you.