My Portfolio Website

Table of Contents

• Description
• Installation Instructions
• Usage and Screenshots
• Technologies Used
• Dependencies and Credits
• Project Structure
• Future Improvement Ideas

Description

This is my personal website that I crafted for displaying my portfolio. All my web development learning up to this point has been via The Odin Project and I am very grateful. This site will showcase my projects to show potential clients and employers what my capabilities are.

Usage and Screenshots

Using this site is pretty straightforward. Users are able to navigate to different pages by clicking on the links in the header and can send a message or quote request on the Contact page.

• Link to live preview

Features

• Display my portfolio
• Sticks to my core design principles of: Simple, Functional, Beautiful

Installation Instructions

To add new portfolio projects, code src/functions/projectsList.js

1. Clone or fork this repo
2. cd into the project root directory ¹
3. Run the following in your terminal ²

   • npm init -y
     npm install

4. Set up the Vite Compression plugin per the instructions
5. Log in to your EmailJS dashboard or sign up for the service.
   • Follow their tutorial if needed
6. Back in your IDE: code .env

   • VITE_EMAIL_JS_SERVICE_ID="your email service ID"
     VITE_EMAIL_JS_PUBLIC_KEY="your public key"

7. npm run dev
   • ^ + c will end the process
8. Navigate to the url displayed in the terminal: ➜ Local: http://localhost:5173/

Technologies Used

Frontend

• Vite
• React
• JavaScript
• HTML
• CSS

Development Tools

• VS Code
• NPM
• Git

Hosting

• Cloudflare
• Github

Dependencies and Credits

Package Dependencies

• lucide-react
• react
• react-dom
• react-router-dom
• @emailjs/browser
• @eslint/js
• @types/react
• @types/react-dom
• @vitejs/plugin-react
• eslint
• eslint-config-prettier
• eslint-plugin-react-hooks
• eslint-plugin-react-refresh
• globals
• vite
• vite-plugin-compression2
• uuid

Other Credits

• Devicion
• Skillicons
• Ionicons
• EmailJS

Project Structure

├──node_modules/             # NPM package files - populated locally only
├──public/                   # Locally hosted images and icons
    └──passion-photos/       # Photos for the "My Passions" section
├──src/                      # Source files
    ├──functions/            # JavaScript function files
       └──projectsList.js    # This is where new portfolio projects can be added
    ├──pages/                # Full page React components
    ├──partials/             # Smaller React components
    ├──style/                # Style sheets are here
    └──main.jsx
├──.gitignore                # Files and folders that are local only
├──eslint.config.js
├──index.html
├──LICENSE
├──package-lock.json
├──package.json
├──README.md
└──vite.config.js

Future Improvement Ideas

• Add page for work experience
• Add section or page for technologies
• Add page for open source contributions

Footnotes

1. Where the README.md file is located ↩

2. You are free to install all the dev dependencies on a single line instead of breaking them up like this. I've found that breaking them up is more reliable with slower internet connections. ↩