Skip to content

Instantly share code, notes, and snippets.

@Good-Will-Coding

Good-Will-Coding/index.html

Created March 17, 2019 18:51
Show Gist options
  • Save Good-Will-Coding/225bf1fb1e037fb656b9aea26cfb3041 to your computer and use it in GitHub Desktop.
Save Good-Will-Coding/225bf1fb1e037fb656b9aea26cfb3041 to your computer and use it in GitHub Desktop.
Download ZIP
v2
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://fonts.googleapis.com/css?family=Bungee+Shade|VT323|Ubuntu|Press+Start+2P"
" rel="stylesheet " />
<link
rel="stylesheet "
href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css "
/>
<link
rel="stylesheet "
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css "
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU "
crossorigin="anonymous "
/>
<link rel="stylesheet " href="/style.css " />
<link rel="stylesheet " href="https://unpkg.com/aos@next/dist/aos.css " />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<title>Billy Phillips | JavaScript Developer</title>
</head>
<body>
<!-- Hero -->
<section class="et-hero-tabs">
<!-- Header -->
<header id="header-top " class="header ">
<div data-aos="zoom-in-up ">
<h1 class="header-title ">Billy Phillips</h1>
</div>
<div data-aos="fade-left ">
<h2 class="header-subtitle ">Software Developer</h2>
</div>
<span class="icons ">
<a href="https://github.com/Good-Will-Coding "
><i class="devicon-github-plain "></i
></a>
<a href="https://www.linkedin.com/in/billy-phillips-581b12172/ ">
<i class="fab fa-linkedin "></i
></a>
<a href="mailto:[email protected]"
><i class="far fa-envelope"></i
></a>
</span>
<h5 class="header-about">
<img class="animated slideInLeft delay-1s"id="eng-icon" src="https://i.ibb.co/BNbKTzr/engin2.png" />
Hi, I'm <strong class="strong-about ">Billy</strong>. I'm an experienced
Software Developer focused on building web apps, mobile apps, and
websites, using
<strong class="strong-about ">JavaScript, React, Node.js</strong>
and more. Feel free to e-mail or connect with me if you'd like to know
more about my current skills and projects.
</h5>
</header>
<div class="et-hero-tabs-container">
<a class="et-hero-tab" href="#nav-skills">Skills</a>
<a class="et-hero-tab" href="#nav-projects">Projects</a>
<a class="et-hero-tab" href="#nav-contact">Contact</a>
<span class="et-hero-tab-slider"></span>
</div>
</section>
<!-- Skills -->
<section id="nav-skills" class="section-skills ">
<span class="section-title ">Current Skills</span>
<div class="section-skill__icons ">
<div data-aos="fade-up-right ">
<i class="devicon-html5-plain-wordmark "></i>
<i class="devicon-css3-plain-wordmark "></i>
<i class="devicon-sass-original "></i>
<i class="devicon-bootstrap-plain-wordmark"></i>
<i class="devicon-javascript-plain-wordmark"></i>
<i class="devicon-react-original-wordmark "></i>
</div>
<div data-aos="fade-down-left ">
<i class="devicon-nodejs-plain-wordmark "></i>
<i class="devicon-express-original-wordmark"></i>
<i class="devicon-postgresql-plain-wordmark"></i>
<i class="devicon-mongodb-plain-wordmark"></i>
<i class="devicon-git-plain-wordmark"></i>
<i class="devicon-github-plain-wordmark "></i>
<i class="devicon-heroku-line-wordmark "></i>
<i class="devicon-linux-plain"></i>
</div>
</div>
</section>
<!-- Projects -->
<section id="nav-projects" class="projects ">
<span class="projects-title ">My Projects</span>
</section>
<section>
<div class="container ">
<div class="project-list-first ">
<span class="project-one__title ">InviteMe </span><br /><br />
<div
class="technologies-used
"
>
InviteMe is a single page application that uses React, Redux,
React-Router, Bootstrap, and Firebase. The goal of this project was
to create an application for my family that allowed them to check
for invites within our social circle. There was a need for this
application because we would often get to the day of the event and
hear, "You never invited me! " Well, with InviteMe... There are no
more excuses. We're happy with that. <br />
<br />
The live version that goes with this project can be found here:
<a class="link-color " href="https://inviteme.netlify.com/ "
>https://inviteme.netlify.com/</a
>
<br />
<strong>Source Code: </strong>
<a
class="link-color "
href="https://github.com/Good-Will-Coding/InviteMe "
>Github</a
>
</div>
</div>
<div class="project-list-second ">
<div data-aos="zoom-in">
<img
src="https://i.ibb.co/3R1HDSZ/appleinvitemephone.png "
alt=" "
class="project-img "
/>
<img
class="laptop "
src="https://i.ibb.co/800zYms/applelaptopinviteme.png "
alt=" "
/>
</div>
</div>
</div>
<div class="container ">
<div class="project-list-first ">
<span class="project-one__title ">Movies to Watch </span><br /><br />
<div class="technologies-used ">
Movies to Watch is a web application that uses React, React Router,
Node.js, Express.js, and PostgreSQL The goal of this project was to
create an application to keep track of movies that a user has watch
or hasn't watched yet.. <br />
<br />
The live version that goes with this project can be found here:
<a class="link-color " href="https://movie-app-list.herokuapp.com/ "
>https://movie-app-list.herokuapp.com/</a
>
<br />
<strong>Source Code: </strong>
<a
class="link-color "
href="https://github.com/Good-Will-Coding/node-movieapp "
>Github</a
>
</div>
</div>
<div class="project-list-second ">
<div data-aos="zoom-in">
<img
src="https://i.ibb.co/vs0fCdv/movielistphone.png "
alt=" "
class="project-img "
/>
<img
class="laptop "
src="https://i.ibb.co/VmG4mxj/movielistapplelaptop.png "
alt=" "
/>
</div>
</div>
</div>
<div class="container ">
<div class="project-list-first ">
<span class="project-one__title ">Runescape Tracker </span
><br /><br />
<div class="technologies-used ">
Runescape tool is a web application that uses React. The goal of
this project was to create an application for users to search up
their game stats and scores on Old School Runescape. <br />
<br />
The live version that goes with this project can be found here:
<a class="link-color " href="https://runescapestats.netlify.com/ "
>https://runescapestats.netlify.com/</a
>
<br />
<strong>Source Code: </strong>
<a
class="link-color "
href="https://github.com/Good-Will-Coding/runescape-tool "
>Github</a
>
</div>
</div>
<div class="project-list-second ">
<div data-aos="zoom-in">
<img
src="https://i.ibb.co/wyTY7HX/applephonerunescape.png "
alt=" "
class="project-img "
/>
<img
class="laptop "
src="https://i.ibb.co/nzqXrS3/applelaptoprunescape.png "
alt=" "
/>
</div>
</div>
</div>
</section>
<!-- Contact -->
<div id="nav-contact" class="contact-container ">
<span class="section-title contact ">Contact</span>
<div class="container-contact-info ">
<form
action="https://formspree.io/[email protected] "
method="POST "
>
<ul class="flex-outer ">
<li>
<label for="first-name ">First Name</label>
<input
type="text "
name="firstname"
id="first-name "
placeholder="Enter your first name here "
/>
</li>
<li>
<label for="last-name ">Last Name</label>
<input
type="text "
name="lastname"
id="last-name "
placeholder="Enter your last name here "
/>
</li>
<li>
<label for="email ">Email</label>
<input
type="email "
name="_replyto "
id="email "
placeholder="Enter your email here "
/>
</li>
<li>
<label for="phone ">Phone</label>
<input
type="tel "
name="phone"
id="phone "
placeholder="Enter your phone here "
/>
</li>
<li>
<label for="message ">Message</label>
<textarea
rows="6 "
name="message"
id="message "
placeholder="Enter your message here "
></textarea>
</li>
<li><button type="submit " value="Send">Send</button></li>
</ul>
</form>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<span>© 2019 - Billy Phillips</span>
</footer>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
Raw
script.js
class StickyNavigation {
constructor() {
this.currentId = null;
this.currentTab = null;
this.tabContainerHeight = 70;
let self = this;
$('.et-hero-tab').click(function() {
self.onTabClick(event, $(this));
});
$(window).scroll(() => { this.onScroll(); });
$(window).resize(() => { this.onResize(); });
}
onTabClick(event, element) {
event.preventDefault();
let scrollTop = $(element.attr('href')).offset().top - this.tabContainerHeight + 1;
$('html, body').animate({ scrollTop: scrollTop }, 600);
}
onScroll() {
this.checkTabContainerPosition();
this.findCurrentTabSelector();
}
onResize() {
if(this.currentId) {
this.setSliderCss();
}
}
checkTabContainerPosition() {
let offset = $('.et-hero-tabs').offset().top + $('.et-hero-tabs').height() - this.tabContainerHeight;
if($(window).scrollTop() > offset) {
$('.et-hero-tabs-container').addClass('et-hero-tabs-container--top');
}
else {
$('.et-hero-tabs-container').removeClass('et-hero-tabs-container--top');
}
}
findCurrentTabSelector(element) {
let newCurrentId;
let newCurrentTab;
let self = this;
$('.et-hero-tab').each(function() {
let id = $(this).attr('href');
let offsetTop = $(id).offset().top - self.tabContainerHeight;
let offsetBottom = $(id).offset().top + $(id).height() - self.tabContainerHeight;
if($(window).scrollTop() > offsetTop && $(window).scrollTop() < offsetBottom) {
newCurrentId = id;
newCurrentTab = $(this);
}
});
if(this.currentId != newCurrentId || this.currentId === null) {
this.currentId = newCurrentId;
this.currentTab = newCurrentTab;
this.setSliderCss();
}
}
setSliderCss() {
let width = 0;
let left = 0;
if(this.currentTab) {
width = this.currentTab.css('width');
left = this.currentTab.offset().left;
}
$('.et-hero-tab-slider').css('width', width);
$('.et-hero-tab-slider').css('left', left);
}
}
new StickyNavigation();
Raw
style.scss
* {
margin: 0;
font-family: "Ubuntu", sans-serif;
box-sizing: border-box;
}
:root {
--primary-color: #2c2c54;
/* --secondary-color: ; */
--text-color: white;
--icon-color: #706fd3;
--primary-font: "Press Start 2P";
}
i:hover {
color: var(--icon-color);
}
html {
background: var(--primary-color);
}
// Nav
.et-hero-tabs,
.et-slide {
display: flex;
flex-direction: column;
justify-content: center;
font-family: var(--primary-font);
align-items: center;
height: 100vh;
position: relative;
// background: #eee;
text-align: center;
padding: 0 2em;
h1 {
font-size: 2rem;
margin: 0;
letter-spacing: 1rem;
}
h3 {
font-size: 1rem;
letter-spacing: 0.3rem;
opacity: 0.6;
}
}
.et-hero-tabs-container {
display: flex;
flex-direction: row;
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
background: #fff;
z-index: 10;
&--top {
position: fixed;
top: 0;
}
}
.et-hero-tab {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
color: #000;
letter-spacing: 0.1rem;
transition: all 0.5s ease;
font-size: 0.8rem;
&:hover {
color:white;
background: limegreen;
transition: all 0.5s ease;
}
}
.et-hero-tab-slider {
position: absolute;
bottom: 0;
width: 0;
height: 6px;
background: #66B1F1;
transition: left 0.3s ease;
}
@media (min-width: 800px) {
.et-hero-tabs,
.et-slide {
h1 {
font-size: 3rem;
}
h3 {
font-size: 1rem;
}
}
.et-hero-tab {
font-size: 1rem;
}
}
/* Header */
.header {
height: 100vh;
background: #0e0a1a;
/* background:
linear-gradient(
var(--primary-color),
rgba(34, 17, 66, 0.788)
),
url('https://i.ibb.co/RgdgVJ8/portfoliobackground-1.jpg'); */
background-size: cover;
background-position: top right;
position: relative;
// -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 90%, 0% 75%, 0 0);
// clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 90%, 0% 75%, 0 0);
}
.header-title {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
color: limegreen;
letter-spacing: 1.5px;
text-shadow: 3px 3px lime;
padding-top: 5%;
margin-bottom: 5px;
font-size: 4rem;
font-family: "Press Start 2P", cursive;
}
@media only screen and (max-width: 700px) {
.header-title {
font-size: 6vw;
}
.header-subtitle {
font-size: 2vw;
}
}
.header-subtitle {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
letter-spacing: 1.5px;
color: #f7f7f7;
/* text-shadow: 1px 1px pink; */
font-family: "Press Start 2P", cursive;
margin-top: 45px;
}
.header i {
color: var(--icon-color);
font-size: 4vw;
padding-left: 12px;
padding-right: 12px;
text-decoration: none;
text-shadow: 4px 2px #40407a;
}
span.icons {
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 6px;
}
.header i:hover,
active {
color: limegreen;
text-decoration: none;
}
#eng-icon {
width: 6%;
}
.header-about {
margin: 200px 300px;
margin-top: 50px;
color: var(--text-color);
text-align: center;
font-family: "Ubuntu", sans-serif;
}
.strong-about {
color: limegreen;
}
@media only screen and (max-width: 900px) {
.header-about {
margin: 50px;
}
}
@media only screen and (max-width: 400px) {
.header-about {
margin: 50px;
font-size: 3.5vw;
}
.header i {
font-size: 12vw;
text-shadow: 1px 1px #14352c;
}
.header-subtitle {
font-size: 4.5vw;
}
}
/* Skills */
.section-skills {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
background: var(--primary-color);
}
.section-title {
font-family: "Press Start 2P", cursive;
font-size: 2rem;
color: white;
padding-top: 50px;
}
.section-skill__icons {
color: var(--icon-color);
/* text-shadow: 2px 3px #400ff1; */
font-size: 10rem;
margin: 50px 50px;
}
.section-skill_reduxicon {
width: 120px;
margin: 50px 50px;
display: inline-block;
}
/* Projects */
.projects-title {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
background: #0e0e14;
padding-bottom: 50px;
padding-top: 50px;
color: lime;
font-family: "Press Start 2P", cursive;
font-size: 2rem;
}
.container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100% 100%;
width: 100%;
background: #706fd3;
font-family: "Ubuntu", sans-serif;
text-align: center;
}
.container div {
background: #1d1d22;
color: #c7d1c7;
}
.container a {
color: limegreen;
}
.technologies-used {
margin-left: 10px;
word-wrap: break-word;
}
.project-list-first {
padding-top: 50px;
}
.project-list-second {
flex-direction: column;
justify-content: center;
text-align: center;
display: inline;
padding-bottom: 6%;
}
.project-one__title {
font-size: 2vw;
}
@media only screen and (max-width: 700px) {
.project-one__title {
font-size: 6vw;
}
}
.project-img {
padding-top: 50px;
width: 10%;
height: auto;
display: inline-block;
}
.laptop {
padding-top: 50px;
width: 50%;
}
@media only screen and (max-width: 700px) {
.laptop {
width: 50vw;
}
.project-img {
width: 20vw;
}
}
.link-color {
color: #4b6584;
}
/* Contact */
.contact-container {
background: var(--primary-color);
padding: 4%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
font-family: var(--primary-font);
}
.contact-container > span {
padding-bottom: 4%;
}
.container-contact-info {
width: 80%;
max-width: 1200px;
margin: 0 auto;
}
.container-contact-info label {
color: white;
}
.flex-outer,
.flex-inner {
list-style-type: none;
padding: 0;
}
.flex-outer {
max-width: 800px;
margin: 0 auto;
}
.flex-outer li,
.flex-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.flex-inner {
padding: 0 8px;
justify-content: space-between;
}
.flex-outer > li:not(:last-child) {
margin-bottom: 20px;
}
.flex-outer li label,
.flex-outer li p {
padding: 8px;
font-weight: 300;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.flex-outer > li > label,
.flex-outer li p {
flex: 1 0 120px;
max-width: 220px;
}
.flex-outer > li > label + *,
.flex-inner {
flex: 1 0 220px;
}
.flex-outer li p {
margin: 0;
}
.flex-outer li input:not([type="checkbox"]),
.flex-outer li textarea {
padding: 15px;
border: none;
}
.flex-outer li button {
margin-left: auto;
padding: 8px 16px;
border: none;
background: #333;
color: #f2f2f2;
text-transform: uppercase;
letter-spacing: 0.09em;
border-radius: 2px;
}
.flex-inner li {
width: 100px;
}
button {
font-family: var(--primary-font);
cursor: pointer;
}
/* Footer */
.footer {
font-family: var(--primary-font);
font-size: .5rem;
background: #0e0e14;
color: white;
padding: 20px;
padding-top: 18px;
}
a:hover,
a:visited,
a:link,
a:active {
text-decoration: none;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other
@media screen and (max-width: 600px) {
.column, input[type=submit] {
width: 100%;
margin-top: 0;
}
} */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment