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.
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:
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 w3wiki 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.w3wiki.net/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 ; } h 1 { 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.3 s ease; } .social-icons a:hover { color : #3498db ; } .pop-effect { transform: scale( 1 ); transition: transform 0.3 s ease-in-out; } .pop-effect:hover { transform: scale( 1.05 ); } .about { margin-top : 20px ; } .about h 2 { 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 h 2 { 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.3 s ease; } .project-tile:hover { transform: scale( 1.05 ); } .project-tile h 3 { 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 h 2 { border-bottom : 2px solid #3498db ; padding-bottom : 5px ; color : rgb ( 255 , 255 , 255 ); } .experience h 2 { border-bottom : 2px solid #3498db ; padding-bottom : 5px ; color : rgb ( 255 , 255 , 255 ); } .contact h 2 { 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:
Follow the given link to Build and Host your own portfolio website using HTML,CSS and JavaScript.