Portfolio 2.0

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

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

Technologies

  • HTML
  • CSS
  • JavaScript
    <html>
  <head>
     <title>Charles E. Ocampo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  </head>
  
  <body>    
        <div id="home"></div>
        <header>
            <div class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" style="padding: 25px 3%;" data-toggle="affix">
                    <a class="navbar-brand" href="#home" style="font-size: 30px">Charles E. Ocampo</a>
                
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                
                    <div class="collapse navbar-collapse" id="navbarNavDropdown">

                        <ul class="navbar-nav ml-auto" >
                            <li class="nav-item">
                                <a class="nav-link nav-color" href="#home">Home<span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item ">
                                <a class="nav-link nav-color" href="#about">About</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link nav-color" href="#port">Portfolio</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link nav-color" href="#contact">Contact</a>
                            </li>                              
                        </ul>
                    </div>
            </div>
        </header>

        <section class="row">
            <div class="col-lg-12 col-md-12 fill-screen" style="background-image: url(https://image.ibb.co/bxhr87/bg_2.jpg)">
                <h1 id="bannerText">Developer In Progress</h1>
                <div class="down-button">
                    <a class="btn" href="#about">
                        <i id="arrow" class="fas fa-arrow-alt-circle-down"></i>
                    </a>
                </div>
            </div>
        </section>

        <div id="about"></div>
        <section class="row about-style">                       
            <div class="col-lg-8">
                <h2>About</h2>
                <br>
                <p>I am a Senior Research Scientist conducting research and development in chemical manufacturing at a startup company located in Palm Beach Gardens, FL. I gradudated from the University of Florida with a degree in chemistry in 2012, and I recently received my PhD in organic chemistry at MIT in June last year. During my graduate studies, I focused on the development of novel methodologies and syntheses applied toward production of pharmaceutical compounds. Specifically I developed a method that was applied toward the synthesis of <a href="https://en.wikipedia.org/wiki/Tenofovir_disoproxil" target="_blank">tenofovir</a>, an antiretroviral compound used for the treatment of HIV/AIDS. Later in my graduate career, I focused on a novel, convergent synthesis of <a href="https://en.wikipedia.org/wiki/Bedaquiline" target ="_blank">bedaquiline</a>, which is used for the treatment of tuberculosis.</p>
                <p>My interest in learning how to code began around high school, but it wasn't until graduate school when I took the initiative to start learning on my own. During my 4th year, I began to learn basic JavaScript but had to stop since my graduate work took up much of my time. Now, I am starting from scratch again with the help of freeCodeCamp, SoloLearn, Pluralsight, and other resources. 
                <p>I am currently learning the following skills:</p>
                <div data-aos="slide-right" data-aos-duration="1000" data-aos-delay="500">
                    <img class="skills" src="http://quantilus.com/wp-content/uploads/2018/01/html5-css-javascript-logos.png" alt="HTML5-CSS3-JS">
                    <img class="skills" src="https://botw-pd.s3.amazonaws.com/styles/logo-thumbnail/s3/092011/jquery.png?itok=Yh7GpHmE" alt="jQuery">
                  <img class="skills" src="https://www.proximitycr.com/wp-content/uploads/2017/05/React-logo.png" alt="React">
                    <img class="skills" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgOXnH2jzdsb1dtVHockBcl5xfr4FahTihqa_eDRv2RaZyuya_oQ" alt="Bootstrap">
                    <img class="skills"src="https://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg" alt="SASS">
                </div>
                <!-- <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>Bootstrap</li>
                    <li>JavaScript</li>
                    <li>jQuery</li>
                </ul> -->
                <p>This portfolio page is a work in progress and I will keep updating the styling and UI as I learn more code.</p>
            </div>   
            <div class="col-lg-4 schools">
                <img src="https://yt3.ggpht.com/a-/AJLlDp1XigiFXM0Nf-pmwv4G5eB8JCntc6ppi5wHpQ=s900-mo-c-c0xffffffff-rj-k-no" alt="UF Image" class="uf" data-aos="flip-right">
                <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/44/MIT_Seal.svg/1200px-MIT_Seal.svg.png" alt="MIT Image" class="mit" data-aos="flip-right">
            </div>                    
        </section>
        <div class="fixed-height">
             <section class="row">          
                <div class="col-lg-12  fixed-attachment" style="background-image: url(https://image.ibb.co/e0kB87/bg_3.jpg)"></div>           
            </section>
        </div>

        <div id="port"></div>
        <section class="portfolio">
            <h1>Portfolio</h1>
            <br>
            <p>The following items are some of the projects I have worked on and I have also included a few publications of my research in college and grad school.</p>
            <br>
            <div class="row">
                <div class="col-lg-9">
                  
                                      <div class="row">      
                        <div class="col-lg-3">
                            <a class="img-port" href="https://codepen.io/ceocampo/full/Zoeoxz/" target="_blank"><img class="img-fluid img-thumbnail" src="https://image.ibb.co/bA61ny/Simon_Game.png" alt="Simon Game" data-aos="fade-down-right"></a>
                        </div>      
                                        
                       <div class="col-lg-3">
                            <a class="img-port" href="https://codepen.io/ceocampo/full/geEgby/" target="_blank"><img class="img-fluid img-thumbnail" src="https://image.ibb.co/mfsijd/Tic_Tac_Toe_Game.png" alt="TicTacToe" data-aos="fade-down"></a>
                       </div>                                     

                        <div class="col-lg-3">
                            <a class="img-port" href="https://codepen.io/ceocampo/full/xWyLeY/" target="_blank"><img class="img-fluid img-thumbnail" src="https://image.ibb.co/iag4qJ/Pomodoro_Clock.png" alt="PomClock" data-aos="fade-down"></a>
                        </div>

                        <div class="col-lg-3">
                            <a class="img-port" href="https://codepen.io/ceocampo/full/ddxVGJ/" target="_blank"><img class="img-fluid img-thumbnail" src="https://image.ibb.co/iMDCcy/My_Calculator.png" alt="Calculator" data-aos="fade-down-left"></a>
                        </div>
                                        
                    </div>
                    <br>
                  
                    <div class="row">                    

                    <div class="col-lg-3">
                            <a class="img-port" href="https://codepen.io/ceocampo/full/vdzNrN/" target="_blank"><img class="img-fluid img-thumbnail" src="https://image.ibb.co/dwogny/Twitch_App.png" alt="Twitch App" data-aos="fade-down"></a>
                        </div>

                        <div class="col-lg-3">
                            <a class="img-port" href="https://codepen.io/ceocampo/full/mXMpQp/" target="_blank"><img class="img-fluid img-thumbnail" src="https://image.ibb.co/bZMjPd/Wiki_Viewer.png" alt="Wiki Viewer" data-aos="fade-down"></a>
                        </div>
                      
                        <div class="col-lg-3">
                            <a class="img-port" href="https://codepen.io/ceocampo/full/EQZdYp/" target="_blank"><img class="img-fluid img-thumbnail" src="https://image.ibb.co/crf6BS/Local_Weather_App.jpg" alt="Weather App" data-aos="fade-down"></a>
                        </div>                         

                    <div class="col-lg-3">
                            <a class="img-port" href="https://codepen.io/ceocampo/full/mXOLxb/" target="_blank"><img class="img-fluid img-thumbnail" src="https://image.ibb.co/e5q6BS/Random_Quote_Generator.jpg" alt="Quote Generator" data-aos="fade-down"></a>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-lg-3">
                            <a class="img-port" href="https://codepen.io/ceocampo/full/RxjYaY/" target="_blank"><img class="img-fluid img-thumbnail" src="https://image.ibb.co/dA0tzG/Project_1_portfolio.jpg" alt="image of 1st freeCodeCamp project" data-aos="fade-down-left"></a>
                        </div>      

                        <div class="col-lg-3">
                            <a class="img-port" href="https://pubs.acs.org/doi/abs/10.1021/ol503612h?journalCode=orlef7" target="_blank"><img class="img-fluid img-thumbnail" src="https://image.ibb.co/mk5yYb/OL_2015_IMAGE.jpg" alt="OrgLett" data-aos="fade-down-left"></a>
                        </div>
                      
                        <div class="col-lg-3">
                            <a class="img-port" href="http://pubs.rsc.org/en/content/articlelanding/2012/ob/c2ob25996f#!divAbstract" target="_blank"><img class="img-fluid img-thumbnail" src="https://image.ibb.co/bEaQp6/OBC_2012_IMAGE.jpg" alt="OBC" data-aos="fade-up-right"></a>
                        </div> 
                        <div class="col-lg-3">
                            <a class="img-port" href="http://pubs.acs.org/doi/abs/10.1021/jo2023125" target="_blank"><img class="img-fluid img-thumbnail" src="https://image.ibb.co/gzxibm/JOC_2012_IMAGE.jpg" alt="image of 1st freeCodeCamp project" data-aos="fade-up"></a>
                        </div>                         
                    </div>   
                </div>
              
              <!-- end of portfolio images and links -->
              
                <div class="col-lg-3">
                    <img src="https://www.mckcoaching.com/wp-content/uploads/2015/04/stack-of-binders.jpg" alt="binders" id="binder">
                </div>
            </div>
        </section>
               
        <img class="img-fluid banner" src="https://image.ibb.co/nfVERS/bg_1.jpg" alt="Banner Picture">
              
        <div class="contact" id="contact">
            <div class="row">
                <div class="col-lg-12">
                    <h2>Contact</h2>
                    <div class="row">
                        <div class="col-lg-4">
                            <form action="mailto:charlesocampo@gmail.com" enctype="text/plain" onsubmit="location.href='Thank You!'">
                                <p>name</p>
                                <input type="text">
                                <p>email</P>
                                <input type="text">
                                <p>message</p>
                                <textarea rows="4" cols="40"></textarea>
                                <br>
                                <input type="submit">
                            </form>
                        </div>                                    
                        <div class="col-lg-8">
                            <p> If you would like to contact me, please send me a message and I will get back to you as soon as possible.</p>
                            <p> You can also reach me at charlesocampo@gmail.com.</p>
                        </div>
                    </div>
                </div>
            </div>
         </div>

        <div class="socialIcons row">
            <div class="col-lg-12">
                <a href="https://www.facebook.com/charlesocampo" target="_blank"><img class="social" src="https://image.flaticon.com/icons/svg/174/174848.svg" alt="facebook icon" data-aos="flip-up" data-aos-duration="500" data-aos-once="true"></a>
                    
                <a href="https://www.instagram.com/charlesocampo/" target="_blank"><img class="social" src="https://image.flaticon.com/icons/svg/174/174855.svg" alt="instagram icon" data-aos="flip-up" data-aos-duration="500" data-aos-once="true"></a>
                    
                <a href="https://twitter.com/CharlesEOcampo" target="_blank"><img class="social" src="https://image.flaticon.com/icons/svg/174/174876.svg" alt="twitter icon" data-aos="flip-up" data-aos-duration="500" data-aos-once="true"></a>
                    
                <a href="https://www.linkedin.com/in/ceocampo/" target="_blank"><img class="social" src="https://image.flaticon.com/icons/svg/174/174857.svg" alt="linkedin icon" data-aos="flip-up" data-aos-duration="500" data-aos-once="true"></a>
            
                <a href="https://www.freecodecamp.org/ceocampo" target="_blank"><img id="fccborder" class="social" src="https://i.vimeocdn.com/portrait/11611272_640x640" alt="freeCodeCamp icon" data-aos="flip-up" data-aos-duration="500" data-aos-once="true"></a>
            </div>
        </div>
         
         
  
            </div>
        <footer>
            <div class="container-fluid">
            &copy 2018 Charles E. Ocampo
            </div>
        </footer>
    </body>
  
  
