Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                  
<div class="page" id="resume">
  <header>
    <div class="grid">
      <div class="logo">
        <img src="https://jmichaliga.github.io/static/jm-83f22a4568c2bcfa14ce5f335d48b186.svg"/>
      </div>
    
      <div class="headline">
        <h1>Justin Michaliga</h1>
        <h2>Javascript Engineer</h2>
        <span>
          <a href="mailto:justin.michaliga+codepen@gmail.com">justin.michaliga@gmail.com</a> | <a href="https://github.com/jmichaliga"/>github.com/jmichaliga</a> | <a href="http://j13a.com">j13a.com</a></span>
      </div>
      
    </div>
  </header>

  <div class="grid">
    <aside>
      <section id="education">
        <Education/>
      </section>
      <section id="skillset">
        <Skillset source="skillset"/>
      </section>
      <section id="tools">
        <Skillset source="tools"/>
      </section>
      <section id="awards">
        <Awards/>
      </section>
      
    </aside>
    <main>
      <section id="experience">        
        <Experience/>
      </section>
    </main>
  </div>

  <footer>
    <address>
      102 Diamond St. 
      Brooklyn, NY 11222 | 
      <a href="tel:4106100171">(410) 610 - 0171</a> | 
      <a href="mailto:justin.michaliga@gmail.com">justin.michaliga@gmail.com</a>
    </address>
  </footer>
 </div>
              
            
!

