Personal Website
Author: London Joseph
https://elondonj.github.io/
Deployed atThis web page is the final project for the CS410 Intro to Web Developement at Portland State University. The site utilizes a single-page layout with a navigation bar at the top and about, resume, project and contact sections.
The site is built using CSS, HTML, Boostrap and JavaScript.
Navbar
The navigation bar is built Boostrap classes and the Boostrap JavaScript bundle were used for the navbar. The navbar also uses the google font Modak for the logo.
Animation
On large and medium screen an interactive partical animation is displayed. I followed a tutorial by Franks Laboratory for the animation. The code for the animation is found in anima.js
About
The about section has a short bio and picture of myself. This section uses a combination of custom CSS and Boostrap for formatting and design.
Resume
The resume section summerizes my relevant course work and technical skill set. This section uses a combination of custom CSS and Boostrap for formatting and design.
Projects
The projects section displays previous projects in a carousel slider. The slider was built with Bootstrap classes and operated utilizing the Boostrap JavaScript bundle.
Contact
The contact section takes was built with Bootstrap form classes. Messages sent from form to my email via Formsubmit.co
Footer
A small footer with a randomly selected insirational quote. Quotes are sourced from (https://type.fit/api/quotes) api. Quotes.js contains the code for fetching from the api.
References
- Bootstrap 5/Bootstrap JavaScript bundle
https://getbootstrap.com/docs/5.2/getting-started/introduction/) - Franks Labratory "Vanilla JavaScript Text Animation Tutorial"
https://www.youtube.com/watch?v=XGioNBHrFU4) - Code with Ania Kubow "Send emails from a HTML Conact Form"
(https://www.youtube.com/watch?v=r4RQ38EoLds) - Navbar portion from Bootsrap 5 crash course
https://www.youtube.com/watch?v=4sosXZsdy-s&t=839s - Carousel Slider Bootstrap 5 | Slider Carousel Tutorial
https://www.youtube.com/watch?v=ku_97a6Bgkg - FormSubmit
https://formsubmit.co/ - Quotes api
https://type.fit/api/quotes