</html>


/*Downloaded from https://www.codeseek.co/ceocampo/portfolio-20-mXLPVd */
    body {
    font-family: 'Open Sans', sans-serif;
    padding-top: 10px;
    overflow-x: hidden;
  }
  
#home {
    transform: translate (0, -10px);
}

.navbar {
    -webkit-transition:padding 0.3s ease;
    -moz-transition:padding 0.3s ease; 
    -o-transition:padding 0.3s ease;        
    transition:padding 0.3s ease;
}

.nav-color {
    color: rgb(209, 209, 209) !important;
}

.nav-color:hover {
    color:white !important;
}

.affix {
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
    -webkit-transition:padding 0.3s linear;
    -moz-transition:padding 0.3s linear;  
    -o-transition:padding 0.3s linear;         
    transition:padding 0.3s linear;
    opacity: 0.9;  
}

section {
    min-height:calc(100% - 70px);
}

.fill-screen {
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    height: 100vh;
}

#bannerText {
    position: absolute;
    display: flex;
    color: white;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    justify-content: center;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    text-shadow: 2px 2px 30px #000000;
}

#arrow {
    position: absolute;
    color: black;
    font-size: 60px;
    opacity: 0.8;
    bottom: 70px;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
}

.skills {
    height: 100px;
    margin-right: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.content-filler {
    min-height: 350px;
}

.fixed-attachment {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.fixed-height {
    height: 500px;
}

@media (max-width: 1024px) {
    .fixed-attachement {
        background-attachment: scroll;
    }
}
.portfolio {
    background: rgb(255, 255, 255);
    padding: 0 7% 5% 7%;
    min-height: 400px;
}

#about {
    transform: translate(0, -10px);
}

#port {
    transform: translate(0, -80px);
}

