Out with the old, in with as little new as possible.
This commit is contained in:
Marc Cataford
parent
d2516c7a6b
commit
e4c3a6e626
8 changed files with 48 additions and 387 deletions
BIN
assets/github-square.png
Normal file
BIN
assets/github-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 794 B |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB |
BIN
assets/linkedin-square.png
Normal file
BIN
assets/linkedin-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 592 B |
BIN
assets/twitter-square.png
Normal file
BIN
assets/twitter-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 668 B |
130
index.html
130
index.html
|
|
@ -1,118 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype HTML>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Marc Cataford</title>
|
||||
<head>
|
||||
<title>Hello!</title>
|
||||
<link href="style.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Meta -->
|
||||
<meta charset='UTF-8'>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<main>
|
||||
|
||||
<!-- Local stylesheets -->
|
||||
<link href='style.css' rel='stylesheet'>
|
||||
<section class="main_matter">
|
||||
|
||||
<!-- External stylesheets -->
|
||||
<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'>
|
||||
<aside class="social">
|
||||
<a href="https://www.github.com/mcataford"><img src="assets/github-square.png"/></a>
|
||||
<a href="https://www.linkedin.com/in/marccataford/"><img src="assets/linkedin-square.png"/></a>
|
||||
<a href="https://www.twitter.com/marccataford"><img src="assets/twitter-square.png"/></a>
|
||||
</aside>
|
||||
|
||||
<!-- External JS -->
|
||||
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
|
||||
<h1 class="hi">Hello</h1>
|
||||
|
||||
<!-- Local JS -->
|
||||
<script src='js/events.js'></script>
|
||||
</head>
|
||||
<div>
|
||||
<p>Hi! My name is <strong>Marc</strong> and I am a tinkerer/teacher/developer/engineering student.</p>
|
||||
<p>I do a lot of things. I'm currently the chairperson and webmaster of the <a title="I live to serve since 1911" href="https//www.dailypublications.org">Daily Publications Society</a>, a non-profit organization that publishes two weekly print & online student newspapers in the McGill community, the Editor-in-chief at <a title="We also organize artsy events." href="https://graphitepublications.com">Graphite Publications</a>, an independent Montreal-based online publication that tries really hard to do something different from its peers, and the web developer in charge of the clubs & services of the <a title="Protector of WordPress Realms, Herder of Plugins." href="http://www.ssmu.ca">Students' Society of McGill University</a>. Oh, and I teach Java, Python and Intro. to Web development at <a title="More than 120 happy students since Fall 2016" href="http://ssmu.mcgill.ca/minicourses/">SSMU MiniCourses</a> to curious students to unwind.</p>
|
||||
<p>I do a whole bunch of other things, check out my <a href="#">résumé</a> to know what I've been up to lately.</p>
|
||||
<p>If you want to chat, work on some cool problems or write, hit me up at <a href="mailto:marc@marccataford.com">marc@marccataford.com</a>!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<footer>
|
||||
<em>Made with <span>❤</span> and cold coffee in the Montreal -> Toronto red-eye.</em>
|
||||
</footer>
|
||||
|
||||
<div id='skills-wrapper' class='full-page-wrapper content-wrapper'>
|
||||
<header class='left-border'>
|
||||
<h1><i class="fa fa-graduation-cap" aria-hidden="true"></i> 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>
|
||||
</main>
|
||||
|
||||
<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><i class="fa fa-cogs" aria-hidden="true"></i> 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='res/marc-cataford-resume.pdf'>Click here</a> to access my full résumé.</p>
|
||||
</header>
|
||||
<h3 class='left-border'>Web development</h3>
|
||||
<section>
|
||||
<p>As a web developer for <span class='important-bit'>The McGill Daily</span>, <span class='important-bit'>SSMU University Affairs</span> and other organizations, I've had the chance to design and implement web content accessed by thousands. I believe in simplicity, as design should highlight the content, not take the focus away from it.
|
||||
</p>
|
||||
</section>
|
||||
<h3 class='left-border'>Education</h3>
|
||||
<section>
|
||||
<p>I have been a computer science/engineering tutor at <span class='important-bit'>Chegg Tutors Inc.</span> since 2013, and a French tutor at <span class='important-bit'>Cégep du Vieux Montréal</span> since 2010. I have also tutoring privately around McGill for about a year. My time as a teacher has been a tremendous help in refining my communication and planning skills.</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id='skills-wrapper' class='full-page-wrapper content-wrapper'>
|
||||
<header class='left-border'>
|
||||
<h1><i class="fa fa-pencil-square-o" aria-hidden="true"></i> 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'>
|
||||
<a href='https://ca.linkedin.com/in/marccataford'><i class="fa fa-linkedin" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
<div class='smGlobalBtn'>
|
||||
<a href='https://www.facebook.com/marc.cataford'><i class="fa fa-facebook" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
<div class='smGlobalBtn'>
|
||||
<a href='https://twitter.com/@marccataford'><i class="fa fa-twitter" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
<div class='smGlobalBtn'>
|
||||
<a href='https://github.com/mcataford'><i class="fa fa-github" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<form action='https://formspree.io/c.marcandre@gmail.com' method='post'>
|
||||
<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>
|
||||
</body>
|
||||
|
||||
|
||||
<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>
|
||||
37
js/events.js
37
js/events.js
|
|
@ -1,37 +0,0 @@
|
|||
$(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();
|
||||
}
|
||||
});
|
||||
});
|
||||
Binary file not shown.
268
style.css
268
style.css
|
|
@ -1,249 +1,23 @@
|
|||
/* Normalize */
|
||||
body, html { margin: 0; }
|
||||
main { display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; flex-direction: column; }
|
||||
.main_matter { display: flex; width: 40%; align-items: center; animation: 1s ease-out 0s 1 onload_hello; }
|
||||
.hi { width: 1em; word-wrap: break-word; text-transform: uppercase; font-size: 4em; margin: 0.5rem; }
|
||||
p > a { font-weight: bold; }
|
||||
footer { text-align: center; font-size: 0.8rem; }
|
||||
footer em > span { font-style: normal; }
|
||||
|
||||
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 > header > h1:first-child {
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.important-bit {
|
||||
border-bottom: 1px dashed #000;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.left-border {
|
||||
border-left: 3px solid #000;
|
||||
padding-left: 1rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.smGlobalBtn a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
clear: both;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
/* Other sections - general */
|
||||
|
||||
.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
|
||||
.social { display: flex; flex-direction: column; justify-content: center; margin-right: 1em; }
|
||||
.social img { transition: 0.5s; }
|
||||
.social img:hover { opacity: 0.5; }
|
||||
|
||||
@keyframes onload_hello {
|
||||
0% {
|
||||
opacity: 0;
|
||||
margin-top: -100px;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue