109 lines
No EOL
5.7 KiB
HTML
109 lines
No EOL
5.7 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html>
|
||
<head>
|
||
<title>Hi!</title>
|
||
|
||
<!-- Meta -->
|
||
<meta charset="UTF-8">
|
||
|
||
<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" />
|
||
|
||
<!-- 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">
|
||
|
||
<!-- 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>
|
||
|
||
|
||
<!-- 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>
|
||
</html> |