React-Portfolio-Site

Front-End portfolio style website made using Vite, React JavaScript library, HTML, and CSS.

Description

This front-end, simple portfolio website was built using Vite and React, which gave some very minimalistic starter code to work from. Additionally, Vite + React enabled me to quickly install all necessary dependencies to get started and run a development server while coding the website. Since this website uses React, it relies on a single HTML page (index.html), where all of the site's content gets rendered onto. Although there is a downside in terms of the site's Search Engine Optimization (SEO), the benefit of using a technology such as React is that content quickly gets rendered without the site having to refresh or reload. Content will dynamically display as the user clicks around the Navigation links and switches between sections, which each utilize a React component/template for rendering HTML and CSS (for that particular section or "page"). This was a fun challenge that enabled me to get more familiar with using JavaScript in the React environment.

Project Structure

• /client
  • /node_modules
  • /public (folder where all of the site's images are saved)
  • /src (folder containing all of the site's main JavaScript and CSS code)
    • /components (folder where reused React templates are saved, such as Header or Footer)
    • /pages (folder that contains all of the site's "page" templates aka different rendered sections of site)
    • App.jsx (file that contains Routes for each of the "page" paths, as well as where each of the page templates are pulled in)
    • index.css (main CSS file)
    • main.jsx (another main file where the App.jsx file gets rendered and manipulates the DOM)
  • index.html (single, main HTML file where all content gets rendered)
  • .gitignore (file that lists other files to be ignored by Github when pushing to repository, such as /node_modules folder)
  • package.json (file containing JSON npm dependencies and script commands)
• LICENSE (license used for this repository - MIT License)
• README (information file containing information about this specific project/application)

Tools and Technologies Used in This Project

• Javascript
• Vite (https://vitejs.dev/)
• React (Installed through Vite prompt)
• HTML
• CSS
• Additional Node Modules:
  • React Router DOM module (https://reactrouter.com/en/main)
• VS Code platform used to code and build pages
• Github (website hosted and deployed on Github servers)

How to Use

This website, being Front-End is straightforward to use. The only real difference, due to the technology being used, is that React will dynamically render HTML and CSS files (and consequently content) as the user navigates the site and clicks around. Along with most other standard websites, there is a mixture of content and elements within the site, including a header, footer, links, buttons, and various pages. Since this is a portfolio website, when a user visits and interacts with the site, the main purpose will be to learn a little more about me, see some of the work that I've developed, fill out a contact form, and download my resume. The user will be able to do all of this by simply clicking around the site. The main goal here is for the user to see some of the projects I've completed, as well as contact me in some way. The work section of the site contains links to github repositories and demo urls for each of the corresponding work item cards.

Demo/Deployment

Live URL: https://anthony-purificato-react-portfolio.netlify.app/

Contributions

Website built from start to finish by Anthony Purificato using Vite and React.

Credits

Rutgers Coding Bootcamp provided support and some of the resources for this project.

License

Website is available for public use, hosted on Github servers, utilizing an MIT License - see the LICENSE file for details.

For more information on license please click the Link

Questions

Check out my GitHub

For questions, reach out to me on LinkedIn