Portfolio Website using React (original) (raw)

Last Updated : 29 Jul, 2024

Portfolio Website using React is an online representation of the talent and skills one possesses, along with details of past work and contact information. it is very important for any professional.

Table of Content

Preview of Portfolio Website using React
Approach to Create Portfolio Website using React
Portfolio Website using React Complete Example

**Preview of Portfolio Website using React

Let us have a look at how the final application will look like:

**Approach to Create Portfolio Website using React

Steps to create Portfolio Webpage using React

Create multiple function-based components like Contact, Hero, Navbar, About, Footer, Project, Skills, etc., and at the end, integrat all files into App.js.
Styling and design are implemented through TailWind CSS. We connected Tailwind CSS through CDN inside the index.html file so that whenever someone wants to run this code on a local machine, they can directly run it without installing Tailwind CSS.
All the components of this project are stored in a directory called components. All the assets and amenities used in this project are connected in hyperlink form.

**Portfolio Website using React Complete Example

The approach outlined above has been implemented in the provided code.

HTML `

Project | PortFolio WebPage using React You need to enable JavaScript to run this app.

JavaScript

// Index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> </React.StrictMode> );

JavaScript

// App.js import Navbar from "./components/Navbar"; import About from "./components/About"; import Skills from "./components/Skills"; import Projects from "./components/Projects"; import Contact from "./components/Contact"; import Footer from "./components/Footer"; import Hero from "./components/Hero";

export default function App() { return ( <>

JavaScript

// Navbar.js export default function Navbar() { return (

); }

JavaScript

// Hero.js export default function Hero() { return (

Hi and welcome to

My Portfolio Website

I am your friendly neighbourhood osm developer...

); }

JavaScript

// About.js export default function About() { return (

About Me :

As I said, I am your friendly neighbourhood osm developer...

I am a passionate self taught developer (which is quite a subjective thing as i learnt from teachers on youtube so does that really counts? idk). I am having an experience of about 4 years and had a deep understanding of creating web products.

); }

JavaScript

// Skills.js export default function Skills() { const skills = ["Python", "HTML", "CSS", "Javascript", "React", "NextJs"]; return (

My Skills...

{skills.map((skill, index) => { return (

{skill}

)})}

) }

JavaScript

// Projects.js export default function Projects() { return (

My Projects

DSA Progress Tracker

This is a project built on react which tracks your progess in dsa and stores that in the local storage.

15 Puzzle Game

15 puzzle game is basically a tile-based game in which there are 16 tiles out of which 1 tile is left empty and the remaining tiles are filled with numbers from 1 to 15 in random order. The user has to arrange all the tiles in numerical order with the rule that they can only move the tile that is a direct neighbor of the empty tile.

); }

JavaScript

// Contact.js export default function Contact() { return (

Contact

Instagram: @geeks_for_geeks Twitter: @geeksforgeeks

); }

JavaScript

// Footer.js export default function Footer() { return (

); }

Output:

_Follow the given link to Build and Host your own **Portfolio Website using HTML,CSS and JavaScript.