Portfolio

In this example below you will see how to do a Portfolio with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by StephenAjayi, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright StephenAjayi ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <head>
  <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,800" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
</head>

<!-- <nav class="navbar navbar-expand-lg navbar-inverse bg-inverse navbar-bright">
  <a class="navbar-brand" href="#">
        STEPHEN KOLAWOLE AJAYI
      </a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav> -->



<nav class="navbar sticky-top navbar-toggleable-md navbar-inverse bg-inverse navbar-bright">  
  <div class="row">
  <a class="navbar-brand" href="#">
        STEPHEN KOLAWOLE AJAYI
      </a>
    <button class="navbar-toggler ml-auto" type="button" 
          data-toggle="collapse" data-target="#navbarCollapsableContent" aria-controls="navbarCollapsableContent" aria-extend="false" aria-label="toggle navigation">
<span class="navbar-toggler-icon">
</span>
  </button>
  </div>
  <div class="collapse navbar-collapse" id="navbarCollapsableContent">
    <ul class="navbar-nav  ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#about">
          ABOUT SKA
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#startups">
          STARTUPS
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#projects">
          PROJECTS
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#get-in-touch">
          GET IN TOUCH
        </a> 
      </li>
    </ul>
  </div>
</nav>

<div class="container-fluid">
  <div class="row no-padding">
    <div id="about" class="section text-center col-12 no-padding">
<!--       <nav class="navbar-default sticky-top navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-bright">
        <button class="navbar-toggler navbar-toggler-right" type="button" 
          data-toggle="collapse" data-target="#navbarCollapsableContent" aria-controls="navbarCollapsableContent" aria-extend="false"
          aria-label="toggle navigation">
    <span class="navbar-toggler-icon">
    </span>
  </button>
  <a class="navbar-brand" href="#">
    STEPHEN KOLAWOLE AJAYI
  </a>
  <div class="collapse navbar-collapse" id="navbarCollapsableContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#about">
          ABOUT SKA
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#startups">
          STARTUPS
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#projects">
          PROJECTS
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#get-in-touch">
          GET IN TOUCH
        </a> 
      </li>
    </ul>
  </div>
</nav> -->
  
      
      
      
      
<!--       <h1 class="header">
        About Stephen Ajayi
      </h1> -->
      <img id="ska-img" class="img-fluid col no-padding" src="https://s3-us-west-2.amazonaws.com/scoutfor-assets/SAjayi_PortlandBW+(1).jpg"/>
      <h2 class="about-sub-header">
        Founder, Developer and Evangilist
      </h2>
      <p class="about-text col-10 offset-1">Stephen was studying pre-med at Portland State University, when he saw his brother 
        going through the struggle of trying to find a job that fit him. He knew that there had to be a better way. Feeling 
        passionate about his idea, yet powerless to make it a reality, Stephen dropped out of pre-med to study programming. 
        He dove head first into the world of software development. Thus starting the unexpected journey of ScoutFor. A journey 
        that is continually reaching towards the goals of matching workers with jobs they'll love while trying to help 
        solve Tech's diversity problem.
      </p>
    </div> 
  </div>
  <div id="startups" class="section">
    <h1 class="header-white text-center">
      Startups
    </h1>
    <h2 class="about-sub-header text-center">ScoutFor</h2>
    <div class="row">
      <div class="col-5 no-padding">
        <img class="img-fluid col-12 col-md-6 no-padding scout-image" src="https://s3-us-west-2.amazonaws.com/scoutfor-assets/the_scientist.png"/>
      </div>
      <div class="col-7 no-padding">
        <h2 class="col-12 h2"><span class="bold">Share your workplace experiences</span> (anonymously of course), 
          <span class="bold">discover new opportunities</span>, and <span class="bold">stay in the loop</span> about workplaces 
          where you'll find your next great tech job.</h2>
      </div>
    </div>
    <a href="https://scoutfor.io"><button class="btn btn-lg btn-primary btn-block"/>Learn more about ScoutFor</button></a>
  </div>
  <div id="projects" class="section text-center">
    <h1>
      Projects
    </h1>
    <div class="row">
      <div class="col">
        <img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/scoutfor-assets/scoutHead%403x.png"/>
      </div>
      <div class="col">
        <img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/scoutfor-assets/scoutHead%403x.png"/>
      </div>
      <div class="col">
        <img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/scoutfor-assets/scoutHead%403x.png"/>
      </div> 
    </div>
  </div>
  <div id="get-in-touch" class="section text-center">
    <h1>Get in touch</h1>
    <div class="row">
      <div class="col-6">
        <a class="btn-link" href="https://www.linkedin.com/in/stephenkajayi">
          <button class="btn btn-block btn-primary">
            <img class="img-fluid social-btn-img" src="https://brand.linkedin.com/etc/designs/linkedin/katy/global/clientlibs/img/default-share.png"/>
          </button>
        </a>
      </div>
      <div class="col-6">
        <a class="btn-link" href="https://www.linkedin.com/in/stephenkajayi">
          <button class="btn btn-block btn-primary">
            <img class="img-fluid social-btn-img" src="https://image.flaticon.com/icons/png/512/3/3641.png"/>
          </button>
        </a>
      </div>
    </div>
  </div>
