Home
@@ -39,11 +39,20 @@ const Wrapper = styled.nav`
a {
font-size: 0.9rem;
color: #000;
+ font-size: 0.8rem;
line-height: 1.6;
letter-spacing: 2px;
text-decoration: none;
- font-family: "Ubuntu", sans-serif;
+ font-family: "Open Sans", sans-serif;
margin: 0 1rem;
+ font-weight: 400;
+ color: #707070;
+ }
+ #logo {
+ font-weight: 800 !important;
+ font-family: "Fira Sans", sans-serif !important;
+ color: #000 !important;
+ font-size: 1rem !important;
}
.nav_links {
display: flex;
From e297976db97323aa3d32c0161c9ef9868517693c Mon Sep 17 00:00:00 2001
From: Gregory Mianze <41749350+mianzegregory@users.noreply.github.com>
Date: Wed, 15 Sep 2021 14:40:06 +0300
Subject: [PATCH 06/12] switch to bottom navbar for portfolio subpages on
mobile
---
src/components/common/Appbar.js | 1 -
src/components/common/PageWrapper.js | 33 +++++++++++++++++++++++-----
2 files changed, 27 insertions(+), 7 deletions(-)
diff --git a/src/components/common/Appbar.js b/src/components/common/Appbar.js
index 38a703f..9ac3a24 100644
--- a/src/components/common/Appbar.js
+++ b/src/components/common/Appbar.js
@@ -1,4 +1,3 @@
-import React from "react";
import styled from "styled-components";
import { isMobile } from "react-device-detect";
import MobileAppbar from "../mobile/Appbar";
diff --git a/src/components/common/PageWrapper.js b/src/components/common/PageWrapper.js
index 20ce81f..c0ab509 100644
--- a/src/components/common/PageWrapper.js
+++ b/src/components/common/PageWrapper.js
@@ -43,7 +43,7 @@ const PageWrapper = styled.main`
}
}
@media (max-width: 1024px) {
- padding: 6rem 1%;
+ padding: 2rem 1%;
text-align: center;
justify-content: flex-start;
h1 {
@@ -56,13 +56,34 @@ const PageWrapper = styled.main`
}
@media(max-width: 500px){
.portfolio-routing-buttons {
- margin-top: 1rem;
- margin-bottom: -2rem;
- flex-direction: column;
- justify-content: center;
+ width: 100vw;
+ position: fixed;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ background-color: #fff;
+ left: 0;
+ bottom: 0;
+ z-index: 4;
+ box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
+ padding: 1rem;
button {
- margin: 0.5rem;
+ margin: 0.3rem;
+ font-size: 0.8rem;
+ background-color: transparent;
+ box-shadow: none;
+ margin-bottom: 2rem;
+ margin-top: 0;
+ color: #000;
+ padding: 0.3rem;
+ text-align: center;
+ border: none;
+ text-decoration: none;
+ display: inline-block;
font-size: 0.8rem;
+ font-family: "Open Sans", sans-serif;
+ font-weight: bold;
}
}
`;
From 79a740bbb75551036f0e2e01d2fb8d6eea4e213b Mon Sep 17 00:00:00 2001
From: Gregory Mianze <41749350+mianzegregory@users.noreply.github.com>
Date: Wed, 15 Sep 2021 14:41:54 +0300
Subject: [PATCH 07/12] add bottom margin to footer on mobile
---
src/components/common/Footer.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/common/Footer.js b/src/components/common/Footer.js
index 77c74a9..18ccab7 100644
--- a/src/components/common/Footer.js
+++ b/src/components/common/Footer.js
@@ -50,5 +50,6 @@ const Wrapper = styled.footer`
}
@media(max-width: 500px){
flex-direction: column;
+ margin-bottom: 3rem;
}
`;
From d018d280d00870dfbd11f76f8576ee08b615404e Mon Sep 17 00:00:00 2001
From: Gregory Mianze <41749350+mianzegregory@users.noreply.github.com>
Date: Wed, 15 Sep 2021 14:58:27 +0300
Subject: [PATCH 08/12] add page transitions
---
src/pages/About.js | 63 +++++++++++++++++---------------
src/pages/Blog.js | 7 +++-
src/pages/Landing.js | 43 ++++++++++++----------
src/pages/Portfolio.js | 27 ++++++++------
src/pages/Portfolio/Events.js | 63 +++++++++++++++++---------------
src/pages/Portfolio/Flatlays.js | 3 ++
src/pages/Portfolio/Portraits.js | 3 ++
src/pages/Portfolio/Shoots.js | 63 +++++++++++++++++---------------
8 files changed, 149 insertions(+), 123 deletions(-)
diff --git a/src/pages/About.js b/src/pages/About.js
index 64b1b00..a23e77a 100644
--- a/src/pages/About.js
+++ b/src/pages/About.js
@@ -2,39 +2,42 @@ import React from "react";
import PageWrapper from "../components/common/PageWrapper";
import Image from "../components/common/Image";
import ImagesContainer from "../components/common/ImagesContainer";
+import Fade from "@material-ui/core/Fade";
const About = () => {
return (
-
-
- “A picture is a secret about a secret, the more it tells you the less
- you know.” - Diane Arbus
-
-
-
- I am a portrait and event-specialized photographer with a tireless
- work ethic and a vibrant creative side that often leads me to explore
- other diverse areas of photography. My keen eye and resourcefulness
- enable me to capture whatever image is necessary to convey a desired
- message. Having an active creative side allows me to give a unique
- twist to each photo in order to create a compelling image that lasts
- in the mind of an audience.
-
-
-
+
+
+
+ “A picture is a secret about a secret, the more it tells you the less
+ you know.” - Diane Arbus
+
+
+
+ I am a portrait and event-specialized photographer with a tireless
+ work ethic and a vibrant creative side that often leads me to
+ explore other diverse areas of photography. My keen eye and
+ resourcefulness enable me to capture whatever image is necessary to
+ convey a desired message. Having an active creative side allows me
+ to give a unique twist to each photo in order to create a compelling
+ image that lasts in the mind of an audience.
+
+
+
+
);
};
diff --git a/src/pages/Blog.js b/src/pages/Blog.js
index 048d0e5..6b9c70f 100644
--- a/src/pages/Blog.js
+++ b/src/pages/Blog.js
@@ -1,8 +1,13 @@
+import { Fade } from "@material-ui/core";
import React from "react";
import PageWrapper from "../components/common/PageWrapper";
const Blog = () => {
- return
;
+ return (
+
+
+ );
};
export default Blog;
diff --git a/src/pages/Landing.js b/src/pages/Landing.js
index 89b6228..7e82c63 100644
--- a/src/pages/Landing.js
+++ b/src/pages/Landing.js
@@ -1,3 +1,4 @@
+import { Fade } from "@material-ui/core";
import React from "react";
import Image from "../components/common/Image";
import ImagesContainer from "../components/common/ImagesContainer";
@@ -5,26 +6,28 @@ import PageWrapper from "../components/common/PageWrapper";
const Landing = () => {
return (
-
-
- “Taking pictures is savouring life intensely, every hundredth of a
- second” - Marc Riboud
-
-
-
-
+
+
+
+ “Taking pictures is savouring life intensely, every hundredth of a
+ second” - Marc Riboud
+
+
+
+
+
);
};
diff --git a/src/pages/Portfolio.js b/src/pages/Portfolio.js
index 5919de0..1e76f11 100644
--- a/src/pages/Portfolio.js
+++ b/src/pages/Portfolio.js
@@ -4,23 +4,26 @@ import Portraits from "./Portfolio/Portraits";
import Flatlays from "./Portfolio/Flatlays";
import Events from "./Portfolio/Events";
import Shoots from "./Portfolio/Shoots";
+import { Fade } from "@material-ui/core";
const Portfolio = () => {
const [subpage, setSubpage] = useState(0);
return (
-
-
- setSubpage(0)}>Portraits
- setSubpage(1)}>Flatlays
- setSubpage(2)}>Events
- setSubpage(3)}>Shoots
-
- {subpage === 0 &&
+
+
+
+ setSubpage(0)}>Portraits
+ setSubpage(1)}>Flatlays
+ setSubpage(2)}>Events
+ setSubpage(3)}>Shoots
+
+ {subpage === 0 &&
+
);
};
diff --git a/src/pages/Portfolio/Events.js b/src/pages/Portfolio/Events.js
index 1b806ef..d74bd20 100644
--- a/src/pages/Portfolio/Events.js
+++ b/src/pages/Portfolio/Events.js
@@ -1,38 +1,41 @@
+import { Slide } from "@material-ui/core";
import Image from "../../components/common/Image";
import { SixImagesContainer } from "../../components/common/ImagesContainer";
const Events = () => {
return (
-
-
-
-
-
-
+
+
+
+
+
+
+
+
);
};
diff --git a/src/pages/Portfolio/Flatlays.js b/src/pages/Portfolio/Flatlays.js
index 4682d74..6f8baae 100644
--- a/src/pages/Portfolio/Flatlays.js
+++ b/src/pages/Portfolio/Flatlays.js
@@ -1,8 +1,10 @@
+import { Slide } from "@material-ui/core";
import Image from "../../components/common/Image";
import { SixImagesContainer } from "../../components/common/ImagesContainer";
const Flatlays = () => {
return (
+
{
/>
+
);
};
diff --git a/src/pages/Portfolio/Portraits.js b/src/pages/Portfolio/Portraits.js
index c7f9366..390d94c 100644
--- a/src/pages/Portfolio/Portraits.js
+++ b/src/pages/Portfolio/Portraits.js
@@ -1,8 +1,10 @@
+import { Slide } from "@material-ui/core";
import Image from "../../components/common/Image";
import { SixImagesContainer } from "../../components/common/ImagesContainer";
const Portraits = () => {
return (
+
{
/>
+
);
};
diff --git a/src/pages/Portfolio/Shoots.js b/src/pages/Portfolio/Shoots.js
index cfa9017..3a10b0b 100644
--- a/src/pages/Portfolio/Shoots.js
+++ b/src/pages/Portfolio/Shoots.js
@@ -1,38 +1,41 @@
+import { Slide } from "@material-ui/core";
import Image from "../../components/common/Image";
import { SixImagesContainer } from "../../components/common/ImagesContainer";
const Shoots = () => {
return (
-
-
-
-
-
-
+
+
+
+
+
+
+
+
);
};
From 3cf52faebc72e1a28aa37e60e812707a3dee5af0 Mon Sep 17 00:00:00 2001
From: Gregory Mianze <41749350+mianzegregory@users.noreply.github.com>
Date: Wed, 15 Sep 2021 15:06:39 +0300
Subject: [PATCH 09/12] add loading page
---
src/App.js | 9 +++++----
src/pages/Loading.js | 43 +++++++++++++++++++++++++++++++++++++++++++
2 files changed, 48 insertions(+), 4 deletions(-)
create mode 100644 src/pages/Loading.js
diff --git a/src/App.js b/src/App.js
index b9f99aa..7fc4be1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,16 +4,17 @@ import Blog from "./pages/Blog";
import Portfolio from "./pages/Portfolio";
import About from "./pages/About";
import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
import { Slide } from "@material-ui/core";
import Appbar from "./components/common/Appbar";
import Footer from "./components/common/Footer";
+import LoadingPage from "./pages/Loading";
function App() {
const [loading, setLoading] = useState(true);
useEffect(() => {
- setTimeout(() => setLoading(false), 900);
+ setTimeout(() => setLoading(false), 1500);
// AOS.init({
// duration: 1000,
// });
@@ -23,7 +24,7 @@ function App() {
return loading === false ? (
+
) : (
);
}
diff --git a/src/pages/Loading.js b/src/pages/Loading.js
new file mode 100644
index 0000000..95d1664
--- /dev/null
+++ b/src/pages/Loading.js
@@ -0,0 +1,43 @@
+import { Zoom } from "@material-ui/core";
+
+import styled from "styled-components";
+
+const LoadingPage = () => {
+ return (
+
+
+ SHARONJAOKO
+ Event & Portrait photographer
+
+
+ );
+};
+
+export default LoadingPage;
+
+const Wrapper = styled.main`
+ width: 100vw;
+ height: 100vh;
+ max-width: 100%;
+ max-height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ h1,
+ p {
+ text-align: center;
+ margin: 0.5rem;
+ }
+ h1 {
+ font-size: 3rem;
+ font-weight: bold;
+ font-family: "Open Sans", sans-serif;
+ color: #000;
+ }
+ p {
+ font-size: 1.5rem;
+ font-family: "Fira Sans", sans-serif;
+ color: #707070;
+ }
+`;
From 61f7dda33c7ffc38fb4388e68c55e1f76587a9f4 Mon Sep 17 00:00:00 2001
From: Gregory Mianze <41749350+mianzegregory@users.noreply.github.com>
Date: Wed, 15 Sep 2021 15:08:19 +0300
Subject: [PATCH 10/12] change fonts on loading page mobile
---
src/pages/Loading.js | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/src/pages/Loading.js b/src/pages/Loading.js
index 95d1664..5769343 100644
--- a/src/pages/Loading.js
+++ b/src/pages/Loading.js
@@ -40,4 +40,12 @@ const Wrapper = styled.main`
font-family: "Fira Sans", sans-serif;
color: #707070;
}
+ @media (max-width: 500px) {
+ h1 {
+ font-size: 1.6rem;
+ }
+ p {
+ font-size: 0.8rem;
+ }
+ }
`;
From 86600f864df7c7a787a64ef591d9a64ec38766f0 Mon Sep 17 00:00:00 2001
From: Gregory Mianze <41749350+mianzegregory@users.noreply.github.com>
Date: Wed, 15 Sep 2021 15:09:45 +0300
Subject: [PATCH 11/12] make fonts bolder for links
---
src/components/common/Appbar.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/common/Appbar.js b/src/components/common/Appbar.js
index 9ac3a24..74daac7 100644
--- a/src/components/common/Appbar.js
+++ b/src/components/common/Appbar.js
@@ -38,13 +38,13 @@ const Wrapper = styled.nav`
a {
font-size: 0.9rem;
color: #000;
+ font-weight: 600;
font-size: 0.8rem;
line-height: 1.6;
letter-spacing: 2px;
text-decoration: none;
font-family: "Open Sans", sans-serif;
margin: 0 1rem;
- font-weight: 400;
color: #707070;
}
#logo {
From 9ba5a681aa151d1a380ee789dbc40900c21947aa Mon Sep 17 00:00:00 2001
From: Gregory Mianze <41749350+mianzegregory@users.noreply.github.com>
Date: Wed, 15 Sep 2021 15:14:59 +0300
Subject: [PATCH 12/12] fix mobile appbar export
---
src/components/mobile/Appbar.js | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/components/mobile/Appbar.js b/src/components/mobile/Appbar.js
index 25650f7..cc36391 100644
--- a/src/components/mobile/Appbar.js
+++ b/src/components/mobile/Appbar.js
@@ -2,7 +2,7 @@ import { slide as Menu } from "react-burger-menu";
import styled from "styled-components";
import { Link } from "react-router-dom";
-export default (props) => {
+const MobileAppbar = (props) => {
return (
@@ -20,6 +20,8 @@ export default (props) => {
);
};
+export default MobileAppbar;
+
const ToolbarWrapper = styled.div`
background-color: transparent;
position: fixed;