Skip to content

Instantly share code, notes, and snippets.

@mi-mina

mi-mina/esperanza-moreno-personal-portfolio.markdown

Last active October 20, 2016 12:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mi-mina/233f0e66ca078e7b5126f50ec8f81b94 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mi-mina/233f0e66ca078e7b5126f50ec8f81b94 to your computer and use it in GitHub Desktop.
Download ZIP
Esperanza Moreno. Personal Portfolio
Raw
esperanza-moreno-personal-portfolio.markdown
Raw
index.html
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toogle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#top">Esperanza Moreno Cruz</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutme">About me</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
<li><a target="_blank" href="https://github.com/mi-mina"><span class="fa fa-github"
aria-hidden="true"></span></a></li>
<li><a target="_blank" href="https://www.linkedin.com/in/esperanza-moreno-cruz"><span class="fa fa-linkedin"
aria-hidden="true"></span></a></li>
<li><a target="_blank" href="https://twitter.com/_mimina_"><span class="fa fa-twitter"
aria-hidden="true"></span></a></li>
<li><a target="_blank" href="http://mimina-cosas.tumblr.com/"><span class="fa fa-tumblr"
aria-hidden="true"></span></a></li>
<li><a target="_blank" href="https://www.facebook.com/mimina.cosas/"><span class="fa fa-facebook"
aria-hidden="true"></span></a></li>
</ul>
</div>
</div>
</nav>
<header id="top">
<div class="block1">
<div class="container">
<div class="text-center">
<p style="padding:40px;"></p>
<p class="pink-text">aspiring</p>
<h1>FULL STACK DEVELOPER</h1>
<p id="aboutme" style="padding:10px;"></p>
</div>
</div>
</div>
<div class="block2">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<img id="avatar" width="100%" height="100%" src="https://github.com/mi-mina/freecodecamp/blob/master/Basic-front-end/portfolio/espe2-circulo.png?raw=true" class="img-responsive center-block" alt="avatar">
</div>
<div class="col-xs-12 col-md-8">
<h1>About me</h1>
<p>My constant drive to learn things keeps me looking for new challenges. For years I have been working as an architect and recently also in the field of environmental social research. Since September last year I am firmly committed to become
a software developer. A broad range of fascinating areas draw my attention: the increasingly blurry borders between frontend and backend development, generative design, machine learning, algorithmic thinking... But my main interest is about
Clojure, a language that I love because of the way it changes your way of thinking. </p>
</div>
</div>
</div>
</div>
</header>
<div class="main">
<section>
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="ancor" id="portfolio"></div>
<h1>Portfolio</h1>
<p>I’m making my way through this adventure with the help of friends and the uncountable resources you can find online. After attending a seven month full stack developer course in Coursera I’m starting the Free Code Camp training curriculum.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-6 text-right">
<a target="_blank" href="http://codepen.io/mi-mina/full/yazqoq/"><h3>Calculator for Free Code Camp</h3></a>
<p>User Stories requiered for this project are: </p>
<ul>
<li>- You can add, subtract, multiply and divide two numbers.</li>
<li>- You can clear the input field with a clear button.</li>
<li>- You can keep chaining mathematical operations together until you hit the equal button, and the calculator will tell me the correct output.</li>
</ul>
<p>Additional features I added: </p>
<ul>
<li>- You can erase the last digit of a number.</li>
<li>- If you click on an operator, and then on another operator, the last operator is the one and only that will be taken into account.</li>
<li>- You can see the operations that will be performed on the top of the display.</li>
<li>- You can change the sign of a number.</li>
</ul>
</div>
<div class="col-md-6">
<a target="_blank" href="http://codepen.io/mi-mina/full/yazqoq/"><img width="100%" height="100%" src="https://github.com/mi-mina/freecodecamp/blob/master/Basic-front-end/portfolio/calculator.jpg?raw=true" class="img-responsive img" alt="Calculator"></a>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-6">
<a target="_blank" href="https://codepen.io/mi-mina/full/BLwLBV/"><img width="100%" height="100%" src="https://github.com/mi-mina/freecodecamp/blob/master/Basic-front-end/portfolio/wikiviewer.jpg?raw=true" class="img-responsive img" alt="Wikipedia Viewer"></a>
</div>
<div class="col-md-6">
<a target="_blank" href="https://codepen.io/mi-mina/full/BLwLBV/"><h3>Wikipedia Viewer</h3></a>
<p>Free Code Camp project. </br> A wikipedia viewer that shows you the fisrt 10 links to wikipedia pages related to the search term.
</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-6 text-right">
<a target="_blank" href="http://codepen.io/mi-mina/full/LkwobL/"><h3>Weather App</h3></a>
<p>Free Code Camp project. The app shows the local weather automatically. You can also search for the weather in other location. Background colors change according to the time of day: dawn, day, dusk and night.</p>
</div>
<div class="col-md-6">
<a target="_blank" href="http://codepen.io/mi-mina/full/LkwobL/"><img width="100%" height="100%" src="https://github.com/mi-mina/freecodecamp/blob/master/Basic-front-end/portfolio/weather-app.jpg?raw=true" class="img-responsive img" alt="Weather App"></a>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-6">
<a target="_blank" href="https://github.com/mi-mina/antropoloops-clj"><img width="100%" height="100%" src="https://github.com/mi-mina/freecodecamp/blob/master/Basic-front-end/portfolio/antropoloops-MAP.jpg?raw=true" class="img-responsive img" alt="antropoloops MAP"></a>
</div>
<div class="col-md-6">
<a target="_blank" href="https://github.com/mi-mina/antropoloops-clj"><h3>antropoloops MAP</h3></a>
<p><em>antropoloops MAP</em> is an application made with <a target="_blank" href="https://clojure.org/">clojure</a> for <a target="_blank" herf="http://antropoloops.tumblr.com/">antropoloops</a>, a musical project that creates sound collages
with fragments of other songs, mixing melodies and rhythms from different times and territories. The aim of the application is to make the mix more transparent and give visibility to the sources that compose it. antropoloops MAP 1.0 is structured
to receive data from a session in <a target="_blank" href="https://www.ableton.com/en/live/">ableton live</a> via OSC and display it live on screen. </p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-7 text-right">
<a target="_blank" href="https://codepen.io/mi-mina/full/dXAxjj/"><h3>Random Quote Machine</h3></a>
<p>Free Code Camp project: a funny random quote machine. </br> You can share the quotes you like on twitter.</p>
</div>
<div class="col-md-5 ">
<a target="_blank" href="https://codepen.io/mi-mina/full/dXAxjj/"><img width="100%" height="100%" class="img-responsive img" src="https://github.com/mi-mina/freecodecamp/blob/master/Basic-front-end/portfolio/random-quote.jpg?raw=true" alt "Random Quote Machine"></a>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-5 ">
<a target="_blank" href="http://codepen.io/mi-mina/full/dXwjvk"><img width="100%" height="100%" class="img-responsive img" src="https://github.com/mi-mina/freecodecamp/blob/master/Basic-front-end/portfolio/ada-tribute.jpg?raw=true" alt "Ada Lovelace Tribute Page"></a>
</div>
<div class="col-md-7 text-left">
<a target="_blank" href="http://codepen.io/mi-mina/full/dXwjvk"><h3>Ada Lovelace Tribute Page</h3></a>
<p>First project of the Free Code Camp curriculum: a tribute page about Ada Lovelace.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-7 text-right">
<a target="_blank" href="http://mi-mina.github.io/images-on-the-move/index.html"><h3>Images on the move</h3></a>
<p>Little Javascript exercise with moving images that create different patterns.</p>
</div>
<div class="col-md-5">
<a target="_blank" href="http://mi-mina.github.io/images-on-the-move/index.html"><img width="100%" height="100%" class="img-responsive img" src="https://github.com/mi-mina/freecodecamp/blob/master/Basic-front-end/portfolio/images-on-the-move.jpg?raw=true" alt="Images on the move"></a>
</div>
</div>
</div>
</section>
<div class="block2">
<div class="container">
<div class="ancor" id="contact"></div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-xs-12 col-md-8">
<h1>Contact me!</h1>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="Name" class="form-control" id="name" placeholder="Name" required>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="E-mail address" class="form-control" id="email" placeholder="Email" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="Message" class="form-control" rows="5" placeholder="Message" required></textarea>
</div>
<button class="btn" type="submit" value="Send">Send</button>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class=footer>
<p class="text-center">Coded by <a target="_blank" href="https://www.freecodecamp.com/mi-mina">mi-mi na</a></p>
</footer>
</body>
Raw
script.js
// probando cambios
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Raw
style.css
body {
padding: 40px 0px 0px 0px;
margin: 0px;
font-family: 'Roboto Condensed';
background-color: #fbfbf6;
}
a:hover,
a:focus {
text-decoration: none !important;
}
.ancor {
padding-top: 40px;
marging-top: -40px;
}
.navbar-default {
background-color: white;
color: Black;
}
.navbar-default .navbar-brand {
color: Black;
}
.navbar-default .navbar-brand:hover {
color: #eb99ce;
}
.navbar-default .navbar-nav > li > a {
color: Black;
}
.navbar-default .navbar-nav > .active > a {
background-color: #96bcdc;
color: White;
}
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > li > a:hover {
background-color: White;
color: #eb99ce;
}
.jumbotron {
color: White;
}
.block1 {
background: #8ea0ac;
color: White;
max-width: 100%;
}
.block1 h1 {
font-size: 60px;
}
.block1 p {
font-size: 20px;
}
.block2 {
background: #96bcdc;
color: White;
max-width: 100%;
padding-bottom: 30px;
padding-top: 30px;
}
.block2 p {
font-size: 18px;
font-weight: light;
}
.block2 .btn {
padding: 5px 20px 5px 20px;
background: #8ea0ac;
}
.block2 .btn:hover {
background: #337ab7;
color: White;
}
#avatar {
border: 5px solid #eb99ce;
border-radius: 50%;
width: 80%;
}
.pink-text {
color: #eb99ce;
}
section {
border-bottom: 1px solid #eb99ce;
padding-top: 30px;
padding-bottom: 30px;
}
section h1 {
color: #99acb9;
}
section p {
font-size: 18px;
font-weight: light;
}
section a {
color: #99acb9;
}
section a:hover {
color: #eb99ce;
}
section a:visited {
color: #337ab7;
}
section a:visited:hover {
color: #eb99ce;
}
ul {
margin: 0px;
padding: 0px;
}
li {
list-style-type: none;
}
.form-horizontal .form-group {
margin-right: 0px;
margin-left: 0px;
}
footer {
color: White;
background-color: #8ea0ac;
padding: 20px 0px 10px 0px;
}
footer p {
font-size: 16px;
}
footer a:hover {
color: #eb99ce;
}
.img {
box-shadow: 3px 3px 10px #888888;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/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