Build a Portfolio Website Using React and Bootstrap

//App.js 
import React from 'react'; 
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 
import Header from './components/Header'; 
import About from './components/About'; 
import Projects from './components/Projects'; 
import Resume from './components/Resume'; 
import Contact from './components/Contact'; 
import Footer from './components/Footer'; 
import Skills from './components/Skills'; 

function App() { 
return ( 
	<Router> 
	<div> 
		<Header /> 
		<Routes> 
		<Route path="/" element={<About />} /> 
		<Route path="/projects" element={<Projects />} /> 
		<Route path="/skills" element={<Skills />} /> 
		<Route path="/resume" element={<Resume />} /> 
		<Route path="/contact" element={<Contact />} /> 
		</Routes> 
		<Footer /> 
	</div> 
	</Router> 
); 
} 

export default App; 

//Header.js 
import React from 'react'; 
import { Navbar, Nav } from 'react-bootstrap'; 
import { FontAwesomeIcon } 
from '@fortawesome/react-fontawesome'; 
import { faGithub, faLinkedin } 
from '@fortawesome/free-brands-svg-icons'; 
import { 
faInfoCircle, faCode, 
faFileAlt, faEnvelope 
} 
from '@fortawesome/free-solid-svg-icons'; 
import { Link } from 'react-router-dom'; 

import './Header.css'; 
import './style.css'; 

const Header = () => { 
return ( 
	<Navbar bg="dark" expand="lg"
	className="custom-navbar shadow-sm"> 
	<Navbar.Brand as={Link} to="/"
		className="brand-name"> 
		<span className="display-4 text-white ho"> 
		Geek 
		</span> 
	</Navbar.Brand> 
	<button 
		className="navbar-toggler"
		type="button"
		data-toggle="collapse"
		data-target="#navbarNav"
		aria-controls="navbarNav"
		aria-expanded="false"
		aria-label="Toggle navigation"
	> 
		<span className="navbar-toggler-icon"></span> 
	</button> 
	<div className="collapse navbar-collapse text-white"
		id="navbarNav"> 
		<Nav className="ml-auto "> 
		<Nav.Link as={Link} to="/"> 
			<span>About</span> 
			<FontAwesomeIcon icon={faInfoCircle} 
			className="ml-2 text-light ho ho" /> 
		</Nav.Link> 
		<Nav.Link as={Link} to="/projects"> 
			<span>Projects</span> 
			<FontAwesomeIcon icon={faCode} 
			className="ml-2 text-light ho" /> 
		</Nav.Link> 
		<Nav.Link as={Link} to="/resume"> 
			<span>Resume</span> 
			<FontAwesomeIcon icon={faFileAlt} 
			className="ml-2 text-light ho" /> 
		</Nav.Link> 
		<Nav.Link as={Link} to="/contact"> 
			<span>Contact</span> 
			<FontAwesomeIcon icon={faEnvelope} 
			className="ml-2 text-light ho" /> 
		</Nav.Link> 
		</Nav> 
		<Nav className="ml-auto"> 
		<Nav.Link href="https://github.com/yourusername"> 
			<span className="sr-only">Github</span> 
			<FontAwesomeIcon icon={faGithub} size="lg"
			className='text-light ho' /> 
		</Nav.Link> 
		<Nav.Link href="https://www.linkedin.com/in/yourusername"> 
			<span className="sr-only">Linkedin</span> 
			<FontAwesomeIcon icon={faLinkedin} size="lg"
			className='text-light ho' /> 
		</Nav.Link> 
		</Nav> 
	</div> 
	</Navbar> 
); 
}; 

export default Header;

//About.js
import React from 'react';
import './style.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser } from '@fortawesome/free-solid-svg-icons';

const About = () => {
    return (
        <section id="about"
            className="container text-center">
            <div className="row">
                <div className="col-md-8 offset-md-2">
                    <div className="profile-image-container">

                        <h2 className="section-title">
                            <h2 className="section-title">
                                <FontAwesomeIcon icon={faUser} 
                                className="d-block mx-auto mb-2 text-primary" size="3x" />
                            </h2>
                        </h2>
                    </div>
                    <p className="section-description mt-4">
                        I am a skilled Internship Trainee with over 6 months of
                        hands-on experience in full-stack web development. My
                        expertise includes using technologies such as Node.js,
                        Java, JSP, HTML, CSS, and Bootstrap. As a problem solver,
                        I have successfully designed and developed user-friendly,
                        responsive web applications.
                    </p>
                </div>
            </div>
        </section>
    );
};
export default About;

// Projects.js 
import React from 'react'; 
import { FontAwesomeIcon } 
	from '@fortawesome/react-fontawesome'; 
import { faCode } from '@fortawesome/free-solid-svg-icons'; 
import Breadcrumbs from './Breadcrumbs'; 
import './style.css'; 

