Redesign.
This commit is contained in:
Marc Cataford
parent
371e42c235
commit
8cbeeb22a3
6 changed files with 149 additions and 148 deletions
74
css/style.css
Normal file
74
css/style.css
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
body {
|
||||||
|
background-color: #B2E0E0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#left_field {
|
||||||
|
position: absolute;
|
||||||
|
width: 30%;
|
||||||
|
top: 15%;
|
||||||
|
left: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#intro_blurb {
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#right_field {
|
||||||
|
position: absolute;
|
||||||
|
width: 30%;
|
||||||
|
left:65%;
|
||||||
|
top: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
position: absolute;
|
||||||
|
width: 40%;
|
||||||
|
left: 30%;
|
||||||
|
top: 5%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#main_title h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main_mugshot {
|
||||||
|
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
|
||||||
|
border-radius: 150px;
|
||||||
|
-webkit-border-radius: 150px;
|
||||||
|
-moz-border-radius: 150px;
|
||||||
|
|
||||||
|
background: url(../images/me.jpg) no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 300px 300px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu_title {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu_contents {}
|
||||||
|
|
||||||
|
.centered {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.social_icon:link {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social_icon:visited {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invisible { display: none; }
|
||||||
BIN
images/me.jpg
Normal file
BIN
images/me.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
67
index.html
Normal file
67
index.html
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<!-- Javascript -->
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||||
|
|
||||||
|
<script src="js/fx.js"></script>
|
||||||
|
|
||||||
|
<!-- Stylesheet -->
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="pagewrap">
|
||||||
|
<div id="main">
|
||||||
|
<div id="main_title" class="invisible"><h1>Hey! I'm Marc!</h1></div>
|
||||||
|
<div id="main_mugshot" class="centered invisible"></div>
|
||||||
|
<div id="main_menu" class="centered">
|
||||||
|
<div id="main_menu_skillset">
|
||||||
|
<div class="menu_title invisible"><h2>Skillset</h2></div>
|
||||||
|
<div class="menu_contents"></div>
|
||||||
|
</div>
|
||||||
|
<div id="main_menu_experience">
|
||||||
|
<div class="menu_title invisible"><h2>Experience</h2></div>
|
||||||
|
<div class="menu_contents"></div>
|
||||||
|
</div>
|
||||||
|
<div id="main_menu_projects">
|
||||||
|
<div class="menu_title invisible"><h2>Projects</h2></div>
|
||||||
|
<div class="menu_contents"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="left_field">
|
||||||
|
<div id="intro_blurb">
|
||||||
|
<p>I am a 25 years old computer engineering major student at McGill University (Montreal, CAN). I also minor
|
||||||
|
in mathematics out of playful curiosity. Originally a physiology and mathematics double-major, bioinformatics-
|
||||||
|
related courses sparked my interest for all things computer systems and I promptly changed faculty to
|
||||||
|
pursue my new passion. I strive to have as broad a skillset as possible, which brought me to explore
|
||||||
|
hardware, computer software and recently, web development.</p>
|
||||||
|
<p>My biggest tech thrills revolve around playing with microcontrollers, finding ways to use multiple
|
||||||
|
technologies to get the job done as efficiently as possible and producing well-designed solutions to
|
||||||
|
the problems that land on my desk.</p>
|
||||||
|
<p>I'm also a pretty big fan of professional cycling, obstacle course racing and healthy cooking.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="right_field">
|
||||||
|
<div id="callmemaybe">
|
||||||
|
<h3>Feel free to contact me over here</h3>
|
||||||
|
<a class="social_icon" href="https://facebook.com/marc.cataford"><i class="fa fa-5x fa-facebook-official"></i></a>
|
||||||
|
<a class="social_icon" href="https://twitter.com/_mcataford"><i class="fa fa-5x fa-twitter-square"></i></a>
|
||||||
|
<a class="social_icon" href="https://ca.linkedin.com/in/marccataford"><i class="fa fa-5x fa-linkedin-square"></i></a>
|
||||||
|
<a class="social_icon" href="https://github.com/mcataford"><i class="fa fa-5x fa-git-square"></i></a>
|
||||||
|
<br>
|
||||||
|
Or by email at <a href="mailto:c.marcandre@gmail.com">c.marcandre [at] gmail.com</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
js/fx.js
15
js/fx.js
|
|
@ -1,15 +1,16 @@
|
||||||
//Pageload animations.
|
//Pageload animations.
|
||||||
$(window).ready(function() {
|
$(window).ready(function() {
|
||||||
$("#header_title").fadeIn(800);
|
$("#main_title").fadeIn(1100);
|
||||||
$("#header_blurb").delay(300).fadeIn(800);
|
$("#main_mugshot").delay(800).fadeIn(1100);
|
||||||
$("#skillset .section_header").delay(1100).animate({width:"show"},800);
|
|
||||||
$("#experience .section_header").delay(1100).animate({width:"show"},800);
|
$("#main_menu_skillset .menu_title").delay(1900).fadeIn(800);
|
||||||
$("#projects .section_header").delay(1100).animate({width:"show"},800);
|
$("#main_menu_experience .menu_title").delay(2200).fadeIn(800);
|
||||||
|
$("#main_menu_projects .menu_title").delay(2500).fadeIn(800);
|
||||||
|
|
||||||
//Expanding sections.
|
//Expanding sections.
|
||||||
$(".section_header").click(function() {
|
/*$(".section_header").click(function() {
|
||||||
$(this).parent().find(".contents").toggle();
|
$(this).parent().find(".contents").toggle();
|
||||||
});
|
});*/
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,78 +0,0 @@
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<title>I'm Marc!</title>
|
|
||||||
|
|
||||||
<!-- Stylesheets -->
|
|
||||||
<link rel="stylesheet" type="text/css" href="style.css">
|
|
||||||
|
|
||||||
<!-- JS -->
|
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
|
|
||||||
|
|
||||||
<script type='text/javascript' language='javascript' src='js/fx.js'></script>
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="page"> <!-- page wrapper -->
|
|
||||||
<div id="header_contents">
|
|
||||||
<a name="top"></a>
|
|
||||||
<div id="header_title">
|
|
||||||
<p>Hey there! My name is Marc.</p>
|
|
||||||
</div>
|
|
||||||
<div id="header_blurb" class="invisible">
|
|
||||||
<p>I am a 25 years old computer engineering major student at McGill University (Montreal, CAN). I also minor
|
|
||||||
in mathematics out of playful curiosity. Originally a physiology and mathematics double-major, bioinformatics-
|
|
||||||
related courses sparked my interest for all things computer systems and I promptly changed faculty to
|
|
||||||
pursue my new passion. I strive to have as broad a skillset as possible, which brought me to explore
|
|
||||||
hardware, computer software and recently, web development.</p>
|
|
||||||
<p>My biggest tech thrills revolve around playing with microcontrollers, finding ways to use multiple
|
|
||||||
technologies to get the job done as efficiently as possible and producing well-designed solutions to
|
|
||||||
the problems that land on my desk.</p>
|
|
||||||
<p>I'm also a pretty big fan of professional cycling, obstacle course racing and healthy cooking.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="skillset">
|
|
||||||
<div class="section_header fleft clearb fullwidth invisible">
|
|
||||||
<center><h1 class="nomargin">Skillset</h1></center>
|
|
||||||
</div>
|
|
||||||
<div class="contents">
|
|
||||||
<ul class="nomargin pad5">
|
|
||||||
<li>I comfortably program in <b>Java</b>,<b>C/C++</b>,<b>PHP</b> and <b>Javascript</b>.</li>
|
|
||||||
<li>I can also use <b>jQuery</b>,<b>HandlebarsJS</b>,<b>MongoDB</b> and <b>MySQL</b> without problems.</li>
|
|
||||||
<li>I am learning more about <b>node.js</b>.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div id="experience">
|
|
||||||
<div class="section_header fright clearb fullwidth invisible">
|
|
||||||
<center><h1 class="nomargin">Experience</h1></center>
|
|
||||||
</div>
|
|
||||||
<div class="contents">
|
|
||||||
<script id="exp-template" type="text/x-handlebars-template">
|
|
||||||
{{#each experiences}}
|
|
||||||
|
|
||||||
<div id="{{@index}}">
|
|
||||||
<p>{{title}} at {{org}} from {{start}} to {{end}}.</p>
|
|
||||||
<ul>
|
|
||||||
{{#each task}}<li>{{this}}</li>{{/each}}
|
|
||||||
</ul>
|
|
||||||
<div>
|
|
||||||
|
|
||||||
{{/each}}
|
|
||||||
</script>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="projects">
|
|
||||||
<div class="section_header fleft clearb fullwidth invisible">
|
|
||||||
<center><h1 class="nomargin">Projects</h1></center>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> <!-- endof: page wrapper -->
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
63
style.css
63
style.css
|
|
@ -1,63 +0,0 @@
|
||||||
#page {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header_contents {
|
|
||||||
position: relative;
|
|
||||||
width: 75%;
|
|
||||||
left: 12.5%;
|
|
||||||
text-align: justify;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header_title {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
font-size: 250%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header_blurb {
|
|
||||||
/*display: none;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.section_header {}
|
|
||||||
|
|
||||||
.section_header_text {
|
|
||||||
font-size: 250%;
|
|
||||||
}
|
|
||||||
.contents {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#skillset .section_header {
|
|
||||||
background-color: #1F7A7A;
|
|
||||||
}
|
|
||||||
|
|
||||||
#skillset .contents {
|
|
||||||
background-color: #DB7B67;
|
|
||||||
}
|
|
||||||
|
|
||||||
#experience .section_header {
|
|
||||||
background-color: #29A3A3;
|
|
||||||
}
|
|
||||||
|
|
||||||
#experience .contents {
|
|
||||||
background-color: #33CCCC;
|
|
||||||
}
|
|
||||||
|
|
||||||
#projects .section_header {
|
|
||||||
background-color: #33CCCC;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nomargin { margin: 0 0; }
|
|
||||||
.invisible { display: none; }
|
|
||||||
.pad5 { padding: 0 5; }
|
|
||||||
.fullwidth { width: 100%; }
|
|
||||||
.fleft { float: left; }
|
|
||||||
.fright { float: right; }
|
|
||||||
.clearb { clear: both; }
|
|
||||||
.centered { align: center; }
|
|
||||||
Loading…
Reference in a new issue