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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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 id="root"></div>
              
            
!

CSS

              
                body 
  padding 50px 0
  display flex
  justify-content center


#root
  width 612px
  padding 70px 35px 20px 35px
  border 1px solid #BCBCBC
  border-right 1px solid #BCBCBC
  box-shadow 0px 4px 12px 6px #ccc

.header
  background #E4E4E4
  width 100%
  height 75px
  display flex
  justify-content center
  align-items center
  margin-bottom 50px

.name
  text-align center
  padding 4px
  margin 20px
  line-height 1px
  background #D75E27
  width 150px
  height 150px
  color white
  border-radius 50%
  border 20px solid white
  line-height 6px
  
.name__first
  font-weight 300
  display block
  margin-top 57px
  
  
.name__last
  letter-spacing 2px
  text-transform uppercase
  display block
 
  
.address
  font-size 12px
  text-align right
  line-height 16px
  font-weight bold
  color #95989A
  
.address__street, .address__city
  display block
  
.contact
  font-size 12px
  text-align left
  line-height 16px
  font-weight bold
  color #95989A
  
.contact__email, .contact__phone
  display block
  
.summary
  text-align center
  margin-top 20px
  color #95989A
  font-size 14px
  border-bottom 1px solid #BCBCBC
  padding 0 20px 10px 20px
  
.ratings
  display flex
  justify-content space-around
  flex-wrap wrap
  align-items flex-end
  height 175px
  border-bottom 1px solid #BCBCBC
  
.skill__name
  display inline-block
  width 80px
  font-weight 600
  color #95989A
  font-size 10px
  -webkit-margin-before 0
  
// Change the background  
div.ui.star.skill__rating>.active.icon
  color #D75E27 !important
  
div.ui.star.skill__rating>.selected.icon,
div.ui.star.skill__rating>.active.selected.icon,
  color #D75E27 !important
  opacity 0.75 !important
  
.heading {
  font-size 1.25em
  -webkit-margin-after 0.25em
}
  
.qualifications
  display flex
  justify-content space-between
  
.experience
  text-align right
  color #333333
  width 48%

  
.history
  width 48%
  text-align left
  color #333333
  
.job, .school, .project
  color #95989A
  
.job__title, .job__date, .school__name, .school__location, .project__title
  font-size 14px
  font-weight 700
  text-transform uppercase
  -webkit-margin-after 0
  display block
  
.project__title
  margin-top 14px
  
.school__location
  font-size 13px
  margin-bottom 14px
  
.job__summary, .school__degree, .school__cos, .project__desc
  text-align left
  font-size 14px
  display block
  line-height 1.25
  
.school__cos
  margin-bottom 14px
  
.project__url
  font-weight 600
  font-size 15px
  
.job__summary, .project__desc
  text-align justify
  
.footer
  margin-top 15px
  padding 15px 0
  width 100%
  background #E4E4E4
  
.footer__inner
  width 100%
  height 30px
  background #D75E27
  display flex
  justify-content space-around
  align-items center
  color #FFFFFF
  font-size 14px
  
  
  

              
            
!

JS

              
                const {
  Rating,
  Icon,
  Label
} = semanticUIReact

function ResumeTitle(props) {
  return (
    <div className="name" contentEditable={true}>
      <h2 className="name__first">{props.firstName}</h2>
      <h1 className="name__last">{props.lastName}</h1>
    </div>
  )
}

function Address(props) {
  return (
   <div className="address" contentEditable={true}>
    <span className="address__street">{props.street}</span>
    <span className="address__city">{props.city}</span>
  </div> 
  )
}

function ContactInfo(props) {
  return (
    <div className="contact" contentEditable={true}>
      <span className="contact__email">{props.email}</span>
      <span className="contact__phone">{props.phone}</span>
    </div>
  )
}

class Header extends React.Component {
  constructor(props) {
    super(props)
  }
  
  render() {
    return (
    <header className="header">
      <Address street="1 Hacker Way" city="Menlo Park, CA 94025" />
      <ResumeTitle firstName="Jared" lastName="Dunn" />
       <ContactInfo email="email@company.com" phone="(123) 456-7890" />
    </header>
    );
  }
}

class Summary extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
        <p className="summary" contentEditable={true}>
          {this.props.summary}
        </p>
    );
  }
}

function Skill(props) {
  return (
    <div className="skill">
      <p className="skill__name" contentEditable={true}>{props.item}</p>
      <Rating className="skill__rating" icon="star" size="mini" defaultRating={props.rating} maxRating={5} />
    </div>
  )
}

class Skills extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div className="ratings">
        <div className="ratings__skills">
          <h3>Skills</h3>
          <Skill item="HTML5" rating={5} />
          <Skill item="CSS3" rating={5} />
          <Skill item="JavaScript" rating={4} />
          <Skill item="Sass" rating={5} />
          <Skill item="React" rating={4} />
        </div>
        <div className="ratings__skills">
          <Skill item="Bootstrap" rating={4} />
          <Skill item="Node.js" rating={5} />
          <Skill item="Meteor" rating={5} />
          <Skill item="Redux" rating={3} />
          <Skill item="MongoDB" rating={4} />
        </div>
        <div className="ratings__tools">
          <h3>Tools</h3>
          <Skill item="Git" rating={4} />
          <Skill item="Sketch" rating={5} />
          <Skill item="Webstorm IDE" rating={5} />
          <Skill item="iTerm2" rating={4} />
          <Skill item="VS Code" rating={3} />
        </div>
      </div>
    )
  }
}

