Emilio Martin Lundgaard Lopez

In this example below you will see how to do a Emilio Martin Lundgaard Lopez with some HTML / CSS and Javascript

This portfolio was mainly created as a part of the freeCodeCamp challenge to build a personal portfolio website. I have been looking into Materialize for a while now but never got to work much with it so I might as well give it a try :)

Thumbnail
This awesome code was written by Emilio Martin Lundgaard Lopez, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Emilio Martin Lundgaard Lopez ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Emilio Martin Lundgaard Lopez</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Font Awesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>


  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <ul id="slide-out" class="sidenav sidenav-fixed">
  <li>
    <div class="user-view">
      <div class="background indigo">
      </div>
      <a href="#">
        <img class="circle" src="https://en.gravatar.com/userimage/137149145/d8e57fd50ae5e629d99701028f8ca1db.jpg?size=200">
      </a>
      <span class="white-text name">Emilio Martin Lundgaard Lopez</span>
      <span class="white-text title">Software developer</span>
    </div>
  </li>
  <li><a href="#about"><i class="material-icons">face</i> About</a></li>
  <li><a href="#portfolio"><i class="material-icons">web</i> Portfolio</a></li>
  <li><a href="#r&d"><i class="material-icons">code</i> Ideas & projects</a></li>
  <li><a href="#contact"><i class="material-icons">email</i> Contact</a></li>
</ul>

<main>
  <section id="about">
    <h2>About</h2>
    <p>I am a Computer Scientist from Argentina living in Aalborg, Denmark. I am interested in software development, music, and sports.</p>
    <p>I made this website to serve several purposes. It was one of the projects proposed in the Frontend development section of <a href="https://freecodecamp.org">freeCodeCamp</a> (which I strongly recommned), but also to try a framework I have been wanting
      to try for a while: <a href="http://materializecss.com">Materialize</a>. It seems like a good alternative to easily provide users with something that they might be familiar with (Material design) witouth needing to use other UI classics like Bootstrap
      or Foundation.</p>
    <p>You probably will notice that not a lot of my experience is "out in the wild" and that most of it is tending to the backend, but I am working on my all around skills so stop judging me :@</p>
  </section>
  <div class="divider"></div>
  <section id="portfolio">
    <h2>Portfolio</h2>
    <div class="grid">
      <!-- CV Maker -->
      <div class="card">
        <div class="card-image waves-effect waves-block waves-light">
          <img class="activator" src="https://gitlab.com/emiliolcc/cv-maker/raw/87a08f32c451d8ff507d1f04e61ac4a192197b2d/screenshot.png">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">CV Maker<i class="material-icons right">more_vert</i></span>
          <p>Very simple React project.</p>
        </div>
        <div class="card-action">
          <a href="https://gitlab.com/emiliolcc/cv-maker"><i class="fab fa-gitlab"></i> Go to project</a>
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">CV Maker<i class="material-icons right">close</i></span>
          <p>The project is very simple React application. I used it to learn about React by building a "helper" to help me create CVs with the style I have been creating them.</p>
          <p>There are plans to expand and improve this app for example: accept Markdown, allow inserting images, insert "page breaks" for printing format.</p>
        </div>
      </div>
      <!-- CordovaReact -->
      <div class="card">
        <div class="card-image waves-effect waves-block waves-light">
          <img src="https://gitlab.com/emiliolcc/cordova-react/raw/master/logo.png" alt="" class="activator">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">CordovaReact<i class="material-icons right">more_vert</i></span>
          <p>Cordova project that uses React for development.</p>
        </div>
        <div class="card-action">
          <a href="https://gitlab.com/emiliolcc/cordova-react"><i class="fab fa-gitlab"></i> Go to project</a>
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">CordovaReact<i class="material-icons right">close</i></span>
          <p>Simple template for a Cordova project that uses React for the code.</p>
          <p>The React part was bootstraped with create-react-app and I use a modified version of the npm scripts to use both the React and Cordova commands.</p>
        </div>
      </div>
      <!-- TRL Single page -->
      <div class="card">
        <div class="card-image waves-effect waves-block waves-light">
          <img src="https://gitlab.com/emiliolcc/TRL-Single-Page/raw/master/backend/screenshot.png" alt="" class="activator">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">The Restaurant's Logo<i class="material-icons right">more_vert</i></span>
          <p>WordPress theme template for a single page restaurant website.</p>
        </div>
        <div class="card-action">
          <a href="https://gitlab.com/emiliolcc/TRL-Single-Page"><i class="fab fa-gitlab"></i> Go to project</a>
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">The Restaurant's Logo<i class="material-icons right">close</i></span>
          <p>The theme for The Restaurant's Logo was created with customization in mind. It is very simple to use and provides a responsive result for the user.</p>
          <p>The project includes separte sections for the design, development of backend, and frontend.</p>
        </div>
      </div>
      <!-- Tic-tac-toe -->
      <div class="card">
        <div class="card-image waves-effect waves-block waves-light">
          <img src="https://gitlab.com/emiliolcc/tic-tac-toe/raw/master/screenshot.png" alt="" class="activator">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">Tic-tac-toe<i class="material-icons right">more_vert</i></span>
          <p>Tic-tac-toe developed with Phaser.</p>
        </div>
        <div class="card-action">
          <a href="https://gitlab.com/emiliolcc/tic-tac-toe"><i class="fab fa-gitlab"></i> Go to project</a>
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">Tic-tac-toe<i class="material-icons right">close</i></span>
          <p>I used the classic tic-tac-toe to learn a little bit about a pretty cool framework called <a href="https://phaser.io/">Phaser</a>.</p>
          <p>It was super fun to work with, I recommend it 100%.</p>
        </div>
      </div>
      <!-- emilioidk -->
      <div class="card">
        <div class="card-image waves-effect waves-block waves-light">
          <img src="https://github.com/emilioidk/emilioidk.github.io/blob/master/screenshot.png?raw=true" alt="" class="activator">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">My homie<i class="material-icons right">more_vert</i></span>
          <p>My homepage.</p>
        </div>
        <div class="card-action">
          <a href="https://github.com/emilioidk/emilioidk.github.io"><i class="fab fa-github"></i> Go to project</a>
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">My homepage<i class="material-icons right">close</i></span>
          <p>Following a tradition of serving my homepage with GitHub, I created <a href="http://emilio.lundgaardlopez.com/">my homepage</a>.</p>
          <p>It is mainly developed in Jekyll and it presents a very simple UI but it is as well responsive.</p>
          <p>Plans to renew and expand this page are established but <a href="https://comm350.files.wordpress.com/2016/02/notime.jpg">ain't nobody got time for that</a>.</p>
        </div>
      </div>

    </div>
  </section>
  <div class="divider"></div>
  <section id="r&d">
    <h2>Ideas & projects</h2>
    <p>I am constantly looking for opportunities of becoming smarter and more experience.</p>
    <p>I tend to organize my ideas and motivations into small projects that I can quickly implement and then leave room for improvements and expansions later on. This way I get to play with a framework, or an idea, or a technique, and then I get to let it settle into my head before moving forward to more advanced parts of it.</p>
    <p>I am always open to collaborations and getting to talk to people with the same interests and passions as me. If you would like to get in touch, check out the bottom of this page to find different ways of doing it.</p>
    <p>Happy coding!</p>
  </section>
  <div class="divider"></div>
  <section id="contact">
    <h2>Contact</h2>
    <form action="" class="col s12">
      <div class="row">
        <div class="input-field col s4">
          <input id="first_name" type="text" class="validate">
          <label for="first_name">First Name</label>
        </div>
        <div class="input-field col s4">
          <input id="last_name" type="text" class="validate">
          <label for="last_name">Last Name</label>
        </div>
        <div class="input-field col s4">
          <input id="email" type="email" class="validate">
          <label for="email">Email</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <textarea id="textarea1" class="materialize-textarea"></textarea>
          <label for="textarea1">Message</label>
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          <button onclick="M.toast({html: 'Message sent (not really but you get the point)'})" 
                  class="btn waves-effect waves-light" 
                  type="button" 
                  name="action">Submit<i class="material-icons right">send</i>
          </button>
        </div>
      </div>
    </form>
  </section>