const Projects = () => { 
	const breadcrumbsPaths = 
		[ 
			{ title: 'Home', to: '/' }, 
			{ title: 'Projects', to: '/projects' } 
		]; 

	return ( 
		<section id="projects"
			className="container text-center"> 
			<Breadcrumbs paths={breadcrumbsPaths} /> 
			<h2 className="section-title"> 
				<FontAwesomeIcon icon={faCode} 
					className="mr-2" /> 
				Projects 
			</h2> 
			<div className="row"> 
				{/* Project 1 */} 
				<div className="col-md-6"> 
					<div className="card mb-4"> 
						<div className="card-body"> 
							<h5 className="card-title"> 
								Read For Speed - 
								Smart India Hackathon 2022 
							</h5> 
							<p className="card-text"> 
								Designed the UI and implemented 
								CSS styling for the website, 
								optimizing performance and design across 
								all pages. 
							</p> 
						</div> 
					</div> 
				</div> 
				{/* Project 2 */} 
				<div className="col-md-6"> 
					<div className="card mb-4"> 
						<div className="card-body"> 
							<h5 className="card-title"> 
								Training and Placement 
								Cell Website Official 
							</h5> 
							<p className="card-text"> 
								Designed and developed the official 
								Placement Website for the university using 
								HTML, CSS, JavaScript, jQuery, and Bootstrap. 
							</p> 
						</div> 
					</div> 
				</div> 
				{/* Project 3 */} 
				<div className="col-md-6"> 
					<div className="card mb-4"> 
						<div className="card-body"> 
							<h5 className="card-title"> 
								E-commerce Platform 
							</h5> 
							<p className="card-text"> 
								Built a fully functional e-commerce 
								platform with features like product listing, 
								cart management, and user authentication using 
								React, Node.js, and MongoDB. 
							</p> 
						</div> 
					</div> 
				</div> 
				{/* Project 4 */} 
				<div className="col-md-6"> 
					<div className="card mb-4"> 
						<div className="card-body"> 
							<h5 className="card-title"> 
								Social Media Dashboard 
							</h5> 
							<p className="card-text"> 
								Developed a social media dashboard 
								that allows users to view and manage 
								their social media accounts in one place, 
								integrating with APIs from major platforms. 
							</p> 
						</div> 
					</div> 
				</div> 
			</div> 
		</section> 
	); 
}; 

export default Projects;

// Contact.js 
import React from 'react'; 
import { FontAwesomeIcon } 
	from '@fortawesome/react-fontawesome'; 
import { faEnvelope, faPhone } 
	from '@fortawesome/free-solid-svg-icons'; 
import { faLinkedin, faGithub } 
	from '@fortawesome/free-brands-svg-icons'; 
import Breadcrumbs from './Breadcrumbs'; 
import './style.css'; 

const Contact = () => { 
	const breadcrumbsPaths = 
		[ 
			{ title: 'Home', to: '/' }, 
			{ title: 'Contact', to: '/contact' } 
		]; 

	return ( 
		<section id="contact" className="container"> 
			<Breadcrumbs paths={breadcrumbsPaths} /> 
			<h2 className="section-title">Contact</h2> 
			<p className="section-description"> 
				Feel free to reach out for
				collaboration or inquiries. 
			</p> 
			<ul className="contact-list list-unstyled"> 
				<li> 
					<FontAwesomeIcon icon={faEnvelope} 
						className="contact-icon" /> 
					sahilalixxxxxx@gmail.com 
				</li> 
				<li> 
					<FontAwesomeIcon icon={faLinkedin} 
						className="contact-icon" /> 
					LinkedIn 
				</li> 
				<li> 
					<FontAwesomeIcon icon={faGithub} 
						className="contact-icon" /> 
					GitHub 
				</li> 
				<li> 
					<FontAwesomeIcon icon={faPhone} 
						className="contact-icon" /> 
					6393xxxxx4 
				</li> 
			</ul> 
		</section> 
	); 
}; 

export default Contact;

// Resume.js 
import React from 'react'; 
import { FontAwesomeIcon } 
	from '@fortawesome/react-fontawesome'; 
import { faFileDownload } 
	from '@fortawesome/free-solid-svg-icons'; 
import Breadcrumbs from './Breadcrumbs'; 
import Skills from './Skills'; 
import './style.css'; 

const Resume = () => { 
	const breadcrumbsPaths = 
		[ 
			{ title: 'Home', to: '/' }, 
			{ title: 'Resume', to: '/resume' } 
		]; 

	return ( 
		<section id="resume"
			className="container text-center"> 
			{/* Include the Breadcrumbs component */} 
			<Breadcrumbs paths={breadcrumbsPaths} /> 
			<div className="row justify-content-center align-items-center"> 
				<div className="col-md-8"> 
					<h2 className="section-title"> 
						<FontAwesomeIcon icon={faFileDownload} 
							className="mr-2" /> 
						Resume 
					</h2> 
					<p className="section-description"> 
						Download my resume to learn more 
						about my professional experience and skills. 
					</p> 
					<a href="path/to/your/resume.pdf"
						className="resume-download-btn" download> 
						Download Resume 
					</a> 
					{/* Include the Skills component here */} 
					<Skills /> 
				</div> 
			</div> 
		</section> 
	); 
}; 