footer {
    background: rgb(36, 36, 36);
    color: white;
    margin: auto;
    text-align: center;
    padding: 0.5%;
}

.about-style {
    background: rgb(255, 255, 255);
    padding: 3% 7%;
    min-height: 400px;
}

.schools {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.uf {
    height: 250px;
    margin-bottom: 20px;
}

.mit {
    height: 250px;
}

.img-thumbnail {
    height: auto;
    width: auto;
    box-shadow: 1px 1px 10px #000000;
}

.img-port:hover {
    opacity: 0.8;
}

#binder {
    height: 250px;
    margin-left: 150px;
    margin-top: 50px;
}

.banner {
  width: 100%;
}

.contact {
    background: rgb(255, 255, 255);
    padding: 3% 7%;
    min-height: 300px;
}

.social {
    height: 40px;
    margin: 0 5px;
    opacity: 1;
}

.social:hover {
    opacity: 0.8;
}

.socialIcons {
    margin: 30px 0 10px 0;
    padding: 0 3%;
    float: right;
}

#fccborder {
    border-radius: 5px;
}

footer {
    clear: both;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100px;
}




/*Downloaded from https://www.codeseek.co/ceocampo/portfolio-20-mXLPVd */
    $(document).ready(function() {

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });

    // Navbar shrink code
    var toggleAffix = function(affixElement, scrollElement, wrapper) {
    
      var height = affixElement.outerHeight(),
          top = wrapper.offset().top;
      
      if (scrollElement.scrollTop() >= top){
          wrapper.height(height);
          affixElement.addClass("affix");
      }
      else {
          affixElement.removeClass("affix");
          wrapper.height('auto');
      }
        
    };
    
    $('[data-toggle="affix"]').each(function() {
      var ele = $(this),
          wrapper = $('<div></div>');
      
      ele.before(wrapper);
      $(window).on('scroll resize', function() {
          toggleAffix(ele, $(this), wrapper);
      });
      
      // init
      toggleAffix(ele, $(window), wrapper);
       });
    // Navbar shrink code ^^^

    $(window).on("load resize", function () {
        $(".fill-screen").css("height", window.innerHeight); 
    });

});

 AOS.init({
   duration: 2000,
   once: true
 });







Comments