</main>

<footer class="page-footer">
  <div class="container center-align">
    <div class="row">
      <div id="social-links" class="col s12">
        <a class="grey-text text-lighten-3" href="https://twitter.com/emilioidk"><i class="fab fa-twitter"></i></a>
        <a class="grey-text text-lighten-3" href="https://www.linkedin.com/in/emilioidk"><i class="fab fa-linkedin-in"></i></a>
        <a class="grey-text text-lighten-3" href="https://github.com/emilioidk"><i class="fab fa-github"></i></a>
        <a class="grey-text text-lighten-3" href="https://gitlab.com/emiliolcc"><i class="fab fa-gitlab"></i></a>
        <a class="grey-text text-lighten-3" href="mailto:emiliolcc@gmail.com"><i class="fas fa-envelope"></i></a>
      </div>
    </div>
  </div>
  <div class="footer-copyright">&copy; 2018 Emilio Martin Lundgaard Lopez</div>
</footer>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/emilioidk/emilio-martin-lundgaard-lopez-bvMNLr */
header, main, footer {
  padding-left: 300px;
}

@media only screen and (max-width : 992px) {
  header, main, footer {
    padding-left: 0;
  }
}

section {
  padding: 0 25px;
}

#social-links {
  font-size: 30px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.grid {
  display: grid;
  grid-gap: 25px;
  grid-template-columns: repeat(auto-fill, minmax(350px,1fr));
}

.card-image {
  max-height: 200px;
}

/*Downloaded from https://www.codeseek.co/emilioidk/emilio-martin-lundgaard-lopez-bvMNLr */
$(document).ready(function(){
  $('.sidenav').sidenav();

  $('#textarea1').val('New Text');
  M.textareaAutoResize($('#textarea1'));

  $("form").submit(function(e){
    e.preventDefault();
    e.stopPropagation();
  });
});

Comments