My Portfolio Site | Rex Mann 😉

rexcoelestis.github.io

Project for Code Louisville | September 2020 Cohort

Introduction

This site was completed, in part, to fufill the requirements for the September Code Louisville 2020 Front-End Course. I chose to make a portfolio to house the work I've done up to this point. Though, I like the site so far, I feel that I have a lot to do with it before I would show it to just anyone. In the future, I'd like to use a site like this to showcase the work I've been doing. I plan to link to some of the projects I've worked on in the future, as well. However, I haven't been the best about keeping up with the code for websites I've created in the past. Now that I'm more familiar with GitHub, I'll definitely make better use of it. Eventually, I'd like this site to function as an online resume. Though, with sites like GitHub, Behance, and LinkedIn, I'm not sure I necessarily need to create my own. But I probably will! 😉

Media Queries 📼

Since I used Bootstrap, I didn't have a lot of need of manually coding media queries. However, to meet the requirement, I created a new class: quote-item, and used that to create a resonsive row of quotes. Not only do they shift if there isn't enough space to sit side-by-side, but the padding adjusts between them as the screen size increases.

CSS Features 💻

1. CSS Animation
   1. Applied CSS spin animation to #profile_icon
2. Navigation Menu
   1. Used bootstrap to create a menu that expands and collapses to hamburger based on screen size using built-in bootstrap media queries
3. Flexbox
   1. Used built-in flexbox properities from bootstrap to organize content
4. Bootstrap
   1. Loaded in Bootstrap natively and used the built-in column struction to organize the layout and for responsiveness.

Javascript Features 💾

1. Create 3 Variables, Set Values, and Display
   1. Used javascript to prompt the user to answer three initial questions, saved the values in variables, and then use those variables to create a string of text via a template literal. Then the function calls the next function to complete.
2. Show/Hide one or more content areas
   1. The next function uses the string from the previous step to display a message via a modal. It also looks for the user to click the close button or anywhere else off the modal to go ahead and close it.
3. Other javascript
   1. I did use other javascript functions throughout the site, though they were either loaded in with bootstrap, or I found projects that I could mimick to make the site a litte more aesthetically pleasing. I did write them out myself, but I didn't come up with them of my own volition. If you wish to consider them toward my credit, great! If not, I made sure to meet the requirements before getting fancy! haha

Thanks to you all for the time and effort you put into this learning experience! I really appreciate it!

Best,

Rex Mann