CSS

              
                @mixin horizontal-gradient($from, $to, $stop: 100%) {
  /* fallback/image non-cover color */
  background-color: $from;

  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient(left, $from 0%, $to $stop);

  /* Safari 4+, Chrome 1+ */
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $from), color-stop($stop, $to));

  /* Safari 5.1+, Chrome 10+ */
  background-image: -webkit-linear-gradient(left, $from 0%, $to $stop);

  /* Opera 11.10+ */
  background-image: -o-linear-gradient(left, $from 0%, $to $stop);

  /* IE10+ */
  background: -ms-linear-gradient(left, $from 0%, $to $stop);

  /* Standard */
  background: linear-gradient(to right, $from 0%, $to $stop);

  /* IE6-9 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=1 );
}


@import url('https://fonts.googleapis.com/css?family=Roboto:100i,400,400i,700,700i|Song+Myung:200,400');

$dark-red: rgba(170,0,60,1);
$red: rgba(250,25,103,1);
$yellow: rgba(250, 240, 23, 1);
$green: #19FA67; 
$blue: rgba(0,80,200,1);
$bgBlue: #137;
$bgYellow: #FB9;
$white: rgba(255,255,255,1);
$bg: rgba(5,50,75,1);
$grey: rgba(0,0,20,0.5);
$light-grey: rgba(0,0,100,0.1);

$serif: 'Song Myung', serif;
$sans-serif: 'Roboto', sans-serif;

* { font-family: $sans-serif; }
a{ color: $blue; }

body{
  background: radial-gradient(ellipse farthest-side at 100% 100%, $bgYellow 10%, $red 30%, $bgBlue 109%);
}

.page{
  width: 800px;
  margin: 48px auto;
  background: $white;
  padding: 48px;
  border-radius: 4px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1em;
}

h1{
  font-family: $serif;
  font-size: 3em;
}

h2{
  font-family: $sans-serif;
  font-weight: 100;
  color: $white;
  padding: 5px 10px;
  text-transform: uppercase;
  @include horizontal-gradient($dark-red, $red, 50%);
  transform: skew(-10deg);
}

header{
  h1, h2, span{ text-align: right; }
  .logo{
    width: 126px;
    height: 126px;
    img {
      width: 126px;
      height: 126px;
    }
  }
  .headline{
    display: flex;
    flex-direction: column;
    h1{margin: 0;}
    h2{margin-top: 8px; margin-bottom: 4px;}
    span{
      color: $grey;
    }
  }
}

aside{
  section{
    width: 100%; 
    float: left;
  }
  
  .skills{
    label{
      float: left;
      background: $light-grey;
      border-radius: 8px;
      padding: 4px;
      margin: 4px;
      font-size: 0.7em;
      opacity: 0.7;
      transition-duration: 400ms;
      &:hover{
        opacity: 1;
        background: $red;
        color: $white;
        cursor: pointer;
      }
    }
  }
  .awards{
    list-style: none;
    padding-left: 0;
    font-size: 0.8em;
  }
}

section{
  h3{
    font-family: $sans-serif;
    font-style: italic;
    font-weight: 700;
    color: $red;
    text-transform: uppercase;
    margin-bottom: 4px;
    border-bottom: 1px solid $red;
  }
  strong{
    font-weight: 700;
  }
  small{
    color: $grey; 
    font-size: 0.8em;
    text-transform: uppercase;
  }
  address{
    font-size: 0.8em;
  }
  label{
    color: $grey;
    font-size: 0.8em;
  }
  .degree{
    margin-bottom: 16px;
    font-size: 0.8em;
    display: flex;
    flex-direction: column;
    
    h4{
      color: $grey;
      margin: 0px;
    }
  }
  article{
    .flex{
      display: flex;
      justify-content: space-between;
    }
    .align-left{
      text-align: left;
    }
    .align-right{
      text-align: right;
    }
    h4{margin: 0;}
    h5{margin: 0; color: $grey;}

    p{
      font-family: $serif;
      color: $grey;
      font-weight: 200;
      font-size: 0.8em;
      letter-spacing: -0.025em;
      margin-top: 4px;
    }
  }
}

footer{
  width: 100%;
  color: $grey;
  font-style: normal;
  font-size: 0.9em;
  text-align: center;
  border-top: 1px solid $red;
  padding: 8px;
}
              
            
!

JS

              
                Vue.component('Experience', {
  data () {
    return {
      positions: [
                {
          title:'Software Engineer',
          company:'Courier, Inc (YC19)',
          location: 'San Francisco, CA (Remote)',
          timeline: 'December 2019 &mdash; Present',
          description: `The smart way to design and deliver notifications. Connect and orchestrate messages through different channels to your customers with consistent messaging. Full-stack Typescript application development. Customer App developed with Next.js / SlateJS editor. Backend with AWS serverless resources on Node v12.`
        },
         {
          title:'Javascript Engineer / Consultant',
          company:'SmartNode, LLC',
          location: 'Brooklyn, NY',
          timeline: 'January 2015 &mdash; Present',
          description: `Full-stack Javascript application development and project management. 
            Typical stack consists of Node APIs on Angular / React / Vue Frontends.`
        },
        {
          title: 'Staff Engineer, Fullstack',
          company:'Knotel',
          location: 'New York, NY',
          timeline: 'July 2018 &mdash; November 2019',
          description: `Revolutionizing the GraphQL implementations that not only push the technology forward through use in the CRE and Arch industry, but as all engineering as a whole. Lead development of several applications, systems architecture, patterns, as well as our design system. Stack is React, Node, Apollo, AWS, Github Actions, running on Kubernetes.`
        },
        {
          title:'Lead Frontend Engineer',
          company:'Capsule8, Inc',
          location: 'Brooklyn, NY',
          timeline: 'June 2017 &mdash; December 2017',
          description: `Architected Capsule8’s Security dashboard console. Helped hire developers and built both the UI and UX teams within this smart and stealthy startup. Led Junior level developers as well as oversaw contract partnerships.`
        },
        {
          title:'Senior UI Engineer / Consultant',
          company:'Cake &amp; Arrow <small>(formerly Alexander Interactive)</small>',
          location: 'New York, NY',
          timeline: 'October 2013 &mdash; January 2015',
          description: `Developed proprietary software for a Fortune 50 client utilizing AngularJS with a team under the agile methodology. Similiarly sharing knowledge throughout the company crossing between the development and design teams.`
        },
        {
          title:'UX / UI Development Consultant',
          company:'Legs Media, Milk Studios, Layerframe',
          location: 'New York, NY',
          timeline: 'May 2013 &mdash; December 2013',
          description: `Lead development and oversaw teams on several high-end digital/web projects including those with Nickelodeon, Spotify, Budweiser, Theory and more.`
        },        
        {
          title:'Mobile Developer: Custom Builds',
          company:'Celtra',
          location: 'New York, NY',
          timeline: 'January 2013 &mdash; May 2013',
          description: `Created custom mobile advertising campaigns on a prototypical inheritance design pattern built from Celtra’s Ad Creator product and MongoDB/MySQL.
Clients include McDonalds, Burberry, Jeep, SuperCell, and several more.`
        },{
          title:'Creative Technologist',
          company:'Medialets',
          location: 'New York, NY',
          timeline: 'October 2010 &mdash; October 2012',
          description: `Lead Developer in the Rich Media Mobile Advertising space. Direct communication of best practices with creative, technical, and agency partners. Award Winning Innovation in the mobile space utilizing HTML5 elements, CSS animations, touch events, and js frameworks.`
        },
        {
          title:'Interactive Developer',
          company:'Warschawski',
          location: 'Baltimore, MD',
          timeline: 'August 2009 &mdash; October 2010',
          description: 'Created interactive solutions for clients in need of online branding. A custom content management system was created in order to give customers control of their content without need to be onboarded into a complex system. Logo creation, wireframing, and branding solutions were also part of this creative role.'
        },
        {
          title:'Front-End Developer',
          company:'Inside Lacrosse',
          location: 'Baltimore, MD',
          timeline: 'December 2008 &mdash; August 2009',
          description: 'Redeveloped InsideLacrosse.com onto the Drupal6 Platform while creating smaller applications for custom polls, magazine revenue, and archival projects.'
        },
        {
          title:'Web Applications Developer',
          company:'no|inc',
          location: 'Baltimore, MD',
          timeline: 'August 2008 &mdash; December 2008',
        },
        {
          title:'Web Applications Developer',
          company:'CSD Architects',
          location: 'Baltimore, MD',
          timeline: 'June 2007 &mdash; August 2008',
        },
      ]
    }
  },
  template: `
<div>
      <h3>Experience</h3>
      <article class="item" v-for="pos in positions">
          <div class="flex">
            <div class="align-left">
              <h4 v-html="pos.title"></h4>
              <h5 v-html="pos.company"></h5>
            </div>

            <div class="align-right"> 
              <small v-html="pos.timeline"></small>
              <address v-html="pos.location"></address>
            </div>
          </div>
          <p>
            {{pos.description}}
          </p>
        </article>
</div>
`
});
Vue.component('Awards', {
  data () {
    return {
      awards: [
        {
          title: 'Proposed Speaker, ReactDay NYC',
          date: 'October 2020'
        },
        {
          title: 'Speaker !!Con',
          date: 'May 2020'
        },
        {
          title: 'Speaker, VueNYC',
          date: 'October 2017'
        },
        {
          title: 'Best iPad/Tablet Advertising, Digiday Mobi Awards',
          date: '2012'
        },
        {
          title: 'Best Mobile Branding, Digiday Mobi Awards',
          date: '2012'
        },
         {
          title: 'Mobile Mentor, Startup Weekend NYC',
          date: '2011'
        },
        {
          title: 'Javascript Instructor, General Assembly',
          date: '2010 &mdash; 2012'
        },
        {
          title: 'Co-Founder, Refresh Baltimore',
          date: '2008'
        },
      ]
    }
  },
  template: `
<div>
      <h3>Awards &amp; Accolades</h3>
       <ul class="awards" v-for="award in awards">
          <li>
            <strong v-html="award.title"></strong> 
            <small v-html="award.date"></small>
          </li>
       <ul>
</div>
`
})
Vue.component('Skillset', {
  props: ['source'],
  created(){
    this.sourceset = this.source === 'skillset' ? this.skillset.sort() : this.tools.sort()
  },
  data(){
    return {
      skillset: [ 'AngularJS','Vue','React','Redux','Expo','React Native','Apollo','GraphQL','Node.JS','Express','Passport','TypeScript','Babel ','ESLint','D3','Lodash','Bootstrap','HTML5','CSS3','Javascript','ES5(6)','SASS','Theme-UI','Styled-Components','Styled-System','PostgreSQL','SQLite','MongoDB','Firebase','REST','SVG','Icon Development','Interface Design','Debian Linux','OSX','Agile Methodologies'],
      tools: ['Git','Github', 'Heroku','AWS','Docker','Now','Kubernetes','Photoshop','Illustrator','Sketch','Figma','NPM','Yarn','Webpack','Parcel','Vim','VSCode','Gatsby','Next.JS'],
      sourceset: null
    }
  },
  ready(){
    sourceset = skills
  },
  template: `
<div>
    <h3>{{source}}</h3>
    <div class="skills" v-for="s in sourceset">
      <label>{{s}}</label>
    </div>
</div>
`
})       
Vue.component('Education', {
  data(){
    return {
      university:{
        name: 'Salisbury University',
        date: 'August 2002 &ndash; May 2007',
        location: 'Salisbury, MD'
      },
      degrees:[
        {
          type: 'Bachelors of Science',
          major: 'Computer Science',
          minor: 'Mathematics'
        },
        {
          type: 'Bachelors of Arts',
          major: 'Art',
          concentration: 'Graphic Design'
        },
      ]
    }
  },
  template: `
    <div>
        <h3>Education</h3>
        <strong v-html="university.name"></strong><br>
        <small v-html="university.date"></small><br>
        <address v-html="university.location"></address><br>
        <div class="degree" v-for="degree in degrees">
          <h4>{{degree.type}}</h4>
            <div>
            <label>Major:</label> {{degree.major}} <br>
            <label v-if="degree.minor">Minor:</label> {{degree.minor}}
            <label v-if="degree.concentration">Concentration:</label> {{degree.concentration}}
          </div>
        </div>
    </div>
`
})
new Vue({
  el: '#resume'
})

              
            
!
999px

Console