function Job(props) {
  return (
    <div className="job">
      <span className="job__title" contentEditable={true}>{props.jobTitle}</span>
      <span className="job__date">{props.jobDate}</span>
      <p className="job__summary" contentEditable={true}>{props.jobSummary}</p>
    </div>
  )
}

class Experience extends React.Component {
  constructor(props) {
    super(props);
  }
  
  
  render() {
    return (
      <div className="experience">
        <h2 className="heading">EXPERIENCE</h2>
        <Job jobTitle="HOOLI - FRONT END DEVELOPER //" jobDate="2011 — PRESENT" jobSummary="Affordances user story quantitative vs. qualitative affordances thought leader big data sticky note workflow parallax ideate thinker-maker-doer pair programming. Big data entrepreneur intuitive engaging sticky note fund paradigm thought leader innovate. Physical computing cortado human-centered design user centered design venture capital innovate waterfall is so 2000 and late integrate prototype grok. Sticky note ideate responsive driven viral actionable insight engaging integrate user story integrate." />
        <Job jobTitle="PIED PIPER — ASSISTANT //" jobDate="2013 — 2016" jobSummary="360 campaign venture capital pivot earned media pivot ship it moleskine venture capital. Bootstrapping long shadow prototype latte engaging user story driven pair programming parallax earned media SpaceTeam. Co-working workflow fund pitch deck human-centered design food-truck parallax driven user centered design sticky note co-working SpaceTeam affordances quantitative vs. qualitative. Sticky note pitch deck actionable insight hacker SpaceTeam paradigm SpaceTeam latte." />
      </div> 
    );
  }
}

function Education(props) {
  return(
    <div className="school">
      <span className="school__name" contentEditable={true}>{props.schoolName}</span>
      <span className="school__location" contentEditable={true}>{props.schoolLocation}</span>
      <span className="school__degree" contentEditable={true}>{props.schoolDegree}</span>
      <span className="school__cos" contentEditable={true}>{props.schoolCourse}</span>
    </div>
  )
}

function Project(props) {
  return(
    <div className="project">
      <span className="project__title" contentEditable={true}>{props.projectTitle}</span>
      <span className="project__url" contentEditable={true}>{props.projectUrl}</span>
      <span className="project__desc" contentEditable={true}>{props.projectDesc}</span>
    </div>
  )
}

class History extends React.Component {
  constructor(props) {
    super(props)
  }
  
  render() {
    return (
      <div className="history">
        <h2 className="heading">EDUCATION</h2>
        <Education schoolName="Udacity" schoolLocation="Online Coursework" schoolDegree="Nanodegree" schoolCourse="Full Stack Web Developer // 2017" />
        <Education schoolName="MIT" schoolLocation="Cambridge, MA" schoolDegree="Bachelors of Arts & Science" schoolCourse="Computer Science // 2006 - 2008" />
        <h2 className="heading">SELECTED WORK</h2>
        <Project projectTitle="NUCLEUS - FULL END DEVELOPER // 2017" projectUrl="http://chrisbeard.io" projectDesc="Workflow responsive moleskine convergence personas long shadow user centered design fund food-truck. Agile pivot agile 360 campaign quantitative vs. qualitative actionable insight waterfall is so 2000 and late parallax." />
        <Project projectTitle="DISRUPT APP - FRONT END DEVELOPER // 2016" projectUrl="http://chrisbeard.io" projectDesc="Parallax experiential minimum viable product earned media user centered design quantitative vs. qualitative human-centered design latte user centered design convergence sticky note thinker-maker-doer driven." />
      </div>
    );
  }
}

class Footer extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <footer className="footer">
        <div className="footer__inner" contentEditable={true}>
          <Label>
            <Icon name='briefcase' /> {this.props.portfolioUrl}
          </Label>
          <Label>
            <Icon name='phone square' /> {this.props.phoneNumber}
          </Label>
          <Label>
            <Icon name='mail' /> {this.props.email}
          </Label>
        </div>
      </footer>
    );
  }
}

class Resume extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div>
        <Header />
        <Summary summary="Cortado Steve Jobs parallax parallax waterfall is so 2000 and late thought leader iterate pair programming physical computing. Thinker-maker-doer thinker-maker-doer earned media integrate grok latte experiential responsive innovate unicorn. Waterfall is so 2000 and late cortado thinker-maker-doer thought leader actionable insight big data earned media long shadow ideate waterfall is so 2000 and late." />
        <Skills />
        <div className="qualifications">
          <Experience />
          <History />
        </div>
        <Footer portfolioUrl="http://chrisbeard.io" phoneNumber="(123) 456-7890" email="email@company.com" />
      </div>
    );
  }
}

ReactDOM.render(
  <Resume />, 
  document.getElementById('root')
);
              
            
!
999px

Console