updated about me secion and added profile picture

package.json

@@ -9,6 +9,8 @@
     "jquery": "^3.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-native": "^0.67.3",
+    "react-native-web": "^0.17.7",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },

public/css/main.css

@@ -729,25 +729,25 @@ label > input[type="checkbox"], label > input[type="radio"] {
  * ------------------------------------------------------------------- */
 
 ::-webkit-input-placeholder {
-    color: #6c6c6c;
+    color: #ffffff;
 }
 
 :-moz-placeholder {
-    color: #6c6c6c;
+    color: #ffffff;
     /* Firefox 18- */
 }
 
 ::-moz-placeholder {
-    color: #6c6c6c;
+    color: #ffffff;
     /* Firefox 19+ */
 }
 
 :-ms-input-placeholder {
-    color: #6c6c6c;
+    color: #ffffff;
 }
 
 .placeholder {
-    color: #6c6c6c !important;
+    color: #ffffff !important;
 }
 
 
@@ -3056,7 +3056,7 @@ html.no-csstransitions .home-content__main {
     left: 0;
     width: 100%;
     height: 100%;
-    opacity: .75;
+    opacity: .4;
     background-color: #070606;
 }
 
@@ -3134,7 +3134,7 @@ html.no-csstransitions .home-content__main {
     background-color: transparent;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     margin-bottom: .9rem;
-    color: rgba(255, 255, 255, 0.75);
+    color: rgb(255, 255, 255);
 }
 
 .contact__form input[type="email"]:focus, 

public/data/contact.json

@@ -1,13 +1,13 @@
 {
     "contact": {
       "name": "Brid Moynihan",
-      "image": "profilepic.jpg",
-      "contactmessage": "Here is where you should write your message to readers to have them get in contact with you.",
+      "image": "images/profile.jpg",
+      "contactmessage": "Please feel free to reach out and contact me via my email. If you wish to contact me via phone please request below and I will provide you with my details!",
       "email": "[email protected]",
-      "phone": "555-555-5555",
+      "phone": "Upon Request",
       "address": {
-        "city": "(Your City)",
-        "country": "Scotland"
+        "city": "Cork",
+        "country": "Ireland"
       }
     }
 }

public/data/skills.json

@@ -1,5 +1,6 @@
 { 
     "skills": {
+        "bio": "Hey there, I'm Brid! Remote Data Engineer currently working at Glofox 🦊- Giving customers insights into their Gyms and Businesses with Analytics and Big Data solutions",
         "frameworks": [
             {
                 "name": "DBT",

src/App.js

@@ -125,7 +125,7 @@ class App extends Component {
         <Experience data={this.state.experienceProps.resume}/>
         <Portfoliio data={this.state.portfolioProps.portfolio}/>
         <Repertoire data={this.state.repertoireProps.repertoire}/>
-        <Contact data={this.state.contactProps.main}/>
+        <Contact data={this.state.contactProps.contact}/>
         <Footer data={this.state.footerProps.main}/>
       </div>
     );

src/Components/Contact/Contact.js

@@ -4,12 +4,15 @@ class Contact extends Component {
   render() {
     // TODO Update to only pass Contact json  
     if(this.props.data){
-      var name = this.props.data.name;
-      var city = this.props.data.address.city;
-      var country = this.props.data.address.country;
-      var phone= this.props.data.phone;
-      var email = this.props.data.email;
-      var message = this.props.data.contactmessage;
+        console.log(this.props.data)
+        var name = this.props.data.name;
+        var city = this.props.data.address.city;
+        var country = this.props.data.address.country;
+        var phone= this.props.data.phone;
+        var email = this.props.data.email;
+        var image = this.props.data.image;
+        console.log(image)
+        var message = this.props.data.contactmessage;
     }
 
     return (
@@ -21,7 +24,6 @@ class Contact extends Component {
             <div class="col-full">
                 <h3>Contact</h3>
                 <h1>Drop Me A Line.</h1>
-
                 <p class="lead">{message}</p>
             </div>
         </div>
@@ -30,15 +32,14 @@ class Contact extends Component {
             <div class="col-eight tab-full contact__form">
                 <form name="contactForm" id="contactForm" method="post" action="">
                     <fieldset>
-
                     <div class="form-field">
-                        <input name="contactName" type="text" id="contactName" placeholder="Name" value="" minLength="2" required="" aria-required="true" class="full-width"/>
+                        <input name="contactName" type="text" id="contactName" placeholder="Name" minLength="2" required="" aria-required="true" class="full-width"/>
                     </div>
                     <div class="form-field">
-                        <input name="contactEmail" type="email" id="contactEmail" placeholder="Email" value="" required="" aria-required="true" class="full-width"/>
+                        <input name="contactEmail" type="email" id="contactEmail" placeholder="Email" required="" aria-required="true" class="full-width"/>
                     </div>
                     <div class="form-field">
-                        <input name="contactSubject" type="text" id="contactSubject" placeholder="Subject" value="" class="full-width"/>
+                        <input name="contactSubject" type="text" id="contactSubject" placeholder="Subject" class="full-width"/>
                     </div>
                     <div class="form-field">
                         <textarea name="contactMessage" id="contactMessage" placeholder="Message" rows="10" cols="50" required="" aria-required="true" class="full-width"></textarea>
@@ -70,16 +71,15 @@ class Contact extends Component {
 
             </div>
             <div class="col-four tab-full contact__infos">
-                <h4 class="h06">Phone</h4>
-                <p>Mobile: {phone}<br/>
+                <h4 class="h06">Phone:</h4>
+                <p>{phone}<br/>
                 </p>
 
-                <h4 class="h06">Email</h4>
+                <h4 class="h06">Email:</h4>
                 <p>{email}<br/>
-                {email}
                 </p>
 
-                <h4 class="h06">Address</h4>
+                <h4 class="h06">Address:</h4>
                 <p>
                 {city}<br/>
                 {country}<br/>

src/Components/Skills/Skills.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Image } from 'react-native';
 
 class Skills extends Component{
   render() {
@@ -28,6 +29,10 @@ class Skills extends Component{
           <div class="col-full text-center">
               <h3>About</h3>
               <h1>More About Me</h1>
+              <Image 
+                source={require('./images/profile.jpg')}  
+                style={{width: 100, height: 100, borderRadius: 400/ 2}} 
+                />
               <p class="lead">{bio}</p>
           </div>
       </div>