Portfolio home page using Nate Wiley's cpv2api to pull in my most popular pens and posts. Particles.js & Skeleton.css used to spice it up.
Visit the full view at https://www.j-w-v.com
A Pen by Joseph Victory on CodePen.
Created
November 3, 2016 12:59
-
-
Save anonymous/87e2693082bf7f215a2eb5075490daf2 to your computer and use it in GitHub Desktop.
Portfolio Home Page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="visit"><a href="https://j-w-v.com/" target="_blank">Vist the live version here!</a></div> | |
| <div id="particles-js"> | |
| <div class="container"> | |
| <div class="row top"> | |
| <div class="twelve column"> | |
| <div class="logo">V</div> | |
| <h1>Joseph William Victory</h1> | |
| <h2> Web Developer</h2> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="one-half column"> | |
| <div class="pens pulled"> | |
| <h1>Pens</h1> | |
| <ul></ul> | |
| </div> | |
| </div> | |
| <div class="one-half column"> | |
| <div class="posts pulled"> | |
| <h1>Posts</h1> | |
| <ul></ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container "> | |
| <div class="footer"> | |
| <p>Made using the awesome <a href="https://github.com/VincentGarreau/particles.js/">Particles.js</a>, <a href="http://cpv2api.com/">Codepen V2 API</a> & <a href="http://getskeleton.com/">Skeleton.css</a></p> </div></div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $.getJSON("http://cpv2api.com/posts/published/j-w-v", function(resp){ | |
| if(resp.success){ | |
| for (var i = 0; i < resp.data.length; i++) { | |
| $('.posts ul').append('<li><a target="_blank" href="' + resp.data[i].link +'">' + resp.data[i].title + ' <span> ' +resp.data[i].views+ ' views</span> </a></li>'); | |
| } | |
| } | |
| }); | |
| $.getJSON("http://cpv2api.com/pens/showcase/j-w-v", function(resp){ | |
| if(resp.success){ | |
| for (var i = 0; i < 5; i++) { | |
| $('.pens ul').append('<li><a target="_blank" href="' + resp.data[i].link +'">' + resp.data[i].title + ' <span> ' +resp.data[i].views+ ' views</span> </a></li>'); | |
| } | |
| } | |
| }); | |
| particlesJS("particles-js", { | |
| "particles": { | |
| "number": { | |
| "value": 33, | |
| "density": { | |
| "enable": true, | |
| "value_area": 1420.4657549380909 | |
| } | |
| }, | |
| "color": { | |
| "value": "#ffffff" | |
| }, | |
| "shape": { | |
| "type": "triangle", | |
| "stroke": { | |
| "width": 0, | |
| "color": "#000000" | |
| }, | |
| "polygon": { | |
| "nb_sides": 5 | |
| }, | |
| "image": { | |
| "src": "img/github.svg", | |
| "width": 100, | |
| "height": 100 | |
| } | |
| }, | |
| "opacity": { | |
| "value": 0.06313181133058181, | |
| "random": false, | |
| "anim": { | |
| "enable": false, | |
| "speed": 1, | |
| "opacity_min": 0.1, | |
| "sync": false | |
| } | |
| }, | |
| "size": { | |
| "value": 11.83721462448409, | |
| "random": true, | |
| "anim": { | |
| "enable": false, | |
| "speed": 40, | |
| "size_min": 0.1, | |
| "sync": false | |
| } | |
| }, | |
| "line_linked": { | |
| "enable": true, | |
| "distance": 150, | |
| "color": "#ffffff", | |
| "opacity": 0.4, | |
| "width": 1 | |
| }, | |
| "move": { | |
| "enable": true, | |
| "speed": 6, | |
| "direction": "none", | |
| "random": false, | |
| "straight": false, | |
| "out_mode": "out", | |
| "bounce": false, | |
| "attract": { | |
| "enable": false, | |
| "rotateX": 600, | |
| "rotateY": 1200 | |
| } | |
| } | |
| }, | |
| "interactivity": { | |
| "detect_on": "canvas", | |
| "events": { | |
| "onhover": { | |
| "enable": true, | |
| "mode": "repulse" | |
| }, | |
| "onclick": { | |
| "enable": true, | |
| "mode": "push" | |
| }, | |
| "resize": true | |
| }, | |
| "modes": { | |
| "grab": { | |
| "distance": 400, | |
| "line_linked": { | |
| "opacity": 1 | |
| } | |
| }, | |
| "bubble": { | |
| "distance": 400, | |
| "size": 40, | |
| "duration": 2, | |
| "opacity": 8, | |
| "speed": 3 | |
| }, | |
| "repulse": { | |
| "distance": 200, | |
| "duration": 0.4 | |
| }, | |
| "push": { | |
| "particles_nb": 4 | |
| }, | |
| "remove": { | |
| "particles_nb": 2 | |
| } | |
| } | |
| }, | |
| "retina_detect": true | |
| }); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| BODY { | |
| background: #282931; | |
| -webkit-font-smoothing: antialiased; | |
| font-family: 'Varela Round', sans-serif; | |
| height: 100%; | |
| } | |
| canvas { | |
| height: 100vh; | |
| z-index: -10; | |
| position: fixed; | |
| top: 0px; | |
| } | |
| a { | |
| color: #bbbbc4; | |
| text-decoration: none; | |
| -o-transition: .5s; | |
| -ms-transition: .5s; | |
| -moz-transition: .5s; | |
| -webkit-transition: .5s; | |
| transition: .5s; | |
| } | |
| a:hover { | |
| color: #fc3565; | |
| } | |
| h1 { | |
| color: #fc3565; | |
| padding-bottom: 0px; | |
| margin-bottom: 1%; | |
| } | |
| h2 { | |
| color: #555560; | |
| font-size: 3rem; | |
| font-weight: bold; | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| .logo { | |
| font-family: 'Monoton', cursive; | |
| color: white; | |
| font-size: 8rem; | |
| } | |
| .top { | |
| padding-bottom: 5rem; | |
| } | |
| .pulled {} | |
| .pulled ul li { | |
| list-style: none; | |
| margin-right: 2rem; | |
| font-size: 1.8rem; | |
| } | |
| .pulled h1 { | |
| color: white; | |
| font-size: 3rem; | |
| } | |
| .pulled ul li span{ | |
| font-size:1.2rem; | |
| } | |
| .footer{ | |
| padding-top:5rem; | |
| } | |
| .footer p{ | |
| color:white; | |
| font-size:1.2rem; | |
| } | |
| .visit{ | |
| color:white; | |
| font-size:12px; | |
| background:#32333a;; | |
| width:150px; | |
| padding:6px; | |
| border-radius:10px; | |
| position:fixed; | |
| right:20px; | |
| } | |
| /* Mobile first queries */ | |
| /* Larger than mobile */ | |
| @media (min-width: 400px) {} | |
| /* Larger than phablet */ | |
| @media (min-width: 550px) {} | |
| /* Larger than tablet */ | |
| @media (min-width: 750px) {} | |
| /* Larger than desktop */ | |
| @media (min-width: 1000px) {} | |
| /* Larger than Desktop HD */ | |
| @media (min-width: 1200px) { | |
| h1 { | |
| font-size: 4rem; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment