It began as a simple wireframe, one million iterations later, this project is now my personal website.
To see the complete design process check out: https://www.behance.net/wip/753351/2167735
Website: https://alecortega.com/
This was my first project where I decided I really wanted to get into front-end development. Throughout this process the designs became more complex as I learned how to execute them from a technical standpoint. I started this project barely knowing the difference between a section and a div tag and I had no idea how absolute positioning worked.
At the end of this project I had learned Jade, SCSS, Express, Heroku, Gulp, Bower, and various best-practices such as g-zip compression, image CDN hosting, and hardware accelerated CSS animations and transitions. I implemented the scrolling animation using Greensock's GSAP animation framework and used various native CSS3 animations to engineer the floating labels and moving gears. I also learned how to use Express and Node.js to implement the contact form using a Mailgun transporter as well as handle the download for the pdf copy of my resume. I also used this project to get a better handle on SCSS modularity and mobile-first responsive techniques, and as a result the website is completely responsive and mobile friendly.
Copyright (c) 2016 Alec Ortega
Licensed under the MIT license.
Feel free to pull code snippets from the repo for your own sites. If you choose to just copy the entire website for your own use, please attribute me as the creator somewhere on the page. Thanks!