whats-a-pj / portfolio

My portfolio created with React, Vite, Tailwind & EmailJS

PJ's Portfolio

Table of Contents

• Description
• License
• Questions

Description

This is a new and refreshed version of my portfolio, created with React for the GUI. This has my group projects on the portfolio page, a resume with my work and education history, a contact form created with EmailJS so users don't need to leave my website to send a message and a simple about me page. I will continue to add more projects to the portfolio portion as I create more that I believe are worth displaying! I built this so that employers can take a look at my previous work and see my skills when it comes to full stack web development, with a strong focus on frontend.

License

Copyright (c) 2023 @whats-a-pj

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Questions

If you have any questions feel free to use the links in my Github: whats-a-pj

Screenshot & Link to deployed application

Deployed site: https://pj-rasmussen.netlify.app

Laptop/Desktop display:

Mobile display:

Credits

These were the websites that I used to help me understand how to complete this project:

https://legacy.reactjs.org/docs/introducing-jsx.html

https://react.dev/learn/conditional-rendering

https://legacy.reactjs.org/docs/components-and-props.html

https://coolors.co/

https://reactrouter.com/en/main

https://reactrouter.com/en/main/routers/create-browser-router

https://reactrouter.com/en/main/components/link

https://react.dev/learn/importing-and-exporting-components

https://react.dev/learn/render-and-commit

https://tailwindui.com/components/application-ui/navigation/navbars

https://www.svgrepo.com/

portfolio's Issues

Update dark-mode colors

technical skills need to stack on smaller screen size

Styling updates (open issue for details)

insert a blur effect to portfolio photos (more details in issue). Blur effect was making it so that the photos themselves were overlapping the navbar. fix this issue (stacking order or z-index issue, not sure though) OR create a different effect that uses useState maybe?

re-do nodemailer or look into email.js for contact page

when scrolling pages, content overlaps OPEN top navbar (smaller screen mode)

Deployed contact form not working

Works locally. Added environment variables to netlify but that did not fix issue. Maybe look into their other email stuff emailjs, like the api key way

resize 'about me' circles so they keep their shape on smaller screens

spacebar minigame