</div>
  


/*Downloaded from https://www.codeseek.co/StephenAjayi/portfolio-goZZqy */
    .navbar-bright {
  background-color: rgba(0,0,0,.72) !important;
}

#jumbo {
  background-color: #9370DB;
}

.section {
  padding: 40px 0px 40px 0px;
}

.no-padding {
  padding: 0px !important;
}

.portfolio-header {
  font-family: 'Fira Sans', sans-serif;
  font-weight: bold;
  font-style: "extra bold";
  color: #fff;
  font-size: 70px;
}

.header {
  font-family: 'Fira Sans', sans-serif;
  color: #000;
  font-weight: 400;
  padding: 0px 0px 40px 0px;
}

.about-sub-header {
 color: #fbb257;
 font-family: 'Fira Sans', sans-serif;
 padding: 20px 0px 10px 0px; 
 text-transform: uppercase;
 letter-spacing: 0.1em;
}

.about-text {
  color: #777777;
  font-size: 15px;
    font-weight: 300;
    color: rgba(0,0,0,.87);
}

#startups {
  background-color: #3ab1ba !important;
}

.header-white {
  font-family: 'Fira Sans', sans-serif;
  color: #fff;
  font-weight: 400;
  padding: 0px 0px 40px 0px;
}

.scout-image {
  float: right; 
}

.bold {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 800;  
}

.social-btn-img {
  height: 75px;
}

.nav-link {
  font-family: 'Arimo', sans-serif;  
  letter-spacing: 2px;
}

.navbar-brand {
  font-family: 'Arimo', sans-serif;  
  letter-spacing: 2px;
  font-size: 16px;
}
/* @include media-breakpoint-up(sm) {
  h2 {
    font-size: 16px;
  }
}

@include media-breakpoint-up(md) {
  h2 {
    font-size: 20px;
  }
}

@include media-breakpoint-up(lg) {
  h2 {
    font-size: 28px;
  }
} */


/* MORE THAN 75 */

/* LESS THAN 75 */
/* @media only screen and (min-width: 20.0em) { 
  #ska-img {
    top: 0px;
  }
  .navbar-brand {
    font-size: 12px;
  }
} */

@media only screen and (min-width: 33.9em) { 
   #ska-img {
    top: 0px;
  }
	.navbar-brand {
    font-size: 16px;
  }
}
@media only screen and (min-width: 47.9em) {
	#ska-img {
        top:-54px;
    }
}
@media only screen and (min-width: 61.9em) {
	#ska-img {
        top:-54px;
    }
 }
@media only screen and (min-width: 74.9em) { 
	#ska-img {
        top:-54px;
    }
}


/*Downloaded from https://www.codeseek.co/StephenAjayi/portfolio-goZZqy */
    

Comments