New changes ok

package.json

@@ -11,7 +11,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/clemmy/react-resume.git"
+    "url": "git+https://github.com/clemmy/react-resume.git"
   },
   "license": "CC0-1.0",
   "author": "Clement Hoang <clement.hoang24@gmail.com> (http://github.com/clemmy)",
@@ -32,17 +32,22 @@
     "eslint-plugin-babel": "^3.0.0",
     "eslint-plugin-react": "^3.11.3",
     "eventsource-polyfill": "^0.9.6",
-    "express": "^4.13.3",
+    "express": "^4.18.2",
     "normalize.css": "^3.0.3",
-    "radium": "^0.15.3",
+    "radium": "^0.26.2",
     "rimraf": "^2.4.3",
     "style-loader": "^0.13.0",
     "webpack": "^1.12.9",
     "webpack-dev-middleware": "^1.4.0",
-    "webpack-hot-middleware": "^2.6.0"
+    "webpack-hot-middleware": "^2.26.0"
   },
   "dependencies": {
     "react": "^0.14.3",
     "react-dom": "^0.14.3"
-  }
+  },
+  "bugs": {
+    "url": "https://github.com/clemmy/react-resume/issues"
+  },
+  "main": "convertToPDF.js",
+  "keywords": []
 }

src/Resume/About.js

@@ -3,9 +3,8 @@ import SidebarHeading from "./SidebarHeading";
 
 const About = ({ about }) => (
   <section style={style.main}>
-    <SidebarHeading>+ ABOUT</SidebarHeading>
-    <div style={style.content}>{about}</div>
-  </section>
+    <SidebarHeading>> ABOUT</SidebarHeading>
+    <div style={style.content} dangerouslySetInnerHTML={{ __html: about }} />  </section>
 );
 
 const style = {

src/Resume/CompanyHeading.js

@@ -3,7 +3,7 @@ import React, { PropTypes } from "react";
 const CompanyHeading = ({ style, company, title, date }) => (
   <div style={{ ...defaultStyles.main, ...style }}>
     <div style={defaultStyles.company}>
-      {company}
+      <div style={defaultStyles.companyName}>{company}</div>
       <div style={defaultStyles.title}>{title}</div>
     </div>
     <div style={defaultStyles.date}>{date}</div>
@@ -22,18 +22,21 @@ const defaultStyles = {
     fontWeight: "bold",
     color: "rgba(77, 100, 141, 1)",
     padding: "0.25rem",
+    display: "flex",
+    flexDirection: "column", // Make children stack vertically
   },
   title: {
     display: "inline-block",
     fontSize: "1rem",
     color: "rgba(78, 78, 78 , 1)",
-    padding: "0.25rem",
-    fontWeight: "300",
+    padding: "0.05rem",
+    fontWeight: 500,
   },
   date: {
     fontSize: "0.9rem",
     color: "rgba(77, 100, 141, 0.75)",
     padding: "0.25rem",
+    marginTop: "-1.5rem", // Adjust the vertical position by changing the marginTop value
   },
 };
 
@@ -43,4 +46,4 @@ CompanyHeading.propTypes = {
   title: PropTypes.string.isRequired,
 };
 
-export default CompanyHeading;
+export default CompanyHeading;

src/Resume/ContactLink.js

@@ -15,10 +15,10 @@ const style = {
   },
   icon: {
     display:'inline-block',
-    fontSize: '1.6rem',
-    lineHeight: '1.6rem',
-    width: '1.6rem',
-    height: '1.6rem',
+    fontSize: '1.1rem',
+    lineHeight: '1.3rem',
+    width: '1.3rem',
+    height: '1.3rem',
     textAlign: 'center',
     verticalAlign: 'middle',
     color: 'rgba(77, 100, 141, 1)'

src/Resume/ContactLinks.js

@@ -3,7 +3,7 @@ import ContactLink from './ContactLink';
 
 const ContactLinks = ({ data: links }) => (
   <section style={style.main}>
-    <h1 style={style.heading}>+ CONTACT</h1>
+    <h1 style={style.heading}>> CONTACT</h1>
     {links.map((link, key) => (
       <ContactLink
         display={link.display}

src/Resume/Education.js

@@ -1,15 +1,16 @@
 import React, { PropTypes } from 'react';
 import SidebarHeading from './SidebarHeading';
 
-const Education = ({ university, duration, degree }) => (
+const Education = ({ education }) => (
   <section style={style.main}>
     <SidebarHeading align="left">+ EDUCATION</SidebarHeading>
-    <div style={{
-      ...style.text,
-      fontWeight: 'bold',
-    }}>{university}</div>
-    <div>{degree}</div>
-    <div style={style.text}>{duration}</div>
+    {education.map((entry, index) => (
+      <div key={index}>
+        <div style={{ ...style.text, fontWeight: 'bold' }}>{entry.university}</div>
+        <div>{entry.degree}</div>
+        <div style={style.text}>{entry.duration}</div>
+      </div>
+    ))}
   </section>
 );
 
@@ -23,8 +24,13 @@ const style = {
 };
 
 Education.propTypes = {
-  university: PropTypes.string.isRequired,
-  duration: PropTypes.string.isRequired,
+  education: PropTypes.arrayOf(
+    PropTypes.shape({
+      university: PropTypes.string.isRequired,
+      duration: PropTypes.string.isRequired,
+      degree: PropTypes.string.isRequired,
+    })
+  ).isRequired,
 };
 
 export default Education;

src/Resume/Footer.js

@@ -25,17 +25,17 @@ const style = {
   },
   icon: {
     display:'inline-block',
-    fontSize: '1.6rem',
-    lineHeight: '1.6rem',
-    width: '2.4rem',
+    fontSize: '1.2rem',
+    lineHeight: '2rem',
+    width: '1.6rem',
     height: '2.4rem',
     textAlign: 'center',
     verticalAlign: 'middle',
     color: 'rgba(77, 100, 141, 1)',
-    border: '1px solid rgba(77, 100, 141, 1)',
+    border: '0px solid rgba(77, 100, 141, 1)',
     borderRadius: '60px',
     padding: '4px'
   },
 };
 
-export default Footer;
+export default Footer;

src/Resume/Header.js

@@ -1,51 +1,56 @@
 import React, { PropTypes } from 'react';
 import Link from '../ui/Link';
 
-const Header = ({ firstName, lastName, title, website }) => {
+const Header = ({ firstName, middleName, lastName, title, website }) => {
   return (
     <section style={style.main}>
       <h1 style={style.h1}>
-        <span style={style.span}>{firstName.toUpperCase()}</span>
-        <span style={style.span}>&nbsp;</span>
-        <span style={style.span}>{lastName.toUpperCase()}</span>
+        <span style={style.bold}>{firstName.toUpperCase()}</span>
+        <span style={style.nonBold}>&nbsp;</span>
+        <span style={style.nonBold}>{middleName.toUpperCase()}</span>
+        <span style={style.nonBold}>&nbsp;</span>
+        <span style={style.bold}>{lastName.toUpperCase()}</span>
       </h1>
-      <span style={style.program}>
-        {title} | <Link to={website.link} style={{padding: 0}}>{website.name}</Link>
-      </span>
+      <span style={style.program} dangerouslySetInnerHTML={{ __html: title }} />
     </section>
   );
 };
 
 const style = {
   main: {
-    padding: '16px 0 1px 0',
+    padding: '25px 0 1px 0',
     flex: '1 1 auto',
     fontSize: '1.6rem',
-    marginBottom: '-0.4em',
+    marginBottom: '1.5rem',
     height: '9rem',
   },
   h1: {
     color: 'rgb(21, 44, 85)',
     display: 'block',
     fontSize: '3.4rem',
   },
+  bold: {
+    fontWeight: 'bold',
+    display: 'inline-block',
+  },
+  nonBold: {
+    fontWeight: 300,
+    display: 'inline-block',
+  },
   program: {
     fontSize: '1.2rem',
     display: 'block',
     marginLeft: '5px',
     marginTop: '-6px',
-    color: 'rgb(77, 100, 141)'
+    marginBottom: '2rem',
+    color: 'rgb(77, 100, 141)',
   },
-  span: {
-    display: 'inline-block',
-  }
 };
 
 Header.propTypes = {
   firstName: PropTypes.string.isRequired,
   lastName: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
   website: PropTypes.object.isRequired,
 };
 
-export default Header;
+export default Header;

src/Resume/Languages/Language.js

@@ -18,4 +18,4 @@ Language.propTypes = {
   name: PropTypes.string.isRequired,
 };
 
-export default Language;
+export default Language;

src/Resume/Languages/index.js

@@ -4,7 +4,7 @@ import SidebarHeading from "../SidebarHeading";
 
 const Languages = ({ data: languages }) => (
   <section style={style.main}>
-    <SidebarHeading>+ LANGUAGES</SidebarHeading>
+    <SidebarHeading>> EMRs</SidebarHeading>
     <div>
       {languages.map((language, index) => (
         <Language name={language.name} key={index} />
@@ -23,4 +23,4 @@ Languages.propTypes = {
   data: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 
-export default Languages;
+export default Languages;

src/Resume/Main.js

@@ -6,7 +6,7 @@ import MainHeading from "./MainHeading";
 
 const Main = ({ companies }) => (
   <section style={style.main}>
-    <MainHeading title="+ Work Experience" />
+    <MainHeading title="> Select Experience" />
     <Companies data={companies} />
   </section>
 );
@@ -21,4 +21,4 @@ Main.propTypes = {
   companies: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 
-export default Main;
+export default Main;

src/Resume/MainHeading.js

@@ -9,12 +9,13 @@ const style = {
     marginBottom: '0.6rem',
     color: 'rgba(21, 44, 85, 1)',
     padding: '0.25rem',
-    borderBottom: '1px solid rgba(21, 44, 85, 1)'
+    borderBottom: '1px solid rgba(21, 44, 85, 1)',
+
   },
 };
 
 MainHeading.propTypes = {
   title: PropTypes.string.isRequired,
 };
 
-export default MainHeading;
+export default MainHeading;

src/Resume/Sidebar.js

@@ -9,21 +9,19 @@ const Sidebar = ({ data }) => (
   <section style={style.main}>
     <div>
       <ContactLinks data={data.links} />
-      <About about={data.about} />
       <Languages data={data.languages} />
-      <SidebarList title="+ TECHNOLOGIES" items={data.technologies} />
+      <SidebarList 
+        title="> SKILLS" 
+        items={data.skills}
+        separator={"<br/>"} />
       <SidebarList
-        title="+ INTERESTS"
+        title="> INTERESTS"
         items={data.interests}
         separator={"<br/>"}
       />
     </div>
     <div>
-      <Education
-        university={data.education.university}
-        degree={data.education.degree}
-        duration={data.education.duration}
-      />
+      <Education education={data.education} />
     </div>
   </section>
 );
@@ -45,4 +43,4 @@ Sidebar.propTypes = {
   data: PropTypes.object.isRequired,
 };
 
-export default Sidebar;
+export default Sidebar;

src/Resume/SidebarHeading.js

@@ -10,7 +10,7 @@ const SidebarHeading = ({ children, align = 'left' }) => (
 );
 
 const style = {
-  paddingTop: '0.25rem',
+  paddingTop: '.5rem',
   paddingBottom: '0.25rem',
   borderBottom: '1px solid rgb(21, 44, 85)',
   marginBottom: '0.6rem'
@@ -21,4 +21,4 @@ SidebarHeading.propTypes = {
   children: PropTypes.node,
 };
 
-export default SidebarHeading;
+export default SidebarHeading;