ticleaned ccs and data functions

shumai9 · Dec 8, 2018 · 62fc041 · 62fc041
1 parent a788717
commit 62fc041
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 73 deletions.
diff --git a/src/App.css b/src/App.css
@@ -69,40 +69,47 @@
   flex-wrap: nowrap;
 }
 /* style to target the route rendered elements*/
-.home,
-.about,
-.contact,
-.timeline,
-.projects { 
-  padding: 4%;
+div.home,
+div.about,
+div.contact,
+div.timeline,
+div.projects { 
+  padding: 7% 2%;
   text-align: left;
   width: 100%;
   height: auto;
 }
 /*Image style*/
 .masawino {
+  float: left;
+  padding: 2px;
+  margin: 2%;
   position: relative;
   width: auto;
-  border-radius: 1rem;
+  border-radius: 2rem;
   -webkit-box-shadow: 0px 2px 9px 2px rgba(0,0,0,0.85);
   -moz-box-shadow: 0px 2px 9px 2px rgba(0,0,0,0.85);
   box-shadow: 0px 2px 9px 2px rgba(0,0,0,0.85);
 }
 div.projects{
-
+
+}
+.menu{
+  height: 100vh;
 }
 .footer {
+  text-align: center;
   display: block;
   height: 10pc;
   background: linear-gradient(grey,black );
-  width: 100vw;
+  width:100%;
 }
 
 /***Responsive design***/
  /* mobile phones first*/
-@media only screen and (min-width: 100px) and (max-width: 400px) {
+@media only screen and (min-width: 10px) and (max-width: 400px) {
    body { 
-    background: gold;
+    background: rgba(177, 102, 102, 0.48);
   }
   .option {
     display: block;
@@ -126,7 +133,7 @@ div.projects{
   .App-header,
   .main,
   .footer {
-    grid: auto-flow dense / 30%;
+    grid: auto-flow dense / 100%;
     grid-gap: none;
   }
   .masawino {
@@ -140,8 +147,7 @@ div.projects{
     display: block;
   }
   body {
-    background: orchid;
-    width: 100vw;
+    background: rgb(134, 106, 106);
   }
   .masawino {
     width:100%;

diff --git a/src/App.jsx b/src/App.jsx
@@ -86,7 +86,7 @@ class App extends Component {
                 }
               /> 
             </div>       
-            <Footer/>
+            <Footer data={json.projects} />
           </div>
         </Router>
       </MuiThemeProvider>

diff --git a/src/components/about.jsx b/src/components/about.jsx
@@ -1,29 +1,31 @@
 import React from 'react';
 
 class About extends React.Component{
-    constructor() {
-        super();
-        this.state = {
-            loaded: false,
-            bucket: ''
-
-        }
-    }
-    render(){
-    return(
-        <div className="about">
-        <h1> Hi, I'm Shumai</h1>
-        <p>{this.props.data.intro}</p>         
-            <img className="masawino"src="assets/massawa.jpg" alt="massawa" />
-           <p>
-            {this.props.data.body.bio} 
-            {this.props.data.body.edu}
-            </p>
-           <p>{this.props.data.body.reason} </p>
-
-        </div>
-        );
+  constructor() {
+    super();
+    this.state = {
+      loaded: false,
+      bucket: ''
     }
+  }
+  render(){
+  return(
+    <div className="about">
+    <h1>Hi, I'm Shumai</h1>
+    <h2>{this.props.data.intro}</h2>        
+      <img className="masawino"src="assets/massawa.jpg" alt="massawa" />
+      <div>
+        <p>
+          {this.props.data.body.bio} 
+          {this.props.data.body.edu}
+        </p>
+      </div>
+      <div>
+        <p>{this.props.data.body.reason} </p>
+      </div>                                 
+    </div>
+    );
+  }
 }
 
 

diff --git a/src/components/contact.jsx b/src/components/contact.jsx
@@ -2,18 +2,18 @@ import React from 'react';
 
 
 class Contact extends React.Component {
-    render () {
-        return(
-            <div className="contact">
-            <p>Email: {this.props.data.email}</p>
-            <p>Tel:{this.props.data.tel}</p>
-            <p>links: 
-                <a href={`${this.props.data.links}`} target="_blank"> Shumai's Github</a> 
-            </p>
-
-            </div>
-        );
-    }
+  render () {
+    return(
+      <div className="contact">
+        <div><p>Email: {this.props.data.email}</p>
+          <p>Tel:{this.props.data.tel}</p>
+          <p>links: 
+          <a href={`${this.props.data.links}`} target="_blank"> Shumai's Github</a> 
+          </p>
+        </div>      
+      </div>
+    );
+  }
 }
 
 export default Contact;
diff --git a/src/components/footer.jsx b/src/components/footer.jsx
@@ -1,12 +1,14 @@
 import React from 'react';
-import json from '../data/data.json';
 
-const Footer = ()=> {
-  return (
-    <div className="footer">For more details 
-    <p>{json.footer.rights}</p>
-    </div>
-  )
+class Footer extends React.Component {
+  render() {
+    return (
+      <div className="footer" >
+        <em>For more details </em>
+        <p>{this.props.data.rights}</p>
+      </div>
+    )
+  }
 };
 
 export default Footer;
diff --git a/src/components/nav.css b/src/components/nav.css
@@ -29,7 +29,7 @@ a:not(:first-child){
 }
 
 nav a:not(:first-child):hover { 
-  background: rgba(171, 192, 192, 0.47);
+  /* background: rgba(171, 192, 192, 0.47); */
   border-radius: 0.2rem;
   color: rgb(98, 250, 143);  
 } 

diff --git a/src/components/option.css b/src/components/option.css
@@ -34,8 +34,8 @@
     display: block;
     position: relative;
     text-align: left;
-    box-shadow: 0px 2px 9px 2px rgba(0,0,0,0.85);
-    border-radius: 0rem 50rem 0rem 0rem;
-    background: #303e5866;
+    box-shadow: 0px 16px 10px 2px rgba(0,0,0,0.80);
+    border-radius: 0rem 50rem 1rem 1rem;
+    background: #28cbcb33;
 
 }
diff --git a/src/components/projects.jsx b/src/components/projects.jsx
@@ -5,14 +5,13 @@ class Projects extends React.Component {
   render(){
     return(
       <div className="projects menu">
-      <p>{this.props.data.rights}</p>
-      <p>{this.props.data.duration}</p>
-      <p>{this.props.data.objective}</p>
-      <p>{this.props.data.list} </p>
         <h5>PROJECTS</h5>
-
-        <img src="/assets/aws.png" alt="Berana" />
         <div className="img-container">
+          <p>{this.props.data.rights}</p>
+          <p>{this.props.data.duration}</p>
+          <p>{this.props.data.objective}</p>
+          <p>{this.props.data.list} </p>  
+          <img src="/assets/aws.png" alt="Berana" />
           <img src="/assets/Berana.png" alt="Berana" />
         </div>
       </div>

diff --git a/src/data/data.json b/src/data/data.json
@@ -1,10 +1,10 @@
 {
   "about": {
-    "intro": "I was born in this beautiful port town Massawa.",
+    "intro": "Full Stack Software Engineer",
     "body": {
-      "bio": "I develop web sites and web applications using industry grade technologies and practicies. I am passionate about learning new technology and expanding my knowlege. I'm married and a proud father, I enjoy listening to jazz while programming, Love to draw and paint and can cook. ",
-      "edu": "Originally trained as Marine Biotechnology  at University of Asmara, later on switched a career to follow my passion in Tech and the world of programming.",
-      "reason": "I have always being enthusiastic and passionate about technology having found an opportunity to follow what makes me happy"
+      "bio": "Professionally, I develop web sites and web applications using industry grade technologies and practicies. I am passionate about learning new technology and expanding my knowlege. I'm married and a proud father, I enjoy listening to jazz while programming, Love to draw and paint and can cook. ",
+      "edu": "Originally,trained as Marine Biotechnology  at University of Asmara, later on switched a career to follow my passion in Tech and the world of programming.",
+      "reason": "I'm objective,organised and principled, bringing to mind words such self-disciplined, dependable and diplomatic. I'm a careful, methodical person with sincerity and a sense of duty. I enjoy when working privately or with a small group of similar people, and where there is respect for realism, facts, precision, and clear communication. I am hard-working and have a strong sense of duty and quietly pleased when my high-quality work is appreciated. I have always being enthusiastic and passionate about technology having found an opportunity to follow what makes me happy. I was born in this beautiful port town Massawa,"
     },
     "current": "I am trained Full Stack Web Developer living close to London",
     "status": "Home is where heart is"
@@ -36,4 +36,4 @@
     "feeds":"",
     "quotes": "Home is where heart is"
   }
-}
+}
diff --git a/src/index.css b/src/index.css
@@ -11,13 +11,12 @@ html {
 }
 /***Style for LinkedIn badge***/
 aside {
-  padding: 1%;
+  padding: 7% 1%;
   width: auto;
 }
 
 div.LI-profile-badge .LI-badge-container.vertical.light {
   position: sticky;
-  top: 10%;
   -webkit-box-shadow: 0 0 2em 0em rgba(0,0,0,0.75);
   -moz-box-shadow: 0 0 2em 0em rgba(0,0,0,0.75);
   box-shadow: 0 0 2em 0em rgba(0,0,0,0.75);
@@ -32,3 +31,6 @@ div.LI-profile-pic-container img {
 img, video, canvas,iframe {
   width:25rem;
 }
+div p {
+  padding: 15px;
+}