export default Resume;

// Skills.js 
import React from 'react'; 
import { FontAwesomeIcon } 
	from '@fortawesome/react-fontawesome'; 
import { faCode, faLaptopCode } 
	from '@fortawesome/free-solid-svg-icons'; 
import { faCogs } 
	from '@fortawesome/free-solid-svg-icons'; 
import './style.css'; 

const Skills = () => { 
	return ( 
		<section id="skills"
			className="container"
			style={{ paddingLeft: '0px' }}> 
			<h2 className="section-title"> 
				<FontAwesomeIcon icon={faCogs} 
					className="mr-2" /> 
				Skills 
			</h2> 
			<ul className="skills-list"> 
				<li> 
					<FontAwesomeIcon icon={faCode} 
						className="mr-2" /> 
					HTML 
				</li> 
				<li> 
					<FontAwesomeIcon icon={faCode} 
						className="mr-2" /> 
					CSS 
				</li> 
				<li> 
					<FontAwesomeIcon icon={faCode} 
						className="mr-2" /> 
					JavaScript 
				</li> 
				<li> 
					<FontAwesomeIcon icon={faLaptopCode} 
						className="mr-2" /> 
					React 
				</li> 
				<li> 
					<FontAwesomeIcon icon={faLaptopCode} 
						className="mr-2" /> 
					Bootstrap 
				</li> 
				<li> 
					<FontAwesomeIcon icon={faLaptopCode} 
						className="mr-2" /> 
					DSA 
				</li> 
				<li> 
					<FontAwesomeIcon icon={faLaptopCode} 
						className="mr-2" /> 
					Node.js 
				</li> 
				<li> 
					<FontAwesomeIcon icon={faLaptopCode} 
						className="mr-2" /> 
					Python 
				</li> 
				<li> 
					<FontAwesomeIcon icon={faLaptopCode} 
						className="mr-2" /> 
					Java 
				</li> 
				{/* Add more skills as needed */} 
			</ul> 
		</section> 
	); 
}; 

export default Skills;

// Footer.js 
import React from 'react'; 
import { FontAwesomeIcon } 
	from '@fortawesome/react-fontawesome'; 
import { faLinkedin, faGithub, faTwitter } 
	from '@fortawesome/free-brands-svg-icons'; 
import './style.css'; // Import your custom CSS file 

const Footer = () => { 
return ( 
	<footer className="footer"> 
	<div className="container"> 
		<div className="row"> 
		<div className="col-md-6"> 
			<p>© 2023 Geek. All rights reserved.</p> 
		</div> 
		<div className="col-md-6 text-md-right"> 
			<ul className="social-icons list-unstyled"> 
			<li> 
				<a 
href="https://www.linkedin.com/in/yourusername" target="_blank" rel="noopener noreferrer"> 
				<FontAwesomeIcon icon={faLinkedin} /> 
				</a> 
			</li> 
			<li> 
				<a href= 
"https://github.com/yourusername" target="_blank" rel="noopener noreferrer"> 
				<FontAwesomeIcon icon={faGithub} /> 
				</a> 
			</li> 
			<li> 
				<a href= 
"https://twitter.com/yourusername" target="_blank" rel="noopener noreferrer"> 
				<FontAwesomeIcon icon={faTwitter} /> 
				</a> 
			</li> 
			</ul> 
		</div> 
		</div> 
	</div> 
	</footer> 
); 
}; 

export default Footer;

// Breadcrumbs.js 
import React from 'react'; 
import { Link } from 'react-router-dom'; 
import { FontAwesomeIcon } 
	from '@fortawesome/react-fontawesome'; 
import { faHome } 
	from '@fortawesome/free-solid-svg-icons'; 

const Breadcrumbs = ({ paths }) => { 
	return ( 
		<nav aria-label="breadcrumb"> 
			<ol className="breadcrumb bg-light p-3 rounded"> 
				<li className="breadcrumb-item"> 
					<Link to="/"> 
						<FontAwesomeIcon icon={faHome} 
							className="mr-2" /> 
						{/* Home */} 
					</Link> 
				</li> 
				{paths.map((path, index) => ( 
					<li key={index} 
						className={ 
							`breadcrumb-item${index === paths.length - 1 ? 
								' active' : ''}` 
						}> 
						{index !== paths.length - 1 ? ( 
							<Link to={path.to}> 
								{path.title} 
							</Link> 
						) : ( 
							<span>{path.title}</span> 
						)} 
					</li> 
				))} 
			</ol> 
		</nav> 
	); 
}; 

export default Breadcrumbs;