Alan's Personal Page

👉 Check some of the projects I've worked on here AlanThinks.com

How Was This Built?

1. After importing a starting-point HTML/CSS template I completely revamped the CSS to reflect my branding.
2. Then I re-designed a few sections such as the project containers, the resumé modal and several other design elements, adding the "GitHub Code Tabs" as well as the tech stack "labels" amongst other things.
3. I then modified and added some of my own scrolling animations.
4. The Project/Portfolio filter was done using Isotope, Highly recommended!
5. Although I did use SmoothScroll for some scrolling animation, I ended up using more some of my own I made, althought they were more redundant, it made it much easier for me to modify it for different buttons and anchors.
6. I wanted to update the original styling to Bootstrap 4.1, but it became a bigger hassle and I was not receiving much benefit from it. So stayed with 3.7.
7. For the form "backend" I just used Formspree, it's a temporary solution
8. The Project Thumbnails I made them all in Photoshop.
9. For the the "Typing Animation" I used Typed.js by Matt Bold (Over 3K commits at the time of this writing!) .

Challenges

1. Took me a little bit to get Typed.js to work how I wanted because from all the documentation I read there was no way to select which is the last string that would hold once the loops were done, I wanted to do this because I didn't want the loop to go forever, I was concerned about performance, but alas I haven't yet found a good looking way to do it so I'll be getting to that later for now the the loop is on "Infinity" .

2. The YouTube thumbnails were a bit of a challenge to get them to properly be responsive since they are a YouTube iframe, ended up setting the height to 100% inline and then through media query classes I changed the width of the iframe and its container.

3. Definitely I think the biggest challenge was making the website look beautiful and behave well on small screen devices such as the iPhone 4, I'm still learning about the best way to use Media Queries, I think my code in that particular area is not as clean as it could be because I may have made a redundant amount of Media Queries.

What's Next

1. I'd like to create some Web Components out of my project containers.
2. I'm updating my Contact List App (React) to upload to the page

The End

Thanks for taking the time to read this! I made the React "Paper" To-Do App just to put on this page, make sure you check it both in desktop and mobile, and of course make sure you Eat The Cookies!

Thank you!

Alan G.

aka: AlanThinks