Skip to content

Instantly share code, notes, and snippets.

@AnnthomyGILLES

AnnthomyGILLES/freecodecamp-build-a-personal-portfolio-webpage.markdown

Last active April 3, 2017 21:27
Show Gist options
  • Save AnnthomyGILLES/85075072a3cbb5ed13fff78427e2fd5f to your computer and use it in GitHub Desktop.
Save AnnthomyGILLES/85075072a3cbb5ed13fff78427e2fd5f to your computer and use it in GitHub Desktop.
Download ZIP
freeCodeCamp - Build a Personal Portfolio Webpage
Raw
index.html
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<a class="navbar-brand" href="#">Annthomy GILLES </a>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home </a></li>
<li><a href="#Introduction">About Me</a></li>
<li><a href="#Experience">Experience</a></li>
<li><a href="#Competences">Compétences</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</div>
</nav>
<div class="container">
<section class="row" id="Introduction">
<header>
<h2 class="page-header">Je suis Annthomy GILLES</h2>
</header>
<div class="col-md-8 text-justify">
<p id="intro_paragraph">
Parce que le monde est dirigé par les avancées technologiques et les progrès de la science, la société actuelle nécessite de nouvelles approches thérapeutiques face à de nouveaux problèmes. C'est de cette perspective qu'est née ma passion pour la biologie au service de la santé.<br><br> Après une Licence en Biochimie-Biologie, je me suis donc naturellement orienté vers la Biologie Santé afin de développer et parfaire mes compétences en recherche fondamentale et appliquée. Puis, mon cursus m'a permis d'élargir mes perspectives en suscitant un vif intérêt pour la bioinformatique, un domaine d'avenir. J’enrichis donc ma vision en me formant durant 3 années , dont 2 en alternance dans la bioinformatique et les mathématiques.
<br><br>A terme, cette double compétences en biologie et bioinformatique me permettra d'avoir une vision encore plus aboutie de la recherche.
</p>
</div>
<div class="col-md-4">
<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/13096070_10209503857573288_3900259694388781932_n.jpg?oh=bbc8a78e61f95dbc43d72ce0c5059afb&oe=5956D3D8" alt="Photo de moi" class="img-rounded img-responsive center-block" width="400px" height="600px" />
</div>
</section>
<section class="row">
<section class="row text-center" id="Experience">
<div class="section-title">
<h2>Expérience</h2>
<hr>
</div>
<div class="col-md-6">
<a href="#"><img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/13096070_10209503857573288_3900259694388781932_n.jpg?oh=bbc8a78e61f95dbc43d72ce0c5059afb&oe=5956D3D8" alt="Photo de moi" class="thumbnail img-rounded img-responsive center-block" width="200px" height="400px" /></a>
</div>
<div class="col-md-6">
<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/13096070_10209503857573288_3900259694388781932_n.jpg?oh=bbc8a78e61f95dbc43d72ce0c5059afb&oe=5956D3D8" alt="Photo de moi" class="thumbnail img-rounded img-responsive center-block" width="200px" height="400px" />
</div>
<div class="col-md-6">
<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/13096070_10209503857573288_3900259694388781932_n.jpg?oh=bbc8a78e61f95dbc43d72ce0c5059afb&oe=5956D3D8" alt="Photo de moi" class="thumbnail img-rounded img-responsive center-block" width="200px" height="400px" />
</div>
<div class="col-md-6">
<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/13096070_10209503857573288_3900259694388781932_n.jpg?oh=bbc8a78e61f95dbc43d72ce0c5059afb&oe=5956D3D8" alt="Photo de moi" class="thumbnail img-rounded img-responsive center-block" width="200px" height="400px" />
</div>
</section>
<section class="row text-center" id="Competences">
<div class="section-title center">
<h2>Un aperçu de mes compétences</h2>
<div class="line">
<hr>
</div>
</div>
<div class="col-md-3">
<i class="fa fa-desktop fa-3x"></i>
<h4> Web Design</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="col-md-3 col-sm-6 service">
<i class="fa fa-mobile fa-3x"></i>
<h4>Mobile First</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="col-md-3 col-sm-6 service">
<i class="fa fa-cloud fa-3x"></i>
<h4>Accessibilité</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="col-md-3 col-sm-6 service">
<i class="fa fa-code fa-3x"></i>
<h4>Coding fan</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</section>
<section class="row" id="Contact">
<div class="col-md-12 text-center">
<form id="contact_form">
<div class="row">
<label for="name">Your name:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Your email:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="message">Your message:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
</div>
<button class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="text-center">
<div class="col-md-12">
<h4 class="center">Created by GILLES Annthomy</h4>
<div class="icons">
<a href="https://github.com/AnnthomyGILLES" target="_blank"><i class="fa fa-github fa-4x" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com/in/annthomygilles/" target="_blank"><i class="fa fa-linkedin fa-4x" aria-hidden="true"></i></a>
</div>
</div>
</footer>
</div>
Raw
script.js
$(document).ready(function() {
$("#Introduction").addClass("animated bounce")
});
Raw
scripts
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Raw
style.css
.col-md-6 {
margin-bottom: 40px;
}
body {
color: floralwhite;
background-image: url(http://img6.uploadhouse.com/fileuploads/17737/17737075bdad5cfa9423bb2c3c2beee695c72bb8.jpg);
}
.icons i {
padding-right: 30px;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment