2
\$\begingroup\$

I recently finished the build a personal portfolio webpage project for a free Code Camp, here, I would be very grateful if anyone would be willing to offer any advice on the design of the website or on HTML, CSS, or JavaScript coding practices.

(function($) {
  $(document).ready(function() {
    sticyNav()
    smoothScrool(300)
    backToTop()
  })
})(jQuery)

function sticyNav() {
    var navTop = $('nav').offset().top;
    $(window).on('scroll', function() {
      if($(window).scrollTop() >= navTop+80) {
        $('nav').addClass('sticky-nav')
      }else{
        $('nav').removeClass('sticky-nav')
      }
    })
}

function smoothScrool(dur) {
  $('a[href^="#"]').on('click', function(e) {
    var target = $($(this).attr('href'))

    if(target.length) {
      e.preventDefault()
      $('html, body').animate({
        scrollTop: target.offset().top-60
      }, dur)
    }
  })
}

function backToTop(){ 
  $(window).on('scroll', function() {
    if($(window).scrollTop() >= $('header').offset().top+80) {
      $('.to-top').fadeIn(300)
    }else {
      $('.to-top').fadeOut(300)
    }
  })
}
html {
  font-size: 16px;
}

body {
  color: white;
}

main {
  display: block;
  width: 100%;
  height: 100%;
}

section:nth-child(2n+1) {
  background-color: #dedede;
}
section:nth-child(2n) {
  color: #dedede;
}

/*
*###################################
*Navigation
*####################################
*/
header {
  font-size: 1.2rem;
}
header nav {
  position: absolute;
  display: inline-block;
  height: 2.5rem;
  width: 100%;
}

.nav-links {
  list-style: none;
  text-align: center;
}
.nav-links li {
  font-size: 0.9em;
  font-weight: bold;
  padding: 0.5em 1.5rem;
  display: inline-block;
}
.nav-links li a {
  color: white;
}
.nav-links li a:hover, .nav-links li a:active, .nav-links li a:visited {
  color: white;
  text-decoration: none;
}

.sticky-nav {
  position: fixed;
  top: 0;
  background-color: rgba(222, 222, 222, 0.8);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

/*
*###################################
*Home
*####################################
*/
#home {
  width: 100%;
  height: 100vh;
  background: url(http://negativespace.co/wp-content/uploads/2015/12/00014.jpg) center center;
  background-color: rgba(0, 0, 0, 0.7);
  background-blend-mode: darken;
}
#home .container {
  width: 50em;
  height: 23em;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#home h1 {
  font-weight: bold;
  font-size: 5em;
  text-align: center;
}
#home ul {
  width: 78%;
  border-top: 3px solid white;
  list-style: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  position: absolute;
  top: 65%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#home ul li {
  display: inline-block;
}
#home ul li i {
  color: white;
}

/*
*###################################
*About
*####################################
*/
#about {
  width: 100%;
  height: 60vh;
}
#about .bio, #about .skills, #about .work {
  width: 33%;
  height: 100%;
  display: inline-block;
}
#about .bio h3, #about .skills h3, #about .work h3 {
  margin: 0.5em 0;
  margin-bottom: 0;
}

/*
*###################################
*Portfolio
*####################################
*/
#portfolio {
  width: 100%;
  height: 400px;
}

/*
*###################################
*Contact
*####################################
*/
#contact {
  width: 100%;
  height: 100px;
  text-align: center;
}

/*
*###################################
*Misc.
*####################################
*/
.to-top {
  position: fixed;
  width: 35px;
  height: 35px;
  display: none;
  border: 2px solid white;
  border-radius: 50%;
  text-align: center;
  top: 90%;
  left: 92%;
}
.to-top i {
  color: #dedede;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="top">
  <nav>
    <ul class="nav-links">
      <li> <a href="#home">Home </a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <section id="home">
    <div class="container">
      <h1>R.A.A. Webdev Studios</h1>
      <ul>
        <li><a href="" target="_blank"><i class="fa fa-twitter fa-5x"></i></a></li>
        <li><a href="" target="_blank"><i class="fa fa-facebook-official fa-5x"></i></a></li>
        <li> <a href="" target="_blank"> <i class="fa fa-github fa-5x"></i></a></li>
        <li> <a href="" target="_blank"><i class="fa fa-linkedin-square fa-5x"></i></a></li>
      </ul>
    </div>
  </section>
  <section id="about">
    <div class="bio"> 
      <h3>Bio:</h3>
      <p>//TODO</p>
    </div>
    <div class="skills"> 
      <h3>Skills: </h3>
      <p>//TODO</p>
    </div>
    <div class="work"> 
      <h3>Work:</h3>
      <p>//TODO</p>
    </div>
  </section>
  <section id="portfolio">
    <h3>Portfolio</h3>
    <p>//TODO</p>
  </section>
  <section id="contact">
    <div class="email">
      <h1>example@email.com</h1>
    </div>
  </section>
</main><a href="#top" class="to-top"><i class="fa fa-chevron-up fa-2x"></i></a>

\$\endgroup\$
  • \$\begingroup\$ If you want SASS reviewed, include it in the question. \$\endgroup\$ – Quill Jan 7 '16 at 21:31
3
\$\begingroup\$

Misspelling:

You've misspelled your function names:

sticyNav()
smoothScrool(300)

They should be:

stickyNav()
smoothScroll(300)

This is not sparta

What is 300, and why are you scrolling that much?

Avoid using magic numbers like 300 by declaring it above. This will help you and whoever else needs to maintain it in the future out.

var SECTION_HEIGHT = 300;
smoothScroll(SECTION_HEIGHT);

Pointless IIFE and pointless parameters:

Your initial IIFE is pointless, the point of an IIFE is to run the code inside when the code reaches that point, however you're not particularly running code, you're assigning a ready property to be called. You can do this without an IIFE.

Additionally, passing in $ to be used is pointless as $ and jQuery are globals set by jQuery.

(function($) {
  $(document).ready(function() {
    sticyNav()
    smoothScrool(300)
    backToTop()
  })
})(jQuery)

Indentation inconsistencies:

function sticyNav() {
    var navTop = $('nav').offset().top;
    $(window).on('scroll', function() {
      if($(window).scrollTop() >= navTop+80) {

You have inconsistencies in your indentation style.

Stick with either four or two spaces to an indentation, either is fine, just be consistent.


Missing whitespace:

You're missing whitespace between your operators line in the example below:

target.offset().top-60

CSS

There's not much to be said about your CSS, it's pretty generic.

The only think might be that you could look at combining selectors with similar modifiers, like:

.to-top i {
  color: #dedede;
}
section:nth-child(2n) {
  color: #dedede;
}

HTML:

A few things to say about this:

<a href="" target="_blank"><i class="fa fa-linkedin-square fa-5x">

As links with blank hrefs redirect to blank pages, for demos it's better to use # as a href, as it will redirect nowhere. Although in this case, that's a bit pointless with target="_blank".

<p>//TODO</p>

If you're building a HTML template, you may want to use the Lorem Ipsum text as a placeholder.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.