Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fredm23579/professional-react-portfolio
React application with a focus on web development
https://github.com/fredm23579/professional-react-portfolio
Last synced: about 1 month ago
JSON representation
React application with a focus on web development
- Host: GitHub
- URL: https://github.com/fredm23579/professional-react-portfolio
- Owner: fredm23579
- Created: 2024-06-05T02:33:49.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-06-25T02:12:02.000Z (6 months ago)
- Last Synced: 2024-06-25T03:28:49.005Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 272 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React Portfolio
Codebase for the React Portfolio platform
◦ Developed with the software and tools below.
---
## 📚 Table of Contents
- [📚 Table of Contents](#-table-of-contents)
- [🔍 Description](#-description)
- [🌟 Features](#-features)
- [📁 Repository Structure](#-repository-structure)
- [💻 Code Summary](#-code-summary)
- [🚀 Getting Started](#-getting-started)
---
## 🔍 Description
This is a React project with a Node.js backend, using the create-react-app tool for scaffolding. The project includes a README file, a package.json file for managing dependencies, and a package-lock.json file for locking down specific versions of dependencies. The project also includes a src directory with source code for the frontend, including JSX files for components, CSS files for styling, and an index.jsx file for the main entry point of the application. Additionally, there are several other files and directories in the root directory, including a .gitignore file for ignoring certain files and directories during Git commits, a logo.svg file for the project's logo, and a reportWebVitals.js file for reporting web vitals.
---
## 🌟 Features
React, Node.js, create-react-app, frontend, backend, JSX, CSS, index.jsx, logo.svg, reportWebVitals.js
---
## 📁 Repository Structure
```sh
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── src
├── App.css
├── App.jsx
├── App.test.js
├── cmponents
│ ├── Footer.jsx
│ ├── Header.jsx
│ ├── Navigation.jsx
│ └── Project.jsx
├── index.css
├── index.jsx
├── logo.svg
├── pages
│ ├── AboutMe.jsx
│ ├── Contact.jsx
│ ├── Portfolio.jsx
│ └── Resume.jsx
├── reportWebVitals.js
└── setupTests.js
```
### Links
[Live Netlify App Link](https://snazzy-piroshki-3bf064.netlify.app/)
[GitHub Repo Link](https://github.com/fredm23579/professional-react-portfolio)
### ScreenShots
---
## 💻 Code Summary
\src
| File | Summary |
| ---- | ------- |
| App.jsx | The code defines a React component called `App` that renders a header, main content, and footer using the `BrowserRouter` from `react-router-dom`. The main content is divided into routes for different pages, each of which is defined by a `Route` component. |
| App.test.js | The code tests the primary function of the App component by rendering it and verifying that the Learn React link is present in the document. |
| index.jsx | The code renders the App component in the root element of the HTML document using ReactDOM. |
| reportWebVitals.js | The code defines a function `reportWebVitals` that imports and executes the `getCLS`, `getFID`, `getFCP`, `getLCP`, and `getTTFB` functions from the `web-vitals` module, passing in an optional callback function `onPerfEntry` to each of them. |
| setupTests.js | The code imports the jest-dom library, which provides custom matchers for asserting on DOM nodes in Jest tests. |
---
\src\cmponents
| File | Summary |
| ---- | ------- |
| Footer.jsx | The code defines a React component called Footer that renders a footer element with links to the author's GitHub, LinkedIn, and Stack Overflow profiles. |
| Header.jsx | The code defines a React component called Header that renders an HTML header element with a h1 tag and a Navigation component. |
| Navigation.jsx | The code defines a React component called Navigation that renders a navigation menu with links to different pages in the application. |
| Project.jsx | The code defines a React component called Project that displays a title, image, and links to a deployed application and its GitHub repository. |
---
\src\pages
| File | Summary |
| ---- | ------- |
| AboutMe.jsx | The code defines a React component called AboutMe that renders an HTML section with an image and a paragraph of text. |
| Contact.jsx | The code defines a React component for a contact form with input fields for name, email, and message, as well as a button to submit the form. |
| Portfolio.jsx | The code defines a React component called Portfolio that renders a section with a heading and multiple Project components, each representing a project with a title, image, deployed link, and repository link. |
| Resume.jsx | The code defines a React component called Resume that displays a section with a heading, a download link for a PDF resume, and a list of proficiencies. |
---
## 🚀 Getting Started
To get started with this React project, follow these steps:
1. Install the necessary dependencies by running `npm install` or `yarn install` in your terminal.
2. Start the development server by running `npm start` or `yarn start`. This will launch a development server at .
3. Open your web browser and navigate to to view the application.
4. You can now start developing your React application by modifying the source code in the `src` directory.
5. When you're ready to build the production version of the application, run `npm run build` or `yarn build`. This will create a production-ready build of the application in the `build` directory.
6. To deploy the application to a hosting platform such as GitHub Pages or Netlify, follow the instructions provided by the hosting platform.
That's it! With these steps, you should be able to get started with this React project.