implementing cloudinary API and creating galleries with css grid, add…

…ing about and contact page responcive layout

package.json

@@ -6,20 +6,15 @@
     "axios": "^0.19.0",
     "cloudinary-react": "^1.3.0",
     "emailjs-com": "^2.4.1",
-    "firebase": "^7.3.0",
-    "lodash": "^4.17.15",
     "node-sass": "^4.13.0",
-    "prop-types": "^15.7.2",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-full-page": "^0.1.7",
-    "react-page-scroller": "^2.0.2-beta",
+    "react-icons": "^3.8.0",
     "react-photoswipe": "^1.3.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.3.0",
-    "react-scroll": "^1.7.15",
-    "react-waypoint": "^9.0.2",
-    "scroll-to-target": "0.0.8"
+    "react-waypoint": "^9.0.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -3,6 +3,7 @@
   padding: 0;
   box-sizing: border-box;
   outline: none;
+
 }
 /* html{
   font-size: 62.5%;
@@ -20,7 +21,7 @@ body{
   font-family: "Oxygen" , sans-serif;
   font-weight: 300;
   box-sizing: border-box;
-  font-size: 5rem;
+
 }
 
 h1{
@@ -49,4 +50,11 @@ body::-webkit-scrollbar-track {
 body::-webkit-scrollbar-thumb {
 background-color: darkgrey;
 outline: 1px solid slategrey;
+}
+
+@media (max-width: 800px) {
+
+html{
+  font-size: 14px;
+}
 }

src/components/form-input/form-input.cmp.jsx

@@ -1,15 +1,8 @@
 import React from 'react';
 import './form-input.scss';
 
-const FormInput = ({ handleChange, label, placeholder,textarea, ...otherProps }) => (
+const FormInput = ({ handleChange, placeholder,textarea, ...otherProps }) => (
   <div className="group">
-    {
-      label ?
-        (<label className='form-input-label'>
-          {label}
-        </label>)
-        : null
-    }
     {
     textarea ?
         (<textarea className="form-input" onChange={handleChange} {...otherProps} placeholder={placeholder} />)

src/components/form-input/form-input.scss

@@ -4,7 +4,7 @@ $main-color: black;
 
 
 .group {
-  margin-top: 2rem;
+  margin-top: 1rem;
   width: 100%;
 
   .form-input{
@@ -17,7 +17,7 @@ $main-color: black;
     width: 100%;
     border: none;
     border-radius: 3px;
-    border: .5px solid white;
+    border: .5px solid grey;
     margin-top: 10px;
     font-family: inherit;
     cursor: pointer;
@@ -69,3 +69,7 @@ input[type=number]::-webkit-outer-spin-button {
 input:focus::placeholder, textarea:focus::placeholder {
   color: transparent;
 }
+
+input[type=number] {
+  -moz-appearance:textfield;
+}

src/pages/about/about.cmp.jsx

@@ -1,28 +1,29 @@
 import React from 'react';
 import './about.scss';
 import { Waypoint } from 'react-waypoint';
+import { Link } from 'react-router-dom';
+import { FaInstagram } from 'react-icons/fa';
+import { FaFacebookSquare } from 'react-icons/fa';
 
 class AboutPage extends React.Component {
 	constructor() {
 		super();
-    this.state = {
-      revield:false
-    };
-  }
-
-  handleWaypoint = () => {
-    this.setState(prevState => ({
-      revield: !prevState.revield
-    }));
-
-  }
+		this.state = {
+			revield: false
+		};
+	}
 
+	handleWaypoint = () => {
+		this.setState((prevState) => ({
+			revield: !prevState.revield
+		}));
+	};
 
-  render() {
-    console.log(this.state.revield);
+	render() {
+		console.log(this.state.revield);
 		return (
 			<div className="about flex-c">
-				<Waypoint onEnter={this.handleWaypoint} onLeave={this.handleWaypoint} />
+				<Waypoint onEnter={this.handleWaypoint} />
 				<div className={`letters ${this.state.revield ? 'show' : ''}`}>Photographer.</div>
 				<div className="backround" />
 				<div className={`about-text flex-c ${this.state.revield ? 'show' : ''}`}>
@@ -33,9 +34,24 @@ class AboutPage extends React.Component {
 						me full controll of the scenery and opportunity for more exiting pictures. I learned by observing the styles
 						and techniques of world famous photographers.{' '}
 					</p>
+					<div className="about-social flex-c">
+						<Link className="link-button" to="/contact">
+							Contact me
+						</Link>
+						<a href="https://www.instagram.com/iliyan.tsachev/" target="blank">
+							<FaInstagram className="react-icons" />
+						</a>
+						<a href="https://www.facebook.com/itsachevphotography/?modal=admin_todo_tour" target="blank">
+							<FaFacebookSquare className="react-icons" />
+						</a>
+					</div>
 				</div>
 				<div className="about-image-area flex-c">
-					<div className={`about-img ${this.state.revield ? 'show' : ''}`} />
+					<img
+						src="https://res.cloudinary.com/ilnphotography/image/upload/v1578492915/HomePage/shadow_zsw6h2.png"
+						className={`about-img ${this.state.revield ? 'show' : ''}`}
+						alt="iliyan-portrait"
+					/>
 				</div>
 			</div>
 		);

src/pages/about/about.scss

@@ -31,9 +31,7 @@
 
   &-img {
     height: 100%;
-    width: 50rem;
     opacity: 0.99;
-    background-image: url("https://res.cloudinary.com/ilnphotography/image/upload/v1578492915/HomePage/shadow_zsw6h2.png");
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
@@ -74,6 +72,7 @@
   &-image-area {
     position: relative;
     width: 60%;
+    align-items:flex-end;
   }
 
   &-title {
@@ -85,8 +84,58 @@
     left: -11rem;
   }
 
+  .about-social{
+    margin-top: 2rem;
+  }
+  .react-icons{
+    margin-left:1rem;
+    width: 2rem;
+    height: 2rem;
+    vertical-align: middle;
+    justify-content: center;
+    align-items:center;
+    color: #343333;
+  }
+
+  .link-button{
+    border: 1px solid #343333;
+    border-radius: 2px;
+    color: #525050;
+    padding:0.5rem 1rem;
+  }
+
   .show{
     transform:translate(0%);
     opacity: 1;
   }
-}
+}
+
+
+@media (max-width: 1024px) {
+  .about{
+    flex-direction: column-reverse;
+    height: 100vh;
+    .letters {
+      font-size: 7rem;
+    }
+
+  &-text,
+  &-image-area {
+    width: 100%;
+    flex-direction: column;
+
+  }
+
+  .about-text {
+    margin-top: 1rem;
+    justify-content: flex-start;
+    align-items: flex-start;
+    color: #525050;
+  }
+
+  &-img {
+    box-shadow: 0 4px 15px -15px rgb(86, 86, 86);
+    width: 100%;
+  }
+  }
+}