reboot.
This commit is contained in:
Marc
parent
8914471ede
commit
1dc8687e26
22 changed files with 174 additions and 1117 deletions
212
css/fullpage.css
212
css/fullpage.css
|
|
@ -1,212 +0,0 @@
|
||||||
/*!
|
|
||||||
* fullPage 2.7.5
|
|
||||||
* https://github.com/alvarotrigo/fullPage.js
|
|
||||||
* MIT licensed
|
|
||||||
*
|
|
||||||
* Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
|
|
||||||
*/
|
|
||||||
html.fp-enabled,
|
|
||||||
.fp-enabled body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow:hidden;
|
|
||||||
|
|
||||||
/*Avoid flicker on slides transitions for mobile phones #336 */
|
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
||||||
}
|
|
||||||
#superContainer {
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
/* Touch detection for Windows 8 */
|
|
||||||
-ms-touch-action: none;
|
|
||||||
|
|
||||||
/* IE 11 on Windows Phone 8.1*/
|
|
||||||
touch-action: none;
|
|
||||||
}
|
|
||||||
.fp-section {
|
|
||||||
position: relative;
|
|
||||||
-webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
|
|
||||||
-moz-box-sizing: border-box; /* <=28 */
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.fp-slide {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.fp-slide, .fp-slidesContainer {
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.fp-slides {
|
|
||||||
z-index:1;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
-webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
.fp-section.fp-table, .fp-slide.fp-table {
|
|
||||||
display: table;
|
|
||||||
table-layout:fixed;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.fp-tableCell {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.fp-slidesContainer {
|
|
||||||
float: left;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.fp-controlArrow {
|
|
||||||
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
|
|
||||||
-moz-user-select: none; /* mozilla browsers */
|
|
||||||
-khtml-user-select: none; /* webkit (konqueror) browsers */
|
|
||||||
-ms-user-select: none; /* IE10+ */
|
|
||||||
position: absolute;
|
|
||||||
z-index: 4;
|
|
||||||
top: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-style: solid;
|
|
||||||
margin-top: -38px;
|
|
||||||
-webkit-transform: translate3d(0,0,0);
|
|
||||||
-ms-transform: translate3d(0,0,0);
|
|
||||||
transform: translate3d(0,0,0);
|
|
||||||
}
|
|
||||||
.fp-controlArrow.fp-prev {
|
|
||||||
left: 15px;
|
|
||||||
width: 0;
|
|
||||||
border-width: 38.5px 34px 38.5px 0;
|
|
||||||
border-color: transparent #727272 transparent transparent;
|
|
||||||
}
|
|
||||||
.fp-controlArrow.fp-next {
|
|
||||||
right: 15px;
|
|
||||||
border-width: 38.5px 0 38.5px 34px;
|
|
||||||
border-color: transparent transparent transparent #727272;
|
|
||||||
}
|
|
||||||
.fp-scrollable {
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
|
||||||
.fp-notransition {
|
|
||||||
-webkit-transition: none !important;
|
|
||||||
transition: none !important;
|
|
||||||
}
|
|
||||||
#fp-nav {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 100;
|
|
||||||
margin-top: -32px;
|
|
||||||
top: 50%;
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: translate3d(0,0,0);
|
|
||||||
}
|
|
||||||
#fp-nav.right {
|
|
||||||
right: 17px;
|
|
||||||
}
|
|
||||||
#fp-nav.left {
|
|
||||||
left: 17px;
|
|
||||||
}
|
|
||||||
.fp-slidesNav{
|
|
||||||
position: absolute;
|
|
||||||
z-index: 4;
|
|
||||||
left: 50%;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.fp-slidesNav.bottom {
|
|
||||||
bottom: 17px;
|
|
||||||
}
|
|
||||||
.fp-slidesNav.top {
|
|
||||||
top: 17px;
|
|
||||||
}
|
|
||||||
#fp-nav ul,
|
|
||||||
.fp-slidesNav ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
#fp-nav ul li,
|
|
||||||
.fp-slidesNav ul li {
|
|
||||||
display: block;
|
|
||||||
width: 14px;
|
|
||||||
height: 13px;
|
|
||||||
margin: 7px;
|
|
||||||
position:relative;
|
|
||||||
}
|
|
||||||
.fp-slidesNav ul li {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
#fp-nav ul li a,
|
|
||||||
.fp-slidesNav ul li a {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
#fp-nav ul li a.active span,
|
|
||||||
.fp-slidesNav ul li a.active span,
|
|
||||||
#fp-nav ul li:hover a.active span,
|
|
||||||
.fp-slidesNav ul li:hover a.active span{
|
|
||||||
height: 12px;
|
|
||||||
width: 12px;
|
|
||||||
margin: -6px 0 0 -6px;
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
#fp-nav ul li a span,
|
|
||||||
.fp-slidesNav ul li a span {
|
|
||||||
border-radius: 50%;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
height: 4px;
|
|
||||||
width: 4px;
|
|
||||||
border: 0;
|
|
||||||
background: #333;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
margin: -2px 0 0 -2px;
|
|
||||||
-webkit-transition: all 0.1s ease-in-out;
|
|
||||||
-moz-transition: all 0.1s ease-in-out;
|
|
||||||
-o-transition: all 0.1s ease-in-out;
|
|
||||||
transition: all 0.1s ease-in-out;
|
|
||||||
}
|
|
||||||
#fp-nav ul li:hover a span,
|
|
||||||
.fp-slidesNav ul li:hover a span{
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
margin: -5px 0px 0px -5px;
|
|
||||||
}
|
|
||||||
#fp-nav ul li .fp-tooltip {
|
|
||||||
position: absolute;
|
|
||||||
top: -2px;
|
|
||||||
color: #727272;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: arial, helvetica, sans-serif;
|
|
||||||
white-space: nowrap;
|
|
||||||
max-width: 220px;
|
|
||||||
overflow: hidden;
|
|
||||||
display: block;
|
|
||||||
opacity: 0;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
#fp-nav ul li:hover .fp-tooltip,
|
|
||||||
#fp-nav.fp-show-active a.active + .fp-tooltip {
|
|
||||||
-webkit-transition: opacity 0.2s ease-in;
|
|
||||||
transition: opacity 0.2s ease-in;
|
|
||||||
width: auto;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
#fp-nav ul li .fp-tooltip.right {
|
|
||||||
right: 20px;
|
|
||||||
}
|
|
||||||
#fp-nav ul li .fp-tooltip.left {
|
|
||||||
left: 20px;
|
|
||||||
}
|
|
||||||
.fp-auto-height.fp-section,
|
|
||||||
.fp-auto-height .fp-slide,
|
|
||||||
.fp-auto-height .fp-tableCell{
|
|
||||||
height: auto !important;
|
|
||||||
}
|
|
||||||
295
css/style.css
295
css/style.css
|
|
@ -1,216 +1,133 @@
|
||||||
/*
|
/*
|
||||||
* GENERAL
|
* General
|
||||||
*/
|
*/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#page-gen {
|
|
||||||
position: relative;
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
background-color: #fff;
|
margin: 0;
|
||||||
|
|
||||||
min-width: 1020px;
|
|
||||||
min-height: 640px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#topmenu {
|
/*
|
||||||
|
* Fonts
|
||||||
|
*/
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Ubuntu;
|
||||||
|
src: url("../fonts/Ubuntu-R.ttf");
|
||||||
|
}
|
||||||
|
|
||||||
|
.ubuntu { font-family: Ubuntu;}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Spacing
|
||||||
|
*/
|
||||||
|
|
||||||
|
.pad10vw { padding-left: 10vw; padding-right: 10vw;}
|
||||||
|
.pad10vh { padding-top: 10vh !important; }
|
||||||
|
|
||||||
|
.marb1r { margin-bottom: 1rem;}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Colours
|
||||||
|
*/
|
||||||
|
|
||||||
|
.accent { color: #03A9F4; }
|
||||||
|
.primary { color: #727272; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Header
|
||||||
|
*/
|
||||||
|
header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > hr {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > nav {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > ul {
|
||||||
|
float: right;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav > ul {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > nav a {
|
||||||
|
padding: 1rem 1rem;
|
||||||
|
font-size: 1.7rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul > li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a {
|
||||||
|
text-decoration: none;
|
||||||
|
color :inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Panels (general)
|
||||||
|
*/
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
height: 100vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-gen {
|
.panel > section {
|
||||||
height: 100vh;
|
padding-top: 30vh;
|
||||||
padding-left: 2vw;
|
|
||||||
padding-top: 10vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.panel > section > h1 {
|
||||||
|
font-size: 5rem;
|
||||||
p {
|
|
||||||
line-height: 1.2;
|
|
||||||
margin: 0 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.panel > section > h2 {
|
||||||
color :#727272 !important;
|
font-size: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
.panel p {
|
||||||
color: #03A9F4 !important;
|
font-size: 1.5rem;
|
||||||
}
|
line-height: 1.4;
|
||||||
|
|
||||||
a i {
|
|
||||||
color: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* LANDING PANEL
|
* Typed.js cursor
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/*Bigger things*/
|
.typed-cursor{
|
||||||
|
opacity: 1;
|
||||||
#container-landing{
|
-webkit-animation: blink 0.7s infinite;
|
||||||
padding-top: 25vh;
|
-moz-animation: blink 0.7s infinite;
|
||||||
|
animation: blink 0.7s infinite;
|
||||||
}
|
}
|
||||||
|
@keyframes blink{
|
||||||
#greet {
|
0% { opacity:1; }
|
||||||
margin-bottom: 0;
|
50% { opacity:0; }
|
||||||
font-size: 7vw;
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
|
@-webkit-keyframes blink{
|
||||||
#landing-blurb {
|
0% { opacity:1; }
|
||||||
overflow: hidden;
|
50% { opacity:0; }
|
||||||
margin-left:0.4vw;
|
100% { opacity:1; }
|
||||||
}
|
}
|
||||||
|
@-moz-keyframes blink{
|
||||||
/*Navigation*/
|
0% { opacity:1; }
|
||||||
|
50% { opacity:0; }
|
||||||
#container-landing ul {
|
100% { opacity:1; }
|
||||||
list-style: none;
|
|
||||||
font-size: 4vw;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#container-landing ul li {
|
|
||||||
display: inline;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-right: 1vw;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* ABOUT ME PANEL
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*Bigger things*/
|
|
||||||
|
|
||||||
#container-aboutme {
|
|
||||||
width: 95%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container-aboutme p {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#img_bubble1 {
|
|
||||||
border-radius: 7em;
|
|
||||||
height:20vh;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* INTOUCH PANEL
|
|
||||||
*/
|
|
||||||
|
|
||||||
#panel-intouch .fp-tableCell {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container-intouch {
|
|
||||||
margin-left:2vw;
|
|
||||||
width: 95%;
|
|
||||||
margin-top:2vh
|
|
||||||
}
|
|
||||||
|
|
||||||
form p textarea {
|
|
||||||
width: 90vw;
|
|
||||||
height: 20vh;
|
|
||||||
resize: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* MODIFIERS
|
|
||||||
*/
|
|
||||||
|
|
||||||
.accentsize { font-size: 3vw; }
|
|
||||||
.basesize { font-size: 2vw; }
|
|
||||||
|
|
||||||
.bold { font-weight: bold; }
|
|
||||||
|
|
||||||
.pos-abs { position: absolute; }
|
|
||||||
|
|
||||||
.mt-z { margin-top: 0; }
|
|
||||||
.mt2 { margin-top: 0.5em;}
|
|
||||||
.mb-z { margin-bottom: 0; }
|
|
||||||
|
|
||||||
.vcenter {
|
|
||||||
top: 40vh;
|
|
||||||
position: relative;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.primarytext {color :#727272;}
|
|
||||||
.accent {color:#03A9F4;}
|
|
||||||
|
|
||||||
.ta-center { text-align: center; }
|
|
||||||
|
|
||||||
/*
|
|
||||||
* SOCIAL MEDIA BOXES
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
.social ul {
|
|
||||||
list-style: none;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social ul li {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social ul li a i {
|
|
||||||
font-size: 7vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* CONTACT FORM POPUP
|
|
||||||
*/
|
|
||||||
|
|
||||||
#contact-popup {
|
|
||||||
position: fixed;
|
|
||||||
top: 20vh;
|
|
||||||
height: 50vh;
|
|
||||||
width: 50vw;
|
|
||||||
background-color: #03A9F4;
|
|
||||||
left: 25vw;
|
|
||||||
border-radius: 15vw;
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 18vh;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#thanks {
|
|
||||||
color: #fff;
|
|
||||||
font-family: Oswald;
|
|
||||||
font-size: 4vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* FONT DATA
|
|
||||||
*/
|
|
||||||
|
|
||||||
.opensans { font-family: OpenSans; }
|
|
||||||
.oswald { font-family: Oswald; }
|
|
||||||
.courgette { font-family: Courgette; }
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: OpenSans;
|
|
||||||
src: url("../fonts/OpenSans-CondLight.ttf") format("truetype");
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: Oswald;
|
|
||||||
src: url("../fonts/Oswald-Light.ttf") format("truetype");
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: Courgette;
|
|
||||||
src: url("../fonts/Courgette-Regular.ttf") format("truetype");
|
|
||||||
}
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
/*
|
|
||||||
*{
|
|
||||||
padding:0;
|
|
||||||
margin:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body{
|
|
||||||
font-family: "Ubuntu", sans-serif;
|
|
||||||
font-size: 100%;
|
|
||||||
background:#f8f8f8;
|
|
||||||
}
|
|
||||||
|
|
||||||
a{
|
|
||||||
text-decoration: none;
|
|
||||||
color:#666;
|
|
||||||
}
|
|
||||||
a:hover{
|
|
||||||
color:#999;
|
|
||||||
}
|
|
||||||
p{
|
|
||||||
line-height: 2em;
|
|
||||||
margin:0 0 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
.wrap{
|
|
||||||
max-width: 600px;
|
|
||||||
margin:150px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.type-wrap{
|
|
||||||
margin:10px auto;
|
|
||||||
padding:20px;
|
|
||||||
background:#f0f0f0;
|
|
||||||
border-radius:5px;
|
|
||||||
border:#CCC 1px solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.links{
|
|
||||||
margin:20px 0;
|
|
||||||
font-size: 0.75em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.typed-cursor{
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-animation: blink 0.7s infinite;
|
|
||||||
-moz-animation: blink 0.7s infinite;
|
|
||||||
animation: blink 0.7s infinite;
|
|
||||||
}
|
|
||||||
@keyframes blink{
|
|
||||||
0% { opacity:1; }
|
|
||||||
50% { opacity:0; }
|
|
||||||
100% { opacity:1; }
|
|
||||||
}
|
|
||||||
@-webkit-keyframes blink{
|
|
||||||
0% { opacity:1; }
|
|
||||||
50% { opacity:0; }
|
|
||||||
100% { opacity:1; }
|
|
||||||
}
|
|
||||||
@-moz-keyframes blink{
|
|
||||||
0% { opacity:1; }
|
|
||||||
50% { opacity:0; }
|
|
||||||
100% { opacity:1; }
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
fonts/Ubuntu-R.ttf
Normal file
BIN
fonts/Ubuntu-R.ttf
Normal file
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
BIN
images/logo.png
BIN
images/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
144
index.html
144
index.html
|
|
@ -2,120 +2,70 @@
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Hello! I'm Marc!</title>
|
<title></title>
|
||||||
|
|
||||||
|
<!-- Meta -->
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
<!-- Stylesheets -->
|
<!-- Stylesheets -->
|
||||||
<link href="css/style.css" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="css/typed/main.css" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
|
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
|
||||||
|
<!-- See bottom for JS, loaded last for speed -->
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="page-gen">
|
<header>
|
||||||
<div id="topmenu">
|
<nav>
|
||||||
<nav class="navbar navbar-default">
|
<ul>
|
||||||
<div class="container-fluid">
|
<li><a href="#hello">Home</a></li>
|
||||||
<!-- Brand and toggle get grouped for better mobile display -->
|
<li><a href="#aboutme">About me</a></li>
|
||||||
<div class="navbar-header">
|
<li><a href="#">Curriculum vitae</a></li>
|
||||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
|
<li><a href="#">Contact me</a></li>
|
||||||
<span class="sr-only">Toggle navigation</span>
|
</ul>
|
||||||
<span class="icon-bar"></span>
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
</button>
|
|
||||||
<a class="navbar-brand courgette menulink" id="#panel-landing">Marc Cataford</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
||||||
<div class="collapse navbar-collapse oswald basesize" id="bs-example-navbar-collapse-1">
|
|
||||||
<ul class="nav navbar-nav">
|
|
||||||
<li><a id="#panel-aboutme" class="menulink">About me <span class="sr-only">(current)</span></a></li>
|
|
||||||
<li><a id="#panel-intouch" class="menulink">Get in touch!</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul class="nav navbar-nav navbar-right">
|
|
||||||
<div class="social">
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://www.facebook.com/marc.cataford"><i class="fa fa-2x fa-facebook-square"></i></a></li>
|
|
||||||
<li><a href="https://twitter.com/_mcataford"><i class="fa fa-2x fa-twitter-square"></i></a></li>
|
|
||||||
<li><a href="https://github.com/mcataford"><i class="fa fa-2x fa-github-square"></i></a></li>
|
|
||||||
<li><a href="https://www.instagram.com/_mcataford/"><i class="fa fa-2x fa-instagram"></i></a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
</div><!-- /.navbar-collapse -->
|
|
||||||
</div><!-- /.container-fluid -->
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="#"><i class="fa fa-3x fa-facebook-square"></i></a></li>
|
||||||
|
<li><a href="#"><i class="fa fa-3x fa-twitter-square"></i></a></li>
|
||||||
|
<li><a href="#"><i class="fa fa-3x fa-github-square"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="ubuntu primary">
|
||||||
|
<div class="panel" id="hello">
|
||||||
|
<section class="pad10vw">
|
||||||
|
<h1 class="marb1r">Hi, I'm <span class='accent'>Marc</span>.</h1>
|
||||||
|
<h2>I love to <span id="landing-subtyped"></span></h2>
|
||||||
|
<p>I am a <span class='accent'>third-year computer engineering</span> student at <span class='accent'>McGill University</span> who is interested in <span class='accent'>full-stack web development</span>, <span class='accent'>embedded electronics</span>, <span class='accent'>low-level programming</span> and <span class='accent'>journalism</span>.
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="panel-landing" class="panel-gen primarytext">
|
<div class="panel" id="aboutme">
|
||||||
<div id="container-landing" class="basesize">
|
<section class="pad10vw pad10vh">
|
||||||
<p id="greet" class="mb-z opensans">I'm <span class="accent bold oswald">Marc</span> and I love to <span id="typedWords" class="accent bold oswald"></span></p>
|
<h1 class="marb1r">A bit more about me</h1>
|
||||||
|
<p>I am <span class='accent'>determined</span>. Before finding (and falling in love with) engineering at 22, I have studied physiology, mathematics and psychology. The day I received the acceptance letter from McGill was amongst the happiest I can remember. I have always been a <span class='accent'>tinkerer</span>, an adept of <span class='accent'>DIY</span> and a <span class='accent'>keen learner</span>. This long journey allowed me to work in cool places like an <a href="#">historically-rich mental hospital</a>, various CÉGEPs and a YMCA, teaching me the value of <span class='accent'>hard work</span> and <span class='accent'>perserverance</span>. No matter the job, my motto is to do things <span class='accent'>well</span> or keep practicing until I can <span class='accent'>exceed expectations</span>.
|
||||||
<div id="landing-blurb">
|
|
||||||
<p class="mt-z basesize opensans"> I am a <span class="accent accentsize bold oswald">third-year computer engineering student</span> at <span class="accent accentsize bold oswald">McGill University</span>.</p>
|
|
||||||
<p class="basesize opensans">I'm interested in <span class="accent accentsize bold oswald">full-stack web development</span>, <span class="accent accentsize bold oswald">hardware design</span> and <span class="accent accentsize bold oswald">low-level programming</span>.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="panel-aboutme" class="panel-gen primarytext">
|
|
||||||
<div id="container-aboutme" class="opensans basesize">
|
|
||||||
<div style="text-align: center"><img id="img_bubble1" src="images/web_couchpotato.jpg"></div>
|
|
||||||
<p>My name is <span class="accent accentsize bold oswald">Marc Cataford</span>, I am a <span class="accent accentsize bold oswald">25</span> years old Montrealer.
|
|
||||||
</p><p>I'm a <span class="accent accentsize bold oswald">third year</span> as a <span class="accent accentsize bold oswald">computer engineering</span> student at McGill University and I am looking for <span class="accent accentsize bold oswald">new opportunities</span>.
|
|
||||||
</p><p>These days, I'm a <span class="accent accentsize bold oswald">web editor / web developer</span> at <a href="www.mcgilldaily.com">The McGill Daily</a>, a student newspaper published weekly, and updated online almost daily for our 80,000+ monthly visitors. I've also been <span class="accent accentsize bold oswald">tutoring</span> computer engineering and programming for the past three years.
|
|
||||||
</p><p>I'm proficient with <span class="accent accentsize bold oswald">Java</span>, <span class="accent accentsize bold oswald">C/C++</span>, <span class="accent accentsize bold oswald">PHP</span> and <span class="accent accentsize bold oswald">Javascript</span>, as well as basic knowledge of <span class="accent accentsize bold oswald">Python</span>, <span class="accent accentsize bold oswald">Assembly</span> and <span class="accent accentsize bold oswald">Matlab</span>.
|
|
||||||
</p><p>I also have experience with <span class="accent accentsize bold oswald">Photoshop</span>, <span class="accent accentsize bold oswald">Wordpress</span> and <span class="accent accentsize bold oswald">Logisim</span>.
|
|
||||||
|
|
||||||
|
<p>For the past year, I have been working as a <span class='accent'>Web editor</span> at <a href="#">The McGill Daily</a>, one of the oldest university publications in Canada – publishing continually since 1911 and attracting around <span class='accent'>80,000 visitors monthly</span> online.
|
||||||
|
|
||||||
</p></div>
|
<p>I have also been <span class='accent'>tutoring</span> professionally for <span class='accent'>six years</span>, at first in French grammar, and then in various <span class='accent'>computer science and engineering topics</span> ranging from <span class='accent'>software/web programming</span> to <span class='accent'>computer organization and digital design</span>.
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<p>I am always looking for new opportunities to <span class='accent'>learn</span> and to <span class='accent'>grow</span>, and one of my primary goals at the moment is acquiring <span class='accent'>professional experience</span> related to my interests through <span class='accent'>freelance contracts</span> and <span class='accent'>internships</span>.
|
||||||
|
|
||||||
|
</section>
|
||||||
<div id="panel-intouch" class="panel-gen primarytext">
|
|
||||||
<div id="container-intouch" class="opensans">
|
|
||||||
<p class="accent accentsize oswald">Want to get in touch?</p>
|
|
||||||
<p class="primarytext basesize">I'd love to hear from you!</p>
|
|
||||||
<br>
|
|
||||||
<p class="primarytext basesize">Feel free to reach out through <span class="accent accentsize oswald">social media</span> by clicking on the appropriate icon in the bar at the top of the page.</p>
|
|
||||||
|
|
||||||
<p class="primarytext basesize">You can also send me an <span class="accent accentsize oswald">email</span> at <a href="mailto:c.marcandre@gmail.com">c.marcandre[at]gmail.com</a>, or fill the form below!</p>
|
|
||||||
|
|
||||||
<form id="contactme">
|
|
||||||
<p class="accentsize accent oswald">About you:</p>
|
|
||||||
<p class="basesize">My name is <input id="sender" type="text" class="accent" placeholder="Johnny Appleseed"required>, I'm a <input id="function" type="text" class="accent" placeholder="fellow tinkerer">. You can contact me at <input id="replyto" type="email" class="accent" placeholder="foo@bar.baz" required>.</p>
|
|
||||||
<p class="basesize">I'd like to tell you about ...</p>
|
|
||||||
<p class="basesize"><textarea id="details" class="accent" placeholder="... this new cool thing I'm working on." required></textarea></p>
|
|
||||||
<div class="ta-center">
|
|
||||||
<input type="submit" value="Send message">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<input form="contactme" type="hidden" name="_subject" value="Contact form submission" />
|
|
||||||
<input form="contactme" type="text" name="_gotcha" style="display:none" />
|
|
||||||
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
<div id="contact-popup">
|
<footer>
|
||||||
<p id="thanks">Thanks for reaching out!</p>
|
|
||||||
<p class="basesize oswald">I'll get back to you as soon as possible!</p>
|
</footer>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- JS -->
|
<!-- JS -->
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
|
<script src="js/typed/typed.min.js"></script>
|
||||||
|
|
||||||
<script src="js/jquery-visible/jquery.visible.min.js"></script>
|
|
||||||
<script src="js/typed/typed.js"></script>
|
|
||||||
|
|
||||||
<script src="js/animate.js"></script>
|
<script src="js/animate.js"></script>
|
||||||
<script src="js/form-handling.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,42 +1,24 @@
|
||||||
/*
|
$(function(){
|
||||||
* Typed.js animation for the landing panel.
|
$("#landing-subtyped").typed({
|
||||||
*/
|
strings: ["<span class='accent'>tinker</span>.",
|
||||||
|
"<span class='accent'>share what I know</span>.",
|
||||||
$(window).ready(function() {
|
"<span class='accent'>learn new things</span>.",
|
||||||
var period = "<span class='primarytext' style='font-weight:normal'>.</span>";
|
"<span class='accent'>code</span>.",
|
||||||
var typedStrings = ["code"+period, "learn new things"+period, "tinker"+period, "communicate"+period, "teach"+period, "solve problems"+period, "get things done"+period];
|
"<span class='accent'>communicate</span>."],
|
||||||
|
typeSpeed: 20,
|
||||||
$("#typedWords").typed({
|
loop: true,
|
||||||
strings: typedStrings,
|
backDelay: 2000,
|
||||||
typeSpeed:0,
|
backSpeed: 0,
|
||||||
backSpeed:0,
|
cursorChar: "█"
|
||||||
backDelay: 1500,
|
});
|
||||||
showCursor: true,
|
|
||||||
cursorChar: "_",
|
|
||||||
loop: true,
|
|
||||||
contentType: 'html'
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
/*
|
$('a').on('click', function(event) {
|
||||||
* Scroll on menu link click
|
var target = $($(this).attr('href'));
|
||||||
*/
|
if( target.length ) {
|
||||||
$(".menulink").click(function() {
|
event.preventDefault();
|
||||||
var $panel = $(this).attr("id");
|
$('html, body').animate({
|
||||||
|
scrollTop: target.offset().top
|
||||||
console.log($panel);
|
}, 1000);
|
||||||
|
|
||||||
$('html,body').animate({
|
|
||||||
scrollTop: $($panel).offset().top},
|
|
||||||
'slow');
|
|
||||||
});
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Closing the contact form popup
|
|
||||||
*/
|
|
||||||
|
|
||||||
$(document).click(function() {
|
|
||||||
if($("#contact-popup").is(':visible')) {
|
|
||||||
$("#contact-popup").fadeOut("slow");
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
/*
|
|
||||||
* Contact form handling using AJAX, sends request to Formspree.io
|
|
||||||
*/
|
|
||||||
|
|
||||||
var $contactForm = $('#contactme');
|
|
||||||
|
|
||||||
$contactForm.submit(function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
$.ajax({
|
|
||||||
url: '//formspree.io/c.marcandre@gmail.com',
|
|
||||||
method: 'POST',
|
|
||||||
data: {
|
|
||||||
Sender: $("#sender").val(),
|
|
||||||
Position: $("#function").val(),
|
|
||||||
Email: $("#replyto").val(),
|
|
||||||
Details: $("#details").val()
|
|
||||||
},
|
|
||||||
dataType: 'json',
|
|
||||||
beforeSend: function() {
|
|
||||||
console.log("Sending.");
|
|
||||||
},
|
|
||||||
success: function(data) {
|
|
||||||
$('#contactme').trigger("reset");
|
|
||||||
$("#contact-popup").fadeIn("slow");
|
|
||||||
},
|
|
||||||
error: function(err) {
|
|
||||||
console.log("Failed.");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
Copyright (c) 2012 Digital Fusion, http://teamdf.com/
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining
|
|
||||||
a copy of this software and associated documentation files (the
|
|
||||||
"Software"), to deal in the Software without restriction, including
|
|
||||||
without limitation the rights to use, copy, modify, merge, publish,
|
|
||||||
distribute, sublicense, and/or sell copies of the Software, and to
|
|
||||||
permit persons to whom the Software is furnished to do so, subject to
|
|
||||||
the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be
|
|
||||||
included in all copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
||||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
||||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
||||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
||||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
||||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
||||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
||||||
1
js/jquery-visible/jquery.visible.min.js
vendored
1
js/jquery-visible/jquery.visible.min.js
vendored
|
|
@ -1 +0,0 @@
|
||||||
!function(t){var i=t(window);t.fn.visible=function(t,e,o){if(!(this.length<1)){var r=this.length>1?this.eq(0):this,n=r.get(0),f=i.width(),h=i.height(),o=o?o:"both",l=e===!0?n.offsetWidth*n.offsetHeight:!0;if("function"==typeof n.getBoundingClientRect){var g=n.getBoundingClientRect(),u=g.top>=0&&g.top<h,s=g.bottom>0&&g.bottom<=h,c=g.left>=0&&g.left<f,a=g.right>0&&g.right<=f,v=t?u||s:u&&s,b=t?c||a:c&&a;if("both"===o)return l&&v&&b;if("vertical"===o)return l&&v;if("horizontal"===o)return l&&b}else{var d=i.scrollTop(),p=d+h,w=i.scrollLeft(),m=w+f,y=r.offset(),z=y.top,B=z+r.height(),C=y.left,R=C+r.width(),j=t===!0?B:z,q=t===!0?z:B,H=t===!0?R:C,L=t===!0?C:R;if("both"===o)return!!l&&p>=q&&j>=d&&m>=L&&H>=w;if("vertical"===o)return!!l&&p>=q&&j>=d;if("horizontal"===o)return!!l&&m>=L&&H>=w}}}}(jQuery);
|
|
||||||
|
|
@ -1,434 +0,0 @@
|
||||||
// The MIT License (MIT)
|
|
||||||
|
|
||||||
// Typed.js | Copyright (c) 2014 Matt Boldt | www.mattboldt.com
|
|
||||||
|
|
||||||
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
// of this software and associated documentation files (the "Software"), to deal
|
|
||||||
// in the Software without restriction, including without limitation the rights
|
|
||||||
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
||||||
// copies of the Software, and to permit persons to whom the Software is
|
|
||||||
// furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
// The above copyright notice and this permission notice shall be included in
|
|
||||||
// all copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
||||||
// THE SOFTWARE.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
! function($) {
|
|
||||||
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
var Typed = function(el, options) {
|
|
||||||
|
|
||||||
// chosen element to manipulate text
|
|
||||||
this.el = $(el);
|
|
||||||
|
|
||||||
// options
|
|
||||||
this.options = $.extend({}, $.fn.typed.defaults, options);
|
|
||||||
|
|
||||||
// attribute to type into
|
|
||||||
this.isInput = this.el.is('input');
|
|
||||||
this.attr = this.options.attr;
|
|
||||||
|
|
||||||
// show cursor
|
|
||||||
this.showCursor = this.isInput ? false : this.options.showCursor;
|
|
||||||
|
|
||||||
// text content of element
|
|
||||||
this.elContent = this.attr ? this.el.attr(this.attr) : this.el.text()
|
|
||||||
|
|
||||||
// html or plain text
|
|
||||||
this.contentType = this.options.contentType;
|
|
||||||
|
|
||||||
// typing speed
|
|
||||||
this.typeSpeed = this.options.typeSpeed;
|
|
||||||
|
|
||||||
// add a delay before typing starts
|
|
||||||
this.startDelay = this.options.startDelay;
|
|
||||||
|
|
||||||
// backspacing speed
|
|
||||||
this.backSpeed = this.options.backSpeed;
|
|
||||||
|
|
||||||
// amount of time to wait before backspacing
|
|
||||||
this.backDelay = this.options.backDelay;
|
|
||||||
|
|
||||||
// div containing strings
|
|
||||||
this.stringsElement = this.options.stringsElement;
|
|
||||||
|
|
||||||
// input strings of text
|
|
||||||
this.strings = this.options.strings;
|
|
||||||
|
|
||||||
// character number position of current string
|
|
||||||
this.strPos = 0;
|
|
||||||
|
|
||||||
// current array position
|
|
||||||
this.arrayPos = 0;
|
|
||||||
|
|
||||||
// number to stop backspacing on.
|
|
||||||
// default 0, can change depending on how many chars
|
|
||||||
// you want to remove at the time
|
|
||||||
this.stopNum = 0;
|
|
||||||
|
|
||||||
// Looping logic
|
|
||||||
this.loop = this.options.loop;
|
|
||||||
this.loopCount = this.options.loopCount;
|
|
||||||
this.curLoop = 0;
|
|
||||||
|
|
||||||
// for stopping
|
|
||||||
this.stop = false;
|
|
||||||
|
|
||||||
// custom cursor
|
|
||||||
this.cursorChar = this.options.cursorChar;
|
|
||||||
|
|
||||||
// shuffle the strings
|
|
||||||
this.shuffle = this.options.shuffle;
|
|
||||||
// the order of strings
|
|
||||||
this.sequence = [];
|
|
||||||
|
|
||||||
// All systems go!
|
|
||||||
this.build();
|
|
||||||
};
|
|
||||||
|
|
||||||
Typed.prototype = {
|
|
||||||
|
|
||||||
constructor: Typed
|
|
||||||
|
|
||||||
,
|
|
||||||
init: function() {
|
|
||||||
// begin the loop w/ first current string (global self.strings)
|
|
||||||
// current string will be passed as an argument each time after this
|
|
||||||
var self = this;
|
|
||||||
self.timeout = setTimeout(function() {
|
|
||||||
for (var i=0;i<self.strings.length;++i) self.sequence[i]=i;
|
|
||||||
|
|
||||||
// shuffle the array if true
|
|
||||||
if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);
|
|
||||||
|
|
||||||
// Start typing
|
|
||||||
self.typewrite(self.strings[self.sequence[self.arrayPos]], self.strPos);
|
|
||||||
}, self.startDelay);
|
|
||||||
}
|
|
||||||
|
|
||||||
,
|
|
||||||
build: function() {
|
|
||||||
var self = this;
|
|
||||||
// Insert cursor
|
|
||||||
if (this.showCursor === true) {
|
|
||||||
this.cursor = $("<span class=\"typed-cursor\">" + this.cursorChar + "</span>");
|
|
||||||
this.el.after(this.cursor);
|
|
||||||
}
|
|
||||||
if (this.stringsElement) {
|
|
||||||
self.strings = [];
|
|
||||||
this.stringsElement.hide();
|
|
||||||
var strings = this.stringsElement.find('p');
|
|
||||||
$.each(strings, function(key, value){
|
|
||||||
self.strings.push($(value).html());
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.init();
|
|
||||||
}
|
|
||||||
|
|
||||||
// pass current string state to each function, types 1 char per call
|
|
||||||
,
|
|
||||||
typewrite: function(curString, curStrPos) {
|
|
||||||
// exit when stopped
|
|
||||||
if (this.stop === true) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// varying values for setTimeout during typing
|
|
||||||
// can't be global since number changes each time loop is executed
|
|
||||||
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
// ------------- optional ------------- //
|
|
||||||
// backpaces a certain string faster
|
|
||||||
// ------------------------------------ //
|
|
||||||
// if (self.arrayPos == 1){
|
|
||||||
// self.backDelay = 50;
|
|
||||||
// }
|
|
||||||
// else{ self.backDelay = 500; }
|
|
||||||
|
|
||||||
// contain typing function in a timeout humanize'd delay
|
|
||||||
self.timeout = setTimeout(function() {
|
|
||||||
// check for an escape character before a pause value
|
|
||||||
// format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^
|
|
||||||
// single ^ are removed from string
|
|
||||||
var charPause = 0;
|
|
||||||
var substr = curString.substr(curStrPos);
|
|
||||||
if (substr.charAt(0) === '^') {
|
|
||||||
var skip = 1; // skip atleast 1
|
|
||||||
if (/^\^\d+/.test(substr)) {
|
|
||||||
substr = /\d+/.exec(substr)[0];
|
|
||||||
skip += substr.length;
|
|
||||||
charPause = parseInt(substr);
|
|
||||||
}
|
|
||||||
|
|
||||||
// strip out the escape character and pause value so they're not printed
|
|
||||||
curString = curString.substring(0, curStrPos) + curString.substring(curStrPos + skip);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (self.contentType === 'html') {
|
|
||||||
// skip over html tags while typing
|
|
||||||
var curChar = curString.substr(curStrPos).charAt(0)
|
|
||||||
if (curChar === '<' || curChar === '&') {
|
|
||||||
var tag = '';
|
|
||||||
var endTag = '';
|
|
||||||
if (curChar === '<') {
|
|
||||||
endTag = '>'
|
|
||||||
} else {
|
|
||||||
endTag = ';'
|
|
||||||
}
|
|
||||||
while (curString.substr(curStrPos).charAt(0) !== endTag) {
|
|
||||||
tag += curString.substr(curStrPos).charAt(0);
|
|
||||||
curStrPos++;
|
|
||||||
}
|
|
||||||
curStrPos++;
|
|
||||||
tag += endTag;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// timeout for any pause after a character
|
|
||||||
self.timeout = setTimeout(function() {
|
|
||||||
if (curStrPos === curString.length) {
|
|
||||||
// fires callback function
|
|
||||||
self.options.onStringTyped(self.arrayPos);
|
|
||||||
|
|
||||||
// is this the final string
|
|
||||||
if (self.arrayPos === self.strings.length - 1) {
|
|
||||||
// animation that occurs on the last typed string
|
|
||||||
self.options.callback();
|
|
||||||
|
|
||||||
self.curLoop++;
|
|
||||||
|
|
||||||
// quit if we wont loop back
|
|
||||||
if (self.loop === false || self.curLoop === self.loopCount)
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
self.timeout = setTimeout(function() {
|
|
||||||
self.backspace(curString, curStrPos);
|
|
||||||
}, self.backDelay);
|
|
||||||
} else {
|
|
||||||
|
|
||||||
/* call before functions if applicable */
|
|
||||||
if (curStrPos === 0)
|
|
||||||
self.options.preStringTyped(self.arrayPos);
|
|
||||||
|
|
||||||
// start typing each new char into existing string
|
|
||||||
// curString: arg, self.el.html: original text inside element
|
|
||||||
var nextString = curString.substr(0, curStrPos + 1);
|
|
||||||
if (self.attr) {
|
|
||||||
self.el.attr(self.attr, nextString);
|
|
||||||
} else {
|
|
||||||
if (self.isInput) {
|
|
||||||
self.el.val(nextString);
|
|
||||||
} else if (self.contentType === 'html') {
|
|
||||||
self.el.html(nextString);
|
|
||||||
} else {
|
|
||||||
self.el.text(nextString);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// add characters one by one
|
|
||||||
curStrPos++;
|
|
||||||
// loop the function
|
|
||||||
self.typewrite(curString, curStrPos);
|
|
||||||
}
|
|
||||||
// end of character pause
|
|
||||||
}, charPause);
|
|
||||||
|
|
||||||
// humanized value for typing
|
|
||||||
}, humanize);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
,
|
|
||||||
backspace: function(curString, curStrPos) {
|
|
||||||
// exit when stopped
|
|
||||||
if (this.stop === true) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// varying values for setTimeout during typing
|
|
||||||
// can't be global since number changes each time loop is executed
|
|
||||||
var humanize = Math.round(Math.random() * (100 - 30)) + this.backSpeed;
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
self.timeout = setTimeout(function() {
|
|
||||||
|
|
||||||
// ----- this part is optional ----- //
|
|
||||||
// check string array position
|
|
||||||
// on the first string, only delete one word
|
|
||||||
// the stopNum actually represents the amount of chars to
|
|
||||||
// keep in the current string. In my case it's 14.
|
|
||||||
// if (self.arrayPos == 1){
|
|
||||||
// self.stopNum = 14;
|
|
||||||
// }
|
|
||||||
//every other time, delete the whole typed string
|
|
||||||
// else{
|
|
||||||
// self.stopNum = 0;
|
|
||||||
// }
|
|
||||||
|
|
||||||
if (self.contentType === 'html') {
|
|
||||||
// skip over html tags while backspacing
|
|
||||||
if (curString.substr(curStrPos).charAt(0) === '>') {
|
|
||||||
var tag = '';
|
|
||||||
while (curString.substr(curStrPos).charAt(0) !== '<') {
|
|
||||||
tag -= curString.substr(curStrPos).charAt(0);
|
|
||||||
curStrPos--;
|
|
||||||
}
|
|
||||||
curStrPos--;
|
|
||||||
tag += '<';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ----- continue important stuff ----- //
|
|
||||||
// replace text with base text + typed characters
|
|
||||||
var nextString = curString.substr(0, curStrPos);
|
|
||||||
if (self.attr) {
|
|
||||||
self.el.attr(self.attr, nextString);
|
|
||||||
} else {
|
|
||||||
if (self.isInput) {
|
|
||||||
self.el.val(nextString);
|
|
||||||
} else if (self.contentType === 'html') {
|
|
||||||
self.el.html(nextString);
|
|
||||||
} else {
|
|
||||||
self.el.text(nextString);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// if the number (id of character in current string) is
|
|
||||||
// less than the stop number, keep going
|
|
||||||
if (curStrPos > self.stopNum) {
|
|
||||||
// subtract characters one by one
|
|
||||||
curStrPos--;
|
|
||||||
// loop the function
|
|
||||||
self.backspace(curString, curStrPos);
|
|
||||||
}
|
|
||||||
// if the stop number has been reached, increase
|
|
||||||
// array position to next string
|
|
||||||
else if (curStrPos <= self.stopNum) {
|
|
||||||
self.arrayPos++;
|
|
||||||
|
|
||||||
if (self.arrayPos === self.strings.length) {
|
|
||||||
self.arrayPos = 0;
|
|
||||||
|
|
||||||
// Shuffle sequence again
|
|
||||||
if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);
|
|
||||||
|
|
||||||
self.init();
|
|
||||||
} else
|
|
||||||
self.typewrite(self.strings[self.sequence[self.arrayPos]], curStrPos);
|
|
||||||
}
|
|
||||||
|
|
||||||
// humanized value for typing
|
|
||||||
}, humanize);
|
|
||||||
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* Shuffles the numbers in the given array.
|
|
||||||
* @param {Array} array
|
|
||||||
* @returns {Array}
|
|
||||||
*/
|
|
||||||
,shuffleArray: function(array) {
|
|
||||||
var tmp, current, top = array.length;
|
|
||||||
if(top) while(--top) {
|
|
||||||
current = Math.floor(Math.random() * (top + 1));
|
|
||||||
tmp = array[current];
|
|
||||||
array[current] = array[top];
|
|
||||||
array[top] = tmp;
|
|
||||||
}
|
|
||||||
return array;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Start & Stop currently not working
|
|
||||||
|
|
||||||
// , stop: function() {
|
|
||||||
// var self = this;
|
|
||||||
|
|
||||||
// self.stop = true;
|
|
||||||
// clearInterval(self.timeout);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// , start: function() {
|
|
||||||
// var self = this;
|
|
||||||
// if(self.stop === false)
|
|
||||||
// return;
|
|
||||||
|
|
||||||
// this.stop = false;
|
|
||||||
// this.init();
|
|
||||||
// }
|
|
||||||
|
|
||||||
// Reset and rebuild the element
|
|
||||||
,
|
|
||||||
reset: function() {
|
|
||||||
var self = this;
|
|
||||||
clearInterval(self.timeout);
|
|
||||||
var id = this.el.attr('id');
|
|
||||||
this.el.after('<span id="' + id + '"/>')
|
|
||||||
this.el.remove();
|
|
||||||
if (typeof this.cursor !== 'undefined') {
|
|
||||||
this.cursor.remove();
|
|
||||||
}
|
|
||||||
// Send the callback
|
|
||||||
self.options.resetCallback();
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.typed = function(option) {
|
|
||||||
return this.each(function() {
|
|
||||||
var $this = $(this),
|
|
||||||
data = $this.data('typed'),
|
|
||||||
options = typeof option == 'object' && option;
|
|
||||||
if (!data) $this.data('typed', (data = new Typed(this, options)));
|
|
||||||
if (typeof option == 'string') data[option]();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
$.fn.typed.defaults = {
|
|
||||||
strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],
|
|
||||||
stringsElement: null,
|
|
||||||
// typing speed
|
|
||||||
typeSpeed: 0,
|
|
||||||
// time before typing starts
|
|
||||||
startDelay: 0,
|
|
||||||
// backspacing speed
|
|
||||||
backSpeed: 0,
|
|
||||||
// shuffle the strings
|
|
||||||
shuffle: false,
|
|
||||||
// time before backspacing
|
|
||||||
backDelay: 500,
|
|
||||||
// loop
|
|
||||||
loop: false,
|
|
||||||
// false = infinite
|
|
||||||
loopCount: false,
|
|
||||||
// show cursor
|
|
||||||
showCursor: true,
|
|
||||||
// character for cursor
|
|
||||||
cursorChar: "|",
|
|
||||||
// attribute to type (null == text)
|
|
||||||
attr: null,
|
|
||||||
// either html or text
|
|
||||||
contentType: 'html',
|
|
||||||
// call when done callback function
|
|
||||||
callback: function() {},
|
|
||||||
// starting callback function before each string
|
|
||||||
preStringTyped: function() {},
|
|
||||||
//callback for every typed string
|
|
||||||
onStringTyped: function() {},
|
|
||||||
// callback for reset
|
|
||||||
resetCallback: function() {}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
}(window.jQuery);
|
|
||||||
1
js/typed/typed.min.js
vendored
Executable file
1
js/typed/typed.min.js
vendored
Executable file
|
|
@ -0,0 +1 @@
|
||||||
|
!function(t){"use strict";var s=function(s,e){this.el=t(s),this.options=t.extend({},t.fn.typed.defaults,e),this.isInput=this.el.is("input"),this.attr=this.options.attr,this.showCursor=this.isInput?!1:this.options.showCursor,this.elContent=this.attr?this.el.attr(this.attr):this.el.text(),this.contentType=this.options.contentType,this.typeSpeed=this.options.typeSpeed,this.startDelay=this.options.startDelay,this.backSpeed=this.options.backSpeed,this.backDelay=this.options.backDelay,this.stringsElement=this.options.stringsElement,this.strings=this.options.strings,this.strPos=0,this.arrayPos=0,this.stopNum=0,this.loop=this.options.loop,this.loopCount=this.options.loopCount,this.curLoop=0,this.stop=!1,this.cursorChar=this.options.cursorChar,this.shuffle=this.options.shuffle,this.sequence=[],this.build()};s.prototype={constructor:s,init:function(){var t=this;t.timeout=setTimeout(function(){for(var s=0;s<t.strings.length;++s)t.sequence[s]=s;t.shuffle&&(t.sequence=t.shuffleArray(t.sequence)),t.typewrite(t.strings[t.sequence[t.arrayPos]],t.strPos)},t.startDelay)},build:function(){var s=this;if(this.showCursor===!0&&(this.cursor=t('<span class="typed-cursor">'+this.cursorChar+"</span>"),this.el.after(this.cursor)),this.stringsElement){s.strings=[],this.stringsElement.hide();var e=this.stringsElement.find("p");t.each(e,function(e,i){s.strings.push(t(i).html())})}this.init()},typewrite:function(t,s){if(this.stop!==!0){var e=Math.round(70*Math.random())+this.typeSpeed,i=this;i.timeout=setTimeout(function(){var e=0,r=t.substr(s);if("^"===r.charAt(0)){var o=1;/^\^\d+/.test(r)&&(r=/\d+/.exec(r)[0],o+=r.length,e=parseInt(r)),t=t.substring(0,s)+t.substring(s+o)}if("html"===i.contentType){var n=t.substr(s).charAt(0);if("<"===n||"&"===n){var a="",h="";for(h="<"===n?">":";";t.substr(s).charAt(0)!==h;)a+=t.substr(s).charAt(0),s++;s++,a+=h}}i.timeout=setTimeout(function(){if(s===t.length){if(i.options.onStringTyped(i.arrayPos),i.arrayPos===i.strings.length-1&&(i.options.callback(),i.curLoop++,i.loop===!1||i.curLoop===i.loopCount))return;i.timeout=setTimeout(function(){i.backspace(t,s)},i.backDelay)}else{0===s&&i.options.preStringTyped(i.arrayPos);var e=t.substr(0,s+1);i.attr?i.el.attr(i.attr,e):i.isInput?i.el.val(e):"html"===i.contentType?i.el.html(e):i.el.text(e),s++,i.typewrite(t,s)}},e)},e)}},backspace:function(t,s){if(this.stop!==!0){var e=Math.round(70*Math.random())+this.backSpeed,i=this;i.timeout=setTimeout(function(){if("html"===i.contentType&&">"===t.substr(s).charAt(0)){for(var e="";"<"!==t.substr(s).charAt(0);)e-=t.substr(s).charAt(0),s--;s--,e+="<"}var r=t.substr(0,s);i.attr?i.el.attr(i.attr,r):i.isInput?i.el.val(r):"html"===i.contentType?i.el.html(r):i.el.text(r),s>i.stopNum?(s--,i.backspace(t,s)):s<=i.stopNum&&(i.arrayPos++,i.arrayPos===i.strings.length?(i.arrayPos=0,i.shuffle&&(i.sequence=i.shuffleArray(i.sequence)),i.init()):i.typewrite(i.strings[i.sequence[i.arrayPos]],s))},e)}},shuffleArray:function(t){var s,e,i=t.length;if(i)for(;--i;)e=Math.floor(Math.random()*(i+1)),s=t[e],t[e]=t[i],t[i]=s;return t},reset:function(){var t=this;clearInterval(t.timeout);var s=this.el.attr("id");this.el.after('<span id="'+s+'"/>'),this.el.remove(),"undefined"!=typeof this.cursor&&this.cursor.remove(),t.options.resetCallback()}},t.fn.typed=function(e){return this.each(function(){var i=t(this),r=i.data("typed"),o="object"==typeof e&&e;r||i.data("typed",r=new s(this,o)),"string"==typeof e&&r[e]()})},t.fn.typed.defaults={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],stringsElement:null,typeSpeed:0,startDelay:0,backSpeed:0,shuffle:!1,backDelay:500,loop:!1,loopCount:!1,showCursor:!0,cursorChar:"|",attr:null,contentType:"html",callback:function(){},preStringTyped:function(){},onStringTyped:function(){},resetCallback:function(){}}}(window.jQuery);
|
||||||
30
projectsdev
30
projectsdev
|
|
@ -1,30 +0,0 @@
|
||||||
<div id="panel-projects" class="section">
|
|
||||||
<div id="container-projects-main" class="slide" data-anchor="slide1">
|
|
||||||
<p class="accent slide-header mt2">Featured projects</p>
|
|
||||||
<div class="projects-row">
|
|
||||||
<div class="projects-cell" id="cell1">
|
|
||||||
<p><span class="cell-date">November 2015</span><br><span class="cell-title">Queerness & Sexuality<br> special issue</span><br><br><span class="cell-source">The McGill Daily</span></p>
|
|
||||||
</div>
|
|
||||||
<div class="projects-cell" id="cell2">
|
|
||||||
<p><span class="cell-date">December 2015</span><br><span class="cell-title">Lego-based autonomous robot</span><br><br><span class="cell-source">Design project management<br>Course project</span></p>
|
|
||||||
</div>
|
|
||||||
<div class="projects-cell"></div>
|
|
||||||
</div>
|
|
||||||
<div class="projects-row">
|
|
||||||
<div class="projects-cell"></div>
|
|
||||||
<div class="projects-cell"></div>
|
|
||||||
<div class="projects-cell"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="slide" data-anchor="slide2"> Slide 2 </div>
|
|
||||||
<div class="slide" data-anchor="slide3"> Slide 3 </div>
|
|
||||||
<div class="slide" data-anchor="slide4"> Slide 4 </div>
|
|
||||||
<div class="social">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#"><i class="fa fa-3x fa-facebook-square"></i></a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-3x fa-twitter-square"></i></a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-3x fa-github-square"></i></a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-3x fa-instagram"></i></a></li>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Loading…
Reference in a new issue