No description, website, or topics provided.
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.
app
src
.gitignore
README.md
package-lock.json
package.json

README.md

Portfolio Site

An updated portfolio site made with semantic HTML5, SASS, Photoshop, responsive design, and graceful degradation. More photos to be uploaded soon!

SASS Mixins and Variables

Sass is my absolute favorite css development tool! It lets me nest selectors for more readable and DRY code. It also lets me create variables for global values like color, font-size, margins, etc to rapidly change a sites look with only 1 character change. With mixins, I'm able to make real functions like a full programming language, which greatly comes in handy for repetitious values such as media query breakpoints and uncollapsing a collapsed div.

mixin for easy media queries

mixins

variables for quickly altering site appearance and better code readability

variables

Responsive design

I use rem and percentage units for nearly all my values. This lets me quickly change the entire page just by increasing or decreasing the font size, as rem stems directly from default font-size.

I use resolution swapping, density switching and changes in art direction to decrease page load time and improve performance.

resolution swapping using HTML so that the right file gets loaded instead of loading both

resolution swapping

density switching to decrease loadtime for low dpi devices

density switching

I also, make modifications to a page when hovering is not available (i.e. mobile, tablets).

Graceful degradation

Although I use a css pre-fixer to allow support for most of the newer css techniques, some older versions of browser still won't run certain features. As you can see below, I altered my SASS code to have a more basic look unless the browser has support.

graceful degradation of the awesome clip-path feature so that non-supported browsers see a squared header

graceful degradation

Check out the live site here!