import React, { Component } from 'react';
import M from 'materialize-css/dist/js/materialize.min.js';

class About extends Component {
	componentDidMount() {
		var elem = document.querySelectorAll('.modal');
		var instance = M.Modal.init(elem, {
			opacity: 0.8
		});
	}
	render() {
		return (
			<div>
				<div id="modal1" className="modal">
					<div className="modal-content">
						<div className=" right-align">
							<button className="btn modal-close">&times;</button>
						</div>
						<p className="modal-title">About me</p>
						<img
							src={require('../images/profile-img.jpg')}
							alt="profile"
							class="profile-img"
						/>
						<p>
							Front End Developer with a concentration in Javascript frameworks and libraries such as React JS. Currently working at a digital solutions company writing front end code, and improving website performance. 
							Interested in opportunities to deliver solutions that
							combine clean code with well thought-out user-experience.
						</p>
					</div>
				</div>
			</div>
		);
	}
}




export default About;

@@ -30,15 +30,15 @@
 rom 
-'
+%22
 react
-'
+%22
 ;%0Aim
@@ -49,17 +49,17 @@
  M from 
-'
+%22
 material
@@ -92,17 +92,17 @@
 e.min.js
-'
+%22
 ;%0A%0Aclass
@@ -128,17 +128,18 @@
 onent %7B%0A
-%09
+  
 componen
@@ -152,18 +152,20 @@
 unt() %7B%0A
-%09%09
+    
 var elem
@@ -197,21 +197,23 @@
 All(
-'
+%22
 .modal
-');%0A%09%09
+%22);%0A    
 var 
@@ -244,19 +244,22 @@
 elem, %7B%0A
-%09%09%09
+      
 opacity:
@@ -266,19 +266,24 @@
  0.8
-%0A%09%09%7D);%0A%09%7D%0A%09
+,%0A    %7D);%0A  %7D%0A  
 rend
@@ -289,18 +289,20 @@
 der() %7B%0A
-%09%09
+    
 return (
@@ -306,21 +306,28 @@
 n (%0A
-%09%09%09%3Cdiv%3E%0A%09%09%09%09
+      %3Cdiv%3E%0A        
 %3Cdiv
@@ -358,21 +358,26 @@
 modal%22%3E%0A
-%09%09%09%09%09
+          
 %3Cdiv cla
@@ -400,22 +400,28 @@
 ntent%22%3E%0A
-%09%09%09%09%09%09
+            
 %3Cdiv cla
@@ -443,23 +443,30 @@
 align%22%3E%0A
-%09%09%09%09%09%09%09
+              
 %3Cbutton 
@@ -514,27 +514,39 @@
 on%3E%0A
-%09%09%09%09%09%09%3C/div%3E%0A%09%09%09%09%09%09
+            %3C/div%3E%0A            
 %3Cp c
@@ -585,26 +585,39 @@
 /p%3E%0A
-%09%09%09%09%09%09%3Cimg%0A%09%09%09%09%09%09%09
+            %3Cimg%0A              
 src=
@@ -625,17 +625,17 @@
 require(
-'
+%22
 ../image
@@ -655,86 +655,119 @@
 .jpg
-')%7D%0A%09%09%09%09%09%09%09alt=%22profile%22%0A%09%09%09%09%09%09%09class=%22profile-img%22%0A%09%09%09%09%09%09/%3E%0A%09%09%09%09%09%09%3Cp%3E%0A%09%09%09%09%09%09%09
+%22)%7D%0A              alt=%22profile%22%0A              class=%22profile-img%22%0A            /%3E%0A            %3Cp%3E%0A              
 Fron
@@ -827,16 +827,30 @@
 ameworks
+%0A             
  and lib
@@ -878,12 +878,16 @@
 JS. 
-Curr
+Most rec
 entl
@@ -892,19 +892,18 @@
 tly work
-ing
+ed
  at a di
@@ -907,16 +907,30 @@
  digital
+%0A             
  solutio
@@ -985,16 +985,30 @@
  website
+%0A             
  perform
@@ -1013,24 +1013,16 @@
 rmance. 
-%0A%09%09%09%09%09%09%09
 Interest
@@ -1071,15 +1071,22 @@
 hat%0A
-%09%09%09%09%09%09%09
+              
 comb
@@ -1143,66 +1143,84 @@
 ce.%0A
-%09%09%09%09%09%09%3C/p%3E%0A%09%09%09%09%09%3C/div%3E%0A%09%09%09%09
+            %3C/p%3E%0A          %3C/div%3E%0A        
 %3C/div%3E%0A
-%09%09%09
+      
 %3C/div%3E%0A
-%09%09);%0A%09
+    );%0A  
 %7D%0A%7D%0A%0A
-%0A%0A%0A
 expo

update about