New Design
This commit is contained in:
Marc
parent
7f83678366
commit
00aac8acca
10 changed files with 405 additions and 353 deletions
BIN
assets/landing-bg-optimized.jpg
Normal file
BIN
assets/landing-bg-optimized.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
177
css/style.css
177
css/style.css
|
|
@ -1,177 +0,0 @@
|
|||
/*
|
||||
* General
|
||||
*/
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 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; }
|
||||
.pad30vh { padding-top: 30vh; }
|
||||
|
||||
.marb1r { margin-bottom: 1rem;}
|
||||
|
||||
|
||||
/*
|
||||
* Colours
|
||||
*/
|
||||
|
||||
.accent { color: #03A9F4; }
|
||||
.primary { color: #727272; }
|
||||
|
||||
/*
|
||||
* Links
|
||||
*/
|
||||
|
||||
a:link, a:visited {
|
||||
color : #03A9F4;
|
||||
}
|
||||
|
||||
/*
|
||||
* Others
|
||||
*/
|
||||
|
||||
.txt-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* Header
|
||||
*/
|
||||
header {
|
||||
position: fixed;
|
||||
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;
|
||||
}
|
||||
|
||||
.panel > section > h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.panel > section > h2 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.panel p {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/*
|
||||
* Contact me
|
||||
*/
|
||||
|
||||
#contactme form textarea {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
textarea, input {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
box-shadow: 0 0 3px #a1a1a1;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Footer
|
||||
*/
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Typed.js cursor
|
||||
*/
|
||||
|
||||
.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.
222
index.html
222
index.html
|
|
@ -1,109 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Hi!</title>
|
||||
<head>
|
||||
<title></title>
|
||||
|
||||
<!-- Meta -->
|
||||
<meta charset="UTF-8">
|
||||
<meta charset='UTF-8'>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta property="og:url" content="http://mcataford.github.io" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="Marc Cataford" />
|
||||
<meta property="og:description" content="I live to serve since 1911" />
|
||||
<meta property="og:image" content="http://mcataford.github.io/facebook.png" />
|
||||
<link href='style.css' rel='stylesheet'>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<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">
|
||||
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Ubuntu:300,500,300italic' rel='stylesheet' type='text/css'>
|
||||
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'>
|
||||
|
||||
<!-- See bottom for JS, loaded last for speed -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#hello">Home</a></li>
|
||||
<li><a href="#aboutme">About me</a></li>
|
||||
<li style="display: none"><a href="#cv">Curriculum vitae</a></li>
|
||||
<li><a href="#contactme">Contact me</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://www.facebook.com/marc.cataford"><i class="fa fa-3x fa-facebook-square"></i></a></li>
|
||||
<li><a href="https://twitter.com/_mcataford"><i class="fa fa-3x fa-twitter-square"></i></a></li>
|
||||
<li><a href="https://github.com/mcataford"><i class="fa fa-3x fa-github-square"></i></a></li>
|
||||
<li><a href="https://ca.linkedin.com/in/marccataford"><i class="fa fa-3x fa-linkedin-square"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
</header>
|
||||
|
||||
<main class="ubuntu primary">
|
||||
<div class="panel" id="hello">
|
||||
<section class="pad10vw pad30vh">
|
||||
<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 class="panel" id="aboutme">
|
||||
<section class="pad10vw pad10vh">
|
||||
<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 historically-rich mental hospital, 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>.
|
||||
|
||||
<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>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>.
|
||||
|
||||
<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>
|
||||
|
||||
<div class="panel" id="cv" style="display: none;">
|
||||
<section>
|
||||
<h1 class="marb1r">Curriculum vitae</h1>
|
||||
<ul>
|
||||
<li><section>
|
||||
<h3>The McGill Daily</h3>
|
||||
<p>Some task
|
||||
<p>More tasks
|
||||
</section></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="panel" id="contactme">
|
||||
<section class="pad10vh pad10vw">
|
||||
<h1 class="marb1r">Get in touch!</h1>
|
||||
|
||||
<p>I would love to hear about you, whether it is about new opportunities, suggestions, or clever limericks. You can reach me through social media at <a href="https://www.twitter.com/_mcataford">@_mcataford</a>, by <a href="mailto:c.marcandre@gmail.com">email</a> or by filling the form below!</p>
|
||||
|
||||
<form action="http://formspree.io/c.marcandre@gmail.com" method="POST">
|
||||
<fieldset>
|
||||
<p><label for="contactme-name">Hi! My name is </label><input type="text" id="contactme-name" placeholder="Johnny Appleseed" name="contact-name" required> , <label for="contactme-email">you can reach me at </label><input type="email" id="contactme-email" placeholder="my@email.xyz" name="contact-email" required> .</p>
|
||||
<p><label for="contactme-details">I would like to tell you about ...</label></p>
|
||||
<p><textarea id="contactme-details" placeholder="exciting new ideas." name="contact-details" required></textarea></p>
|
||||
<input type="submit" value="Send">
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p class="txt-center"><em>From scratch, with love – <a href="mailto:c.marcandre@gmail.com">Marc Cataford</a></em></p>
|
||||
</footer>
|
||||
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
|
||||
<script src='js/events.js'></script>
|
||||
|
||||
|
||||
<!-- JS -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
|
||||
<script src="js/typed/typed.min.js"></script>
|
||||
<script src="js/animate.js"></script>
|
||||
</body>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header></header>
|
||||
<main>
|
||||
<div id='landing-wrapper' class='full-page-wrapper'>
|
||||
<div id='landing-block-1'>
|
||||
<h1>Marc Cataford</h1>
|
||||
<p>Get in touch through Twitter at @_mcataford, on Github at @mcataford or via email at c.marcandre [at] gmail.com
|
||||
</p>
|
||||
</div>
|
||||
<div id='landing-block-2'>
|
||||
<p class='landing-text-block'>Hi! My name is Marc, and I'm a fourth-year computer engineering student from McGill University. My main interests lie in full-stack web development, embdedded systems, and harnessing new technologies to educate, spread information and create a more sustainable world.
|
||||
</p>
|
||||
<p class='landing-text-block'>When I'm not working on a project, tinkering at home or learning new things, I like to cycle around Montreal and experiment with preserves and food in general.
|
||||
</p>
|
||||
</div>
|
||||
<div id='landing-block-3'>
|
||||
<button class='button'>See what I can do for you</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='skills-wrapper' class='full-page-wrapper content-wrapper'>
|
||||
<header class='left-border'>
|
||||
<h1>Skills</h1>
|
||||
<p>Through my practice as a tutor and web developer, I've learned a lot in a short amount of time, as deadlines were often immovable. If a project requires the use of something I'm not familiar with, the first step is always to research and learn so I can apply.</p>
|
||||
</header>
|
||||
|
||||
<h3 class='left-border'>Software</h3>
|
||||
<section>
|
||||
<p>Through personal practice and teaching it to others, I've become proficient in many programming languages such as <span class='important-bit'>C/C++</span>, <span class='important-bit'>Java</span>, <span class='important-bit'>Javascript</span>, <span class='important-bit'>PHP</span>, <span class='important-bit'>x86-64 Intel assembly</span> and <span class='important-bit'>Python</span>. I've also worked with frameworks such as <span class='important-bit'>JQuery</span>, <span class='important-bit'>AngularJS</span> and <span class='important-bit'>Flask</span>.</p>
|
||||
<p>I've also been working with <span class='important-bit'>Wordpress</span> and Wordpress-like systems for a while.</p>
|
||||
</section>
|
||||
|
||||
<h3 class='left-border'>Hardware</h3>
|
||||
<section>
|
||||
<p>Over the course of a semester, I joined a robotics club that taught be the basics of <span class='important-bit'>circuit board prototyping</span> and <span class='important-bit'>soldering</span>, I then went to experiment with my trusty <span class='important-bit'>Arduino</span>, bulk electronics and a <span class='important-bit'>PIC programmer</span>.
|
||||
</p>
|
||||
<p>Recent coursework also led me to work with <span class='important-bit'>FPGAs</span> and <span class='important-bit'>VHDL</span>.</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id='resume-wrapper' class='full-page-wrapper content-wrapper'>
|
||||
<header class='left-border'>
|
||||
<h1>Current work</h1>
|
||||
<p>I've had many different jobs before settling in engineering, these experiences have taught me to be quick on my feet, always receptive and willing to learn.</p>
|
||||
<p>My prime directive is to assess what the expectations are, and find a way to exceed them.</p>
|
||||
<p><a href='#'>Click here</a> to access my full résumé.</p>
|
||||
</header>
|
||||
<div class='job-col'>
|
||||
<h5> Consultant / Web developer<br>Self-employed</h5>
|
||||
<section>
|
||||
<span class='secondary'>February 2016 — Present</span>
|
||||
<hr>
|
||||
<p>My priority is always to find a way to make my client's vision a reality and to help their brand gain exposure through good web design and general advising. I am always happy to work with tight deadline and to provide ongoing support once the product is launched.</p>
|
||||
<p>Stack: <span class='important-bit'>A bit of everything</span></p>
|
||||
</section>
|
||||
</div>
|
||||
<div class='job-col'>
|
||||
<h5>Web Editor<br>The McGill Daily</h5>
|
||||
<section>
|
||||
<span class='secondary'>February 2015 — Present</span>
|
||||
<hr>
|
||||
<p>My editorial duties involve editing pieces before they are published and occasionally writing my own, as well as help my fellow editors with their own tasks. I also maintain our website and social media presence, investigate and fix any bug that comes up and develop new features and special web content on a weekly basis.</p>
|
||||
<p>Stack: <span class='important-bit'>PHP</span>, <span class='important-bit'>MySQL</span>, <span class='important-bit'>Wordpress</span>, <span class='important-bit'>Javascript/JQuery</span>, <span class='important-bit'>HTML5/CSS3</span></p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class='job-col'>
|
||||
<h5>Tutor<br>Chegg Inc.</h5>
|
||||
<section>
|
||||
<span class='secondary'>April 2013 — Present</span>
|
||||
<hr>
|
||||
<p>As a tutor, my role is to prepare lesson material that fits each student and make sure they understand the subject matter. Through examples, discussions and collaborative problem solving, I ensure that the student leaves our session with the right tools to perform well in their projects.</p>
|
||||
<p>Stack: <span class='important-bit'>C/C++</span>, <span class='important-bit'>Java</span>, <span class='important-bit'>Javascript</span>, <span class='important-bit'>Python</span>, <span class='important-bit'>HTML5/CSS3</span>, <span class='important-bit'>x86-64 Intel assembly</span>, <span class='important-bit'>PHP</span></p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='skills-wrapper' class='full-page-wrapper content-wrapper'>
|
||||
<header class='left-border'>
|
||||
<h1>Get in touch</h1>
|
||||
<p>Got ideas you want to discuss? Interested in hiring a consultant or web developer? Want a cycling partner? I'd love to hear from you! Use the form below or use one of these social media links to send me something.</p>
|
||||
</header>
|
||||
<div class='social-media'>
|
||||
<div class='smGlobalBtn'>
|
||||
<i class="fa fa-linkedin" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class='smGlobalBtn'>
|
||||
<i class="fa fa-facebook" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class='smGlobalBtn'>
|
||||
<i class="fa fa-twitter" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class='smGlobalBtn'>
|
||||
<i class="fa fa-github" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
<form>
|
||||
<label for='name'>My name is </label><input name='name' id='name' type='text' placeholder='Johnny Appleseed'>,
|
||||
<label for='email'>and my email address is </label><input name='email' type='email' placeholder='me@mydomain.xyz'>.<br>
|
||||
<textarea placeholder="I'd like to tell you about something awesome. Here it goes ..."></textarea>
|
||||
<div class='submit-btn-wrapper'>
|
||||
<input class='button inv-button' type='submit' value='Send'></div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside>
|
||||
<button id='nav-arrow-up' class='button inv-button nav-arrow'><i class="fa fa-arrow-up" aria-hidden="true"></i></button>
|
||||
<button id='nav-arrow-down' class='button inv-button nav-arrow'><i class="fa fa-arrow-down" aria-hidden="true"></i></button>
|
||||
</aside>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
$(function(){
|
||||
$("#landing-subtyped").typed({
|
||||
strings: ["<span class='accent'>tinker</span>.",
|
||||
"<span class='accent'>share what I know</span>.",
|
||||
"<span class='accent'>learn new things</span>.",
|
||||
"<span class='accent'>code</span>.",
|
||||
"<span class='accent'>communicate</span>."],
|
||||
typeSpeed: 20,
|
||||
loop: true,
|
||||
backDelay: 2000,
|
||||
backSpeed: 0,
|
||||
cursorChar: "█"
|
||||
});
|
||||
});
|
||||
|
||||
$('a').on('click', function(event) {
|
||||
var target = $($(this).attr('href'));
|
||||
if( target.length ) {
|
||||
event.preventDefault();
|
||||
$('html, body').animate({
|
||||
scrollTop: target.offset().top
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
37
js/events.js
Normal file
37
js/events.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
$(document).ready(function() {
|
||||
$('#landing-wrapper button').click(function() {
|
||||
$('html,body').animate({
|
||||
scrollTop: $('#skills-wrapper').offset().top,
|
||||
},1000);
|
||||
});
|
||||
|
||||
$('#nav-arrow-up').click(function() {
|
||||
$('html, body').animate({
|
||||
scrollTop: Math.ceil(($(window).scrollTop() - $(window).height())/$(window).height())*$(window).height()
|
||||
}, 800)
|
||||
});
|
||||
|
||||
$('#nav-arrow-down').click(function() {
|
||||
$('html, body').animate({
|
||||
scrollTop: Math.floor(($(window).scrollTop() + $(window).height())/$(window).height())*$(window).height()
|
||||
}, 800)
|
||||
});
|
||||
|
||||
$(window).scroll(function() {
|
||||
if($(window).scrollTop() > $(window).height() / 2) {
|
||||
$('#nav-arrow-down').fadeIn();
|
||||
} else {
|
||||
$('#nav-arrow-down').fadeOut();
|
||||
}
|
||||
|
||||
if($(window).scrollTop() > $(window).height() * 0.97) {
|
||||
$('#nav-arrow-up').fadeIn();
|
||||
} else {
|
||||
$('#nav-arrow-up').fadeOut();
|
||||
}
|
||||
|
||||
if($(window).scrollTop() >= $(document).height() - $(window).height()) {
|
||||
$('#nav-arrow-down').fadeOut();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014 Matt Boldt
|
||||
|
||||
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/typed/typed.min.js
vendored
1
js/typed/typed.min.js
vendored
|
|
@ -1 +0,0 @@
|
|||
!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>
|
||||
244
style.css
Normal file
244
style.css
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
/* Normalize */
|
||||
|
||||
body,html {
|
||||
font-size: 16px;
|
||||
overflow-x: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-weight: 300;
|
||||
font-size: inherit;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
h1 { font-size: 3em; }
|
||||
h2 { font-size: 2.5em; }
|
||||
h3 { font-size: 2em; }
|
||||
h4 { font-size: 1.5em; }
|
||||
h5 { font-size: 1.4em; }
|
||||
h6 { font-size: 1.2em; }
|
||||
|
||||
p, button, span, label, input, textarea {
|
||||
font-size: 16px;
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
font-weight:300;
|
||||
line-height:1.4;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* General elements */
|
||||
|
||||
.full-page-wrapper {
|
||||
width:100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
margin-left: 4em;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.content-wrapper > h1:first-child {
|
||||
margin-top:2rem;
|
||||
}
|
||||
|
||||
.important-bit {
|
||||
border-bottom: 1px dashed #000;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.left-border {
|
||||
border-left: 3px solid #000;
|
||||
padding-left: 1rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Landing elements */
|
||||
|
||||
#landing-wrapper {
|
||||
background-image: url('assets/landing-bg-optimized.jpg');
|
||||
background-size: cover;
|
||||
box-shadow: inset 9999px 0 0 0 rgba(0,0,0,0.5);
|
||||
overflow: auto;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
#landing-block-1 {
|
||||
margin-top: 10vh;
|
||||
border-left: 3px solid #fff;
|
||||
padding-left: 1em;
|
||||
margin-left: 4em;
|
||||
}
|
||||
|
||||
#landing-block-1 > h1:first-child {
|
||||
font-size: 4em;
|
||||
line-height: 0.6;
|
||||
}
|
||||
|
||||
#landing-block-1 > p {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
#landing-block-2 {
|
||||
margin-right:4em;
|
||||
float:right;
|
||||
border-right: 3px solid #fff;
|
||||
}
|
||||
|
||||
.landing-text-block {
|
||||
margin: 0 1em;
|
||||
max-width:40%;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
#landing-block-2 > .landing-text-block {
|
||||
float: right;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
#landing-block-2 > .landing-text-block:not(:last-of-type) {
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
#landing-block-3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#landing-block-3 .button {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
/* Résumé */
|
||||
|
||||
.content-wrapper > header > h1 {
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
.content-wrapper > header > p {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.content-wrapper > section > p {
|
||||
width:80%;
|
||||
}
|
||||
|
||||
.job-col {
|
||||
width: calc(30% - 1em);
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
float: left;
|
||||
}
|
||||
/* Contact */
|
||||
|
||||
form > textarea {
|
||||
resize: none;
|
||||
width: calc(100% - 9em);
|
||||
height:20vh;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
input.button.inv-button {
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
|
||||
.submit-btn-wrapper {
|
||||
text-align: center;
|
||||
width: calc(100% - 9em);
|
||||
}
|
||||
|
||||
/* General elements */
|
||||
|
||||
.button {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 1px solid #fff;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding:1em 2em;
|
||||
font-size: 1.5em;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.inv-button {
|
||||
border: 1px solid #000;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.button.inv-button {
|
||||
color :#000;
|
||||
}
|
||||
|
||||
.button.inv-button:hover {
|
||||
background-color: #000;
|
||||
color:#fff;
|
||||
-webkit-transition:background 0.5s;
|
||||
-moz-transition:background 0.5s;
|
||||
-o-transition:background 0.5s;
|
||||
transition:background 0.5s
|
||||
}
|
||||
|
||||
.button:not(.inv-button):hover {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
margin: 1em;
|
||||
padding: 0.5em;
|
||||
border-radius:0.5em;
|
||||
}
|
||||
|
||||
#nav-arrow-up {
|
||||
position:fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#nav-arrow-down {
|
||||
position:fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.social-media {
|
||||
text-align: center;
|
||||
width: calc(100% - 9em);
|
||||
margin-top:2em;
|
||||
margin-bottom:2em;
|
||||
}
|
||||
|
||||
.smGlobalBtn{ /* global button class */
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 0px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-color:#000;
|
||||
font-size: 25px;
|
||||
font-weight: normal;
|
||||
line-height: 2em;
|
||||
border-radius: 25px;
|
||||
-moz-border-radius:25px;
|
||||
-webkit-border-radius:25px;
|
||||
}
|
||||
|
||||
.smGlobalBtn:hover {
|
||||
color:#000;
|
||||
background-color: #fff;
|
||||
-webkit-transition:background 0.5s;
|
||||
-moz-transition:background 0.5s;
|
||||
-o-transition:background 0.5s;
|
||||
transition:background 0.5s
|
||||
}
|
||||
Loading…
Reference in a new issue