You Are A Graduating Software Engineer Looking To ✓ Solved

You are a graduating software engineer who is looking to

You are a graduating software engineer who is looking to apply to a few software engineering positions at various Fortune 500 companies. You decide to make a personal portfolio website that showcases some of your work so that you stand apart from the other applicants. Using React, create a web application that has the following:

  • A home page with a short description of yourself, what you are looking for in a position, and one project that you've worked on.
  • A contact page with a text box and a submit button that shows a success message when the user submits a query.
  • A navigation bar and footer.
  • You must use client side routing to handle page navigation.

Paper For Above Instructions

Creating a personal portfolio website is an essential step for any graduating software engineer aiming to enter the competitive landscape of Fortune 500 companies. A well-structured website not only serves as a platform to showcase your work but also reflects your programming capability and attention to detail. The focus here is to use React—a popular JavaScript library—to build such a portfolio website, incorporating key functionalities like a home page, a contact page, a navigation bar, and client-side routing.

1. Project Structure

Before diving into the code, it's vital to lay out a clear project structure. The recommended structure for this React application might look as follows:

  • src/
    • components/
      • Home.js
      • Contact.js
      • Navbar.js
      • Footer.js
    • App.js
    • index.js

2. Setting Up the Environment

The first step is to set up the React environment. You can use Create React App to quickly scaffold a React application. Run the following command in your terminal:

npx create-react-app portfolio

Then, navigate into the project directory:

cd portfolio

With the environment set up, you can now install React Router for handling client-side routing:

npm install react-router-dom

3. Creating the Home Page

The home page serves as the introduction to your portfolio. Create a new file Home.js inside the components folder. This page includes a brief description of yourself, your career aspirations, and a project you’ve worked on.

import React from 'react';

const Home = () => {


return (




Welcome to My Portfolio


I am a graduating software engineer looking for opportunities in software development.


Featured Project


Project title: Awesome Project


Description: Brief description about this project...




);


};


export default Home;

4. Creating the Contact Page

The contact page will have a text box for users to submit queries and a button that, when pressed, shows a success message. Create a new file Contact.js in the components folder.

import React, { useState } from 'react';

const Contact = () => {


const [message, setMessage] = useState('');


const handleSubmit = (e) => {


e.preventDefault();


setMessage('Your query has been submitted successfully!');


};


return (




Contact Me










{message && 
{message}
}



);


};


export default Contact;

5. Navigation Bar and Footer

The navigation bar allows users to navigate between the home and contact pages. Create a new file called Navbar.js.

import React from 'react';

import { Link } from 'react-router-dom';


const Navbar = () => {


return (




Home


Contact



);


};


export default Navbar;

For the footer, you can create a simple functional component Footer.js.

import React from 'react';

const Footer = () => {


return (




© 2023 Your Name. All rights reserved.



);


};


export default Footer;

6. Implementing React Router

In your main application file App.js, integrate the created components and implement React Router.

import React from 'react';

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';


import Home from './components/Home';


import Contact from './components/Contact';


import Navbar from './components/Navbar';


import Footer from './components/Footer';


const App = () => {


return (








} />


} />






);


};


export default App;

Conclusion

By following these steps, you'll create a functional and visually appealing portfolio website using React that effectively showcases your abilities and projects. This not only serves as an online resume but also enhances your likelihood of standing out among other applicants seeking positions at leading Fortune 500 companies.

References

Related Assignments