Skip to content

Instantly share code, notes, and snippets.

@kcelestine

kcelestine/index.html

Created April 29, 2014 16:17
Show Gist options
  • Save kcelestine/11405039 to your computer and use it in GitHub Desktop.
Save kcelestine/11405039 to your computer and use it in GitHub Desktop.
Download ZIP
About Me Page
Raw
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Khadijah Camille</title>
<meta name="author" content="Khadijah Camille Celestine" />
<meta name="description" content="My about me page for General Assembly's WDI" />
<meta name="keywords" content="" />
<meta name="Resource-type" content="Document" />
<!-- JQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<!-- Javascript -->
<script type="text/javascript" src="https://khadijah-fullpagejs.googlecode.com/svn/jquery.fullPage.js"></script>
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Coming+Soon' rel='stylesheet' type='text/css'>
<style>
/* Reset CSS
* --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0;}
/* Fixed header
* --------------------------------------- */
#header{
position:fixed;
height: 50px;
display:block;
width: 100%;
background: #A0AAB1;
z-index:9;
color: #f2f2f2;
padding: 0 0 0 0;
top: 0px;
bottom: 0px;
}
#header #logo {
font-family: 'Lobster', 'cursive';
font-size: 40px;
letter-spacing: 5px;
padding-left: 10px;
float: left;
}
#header #nav {
float:right;
font-size: 40px;
padding-left: 10px;
}
/* Social Media Menu
* --------------------------------------- */
#social-media {
float: right;
}
#social-media ul {
}
#social-media ul li{
display: inline;
}
#social-media ul li a{
text-decoration: none;
}
/* Headings
* --------------------------------------- */
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
margin:0;
padding:0;
color:#000;
}
h1{
font-size: 5em;
font-family: 'Coming Soon', 'cursive';
color: #223;
margin:0;
padding:0;
}
/* Boxes for main content
* --------------------------------------- */
.boxes {
margin-left: 40px;
margin-right: 40px;
}
.box {
float: left;
width: 30%;
height: 200px;
margin-left: 10px;
margin-top: 10px;
padding: 5px;
text-align: justify;
background-color: #A0AAB1;
border-radius: 20px;
color: #fff;
font-family: 'Coming Soon', 'cursive';
}
.box h2 {
float:left;
font-size: 20px;
font-weight: bold;
line-height: 1;
margin-right: 15px;
color: #223;
}
.box p {
font-size: 18px;
}
.box a {
text-decoration: none;
font-size: 20px;
color: #8EC1DA;
font-weight: bold;
}
.box a:hover {
text-decoration: none;
font-weight: bold;
font-size: 20px;
color: #FFF;
}
.first {
margin-left: 30px;
}
.last {
margin-right: 30px;
}
.slate {
background-color: #5E767E;
}
.light-slate {
background-color: #6D7B8D;
}
.medium-slate {
background-color: #566D7E;
}
.brown {
background-color: #2C1210;
}
/* Needed for slide animations
* --------------------------------------- */
.slide {
float: left;
}
.tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.slidesContainer {
float: left;
position: relative;
}
.easing {
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
/* Arrow (triangle)
* --------------------------------------- */
.controlArrow {
position: absolute;
top: 50%;
cursor:; pointer;
width: 0;
height: 0;
border-style: solid;
margin-top: -38px;
}
.controlArrow.prev {
left: 15px;
width: 0;
border-width: 38.5px 34px 38.5px 0;
border-color: transparent #f2f2f2 transparent transparent;
}
.controlArrow.next {
right: 15px;
border-width: 38.5px 0 38.5px 34px;
border-color: transparent transparent transparent #f2f2f2;
}
/* */
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
slidesColor: ['#8EC1DA'],
css3: true
});
});
</script>
</head>
<body>
<div id="header">
<div id="logo">khadijah camille</div>
<div id="nav">
<div id="social-media">
<ul>
<li><a href="https://www.linkedin.com/in/khadijahcelestine"><img src="http://i.imgur.com/dT0N4Yf.png"></a></li>
<li><a href="https://github.com/kcelestine"><img src="http://i.imgur.com/8sHdpLy.png"></a></li>
<li><a href="https://twitter.com/thekhadijah"><img src="http://i.imgur.com/WTahU5L.png"></a></li>
<li><a href="mailto:khadijah.celestine@gmail.com?Subject=Hi%20there!" target="_top"><img src="http://i.imgur.com/jS2Qr5M.png"></a></li>
<li><a href="skype:khadijahthegreat?userinfo"><img src="http://i.imgur.com/dpwl870.png"></a></li>
</ul>
</div>
</div>
</div>
<div class="section">
<div class="slide" id="past">
<h1>past...</h1>
<div class="boxes">
<div class="box first slate">
<h2>Education</h2>
<p>I've attended three CUNY colleges in the past five years pursuing a B.S. in Computer Science. While I will never stop learning, I've since realized formal education is just not for me.</p>
</div>
<div class="box">
<h2>Technology</h2>
<p>I'm Comptia A+ certified. I also completed CUNY Baruch's Java Programming Continuing Education Course where I made a web crawler.</p>
</div>
<div class="box last slate">
<h2>Community</h2>
<p>As a product of numerous non-profit programs, giving back is at the central of my life. I've volunteered to pick up trash in the park, promote foster care adoption during Foster Care Month (May), teach high school women programming, entrepreneurship skills and more.</p>
</div>
</div><!-- box -->
<div class="boxes">
<div class="box first">
<h2>Web Development</h2>
<p>I've completed three webs apps thus far, an airplane game, a jeopardy game and an event calendar. I used Javascript to code them. My first website was for the <a href="http://newgenesischristiancenter.com/">church</a> I attended. </p>
</div>
<div class="box slate">
<h2>Web Design</h2>
<p>I haven't spent much time designing website, it certainly does not come easy to me. I instead, used to edit free HTML templates I downloaded.</p>
</div>
<div class="box last">
<h2>Other</h2>
<p>I ran and/or TA'd numerous Zumba classes at the YMCA, Crunch Gym, and my local high school. I am a former Liturgical (Praise Dance) Dancer. </p>
</div><!-- box -->
</div><!-- boxes -->
</div><!-- past -->
<div class="slide active" id="present">
<h1>present...</h1>
<div class="boxes">
<div class="box first ">
<h2>Education</h2>
<p>I'm learning Ruby via codeacademy, coursera, rubykoans, The Ruby Way and Eloquent Ruby. </p>
</div>
<div class="box medium-slate">
<h2>Technology</h2>
<p>I go to meetups all the time to meet passionate people like myself, and to hear what the developers are talking about. I am a Linux fan girl. My favorite game of all time is (and always will be) Zelda A link to the past.</p>
</div>
<div class="box last">
<h2>Community</h2>
<p>I'm working with the Brooklyn Public Library to begin offering free Intro to Programming workshops at their Info Commons Space. I also tutor students taking Computer Science classes at City Tech and Kingsborough Community College.</p>
</div>
</div><!-- box -->
<div class="boxes">
<div class="box first medium-slate">
<h2>Web Development</h2>
<p>I'm designing a Point Of Sale app in Javascript to enhance my skills and I'm working with one of my favorite non-profits to revamp their severely outdated <a href="http://www.bdpa-ny.org/">website</a>.</p>
</div>
<div class="box">
<h2>Web Design</h2>
<p>Color palettes and combinations work very differently in my brain than most of the world. I'm reading Professional CSS and Sexy Web Design to try to improve my design skills.</p>
</div>
<div class="box last medium-slate">
<h2>Other</h2>
<p>My second passion is chemistry! If I weren't such an awesome wanna-be developer, I'd be studying nutritional science. My mother and I are training for the <a href="http://thecolorrun.com/brooklyn/2014-07-05/">Color 2K Run</a>. Born, raised and currently residing in Flatbush, Brooklyn!</p>
</div><!-- box -->
</div><!-- boxes -->
</div> <!-- present -->
<div class="slide" id="future">
<h1>future...</h1>
<div class="boxes">
<div class="box first light-slate">
<h2>Education</h2>
<p>I hope to attend the General Assembly Web Development Immersive to successfully synergize all the random programming knowledge I have as well as learn new skills and tools in web development.</p>
</div>
<div class="box">
<h2>Technology</h2>
<p>I am going to be a hacker of all things web and I want to take a ride on the Startup Bus when it comes back to NYC.</p>
</div>
<div class="box last light-slate">
<h2>Community</h2>
<p>I would like to start a STEM Exploration program for high school seniors where I, along with industry professionals put together events, workshops, hackathons, and more to introduce them to STEM majors and hopefully, eventually careers to minorities in my community.</p>
</div>
</div><!-- box -->
<div class="boxes">
<div class="box first">
<h2>Web Development</h2>
<p>I want to develop an online app that lets parents create customized apps for they're children to learn ABC's and 123's. Although, I'd settle for creating an app to be sold one day. I have a plethora of ideas.</p>
</div>
<div class="box light-slate">
<h2>Web Design</h2>
<p>I'd like to work on this, a lot. I don't want to become too proficient in anything Adobe, but I would like to put together a nice, well thought out, beautiful design for a website.</p>
</div>
<div class="box last">
<h2>Other</h2>
<p>I would like to become a master programmer in Java, Ruby, Javascript and PHP so I can travel the world developing apps and spreading knowledge and confidence to other young women and minorities like myself. I would like to successfully complete the <a href="http://www.spartan.com/">Spartan Race</a>. </p>
</div><!-- box -->
</div><!-- boxes -->
</div><!-- future -->
</div><!-- section -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment