Skip to content

Instantly share code, notes, and snippets.

@furball514

furball514/coding-portfolio.markdown

Created March 21, 2017 07:47
Show Gist options
  • Save furball514/47c8ff80e6763b6a04be92e49236e74b to your computer and use it in GitHub Desktop.
Save furball514/47c8ff80e6763b6a04be92e49236e74b to your computer and use it in GitHub Desktop.
Download ZIP
Coding Portfolio
Raw
index.html
<head>
<link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<ul class="right">
<li><a href="#skills" class="red-text text-darken-2">Skills</a></li>
<li><a href="#projects" class="red-text text-darken-3">Projects</a></li>
<li><a href="#me" class="red-text text-darken-1">Me:</a></li>
</ul>
</div>
<em> </em>
</nav>
</div>
</header>
<div class="container z-depth-2">
<h1 class="red-text text-darken-4"> Coding <br id="break"> Portfolio </h1>
<hr>
<br>
<p> I have used Qbasic and VisualBasic before. </p>
<u> <h2 id="skills"> Skills </h2> </u>
<h3> <img src="https://thenewboston.com/images/forum/logos/145efe2aab7ca9959397d6344180b658.png" alt="html-logo"> &nbsp;HTML5</h3>
<section class="card">
<ul>
<li>&bull; Learnt HTML5 through codecademy,freecodecamp,W3schools and Beginning html by John Duckett</li>
<li>&bull; Example: <a href="http://codepen.io/furball/pen/MJLKOr" target="_blank"> My second page of <i>Redesigning Social Network </i> </a> ,
<a href="http://codepen.io/furball/pen/mRwRWE" target="_blank"> <i>Online Calculator </i> </a>
</li>
</ul>
</section>
<h3><img src="https://html5hive.org/wp-content/uploads/2014/03/css-beginners-tutorial.jpg?x30206" alt="css-logo">&nbsp;&nbsp;CSS3 </h3>
<section class="card">
<ul>
<li>&bull; Learnt CSS3 through codecademy,freecodecamp and w3schools </li>
<li>&bull; Example: <a href="http://codepen.io/furball/pen/zNdrQK" target="_blank"><i>Pomodoro Work Clock </i> </a> </li>
</ul>
</section>
<h3> <img src="http://www.w3devcampus.com/wp-content/uploads/logoAndOther/logo_JavaScript.png" alt="js-logo">&nbsp; javaScript</h3>
<section class="card">
<ul>
<li>&bull; Learnt javascript through codecademy,freecodecamp,w3schools and reading mdn documentation </li>
<li>&bull; Example: <a href="http://codepen.io/furball/pen/egGPeZ" target="_blank"><i>Simon Memory Game </i> </a> </li>
</ul>
</section>
<h3><img src="https://wikiprogramming.org/wp-content/uploads/2016/10/jquery-icon.png" alt="jquery-logo"> &nbsp;jQuery </h3>
<section class="card">
<ul>
<li>&bull; Learnt jquery through codecademy,freecodecamp,w3schools and by reading jquery documentation </li>
<li>&bull; Example: <a href="http://codepen.io/furball/pen/EZZNOY" target="_blank"><i>Twitch Streamers </i> </a> </li>
</ul>
</section>
<h3><img src="https://i0.wp.com/www.stunningmesh.com/wp-content/uploads/2016/11/Materialize-vs.-bootstrap-Which-is-best-front-end-framework.jpg?fit=560%2C397" alt="bootstrap-materialize-logo">&nbsp;&nbsp;Styling</h3>
<section class="card">
<ul>
<li>&bull; I learnt twitter-bootstrap through freecodecamp and learnt materializecss by reading the documentation</li>
<li>&bull; I have also used animate.css,weather-icons,material-icons,font-awesome and other external stylesheets</li>
<li>&bull; Example: <a href="http://codepen.io/furball/pen/apLqoN" target="_blank"><i>Tic Tac Toe game </i> </a>, <a href="http://codepen.io/furball/pen/MJaGyd" target="_blank"><i>Weather App </i></a> ,<a href="http://codepen.io/furball/pen/NpRQpz"
target="_blank"><i>Recipe Box </i> </a></li>
</ul>
</section>
<h3><img src="http://garthdb.com/img/jade_branding/jade-01.svg" alt="jade-logo"> &nbsp;jade/Pug</h3>
<section class="card">
<ul>
<li>&bull; Learnt pug by reading documentation</li>
<li>&bull; Example: <a href="http://codepen.io/furball/pen/KWmNbY" target="_blank"><i>John Conway's Game of Life</i> </a> </li>
</ul>
</section>
<h3> <img src="http://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg" alt="sass-logo">&nbsp; SASS</h3>
<section>
<ul>
<li>&bull; learnt sass through reading documentation</li>
<li>&bull; Example:
<a href="http://codepen.io/furball/pen/LWNMwr" target="_blank"> <i>freecodecamp leaderboard </i> </a>
</li>
</ul>
</section>
<h3> <img src="https://facebook.github.io/react/img/logo.svg" alt="facebook-react-logo">&nbsp;&nbsp;React</h3>
<section class="card">
<ul>
<li>&bull; Learnt react through codecademy and by reading documentation </li>
<li>&bull; Example:
<a href="http://codepen.io/furball/pen/mWPLav" target="_blank"> <i>Markdown Previewer </i> </a>,<a href="http://codepen.io/furball/pen/KWmNbY" target="_blank"><i>John Conway's game of life </i> </a> </li>
</ul>
</section>
<h3> <img src="https://lh4.googleusercontent.com/-IYyWYEXQv9Q/VPUdlW9tliI/AAAAAAAAMgU/y00btBI6krM/s550/ChromeDev.png" alt="chrome-developer-tools"> &nbsp;Chrome Devtools</h3>
<section class="card">
<ul>
<li>&bull; I have repeatedly used chrome developer tools across all my projects/challenges for various purposes </li>
<li>&bull; I have also done the video courses on freecodecamp </li>
</ul>
</section>
<h4><img src="https://cdn1.macworld.co.uk/cmsdata/features/3608274/Terminalicon2_thumb800.png" alt="terminal-osx">&nbsp;&nbsp;Unix command line </h4>
<h4> <img src="https://i.ytimg.com/vi/W6_kw-jKwfo/maxresdefault.jpg" alt="cordova">&nbsp; Apache Cordova</h4>
<h4><img src="https://docs.npmjs.com/images/npm.svg" alt="npm">&nbsp;&nbsp;npm </h4>
<h4><img src="https://garygregory.files.wordpress.com/2016/11/git_logo.png" alt="git">&nbsp;&nbsp;git </h4>
<hr>
<u><h2 id="projects" >Projects </h2></u>
<h6>Some of my projects: </h6>
<ul>
&bull;
<li>
<iframe height='200' scrolling='no' title='Simon Memory Game' src='//codepen.io/furball/embed/preview/egGPeZ/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 60%;'>See the Pen <a href='http://codepen.io/furball/pen/egGPeZ/'>Simon Memory Game</a> by Karthik (<a href='http://codepen.io/furball'>@furball</a>) on <a href='http://codepen.io'>CodePen</a>.
</iframe>
</li>
<li>&bull; <a href="http://codepen.io/collection/AedkPj/">Redesigning Social Network</a></li>
<li>&bull;
<a href="http://codepen.io/furball/pen/EZKzmg" target="_blank">Wikipedia Viewer</a>
</li>
<li>&bull;
<a href="http://codepen.io/furball/pen/MJaGyd" target="_blank"> Weather App</a>
</li>
<li>&bull;
<a href="http://codepen.io/furball/pen/mWPLav" target="_blank">Markdown Previewer</a>
</li>
<li>&bull;
<a href="http://codepen.io/furball/pen/LWNMwr " target="_blank">freeCodeCamp camper leaderboard</a>
</li>
<li>&bull;
<a href="http://codepen.io/furball/pen/KWmNbY" target="_blank">John Conway's Game Of Life</a>
</li>
<li>&bull; <a href="http://codepen.io/furball/pen/NpRQpz" target="_blank">Recipe Box </a> </li>
<li>&bull; <a href="http://codepen.io/furball/pen/JEoxYa" target="_blank">Random quote generator </a> </li>
<li>&bull; <a href="http://codepen.io/furball/pen/zNdrQK">Pomodoro clock </a></li>
<li>&bull; <a href="http://codepen.io/furball/pen/EZZNOY" target="_blank"> Twitch.tv streamers</a> </li>
     <li>&bull; <a href="#" target="_blank">Tribute To Monero: Future Of Currencies </a> </li>
<li>&bull; <a href="http://codepen.io/furball/pen/apLqoN" target="_blank">Tic Tac Toe Game </a> </li>
<li>&bull; <a href="http://codepen.io/furball/pen/mRwRWE" target="_blank"> Online Calculator</a> </li>
</ul>
<hr>
<u><h2 id="me" class="section scrollspy">Me: <a href="https://www.freecodecamp.com/furball514/front-end-certification" target="_blank"><img src="https://s28.postimg.org/uxbcfvvo9/fcccert.jpg" alt="front-end-certificate"></a></h2></u>
<ul>
<li> <span class="fa fa-codepen"> </span> <a href="http://codepen.io/furball/" target="_blank">Codepen </a> </li>
<li> <span class="fa fa-github"> </span> <a href="https://github.com/furball514" target="_blank">Github</a>,<a href="https://gist.github.com/furball514">gists </a>,gitter </li>
<li> <span class="fa fa-free-code-camp"> </span> <a href="https://www.freecodecamp.com/furball514" target="_blank">freeCodeCamp</a> </li>
<li> <span class="fa fa-stack-overflow"> </span> <a href="http://stackoverflow.com/users/7497561/furball514" target="_blank">StackOverflow</a> </li>
<li> <span> </span> <a href="https://www.codecademy.com/methodSlayer13164" target="_blank"><span id="box">Code</span><u>c</u>ademy </a> </li>
<li> <span class="fa fa-laptop"> </span> <a href="https://www.hackthissite.org/user/view/puglover" target="_blank">hackthissite.org </a> </li>
<li> <span> </span> <a href="https://www.hackthis.co.uk/" target="_blank">Hack This! </a> </li>
<li> <a href="https://codeanywhere.com/dashboard" target="_blank"><span class="fa fa-cube"> </span>&nbsp; CodeAnywhere </a> </li>
<li> <a href="www.codecloud.me" target="_blank"><span class="fa fa-cloud"> </span> &nbsp; Codecloud.me </a> </li>
<li> <a href="https://www.heroku.com" target="_blank">Herokuapp </a> </li>
<li>
<p>
<a href="http://scr.im/3nji" target="_blank"><span class="fa fa-envelope"> </span>&nbsp;Mail me</a>
</p>
</li>
</ul>
</div>
<video id="one" autoplay name="media"> <source src="https://www.soundjay.com/human/sounds/woman-scream-01.mp3" type="audio/mpeg"> </source> </video>
<audio id="gg" src="https://www.soundjay.com/button/sounds/button-50.mp3"> </audio>
<button id="theme" class="btn btn-flat black">theme<a href="" class="btn-flat black"> theme</a><button>
</body>
Raw
script.js
$(document).ready(function() {
var audio = $('#gg')[0];
$('nav li').mouseenter(function() {
audio.play();
});
$('#theme').click(function() {
$('body').css({
'background-image': 'radial-gradient(#008db6,#35005f)',
'font-family': 'serif',
'color': 'white'
});
$('em').css('display','none');
$('p, li, h1, h2, u, span, a, #box').css('color','white')
});
$('section').hide();
$('nav li').click(function() {
$('nav li').removeClass('clicked');
$(this).addClass('clicked');
});
//CANVAS BLOOD DRIPPING CODED BY RAFAELCASTROCOUTO
var ctx = $('<canvas>').get(0).getContext('2d');
$('em').append(ctx.canvas);
ctx.canvas.height = 400;
ctx.canvas.width = 600;
$(ctx.canvas).css({
position: 'absolute',
top: '0'
});
var Blood = function(x, y, r, s) {
this.x = x;
this.y = y;
this.r = r;
this.cy = y;
this.speed = s;
};
Blood.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x + 1, this.cy, this.r, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();
};
var bloodDrops = [
new Blood(4, 70, 1, 2),
new Blood(15, 74, 1, 1.5),
new Blood(49, 72, 1.5, 1),
new Blood(68, 74, 2, 1.7),
new Blood(106, 68, 1, 1.3),
new Blood(134, 71, 1, 1.9),
new Blood(164, 71, 1, 1.4),
new Blood(212, 76, 1.3, 1.1),
new Blood(263, 72, 1.8, 0.7),
new Blood(270, 75, 1.4, 1.3),
new Blood(311, 72, 1.8, 1.2),
new Blood(317, 75, 1.4, 0.9),
new Blood(363, 68, 0.8, 1.3),
new Blood(408, 70, 1.2, 1.6),
new Blood(466, 67, 0.8, 1.3),
new Blood(500, 71, 1, 1.2),
new Blood(512, 74, 1.7, 1.5),
new Blood(546, 74, 1.7, 0.8),
]
var loop = function() {
setTimeout(loop, 10)
ctx.fillStyle = 'rgba(50,0,0,0.04)';
ctx.fillRect(0, 0, 900, 400);
for (var i = 0; i < bloodDrops.length; ++i) {
bloodDrops[i].cy += bloodDrops[i].speed;
if (bloodDrops[i].cy > 600)
bloodDrops[i].cy = bloodDrops[i].y;
bloodDrops[i].draw();
}
};
loop();
//--------------------------------------------------------------------------
$('h3').hover(function() {
$(this).next().slideToggle();
}, setTimeout(function() {
$(this).next().slideToggle();
}, 5000));
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Raw
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Nosifer';
background: url('http://www.cloudburstproductions.co.uk/wp-content/uploads/2014/09/Blood-splatter.jpg')no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-width: 460px;
max-height: 460px;
min-width: 460px;
min-height: 460px;
color: red;
}
.container {
border-left: 1px solid white;
padding-left: 10px;
background-color: black;
background-color: rgba(0, 0, 0, 0.5);
width: 820px;
margin-left: 80px;
}
nav {
background: black;
background: rgba(134, 13, 21, 0.3);
}
nav li {
border-left: 1px solid white;
}
nav li:hover {
background: black;
}
p,
h2,
u,
span,
a {
color: red;
}
.card {
border-radius: 1%;
margin-left: 10px;
width: 300px;
}
img {
height: 45px;
width: 55px;
}
em {
position: fixed;
right: 300px;
top: 70px;
}
#box {
border: 1px solid red;
}
#break{
display: none;
}
.card {
background: url('https://d2gg9evh47fn9z.cloudfront.net/thumb_COLOURBOX11206446.jpg');
width: 500px;
}
.clicked {
border-bottom: 5px groove red;
}
@media only screen and (max-width: 768px) {
em {
display: none;
}
#break{
display: initial;
}
}
@media only screen and (max-width: 370px) {
nav {
display: none;
}
}
@media only screen and (max-width: 415px) {
.container {
margin-left: 0;
max-width: 400px;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment