PortFolio WebPage using React with dark theme

A portfolio website is one of the best ways to showcase your skills and information to the world. In this article, you will see how to create a portfolio website with a dark theme.

Project Preview: Let us have a look at how the final output will look like.

Final Look

Prerequisites:

• React.js
• GitHub API for fetching repository data
• CSS for styling
• Node and npm for project setup

Approach to create PortFolio Webpage:

• Integrated GitHub API for fetching repositories dynamically.
• Created a visually appealing Dark Theme for good look.
• Break the project into different sections for Projects, Skills, Experience, and Contact.
• Use CSS for consistent and stylish global styling.
• Used React Hooks for real-time data fetching, ensuring seamless integration.

Steps to Create the Project:

Step 1: Create a react application using the following command.

npx create-react-app portfolio-dark
cd portfolio-dark

Step 2: Install the required dependencies

npm install styled-components
npm install --save @fortawesome/fontawesome-free
npm i @fortawesome/free-brands-svg-icons

Step 3: Create the required file structure as shown in the image.

Project Structure:

Folder Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.5.1",
    "@fortawesome/free-brands-svg-icons": "^6.5.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "styled-components": "^6.1.8",
    "web-vitals": "^2.1.4"
}

Example: In the code example we will see the implementation of the portfolio.

Javascript

//App.js

import React, { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLinkedin, faGithub,
         faPython, faReact } from '@fortawesome/free-brands-svg-icons';
import './App.css'

const App = () => {
    const [repositories, setRepositories] = useState([]);

    useEffect(() => {
        // Fetch GitHub repositories
        const fetchRepositories = async () => {
            try {
                const response = await fetch
('https://api.github.com/users/AbhilashGaurav/repos?per_page=4');
                const data = await response.json();
                setRepositories(data);
            } catch (error) {
                console.error('Error fetching GitHub repositories:', error);
            }
        };

        fetchRepositories();
    }, []);

    return (
        <div className="portfolio-container">
            <header>
                <div className="profile-photo"></div>
                <div className="header-content">
                    <h1>AbhilashGaurav</h1>
                    <div className="social-icons">
                        <a href=
"https://www.linkedin.com/in/abhilash-gaurav-8b0a911bb/"
                            target="_blank" rel="noopener noreferrer">
                            <FontAwesomeIcon icon={faLinkedin} size="2x" />
                        </a>
                        <a href=
"https://github.com/AbhilashGaurav" target="_blank"
                            rel="noopener noreferrer">
                            <FontAwesomeIcon icon={faGithub} size="2x" />
                        </a>
                    </div>
                </div>
            </header>
            <div className="content">
                <section className="about">
                    <h2>About Me</h2>
                    <p>
                        Hello! I'm Abhilash Gaurav, a passionate
                        web developer with a strong
                        foundation in React and JavaScript.
                        I love building engaging and interactive
                        web applications.Let's create something
                        amazing together!
                    </p>
                </section>
                <section className="projects">
                    <h2>Projects</h2>
                    <div className="project-tiles">
                        {repositories.map(repo => (
                            <div className="project-tile" key={repo.id}>
                                <a href={repo.html_url}
                                   target="_blank"
                                   rel="noopener noreferrer">
                                    <b>{repo.name}</b></a>
                                <p>{repo.description}</p>
                            </div>
                        ))}
                    </div>
                </section>
                <section className="skillset">
                    <h2>Skillset</h2>
                    <div className="palettes">
                        <div>

                            <FontAwesomeIcon icon={faPython} size="3x" />
                            <FontAwesomeIcon icon={faReact} size="3x" />
                        </div>
                    </div>
                </section>
                <section className="experience">
                    <h2>Experience</h2>
                    Technical Content Writer “python language”
                    Intern for GeeksForGeeks from
                    April 2022-October 2022.
                </section>
                <section className="contact">
                    <h2>Contact</h2>
                    <div>
                        Father’s Name: Mr. Ram Khilawan
                    </div>
                    <div>
                        Mother’s Name: Kamlesh Kumari
                    </div>
                    <div>
                        Date of Birth: 19 Dec 2003
                    </div>
                    <div>
                        Languages Known: English, Hindi
                    </div>
                    <div>
                        Nationality: Indian
                    </div>
                    <div>
                        Hobbies: Playing acoustic Guitar,
                        football, Listening Smooth Music,
                        Competitive Coding
                    </div>
                </section>
            </div>
        </div>
    );
};

export default App;

CSS

/*App.css */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(to bottom, #000000, #222222);
}

.portfolio-container {
    color: rgb(193, 193, 193);
    padding: 20px;
    max-width: 800px;
    margin: auto;
    box-shadow: 0 0 10px #3498db;
    border: 2px solid #3498db;
    padding: 20px;
    border-radius: 20px;
}

header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.profile-photo {
    width: 100px;
    height: 100px;
    background-image: url('https://media.geeksforgeeks.org/wp-content/uploads/20240208132439/avatar.png');
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 10px #3498db;
    border-radius: 50%;
    border: 5px solid #3498db;
    margin-right: 20px;
}

h1 {
    margin: 0;
    color: rgb(255, 255, 255);
}

.header-content {
    flex: 1;
}

.social-icons {
    display: flex;
}

.social-icons a {
    color: #fff;
    margin-left: 10px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #3498db;
}

.pop-effect {
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

.pop-effect:hover {
    transform: scale(1.05);
}

.about {
    margin-top: 20px;
}

.about h2 {
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
    color: rgb(255, 255, 255);
}

.about p {
    font-size: 16px;
    line-height: 1.6;
}

.projects {
    margin-top: 20px;
    text-align: left;
}

.projects h2 {
    font-size: 24px;
    margin-bottom: 10px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
    color: rgb(255, 255, 255);
}

.project-tile {
    background-color: #3498db;
    color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.project-tile:hover {
    transform: scale(1.05);
}

.project-tile h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.project-tile a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    margin-bottom: 10px;
}

.project-tile p {
    font-size: 16px;
}

.skillset {
    margin-top: 20px;
}

.skillset h2 {
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
    color: rgb(255, 255, 255);
}

.experience h2 {
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
    color: rgb(255, 255, 255);
}

.contact h2 {
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
    color: rgb(255, 255, 255);
}

Step 3: To start the application run the following command.

npm start

Output:

OUTPUT

Follow the given link to Build and Host your own portfolio website using HTML,CSS and JavaScript.