diff --git a/assets/github-square.png b/assets/github-square.png new file mode 100644 index 0000000..857e7e6 Binary files /dev/null and b/assets/github-square.png differ diff --git a/assets/landing-bg-optimized.jpg b/assets/landing-bg-optimized.jpg deleted file mode 100644 index b9df13d..0000000 Binary files a/assets/landing-bg-optimized.jpg and /dev/null differ diff --git a/assets/linkedin-square.png b/assets/linkedin-square.png new file mode 100644 index 0000000..28f0d7a Binary files /dev/null and b/assets/linkedin-square.png differ diff --git a/assets/twitter-square.png b/assets/twitter-square.png new file mode 100644 index 0000000..55dd153 Binary files /dev/null and b/assets/twitter-square.png differ diff --git a/index.html b/index.html index b4a1edf..17ea31f 100644 --- a/index.html +++ b/index.html @@ -1,118 +1,42 @@ - + - - Marc Cataford + + Hello! + + + - - - +
- - +
- - - - + - - +

Hello

- - - +
+

Hi! My name is Marc and I am a tinkerer/teacher/developer/engineering student.

+

I do a lot of things. I'm currently the chairperson and webmaster of the Daily Publications Society, a non-profit organization that publishes two weekly print & online student newspapers in the McGill community, the Editor-in-chief at Graphite Publications, 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 Students' Society of McGill University. Oh, and I teach Java, Python and Intro. to Web development at SSMU MiniCourses to curious students to unwind.

+

I do a whole bunch of other things, check out my résumé to know what I've been up to lately.

+

If you want to chat, work on some cool problems or write, hit me up at marc@marccataford.com!

+
+
- - -
-
-
-

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

-
-
- -
-
+
+ Made with and cold coffee in the Montreal -> Toronto red-eye. +
-
-
-

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

-
-

Web development

-
-

As a web developer for The McGill Daily, SSMU University Affairs 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. -

-
-

Education

-
-

I have been a computer science/engineering tutor at Chegg Tutors Inc. since 2013, and a French tutor at Cégep du Vieux Montréal 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.

-
-
-
-
-

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.

-
- -
- , - .
- -
-
-
-
-
+ - - - + + \ No newline at end of file diff --git a/js/events.js b/js/events.js deleted file mode 100644 index 6b4e3c1..0000000 --- a/js/events.js +++ /dev/null @@ -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(); - } - }); -}); diff --git a/res/marc-cataford-resume.pdf b/res/marc-cataford-resume.pdf deleted file mode 100644 index bded33c..0000000 Binary files a/res/marc-cataford-resume.pdf and /dev/null differ diff --git a/style.css b/style.css index 2b12f06..826db6d 100644 --- a/style.css +++ b/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; -} +.social { display: flex; flex-direction: column; justify-content: center; margin-right: 1em; } +.social img { transition: 0.5s; } +.social img:hover { opacity: 0.5; } -h1,h2,h3,h4,h5,h6 { - font-family: 'Playfair Display', serif; - font-weight: 300; - font-size: inherit; - margin: 0.5em 0; -} +@keyframes onload_hello { + 0% { + opacity: 0; + margin-top: -100px; + } -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 -} + 100% { + opacity: 1; + margin-top: 0; + } +} \ No newline at end of file