Dev

package.json

@@ -2,7 +2,9 @@
   "name": "resume",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://jcoreaportfolio.com/",
   "dependencies": {
+    "node-sass": "^4.12.0",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
     "react-scripts": "2.1.1"
@@ -11,7 +13,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -b master -d build"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -21,5 +25,8 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "gh-pages": "^2.2.0"
+  }
 }

public/css/default.css

@@ -687,7 +687,7 @@ input[type="checkbox"] { display: inline; }
 /* block grids
 --------------------------------------------------------------------- */
 .bgrid-sixths [class*="column"]   { width: 16.66667%; }
-.bgrid-quarters [class*="column"] { width: 25%; }
+.bgrid-quarters [class*="column"] { width: 30%; }
 .bgrid-thirds [class*="column"]   { width: 33.33333%; }
 .bgrid-halves [class*="column"]   { width: 50%; }
 
@@ -778,7 +778,7 @@ properly.
 .cf:before,
 .cf:after {
     content: " ";
-    display: table;
+    display: flex;
 }
 .cf:after {
     clear: both;

public/css/layout.css

@@ -325,28 +325,28 @@ ul#nav li.current a { color: #F06000; }
    border-radius: 3px 0 0 3px;
 }
 
-.photoshop {
+.rubyonrails {
   	width: 60%;
   	-moz-animation: photoshop 2s ease;
   	-webkit-animation: photoshop 2s ease;
 }
-.illustrator {
-  	width: 55%;
+.javascript {
+  	width: 80%;
   	-moz-animation: illustrator 2s ease;
   	-webkit-animation: illustrator 2s ease;
 }
-.wordpress {
-  	width: 50%;
+.reactjs {
+  	width: 80%;
   	-moz-animation: wordpress 2s ease;
   	-webkit-animation: wordpress 2s ease;
 }
 .css {
-  	width: 90%;
+  	width: 80%;
   	-moz-animation: css 2s ease;
   	-webkit-animation: css 2s ease;
 }
 .html5 {
-  	width: 80%;
+  	width: 70%;
   	-moz-animation: html5 2s ease;
   	-webkit-animation: html5 2s ease;
 }
@@ -461,6 +461,7 @@ ul#nav li.current a { color: #F06000; }
 
    background: url(../images/overlay-bg.png) repeat;
 }
+
 .portfolio-item .item-wrap .link-icon {
    display: block;
    color: #fff;

public/index.html

@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Rahul Bhatia</title>
+    <title>Jonathan Corea</title>
     <link rel="stylesheet" href="%PUBLIC_URL%/css/default.css">
 <link rel="stylesheet" href="%PUBLIC_URL%/css/layout.css">
 <link rel="stylesheet" href="%PUBLIC_URL%/css/media-queries.css">

src/App.js

@@ -3,7 +3,6 @@ import Header from './components/Header';
 import About from './components/About';
 import Resume from './components/Resume';
 import Portfolio from './components/Portfolio';
-import Testimonials from  './components/Testimonials';
 import ContactUs from './components/ContactUs';
 import Footer from './components/Footer';
 import resumeData from './resumeData';
@@ -15,7 +14,6 @@ class App extends Component {
         <About resumeData={resumeData}/>
         <Resume resumeData={resumeData}/>
         <Portfolio resumeData={resumeData}/>
-        <Testimonials resumeData={resumeData}/>
         <ContactUs resumeData={resumeData}/>
         <Footer resumeData={resumeData}/>
       </div>

src/components/About.js

@@ -8,7 +8,7 @@ export default class About extends Component {
 
             <div className="three columns">
 
-               <img className="profile-pic"  src="images/profilepic.jpg" alt="" />
+               <img className="profile-pic"  src="images/portfolio/Jonathan Corea.jpg" alt="" />
 
             </div>
 
@@ -27,13 +27,13 @@ export default class About extends Component {
 
                   <h2>Contact Details</h2>
                   <p className="address">
-       						<span>{resumeData.name}</span>
+       						Name: <span>{resumeData.name}</span>
                      <br></br>
-       						   <span>
-                     {resumeData.address}
+       						Email: <span>
+                     {resumeData.email}
                     </span>
                     <br></br>
-                    <span>{resumeData.website}</span>
+                        Location: <span>{resumeData.address}</span>
        					   </p>
                   </div>
                </div>

src/components/ContactUs.js

@@ -6,15 +6,19 @@ export default class ContactUs extends Component {
       <section id="contact">
           <div className="row section-head">
             <div className="ten columns">
+              <h1 className="lead">Contact Me</h1>
               <p className="lead">
-              Feel free to contact me for any work or suggestions below
+              Feel free to contact me for any free lance work, projects or suggestions by messaging me either through <strong>Email</strong> or <strong>LinkedIn</strong>. Looking forward to connect!
               </p>
             </div>
           </div>
           <div className="row">
             <aside className="eigth columns footer-widgets">
               <div className="widget">
-                <h4>Linked in :
+                <h4>Email :
+                  {resumeData.email}
+                </h4>
+                <h4>LinkedInId :
                   {resumeData.linkedinId}
                 </h4>
               </div>

src/components/Header.js

@@ -13,8 +13,7 @@ export default class Header extends Component {
                <li className="current"><a className="smoothscroll" href="#home">Home</a></li>
                <li><a className="smoothscroll" href="#about">About</a></li>
              <li><a className="smoothscroll" href="#resume">Resume</a></li>
-               <li><a className="smoothscroll" href="#portfolio">Works</a></li>
-               <li><a className="smoothscroll" href="#testimonials">Testimonials</a></li>
+               <li><a className="smoothscroll" href="#portfolio">Projects</a></li>
                <li><a className="smoothscroll" href="#contact">Contact</a></li>
             </ul>
          </nav>

src/components/Portfolio.js

@@ -6,15 +6,15 @@ export default class Porfolio extends Component {
       <section id="portfolio">
       <div className="row">
         <div className="twelve columns collapsed">
-          <h1>Check Out Some of My Works.</h1>
+          <h1>Check Out Some of My Projects.</h1>
           <div id="portfolio-wrapper" className="bgrid-quarters s-bgrid-thirds cf">
           {
             resumeData.portfolio && resumeData.portfolio.map((item)=>{
               return(
                 <div className="columns portfolio-item">
                   <div className="item-wrap">
-                    <a href="#modal-01">
-                      <img src={`${item.imgurl}`} className="item-img"/>
+                    <a href={`${item.href}`}>
+                      <img src={`${item.imgurl}`} className="item-img" alt=""/>
                       <div className="overlay">
                         <div className="portfolio-item-meta">
                           <h5>{item.name}</h5>
@@ -23,6 +23,7 @@ export default class Porfolio extends Component {
                       </div>
                     </a>
                   </div>
+                  <a href={`${item.href}`}>Learn More</a>
                 </div>
               )
             })

src/components/Resume.js

@@ -50,9 +50,7 @@ export default  class Resume extends Component {
                           {item.Achievements}
                           </p>
                        </div>
-
                     </div>
-
                   )
                 })
               }
@@ -68,26 +66,24 @@ export default  class Resume extends Component {
 
             <div className="nine columns main-col">
 
-               <p>
-               {resumeData.skillsDescription}
-               </p>
-
-   				<div className="bars">
+              {/* <span>
+                <p>
+                  {resumeData.skillsDescription}
+                </p>
+              </span> */}
 
+   				<div className="columns main-col">
    				   <ul className="skills">
                 {
                   resumeData.skills && resumeData.skills.map((item) => {
                     return(
-                      <li>
-                      <span className={`bar-expand ${item.skillname.toLowerCase()}`}>
-                      </span><em>{item.skillname}</em>
+                      <li className="four columns">
+                        <em><strong>{item.skillname}</strong></em>
                       </li>
                     )
                   })
                 }
-
    					</ul>
-
    				</div>
 
    			</div>