Fixed layout, added stuff.
This commit is contained in:
Marc
parent
7fa1696af8
commit
71cc723528
10 changed files with 177 additions and 152 deletions
159
css/style.css
159
css/style.css
|
|
@ -6,7 +6,7 @@ body {
|
|||
margin: 0 0;
|
||||
}
|
||||
|
||||
#page {
|
||||
#page-gen {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
|
@ -16,21 +16,19 @@ body {
|
|||
min-height: 640px;
|
||||
}
|
||||
|
||||
.social {
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
margin-left: 0;
|
||||
right: 1em;
|
||||
#topmenu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.social ul {
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
.panel-gen {
|
||||
height: 100vh;
|
||||
padding-left: 2vw;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
|
||||
.social ul li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
line-height: 1.2;
|
||||
|
|
@ -38,45 +36,25 @@ p {
|
|||
}
|
||||
|
||||
a {
|
||||
color :#727272;
|
||||
color :#727272 !important;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #03A9F4;
|
||||
color: #03A9F4 !important;
|
||||
}
|
||||
|
||||
a i {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
* PANELS
|
||||
*/
|
||||
|
||||
#panel-landing {
|
||||
/*text-align: center;*/
|
||||
height: 25vh;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
#panel-resume {
|
||||
|
||||
}
|
||||
|
||||
#panel-projects {
|
||||
|
||||
}
|
||||
|
||||
#panel-intouch {
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* LANDING PANEL
|
||||
*/
|
||||
|
||||
/*Bigger things*/
|
||||
|
||||
#container-landing{
|
||||
margin-left:2vw;
|
||||
padding-top: 25vh;
|
||||
}
|
||||
|
||||
#greet {
|
||||
|
|
@ -89,6 +67,8 @@ a i {
|
|||
margin-left:0.4vw;
|
||||
}
|
||||
|
||||
/*Navigation*/
|
||||
|
||||
#container-landing ul {
|
||||
list-style: none;
|
||||
font-size: 4vw;
|
||||
|
|
@ -104,20 +84,16 @@ a i {
|
|||
}
|
||||
|
||||
/*
|
||||
* RESUME PANEL
|
||||
* ABOUT ME PANEL
|
||||
*/
|
||||
|
||||
#panel-resume .fp-tableCell {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/*Bigger things*/
|
||||
|
||||
#container-me {
|
||||
margin-left:2vw;
|
||||
#container-aboutme {
|
||||
width: 95%;
|
||||
margin-top:2vh
|
||||
}
|
||||
|
||||
#container-me p {
|
||||
#container-aboutme p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
|
@ -127,59 +103,6 @@ a i {
|
|||
display: inline;
|
||||
}
|
||||
|
||||
/*
|
||||
* PROJECTS PANEL
|
||||
*/
|
||||
|
||||
#panel-projects .fp-tableCell {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.projects-row {
|
||||
height: 36%;
|
||||
width: 90%;
|
||||
margin-left: auto;
|
||||
margin-right:auto;
|
||||
margin-top: 1vh;
|
||||
padding: 1.5vh 7vw;
|
||||
}
|
||||
|
||||
.projects-cell {
|
||||
width: 30%;
|
||||
height:100%;
|
||||
background-color: #03A9F4;
|
||||
margin:1% 1%;
|
||||
float:left;
|
||||
}
|
||||
|
||||
#container-projects-main {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.slide-header {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
#cell1 {
|
||||
background-image: url("../images/bathbomb1.jpg");
|
||||
background-size: 100% 100%;
|
||||
box-shadow: inset 0px 0px 0px 1000px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
#cell2 {
|
||||
background-image: url("../images/robotdpm.jpg");
|
||||
background-size: 100% ;
|
||||
box-shadow: inset 0px 0px 0px 1000px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.projects-cell p {
|
||||
color: #fff;
|
||||
font-family: Oswald;
|
||||
}
|
||||
|
||||
.cell-date { font-size: 7vh; }
|
||||
.cell-title { font-size: 5vh; }
|
||||
.cell-source { font-size: 3vh; }
|
||||
|
||||
/*
|
||||
* INTOUCH PANEL
|
||||
|
|
@ -195,18 +118,10 @@ a i {
|
|||
margin-top:2vh
|
||||
}
|
||||
|
||||
#social-boxes {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#social-boxes ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#social-boxes ul li {
|
||||
display: inline;
|
||||
margin-left: 3vh;
|
||||
font-size:5vh;
|
||||
form p textarea {
|
||||
width: 90vw;
|
||||
height: 20vh;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -233,7 +148,25 @@ a i {
|
|||
.primarytext {color :#727272;}
|
||||
.accent {color:#03A9F4;}
|
||||
|
||||
.ta-center { text-align: center; }
|
||||
|
||||
/*
|
||||
* SOCIAL MEDIA BOXES
|
||||
*/
|
||||
|
||||
|
||||
.social ul {
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.social ul li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.social ul li a i {
|
||||
font-size: 7vh;
|
||||
}
|
||||
|
||||
/*
|
||||
* FONT DATA
|
||||
|
|
@ -241,6 +174,7 @@ a i {
|
|||
|
||||
.opensans { font-family: OpenSans; }
|
||||
.oswald { font-family: Oswald; }
|
||||
.courgette { font-family: Courgette; }
|
||||
|
||||
@font-face {
|
||||
font-family: OpenSans;
|
||||
|
|
@ -250,4 +184,9 @@ a i {
|
|||
@font-face {
|
||||
font-family: Oswald;
|
||||
src: url("../fonts/Oswald-Light.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Courgette;
|
||||
src: url("../fonts/Courgette-Regular.ttf") format("truetype");
|
||||
}
|
||||
BIN
fonts/Courgette-Regular.ttf
Executable file
BIN
fonts/Courgette-Regular.ttf
Executable file
Binary file not shown.
BIN
images/IMG_1904.JPG
Executable file
BIN
images/IMG_1904.JPG
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 MiB |
BIN
images/bathbomb1.jpg
Normal file
BIN
images/bathbomb1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
images/robotdpm.png
Normal file
BIN
images/robotdpm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
103
index.html
103
index.html
|
|
@ -5,14 +5,51 @@
|
|||
<title>Hello!</title>
|
||||
<!-- Stylesheets -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<link href="css/fullpage.css" rel="stylesheet">
|
||||
<link href="css/typed/main.css" rel="stylesheet">
|
||||
<!--<link href="css/fullpage.css" rel="stylesheet">-->
|
||||
<link rel="stylesheet" href="css/typed/main.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="panel-landing" class="section primarytext">
|
||||
<div id="page-gen">
|
||||
<div id="topmenu">
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand courgette menulink" id="#panel-landing">Marc Cataford</a>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse oswald basesize" id="bs-example-navbar-collapse-1">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a id="#panel-aboutme" class="menulink">About me <span class="sr-only">(current)</span></a></li>
|
||||
<li><a id="#panel-intouch" class="menulink">Get in touch!</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<div class="social">
|
||||
<ul>
|
||||
<li><a href="https://www.facebook.com/marc.cataford"><i class="fa fa-2x fa-facebook-square"></i></a></li>
|
||||
<li><a href="https://twitter.com/_mcataford"><i class="fa fa-2x fa-twitter-square"></i></a></li>
|
||||
<li><a href="https://github.com/mcataford"><i class="fa fa-2x fa-github-square"></i></a></li>
|
||||
<li><a href="https://www.instagram.com/_mcataford/"><i class="fa fa-2x fa-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div id="panel-landing" class="panel-gen primarytext">
|
||||
<div id="container-landing" class="basesize">
|
||||
<p id="greet" class="mb-z opensans">I'm <span class="accent bold oswald">Marc</span> and I love to <span id="typedWords" class="accent bold oswald"></span></p>
|
||||
|
||||
|
|
@ -20,24 +57,11 @@
|
|||
<p class="mt-z basesize opensans"> I am a <span class="accent accentsize bold oswald">third-year computer engineering student</span> at <span class="accent accentsize bold oswald">McGill University</span>.</p>
|
||||
<p class="basesize opensans">I'm interested in <span class="accent accentsize bold oswald">full-stack web development</span>, <span class="accent accentsize bold oswald">hardware design</span> and <span class="accent accentsize bold oswald">low-level programming</span>.
|
||||
</div>
|
||||
|
||||
<ul class="oswald">
|
||||
<li><a href="#resume" class="primarytext">Resume</a></li>
|
||||
<li><a href="#getInTouch" class="primarytext">Get in touch</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="social">
|
||||
<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://www.instagram.com/_mcataford/"><i class="fa fa-3x fa-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="panel-resume" class="section primarytext">
|
||||
<div id="container-me" class="opensans basesize">
|
||||
<div id="panel-aboutme" class="panel-gen primarytext">
|
||||
<div id="container-aboutme" class="opensans basesize">
|
||||
<div style="text-align: center"><img id="img_bubble1" src="images/web_couchpotato.jpg"></div>
|
||||
<p>My name is <span class="accent accentsize bold oswald">Marc Cataford</span>, I am a <span class="accent accentsize bold oswald">25</span> years old Montrealer.
|
||||
<p>I'm currently completing my <span class="accent accentsize bold oswald">third year</span> as a <span class="accent accentsize bold oswald">computer engineering</span> student at McGill University and I am looking for <span class="accent accentsize bold oswald">new opportunities</span>.
|
||||
|
|
@ -48,34 +72,31 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div class="social">
|
||||
<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://www.instagram.com/_mcataford/"><i class="fa fa-3x fa-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="panel-intouch" class="section primarytext">
|
||||
<div id="panel-intouch" class="panel-gen primarytext">
|
||||
<div id="container-intouch" class="opensans">
|
||||
<p class="accent accentsize oswald">Want to get in touch?</p>
|
||||
<p class="primarytext basesize">I'd love to hear from you!</p>
|
||||
<br>
|
||||
<p class="primarytext basesize">Feel free to reach out through <span class="accent accentsize oswald">social media</span> by clicking on the appropriate icon:</p>
|
||||
<div id="social-boxes">
|
||||
<ul>
|
||||
<li><a href="https://www.facebook.com/marc.cataford"><i class="fa fa-5x fa-facebook-square"></i></a></li>
|
||||
<li><a href="https://twitter.com/_mcataford"><i class="fa fa-5x fa-twitter-square"></i></a></li>
|
||||
<li><a href="https://github.com/mcataford"><i class="fa fa-5x fa-github-square"></i></a></li>
|
||||
<li><a href="https://www.instagram.com/_mcataford/"><i class="fa fa-5x fa-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<p class="primarytext basesize">Feel free to reach out through <span class="accent accentsize oswald">social media</span> by clicking on the appropriate icon in the bar at the top of the page.</p>
|
||||
|
||||
<p class="primarytext basesize">You can also send me an <span class="accent accentsize oswald">email</span> at <a href="mailto:c.marcandre@gmail.com">c.marcandre[at]gmail.com</a>, or fill the form below!</p>
|
||||
|
||||
<form action="http://formspree.io/c.marcandre@gmail.com" method="POST">
|
||||
<p class="accentsize accent oswald">About you:</p>
|
||||
<p class="basesize">My name is <input type="text" class="accent" placeholder="Johnny Appleseed"required>, I'm a <input type="text" class="accent" placeholder="fellow tinkerer">. You can come back to me at <input type="text" class="accent" placeholder="foo@bar.baz" required></p>
|
||||
<p class="basesize">I'd like to tell you about ...</p>
|
||||
<p class="basesize"><textarea placeholder="... this new cool thing I'm working on." required></textarea></p>
|
||||
<div class="ta-center">
|
||||
<input type="submit" value="Send message">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<p class="primarytext basesize">...or send me an <span class="accent accentsize oswald">email</span> at <a href="mailto:c.marcandre@gmail.com">c.marcandre[at]gmail.com</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -83,9 +104,13 @@
|
|||
|
||||
<!-- JS -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
|
||||
|
||||
|
||||
<script src="js/fullpage.js"></script>
|
||||
<script src="js/jquery-visible/jquery.visible.min.js"></script>
|
||||
<script src="js/typed.js"></script>
|
||||
|
||||
<script src="js/animate.js"></script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
$(window).ready(function() {
|
||||
$('#page').fullpage({
|
||||
/*$('#page').fullpage({
|
||||
anchors:["landing","resume","getInTouch"]
|
||||
});
|
||||
});*/
|
||||
|
||||
var period = "<span style='color:#727272;font-weight:normal'>.</span>";
|
||||
var typedStrings = ["code"+period, "learn new things"+period, "tinker"+period, "communicate"+period, "teach"+period, "solve problems"+period, "get things done"+period];
|
||||
|
|
@ -16,4 +16,14 @@ $(window).ready(function() {
|
|||
loop: true,
|
||||
contentType: 'html'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$(".menulink").click(function() {
|
||||
var $panel = $(this).attr("id");
|
||||
|
||||
console.log($panel);
|
||||
|
||||
$('html,body').animate({
|
||||
scrollTop: $($panel).offset().top},
|
||||
'slow');
|
||||
});
|
||||
|
|
|
|||
20
js/jquery-visible/LICENSE.txt
Normal file
20
js/jquery-visible/LICENSE.txt
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
Copyright (c) 2012 Digital Fusion, http://teamdf.com/
|
||||
|
||||
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.
|
||||
1
js/jquery-visible/jquery.visible.min.js
vendored
Normal file
1
js/jquery-visible/jquery.visible.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
!function(t){var i=t(window);t.fn.visible=function(t,e,o){if(!(this.length<1)){var r=this.length>1?this.eq(0):this,n=r.get(0),f=i.width(),h=i.height(),o=o?o:"both",l=e===!0?n.offsetWidth*n.offsetHeight:!0;if("function"==typeof n.getBoundingClientRect){var g=n.getBoundingClientRect(),u=g.top>=0&&g.top<h,s=g.bottom>0&&g.bottom<=h,c=g.left>=0&&g.left<f,a=g.right>0&&g.right<=f,v=t?u||s:u&&s,b=t?c||a:c&&a;if("both"===o)return l&&v&&b;if("vertical"===o)return l&&v;if("horizontal"===o)return l&&b}else{var d=i.scrollTop(),p=d+h,w=i.scrollLeft(),m=w+f,y=r.offset(),z=y.top,B=z+r.height(),C=y.left,R=C+r.width(),j=t===!0?B:z,q=t===!0?z:B,H=t===!0?R:C,L=t===!0?C:R;if("both"===o)return!!l&&p>=q&&j>=d&&m>=L&&H>=w;if("vertical"===o)return!!l&&p>=q&&j>=d;if("horizontal"===o)return!!l&&m>=L&&H>=w}}}}(jQuery);
|
||||
30
projectsdev
Normal file
30
projectsdev
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<div id="panel-projects" class="section">
|
||||
<div id="container-projects-main" class="slide" data-anchor="slide1">
|
||||
<p class="accent slide-header mt2">Featured projects</p>
|
||||
<div class="projects-row">
|
||||
<div class="projects-cell" id="cell1">
|
||||
<p><span class="cell-date">November 2015</span><br><span class="cell-title">Queerness & Sexuality<br> special issue</span><br><br><span class="cell-source">The McGill Daily</span></p>
|
||||
</div>
|
||||
<div class="projects-cell" id="cell2">
|
||||
<p><span class="cell-date">December 2015</span><br><span class="cell-title">Lego-based autonomous robot</span><br><br><span class="cell-source">Design project management<br>Course project</span></p>
|
||||
</div>
|
||||
<div class="projects-cell"></div>
|
||||
</div>
|
||||
<div class="projects-row">
|
||||
<div class="projects-cell"></div>
|
||||
<div class="projects-cell"></div>
|
||||
<div class="projects-cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide" data-anchor="slide2"> Slide 2 </div>
|
||||
<div class="slide" data-anchor="slide3"> Slide 3 </div>
|
||||
<div class="slide" data-anchor="slide4"> Slide 4 </div>
|
||||
<div class="social">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-3x fa-facebook-square"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-3x fa-twitter-square"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-3x fa-github-square"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-3x fa-instagram"></i></a></li>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue