index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Alin Rauta - Front-End Developer</title>

    <!-- CSS Zone -->

    <link rel="stylesheet" href="assets/css/normalize.css" >
    <link rel="stylesheet" href="assets/css/font-awesome.css" >
    <link rel="stylesheet" href="assets/css/slick.css" >
    <link rel="stylesheet" href="assets/css/style.css" >
    

    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>


  </head>

  <body>


    <div id="loader">
      <img src="assets/img/logo.png">
      <p class="loader">Hello.</p>
    </div>

    <!-- PAGE -->
    <div id="page">

      <div id="backtotop"><i class="fa fa-angle-up"></i></div>

      <!-- HEADER -->
      <header class="site-header">
        <div class="wrapper">
          <!-- HEADER LEFT -->
          <div class="site-infos">
            <img src="assets/img/logo.png" class="logo" title="Alin Rauta — Designer &amp; front-end coder">

            <h1 class="site-name">Alin Rauta — Designer &amp; front-end coder</h1>
          </div>

          <!-- HEADER RIGHT -->
          <nav class="site-nav">
            <a href="mailto:alin.rauta@thebusinessclub.ro">alin.rauta@thebusinessclub.ro</a>
          </nav>

          <div class="clear"></div>
        </div>
      </header>

      <!-- MAIN -->
      <main class="main-wrap">

        <section class="intro">
          <div class="wrapper">
            <p class="headline"></p>
            <p class="status">Currently living in Bucharest, Romania &mdash; working <a href="http://http://www.ejump.ro/">@Ejump</a></p>
          </div>
        </section>
        
        <section class="about">
          <div class="wrapper">
            

              <div class="left-col">
                <p class="big">About me</p>
                
                <figure class="half-width-1">
                  <img src="assets/img/me.jpg" alt="me" class="">
                </figure>

              </div>

              <div class="right-col">

                <p>I’m a self-taught web developer from Europe doing front-end development <a href="http://www.ejump.ro/">@ejump</a>. My projects involve toying around with HTML5, CSS3, jQuery, Worpress, PHP, Photoshop and Skectch.</p>

                <p>My life story started when my parents bought me my first lego. Since then, I have loved to make stuff (happen) and I kept seeking a craft that would allow me to do just that.</p>

                <p>Last year I decided to give another shot to my seeking adventure and I quit my job to learn how to program by my own - the full story is on <a href="https://medium.freecodecamp.com/the-year-of-a-self-starter-programmer-in-review-ed005a041f92#.p1izmjhvk">medium</a>.</p>

                <p>Fast forward 10 months after that and I had an AHA moment while reading a book in the subway. Basically, I have loved solving problems for my entire life but it took me 24 years to realise that this is exactly what designers do and that's my craft I want to master.</p>

                <p>But, how did I get to quit my job and start learning programming? Well, my professional trajectory is full of diverse experiences and you can check <a href="https://github.com/alinalex/alinalex.github.io/blob/master/assets/files/resume.pdf">my resume</a> for that.</p>

                <p>For the next years I want to broaden my design skills because I want to learn and put in practice as much as I can about UX and to be a product designer.</p>

                <p>In my spare time, I love to read (Nasim Taleb is one of my favourites), to stay in shape, to watch tennis, listening to Kendrick Lamar songs, spending quality time with my better half and of course, to better my craft at designing stunning UX. </p>
             

            </div>
          </div>
        </section>

        <section class="basecamp">
          <div class="wrapper">
            <p class="big">Basecamp</p>
            <div class="columns">
              <div class="third-col first">
                  <figure class="half-width-1">
                    <img src="assets/img/basecamp.png" alt="me">
                  </figure>
                  <p class="medium">Why do I want to be an intern at Basecamp</p>
                  <p>I love that you a have a customer centric design and a modern view on working, namely a company where you can work remote and still have a chance to impact the world wherever you would be located.</p> 
                  <p>I want to be at basecamp because I could have an impact on the educational system, a field where I think technology has a lot of room for innovation.</p>
              </div>
              <div class="third-col middle">
                  <figure class="half-width-1">
                    <img src="assets/img/design.png" alt="me">
                  </figure>
                  <p class="medium">What projects I'm interested in working on</p>
                  <p>I would love to be part of the project that involves the designing of improved workflows for your internal support tools and it would give me an opportunity to push my limits in terms of design skills.</p>
                  <p>The second option would be the research and implementation of new features for Trix, giving me the opportunity to write some Javascript for a real world project.</p>
              </div>
              <div class="third-col last">
                  <figure class="half-width-1">
                    <img src="assets/img/why-me.png" alt="me">
                  </figure>
                  <p class="medium">Why you should hire me</p>
                  <p>I am as Steve Jobs put it: “foolish and hungry”. I am foolish because I have just got into the industry and I think everything is possible and I am hungry enough to iterate and walk the extra-mile that is needed to make possible what others think is impossible.</p>
                  <p>The most important thing, I am adaptive and a quick learner.</p>
              </div>
            </div>
          </div>
        </section>

        <section class="projects">
          <div class="wrapper">
            <p class="big">My projects</p>
            <div class="projects-img">
            <a href="http://codepen.io/alinalex/full/ZGjNRw/"><figure class="half-width-1">
              <img src="assets/img/weather-app.png" title="Design" id="design-img">
              <figcaption>Weather App - It gives you the weather info for your location.</figcaption>
            </figure></a>
            <a href="http://codepen.io/alinalex/full/vOaYqb/"><figure class="half-width-2">
              <img src="assets/img/quote-app.png" title="Code" id="code-img">
              <figcaption>Random Quote Machine - It gives you a random quote you can share on twitter.</figcaption>
            </figure></a>
            </div>
            <div>
            <a href="http://codepen.io/alinalex/full/BjdYLB/      "><figure class="half-width-1">
              <img src="assets/img/bits-app.png" title="Design" id="design-img">
              <figcaption>Bits Finder App - Finds how much bits of 1 are in a number between 0 &amp; 255.</figcaption>
            </figure></a>
            <a href="http://codepen.io/alinalex/full/NqLYZZ/"><figure class="half-width-2">
              <img src="assets/img/pomodoro-app.png" title="Code" id="code-img">
              <figcaption>Pomodoro Clock App - you can schedule sessions of work and break.</figcaption>
            </figure></a>
            </div>
            <a href="http://codepen.io/alinalex/full/JdwYzY/"><figure class="half-width-1">
              <img src="assets/img/calc-app.png" title="Design" id="design-img">
              <figcaption>A calculator made with Javascript.</figcaption>
            </figure></a>
            <a href="http://eepurl.com/bONtiH"><figure class="half-width-2">
              <img src="assets/img/self-starter.png" title="Code" id="code-img">
              <figcaption>A newsletter for the self-starters in programming.</figcaption>
            </figure></a>
            <p>My projects are static front-end apps that are public on <a href="http://codepen.io/alinalex/pens/public/">codepen.io</a> and also a weekly newsletter for anyone who started to learn how to program on their own or intend to purse this path. 
            <p>My skill tool bag consists of HTML5, CSS3, SCSS, Javascript, jQuery, MEAN stack, Photoshop, Sketch, Git, Wordpress and PHP.</p>
            <p>My focus is to broaden my skill set in UX (psychology, anthropology, information architecture etc.) and my designing &amp; creating products for web by working on side-projects that will be meant to scratch my itch.</p>
          </div>
        </section>

        <section class="contact">
          <div class="wrapper">
            

            <p class="big">Get in touch</p>

            <p>Thanks a lot for taking the time to look at my website, which was designed to be the cover letter for your internship application.</p>
            <p>I am eager to hear your feedback and I hope to get in touch soon.</p>
            <p>Meanwhile, please feel free to connect with me.</p>
            
            <ul class="social">
              <a href="http://www.twitter.com/RautaAlin" class="twitter"><i class="fa fa-twitter"></i></a>
              <a href="https://ro.linkedin.com/in/alinrauta" class="linkedin"><i class="fa fa-linkedin"></i></a>
              <a href="https://medium.com/@RautaAlin" class="medium"><i class="fa fa-medium"></i></a>
              <a href="https://github.com/alinalex" class="github"><i class="fa fa-github"></i></a>
              <a href="http://codepen.io/alinalex/" class="codepen"><i class="fa fa-codepen"></i></a>
            </ul>
           
          </div>
        </section>

      </main><!-- / MAIN -->

      <footer>
        <div class="wrapper">
          <h4>Designed &amp; assembled with passion in Romania.</h4>
          <h4>Copyright &copy; 2016 Alin Rauta. All rights reserved.</h4>
        </div>
      </footer>
    </div>



  <!-- JS Zone -->

  <script src="assets/js/jquery.js"></script>
  <script src="assets/js/typed.js"></script>
  <script src="assets/js/slick.js"></script>
  <script src="assets/js/script.js"></script>
  <script src="assets/js/pace.min.js"></script>
    
  </body>
</html>