diff --git a/assets/landing-bg-optimized.jpg b/assets/landing-bg-optimized.jpg new file mode 100644 index 0000000..b9df13d Binary files /dev/null and b/assets/landing-bg-optimized.jpg differ diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 121ca8f..0000000 --- a/css/style.css +++ /dev/null @@ -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; } -} diff --git a/fonts/Ubuntu-R.ttf b/fonts/Ubuntu-R.ttf deleted file mode 100644 index 45a038b..0000000 Binary files a/fonts/Ubuntu-R.ttf and /dev/null differ diff --git a/index.html b/index.html index 20725dd..ec6cdcb 100644 --- a/index.html +++ b/index.html @@ -1,109 +1,133 @@ - - Hi! + + - - + + - - - - - + - - - + + + - - - - -
- - - - -
-
- -
-
-
-

Hi, I'm Marc.

-

I love to

-

I am a third-year computer engineering student at McGill University who is interested in full-stack web development, embedded electronics, low-level programming and journalism. -

-
- -
-
-

A bit more about me

-

I am determined. 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 tinkerer, an adept of DIY and a keen learner. 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 hard work and perserverance. No matter the job, my motto is to do things well or keep practicing until I can exceed expectations. - -

For the past year, I have been working as a Web editor at The McGill Daily, one of the oldest university publications in Canada – publishing continually since 1911 and attracting around 80,000 visitors monthly online. - -

I have also been tutoring professionally for six years, at first in French grammar, and then in various computer science and engineering topics ranging from software/web programming to computer organization and digital design. - -

I am always looking for new opportunities to learn and to grow, and one of my primary goals at the moment is acquiring professional experience related to my interests through freelance contracts and internships. - -

-
- - - -
-
-

Get in touch!

- -

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 @_mcataford, by email or by filling the form below!

- -
-
-

, .

-

-

- -
-
- -
-
-
- - + + - - - - - - \ No newline at end of file + + + +
+
+
+
+

Marc Cataford

+

Get in touch through Twitter at @_mcataford, on Github at @mcataford or via email at c.marcandre [at] gmail.com +

+
+
+

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. +

+

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. +

+
+
+ +
+
+ +
+
+

Skills

+

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.

+
+ +

Software

+
+

Through personal practice and teaching it to others, I've become proficient in many programming languages such as C/C++, Java, Javascript, PHP, x86-64 Intel assembly and Python. I've also worked with frameworks such as JQuery, AngularJS and Flask.

+

I've also been working with Wordpress and Wordpress-like systems for a while.

+
+ +

Hardware

+
+

Over the course of a semester, I joined a robotics club that taught be the basics of circuit board prototyping and soldering, I then went to experiment with my trusty Arduino, bulk electronics and a PIC programmer. +

+

Recent coursework also led me to work with FPGAs and VHDL.

+
+
+ +
+
+

Current work

+

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.

+

My prime directive is to assess what the expectations are, and find a way to exceed them.

+

Click here to access my full résumé.

+
+
+
Consultant / Web developer
Self-employed
+
+ February 2016 — Present +
+

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.

+

Stack: A bit of everything

+
+
+
+
Web Editor
The McGill Daily
+
+ February 2015 — Present +
+

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.

+

Stack: PHP, MySQL, Wordpress, Javascript/JQuery, HTML5/CSS3

+
+
+ +
+
Tutor
Chegg Inc.
+
+ April 2013 — Present +
+

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.

+

Stack: C/C++, Java, Javascript, Python, HTML5/CSS3, x86-64 Intel assembly, PHP

+
+
+
+ +
+
+

Get in touch

+

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.

+
+ +
+ , + .
+ +
+
+
+
+
+ + + + diff --git a/js/animate.js b/js/animate.js deleted file mode 100644 index 1117981..0000000 --- a/js/animate.js +++ /dev/null @@ -1,24 +0,0 @@ -$(function(){ - $("#landing-subtyped").typed({ - strings: ["tinker.", - "share what I know.", - "learn new things.", - "code.", - "communicate."], - 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); - } -}); \ No newline at end of file diff --git a/js/events.js b/js/events.js new file mode 100644 index 0000000..6b4e3c1 --- /dev/null +++ b/js/events.js @@ -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(); + } + }); +}); diff --git a/js/typed/LICENSE.txt b/js/typed/LICENSE.txt deleted file mode 100755 index ab9d6a2..0000000 --- a/js/typed/LICENSE.txt +++ /dev/null @@ -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. diff --git a/js/typed/typed.min.js b/js/typed/typed.min.js deleted file mode 100755 index 75a872c..0000000 --- a/js/typed/typed.min.js +++ /dev/null @@ -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'+this.cursorChar+""),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(''),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); \ No newline at end of file diff --git a/projectsdev b/projectsdev deleted file mode 100644 index bc4b9c9..0000000 --- a/projectsdev +++ /dev/null @@ -1,30 +0,0 @@ -
-
-

Featured projects

-
-
-

November 2015
Queerness & Sexuality
special issue

The McGill Daily

-
-
-

December 2015
Lego-based autonomous robot

Design project management
Course project

-
-
-
-
-
-
-
-
-
-
Slide 2
-
Slide 3
-
Slide 4
- -
\ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..2d44e72 --- /dev/null +++ b/style.css @@ -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 +}