A Pen by robert

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  robert</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div><span class="info">
    <button class="toggle html"></button><span>
      <p>Name</p>
      <input type="textbox" placeholder="Suresh Patel" name="name"/>
      <p>Email</p>
      <input type="textbox" placeholder="spatel@email.com" name="email"/>
      <p>Phone</p>
      <input type="textbox" placeholder="(415) 555-5555" name="phone"/>
      <p>Github</p>
      <input type="textbox" placeholder="github.com/spatel" name="github"/>
      <p>LinkedIn</p>
      <input type="textbox" placeholder="linkedin.com/in/spatel" name="linkedin"/>
      <p>Website</p>
      <input type="textbox" placeholder="spatel.me" name="website"/></span><span>
      <p>Skills</p>
      <textarea placeholder="Languages = [bash, python, javascript, sql, html, css]
Frameworks = [express, mongodb/mongoclient, socket.io]
Software = [adobe cs6, google drive, textexpander]
Websites = [zendesk, chart.io, tweetdeck, stripe, uservoice]" name="skills"></textarea>
      <p>Education</p>
      <textarea placeholder="school: Stanford
degree: MS - COMPUTER SCIENCE
gpa: 3.78
graduation: 2016

school: U.C. Berkeley
degree: BS - BIOENGINEERING
gpa: 3.92
graduation: 2013" name="education"></textarea>
      <p>Experience</p>
      <textarea placeholder="title: Lead Data Analyst
company: Bankcorp Industries
duration: December 2014 - Current
description: Built and maintained a proprietary ETL pipeline using Python and PostgreSQL. Recruited and trained a team of 12 data and operations analysts, growing the team from 4 to 16 in eight months. Queried large, real-time datasets using tested, maintainable, and reusable SQL code. Presented reports to executives and engineers to push the implementation of data-driven solutions for all teams.

title: Web Development Intern
company: Bio Startup, Inc.
duration: May 2013 - December 2014
description: Designed a responsive website using modern technologies and features, focusing on compatibility with new browsers. Focused on securely transporting medical data from the front-end to the back-end of our iOS and web applications, which serviced tens of thousands of customers daily. Designed performant HTML and CSS content for users with any kind of device." name="experience"></textarea></span></span><span class="style"><span class="modern">"modern"
      <ul class="gray">
        <p>gray</p>
        <li class="bg"></li>
        <li class="outer"></li>
        <li class="border"></li>
        <li class="head"></li>
        <li class="shadow"></li>
      </ul>
      <ul class="navy">
        <p>navy</p>
        <li class="bg"></li>
        <li class="border"></li>
        <li class="head"></li>
        <li class="outer"></li>
        <li class="shadow"></li>
      </ul>
      <ul class="summer">
        <p>summer</p>
        <li class="border"></li>
        <li class="outer"></li>
        <li class="inner"></li>
        <li class="head"></li>
        <li class="shadow"></li>
      </ul>
      <ul class="apple-II">
        <p>apple-II</p>
        <li class="shadow"></li>
        <li class="bg"></li>
        <li class="outer"></li>
        <li class="border"></li>
        <li class="head"></li>
      </ul>
      <ul class="solarized">
        <p>solarized</p>
        <li class="border"></li>
        <li class="bg"></li>
        <li class="outer"></li>
        <li class="head"></li>
        <li class="shadow"></li>
      </ul></span><a></a></span>
  <div></div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/blob-util/1.2.1/blob-util.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/spliced/a-pen-by-robert-jVVKem */
@import url('///fonts.googleapis.com/css?family=Unica+One|Montserrat|Patua+One|Roboto+Condensed|Rubik');
body,
html {
  height: 100%;
}
body {
  background-color: #FBFCFC;
  margin: 0;
}
div {
  margin: 2rem auto;
  background-color: #FBFCFC;
  width: 800px;
  display: flex;
  flex-flow: column;
  padding: 1rem;
}
div div {
  position: relative;
  background-color: #f2f2f2;
  height: 8rem;
  top: 2rem;
  border-radius: 4rem;
  width: 300px;
}
.toggle {
  background-color: rgba(133, 133, 133, 0.3);
  border-radius: 2rem;
  width: 60px;
  height: 34px;
  outline: none;
  box-shadow: 2px 2px black;
  border: none;
  cursor: pointer;
  transition: 1.2s;
}
.toggle:before {
  content: ' ';
  white-space: pre;
  background-color: #878787;
  box-shadow: 2px 2px black;
  padding: .7rem 1rem;
  border-radius: 1rem;
  position: relative;
  top: -0.3rem;
  left: -0.35rem;
  transition: 1.2s;
}
.toggle.enabled {
  background-color: lime;
}
.toggle.enabled:before {
  left: 1.3rem;
}
.info {
  padding: 2rem;
  display: flex;
}
.info button:after {
  content: '        DEMO';
  white-space: pre;
  font: 1.6rem 'Unica One';
  transition: 1.2s;
  opacity: .3;
}
.info button.enabled:after {
  cursor: default;
  opacity: 1;
}
.info span {
  position: relative;
  top: 3rem;
  left: -4rem;
  padding-right: 4rem;
}
.info span:nth-of-type(1) {
  margin-top: 5rem;
}
.info p {
  font: 1.2rem 'Roboto Condensed';
  margin-top: 1.2rem;
  margin-bottom: .5rem;
}
.info input,
.info textarea {
  transition: 1.2s;
  font: 0.9rem 'Monaco';
  border: 2px solid #3AD4C9;
  outline: none;
  padding: .5rem;
  width: 10rem;
}
.info input:focus,
.info textarea:focus {
  box-shadow: inset 1px 1px 3px;
}
.info textarea {
  resize: none;
  white-space: pre;
  padding: .8rem;
  width: 32.5rem;
  height: 5rem;
  word-break: break-word;
}
.info textarea:nth-of-type(2) {
  height: 10.5rem;
}
.info textarea:nth-of-type(3) {
  height: 10.5rem;
}
.style {
  background-color: #f2f2f2;
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  margin: 3rem -1.2rem;
  color: white;
  text-shadow: 1px 1px 4px #3C3C3C;
  overflow: hidden;
}
.style span {
  margin: 1rem;
  display: flex;
  padding: .2rem;
  align-items: center;
  transition: 1.8s;
  cursor: default;
}
.style span ul {
  font-size: .9rem;
  padding: 1rem 1.5rem;
  background-color: #EBEBEB;
  cursor: pointer;
  margin: 0 -2rem 0 2rem;
}
.style span ul p {
  margin: .5rem;
  cursor: default;
}
.style span ul li {
  padding: .5rem 2.3rem;
  background-color: red;
  list-style-type: none;
}
.style span ul:hover {
  background-color: #C6C6C6;
}
.style span.modern {
  font: 1rem 'Rubik';
}
.style span.modern .gray .bg {
  background-color: #FBFCFC;
}
.style span.modern .gray .outer {
  background-color: #F8F8F8;
}
.style span.modern .gray .border {
  background-color: white;
}
.style span.modern .gray .head {
  background-color: #000000;
}
.style span.modern .gray .shadow {
  background-color: #ADADAD;
}
.style span.modern .navy .bg {
  background-color: #510909;
}
.style span.modern .navy .outer {
  background-color: #FFFBEC;
}
.style span.modern .navy .border {
  background-color: #080747;
}
.style span.modern .navy .head {
  background-color: #FFFCE9;
}
.style span.modern .navy .shadow {
  background-color: rgba(255, 255, 255, 0.4);
}
.style span.modern .summer .bg {
  background-color: #D6DBDF;
}
.style span.modern .summer .outer {
  background-color: #FFFFFF;
}
.style span.modern .summer .border {
  background-color: #F1C40F;
}
.style span.modern .summer .head {
  background-color: #FF4232;
}
.style span.modern .summer .shadow {
  background-color: #3498DB;
}
.style span.modern .apple-II .bg {
  background-color: #ECEFE7;
}
.style span.modern .apple-II .outer {
  background-color: rgba(255, 254, 242, 0.4);
}
.style span.modern .apple-II .border {
  background-color: #00E4C0;
}
.style span.modern .apple-II .head {
  background-color: #2D2D2D;
}
.style span.modern .apple-II .shadow {
  background-color: rgba(105, 105, 105, 0.6);
}
.style span.modern .solarized .bg {
  background-color: #002b36;
}
.style span.modern .solarized .outer {
  background-color: #2AA198;
}
.style span.modern .solarized .border {
  background-color: #FDF6E3;
}
.style span.modern .solarized .head {
  background-color: #2D2D2D;
}
.style span.modern .solarized .shadow {
  background-color: rgba(203, 75, 22, 0.7);
}
.style a:last-of-type {
  height: 30px;
  padding: .1rem 1rem;
  position: relative;
  margin: 4.5rem 3rem;
  font: 1.6rem 'Unica One';
  cursor: pointer;
  transition: .1s;
  font-size: 1.3rem;
  border: 2px inset #C6C6C6;
  border-radius: 5rem;
}
.style a:last-of-type:hover {
  background-color: #C6C6C6;
}


