A showcase of my latest work, design styles, and personality!
CSS HTML JavaScript PHP
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
img
js
less
mail
vendor
.gitignore
.htaccess
LICENSE
README.md
finalStyle.css
finalStyle.css.map
finalStyle.min.css
gulpfile.js
index.html
index.original.html
package.json
resume.html
robots.txt
sitemap.xml

README.md

Albert Chang's Portfolio Website

An elegant, responsive, and user-friendly portfolio website.

It is a culmination of nearly everything I have learned over the past 2 years of web and front end development!

Check it out below!

www.albertchanged.me

Toughest but most fun parts

There were many steps in building this, so I will just discuss the three most difficult ones.

I designed the homepage artwork SVG in Adobe Illustrator. Then I used CSS animations to create the 'CODE' and music notes visuals. I also learned a new way to keep an object in place as it rotates, so once I applied that to the head, I synchronized the head bob with the other animations.

Next, I made CSS hover transitions on the skill boxes follow the direction of their page placement (corner-wise and edge-wise). Try them out when you get to the Skills section!

Lastly, I edited border radii of the objects on the About section, divided the Portfolio section into two rows, and assigned both of them CSS animations. I then utilized jQuery and ES6 JavaScript to watch scroll events, which trigger the animations when the user scrolls the respective objects into view.

Technologies Used

FRONT END: Bootstrap, HTML5, CSS3, Sass/Scss

BACK END: ES6 JavaScript, jQuery, PHP

Creator

Made with love by Albert Chang, 2018.

Connect with me! LinkedIn