React Developer Resume Template

react-developer-resume-template.markdown

React Developer Resume Template

A user editable resume template built with React. Just fork the Pen and make your changes, then send out the link to employers and get paid.

A Pen by Christopher Beard on CodePen.

License.

resume-template.html

<div id="root"></div>

script.babel

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 protected]" 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 protected]" />
      </div>
    );
  }
}

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

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/0.67.1/semantic-ui-react.min.js"></script>

style.stylus

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
  
  
  

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/rating.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/icon.min.css" rel="stylesheet" />