/*Downloaded from https://www.codeseek.co/spliced/a-pen-by-robert-jVVKem */
const pugString = function(config){
  let info = _.map(config.info, function(n, i){
    if(i==='name') return `  ul ${n}`
    return `    li ${n}`
  });
  let education = _.map(config.education, function(n){
    return [
      `  span`,
      `    p ${n.degree}`,
      `    p ${n.school} (GPA ${n.gpa})`
    ]
  });
  let skills = _.map(config.skills, function(n, i){
    return ['  span ' + i, '    p ' + n.join(', ')].join(' \n');
  });
  let experience = _.map(config.experience, function(n, i){
    return [
      `  a ${n.title} - ${n.company}`,
      `  a ${n.duration}`,
      `  p ${n.description}`,
    ]
  });
  this.layout = [
    '.header',
    ...info,
    'a Education',
    '.education',
    _.flatten(education).join(' \n'),
    'a Skills',
    '.skills',
    _.flatten(skills).join(' \n'),
    'a Experience',
    '.experience',
    _.flatten(experience).join(' \n')
  ].join('\n');
}
const $lib = {
  toggle: function(elem){
    $(elem).toggleClass('enabled');
  },
  demo: function(inputs){
    inputs.forEach(n => {
      $(n).val(n.placeholder);
    });
  },
  clear: function(elem){
    $(elem).val('');
  },
  main: function(inputs){
    let [$1, $2] = [inputs.filter('input'), inputs.filter('textarea')],
        info = {},
        skills = $2[0].placeholder.split('\n').map(n => {
          let label = n.split(' = ')[0]
          let data = n.split(' = ')[1]
            .replace(']', '')
            .replace('[', '')
            .split(', ')
            .map(n => `"${n}"`)
            .join(',')
          let k = `"${label}": [${data}]`;
          return k;
        }),
        education = $2[1].placeholder.split('\n\n').map(e => {
          let info = {};
          e.split('\n').forEach((n, i) => {
            let k = n.split(': ')[0]
            info[k] = n.split(': ')[1]
          });
          return info;
        }),
        experience = $2[2].placeholder.split('\n\n').map(e => {
          let info = {};
          e.split('\n').forEach((n, i) => {
            let k = n.split(': ')[0]
            info[k] = n.split(': ')[1]
          });
          return info;
        })
    $1.forEach(n => {
      let val = $(n).val()
      let name = $(n).attr('name')
      info[name] = val;
    })
    let pugStr = new pugString(
      { info: info,
        skills: JSON.parse('{' + skills.join(',') + '}'),
        education: education,
        experience: experience
      }).layout
    console.log(pugStr);
  }
}
$('.html').on('click', function(e){
  let parent = $(this).parent().children('span')
  let inputs = parent.children(':not(p)')
  $lib['toggle'](this)
  $(this).hasClass('enabled')
    ? ( $lib['demo'](inputs), $lib['main'](inputs) )
    : inputs.val('')
})

const $pal = [
  {
     name: 'postmodern',
     schemes: [
       {
         name: 'sailing',
         colors: []
       },
       {
         name: 'night',
         colors: []
       },
       {
         name: 'riot',
         colors: []
       },
       {
         name: 'mono',
         colors: []
       },
       {
         name: '1987',
         colors: []
       }
     ]
  }
]

$('a').eq(-1).on('click', function(e){
  let target = $(this).parent().children('span')
  let children = target.children()
 // target.css('margin-top', '-22rem')
  setTimeout(function(){
    let e = _.sample($pal);
    let n = $(`<span class=${e.name}>"${e.name}"</span>`);
    e['schemes'].map((y, i) => {
      let label = y.name;
      let colors = y.colors;
      console.log(colors)
      $(`<ul><p>${label}</p></ul>`).appendTo(n)
    })
    console.log(n)
  }, 1800)
})

Comments