sternmd Goto Github PK

followers: 20.0 following: 25.0 repos: 73.0 gists: 2.0

Type: User

Bio: 🗻🌲 ⛺️🍺🚶

Location: Portland, OR

sternmd.github.io

OUTLINE

About: This Github Pages account will be used as my working portfolio.

Technologies used: HTML5/CSS3, Less, Javascript, jQuery.

WIREFRAMES

SIMPLE PSEUDOCODE

Setup dev environment with Express generate, Less, Gulp.
Positioning should be absolute for opening menu section.
Use color palette: Ember (#E74C3C), Grey (#555), white (#FFF).
Create Typefaces: Brandon Grotesque Regular & Brandon Grotesque Black.
Modernizr, smooth scrolling, css animations, & SVGs to improve UX.
Opening section should change colors from grey to white on scroll.
Navbar should change position on scroll.
Work section should flip to display text on hover. Insert sitelink, repository, and about the project. This along with media queries will take the longest time.
Set proper media queries for mobile.

SIDENOTES, HIGHLIGHTS, & APPROACHES

Self-rendering animation, using SVG strokepaths:

var spacemonkey = {
    "spacemonkey": {
        "strokepath": [
            {
                "path": "M533.047,343.884l-7.439,24.449   c0,0,22.856-12.755,31.895-9.568l-28.173,13.288v3.723L566,386.939l-40.924-7.443l9.565,10.103l4.253,0.533   c0,0,80.268,85.049,79.729,128.102c0,0,19.138-22.855,10.098-56.875l28.179-8.504c0,0-5.846-32.961-14.347-49.435l-40.401,15.947   l-30.829-64.851l32.428-14.354c0,0-8.506-15.947-17.545-20.731c0,0-9.569,11.692-23.385,16.477   C548.994,340.693,533.047,343.884,533.047,343.884z",
                "duration": 800
            }, ...
            ],
            "dimensions": {
                "width": 782,
                "height": 869
            }
          }
};

 $(document).ready(function(){
 $('#spacemonkey').painter(
 {
    "svgData": spacemonkey,
    "strokeWidth": 2,
    "strokeColor": "#E74C3C"
}).painter('paint');
 });

Scroll functions for fading in and out navbars

$(window).scroll(function() {
	  if ($document.scrollTop() >= (windowHeight * 0.8)) {
		// user scrolled 50 pixels or more;
		$(".navi_fade").fadeIn(700);
	  }
	  else {
		 $(".navi_fade").fadeOut(300);
	  }
});

$(window).scroll(function() {

 if ($(this).scrollTop()>400)
  {
     $('.work_link').fadeOut();
     $('.about_link').fadeOut();
     $('.contact_link').fadeOut();
  }
 else
  {
    $('.work_link').fadeIn();
    $('.about_link').fadeIn();
    $('.contact_link').fadeIn();
  }
});