From 180d458277b418cd983635d125328e5e07a46646 Mon Sep 17 00:00:00 2001 From: rodzy <49137701+rodzy@users.noreply.github.com> Date: Tue, 22 Sep 2020 14:54:00 -0600 Subject: [PATCH 01/12] =?UTF-8?q?Recoloring=20darkmode=20elements?= =?UTF-8?q?=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/about.js | 6 ++--- src/components/services.js | 6 ++--- src/styles/contact.css | 4 ++-- src/styles/main.css | 45 +++++++++++++++++++++++++++++++++++--- src/styles/stack.css | 2 +- 5 files changed, 51 insertions(+), 12 deletions(-) diff --git a/src/components/about.js b/src/components/about.js index 73dd646..8371b2e 100644 --- a/src/components/about.js +++ b/src/components/about.js @@ -13,13 +13,13 @@ const Container = styled.div` width: 100%; padding-top: 5em; padding-bottom: 5em; - background: #292929; + background: #1c1f24; display: flex; justify-content: center; ` const Section = styled.section` - background-color: #292929; + background-color: #1c1f24; color: #ffffff; padding-bottom: 100px; ` @@ -58,7 +58,7 @@ const About = () => { {TEAM.map(item => (

{item.name}

{item.title}

diff --git a/src/components/services.js b/src/components/services.js index 28fad3f..ca0e878 100644 --- a/src/components/services.js +++ b/src/components/services.js @@ -15,7 +15,7 @@ const Container = styled.div` width: 100%; padding-top: 5em; padding-bottom: 3em; - background: #292929; + background: #1c1f24; display: flex; justify-content: center; ` @@ -27,7 +27,7 @@ const SectionParagraph = styled.h5` ` const Section = styled.section` - background-color: #292929; + background-color: #1c1f24; color: #ffffff; padding-bottom: 100px; ` @@ -50,7 +50,7 @@ const Services = () => { {SERVICES.map(item => ( -
+
{item.title} diff --git a/src/styles/contact.css b/src/styles/contact.css index c173da3..4d5a784 100644 --- a/src/styles/contact.css +++ b/src/styles/contact.css @@ -6,7 +6,7 @@ } .Card-Section-Dark { - background-color: #111; + background-color: #181A1E; padding-top: 100px; padding-bottom: 100px; position: relative; @@ -36,7 +36,7 @@ } .Card-Container-Dark { - background-color: #232323; + background-color: #1c1f24; display: flex; width: 100%; flex-direction: column; diff --git a/src/styles/main.css b/src/styles/main.css index c08ced0..23f8652 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -12,7 +12,7 @@ width: 100%; padding-top: 5em; padding-bottom: 3em; - background: #111; + background: #181a1e; display: flex; justify-content: center; transition: background 0.5s ease; @@ -35,7 +35,7 @@ } .Section-Dark { - background-color: #111; + background-color: #181a1e; color: #ffffff; padding-bottom: 100px; transition: background-color 0.5s ease; @@ -109,7 +109,7 @@ } .Main-Card-Content-Dark { - background-color: #292929; + background-color: #1c1f24; -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -139,7 +139,46 @@ -webkit-transition: all linear 0.1s; transition: all linear 0.1s; transition: background-color 0.5s ease; +} +.Second-Card-Content-Dark { + background-color: #181a1e; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0.75rem; + padding: 1.5rem; + border-top: 6px solid #039be5; + box-shadow: 0px 4px 8px rgba(60, 45, 111, 0.1), + 0px 1px 3px rgba(60, 45, 111, 0.15); + border-radius: 5px; + text-align: center; + cursor: pointer; + -webkit-transition: all linear 0.1s; + transition: all linear 0.1s; + transition: background-color 0.5s ease; +} +.Second-Card-Content-Dark:hover { + -webkit-transform: translateY(-1px); + -ms-transform: translateY(-1px); + transform: translateY(-1px); + box-shadow: 0px 4px 16px rgba(60, 45, 111, 0.1), + 0px 1px 3px rgba(60, 45, 111, 0.15); } @media (max-width: 700px) { diff --git a/src/styles/stack.css b/src/styles/stack.css index 9a24cc8..271ee85 100644 --- a/src/styles/stack.css +++ b/src/styles/stack.css @@ -15,7 +15,7 @@ } .stacklogo-dark { - background-color: #292929; + background-color: #1c1f24; border-radius: 10px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); display: flex; From 47f7932ab8916b90fb91e0ba6d75126932a483b6 Mon Sep 17 00:00:00 2001 From: rodzy <49137701+rodzy@users.noreply.github.com> Date: Tue, 22 Sep 2020 15:42:59 -0600 Subject: [PATCH 02/12] =?UTF-8?q?Updated=20header=20to=20be=20compatible?= =?UTF-8?q?=20with=20darkmode=20color=20scheme=20=F0=9F=8E=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Layout/header.js | 99 +++++++--------------- src/styles/contact.css | 2 + src/styles/header.css | 144 ++++++++++++++++++++++++++++++++ 3 files changed, 178 insertions(+), 67 deletions(-) create mode 100644 src/styles/header.css diff --git a/src/components/Layout/header.js b/src/components/Layout/header.js index 31da36b..2201663 100644 --- a/src/components/Layout/header.js +++ b/src/components/Layout/header.js @@ -3,6 +3,7 @@ import React, { useContext, Fragment } from "react" import Logomain from "../logomain" import styled from "@emotion/styled" import { ModeContext } from "../../context/ModeContext" +import "../../styles/header.css" const WrapperDiv = styled.div` position: sticky; @@ -12,14 +13,6 @@ const WrapperDiv = styled.div` z-index: 10; ` -const Head = styled.header` - background-color: var(--xstyled-colors-bg, #292929); - border-bottom-width: 1px; - border-bottom-style: solid; - border-color: var(--xstyled-colors-border, #1976d2); - padding: 16px 0px; -` - const InsideDiv = styled.div` max-width: 1200px; padding-left: 20px; @@ -45,9 +38,9 @@ const LogoContainer = styled.div` const SVG = styled.svg` fill: #ffffff; - transition:fill 0.15s ease; + transition: fill 0.15s ease; &:hover { - fill:#039be5; + fill: #039be5; cursor: pointer; } @media screen and (max-width: 600px) { @@ -75,36 +68,6 @@ const MainLink = styled.a` text-decoration: none; ` -const ComboLanguage = styled.select` - font-size: 17px; - font: inherit; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - line-height: -4vh; - text-rendering: auto; - width: 100%; - border-radius: 0.5rem; - border: 2px solid #5a5a5a; - background: #333; - color: white; - padding-left: 40px; - padding-right: 20px; - padding-bottom:8px; - padding-top:8px; - transition: border-color 0.15s ease; - cursor: pointer; - - &:focus { - border: 2px solid #039be5; - } - - @media (max-width: 700px) { - display: none; - } -` - const NavList = styled.nav` height: 40px; margin-left: 10px; @@ -154,20 +117,6 @@ const SmallContainer = styled.div` overflow: auto; ` -const SvG = styled.svg` - position: absolute; - left: 8px; - top: 8px; - z-index: 1; - user-select: none; - pointer-events: none; - fill: white; - - @media (max-width: 700px) { - display: none; - } -` - const ButtonSwitch = styled.button` appearance: none; display: flex; @@ -180,13 +129,12 @@ const ButtonSwitch = styled.button` ` const Header = ({ siteTitle }) => { - - const { mode, setMode } = useContext(ModeContext); - + const { mode, setMode } = useContext(ModeContext) + return ( - +
@@ -216,46 +164,63 @@ const Header = ({ siteTitle }) => { position: "relative", }} > - - - + +
- Pricing + + Pricing + - Contact us + + Contact us + setMode(!mode)}> {!mode ? ( - - + ) : ( @@ -267,7 +232,7 @@ const Header = ({ siteTitle }) => { - + ) diff --git a/src/styles/contact.css b/src/styles/contact.css index 4d5a784..3e9dee7 100644 --- a/src/styles/contact.css +++ b/src/styles/contact.css @@ -3,6 +3,7 @@ padding-top: 100px; padding-bottom: 100px; position: relative; + transition: background-color 0.5s ease; } .Card-Section-Dark { @@ -10,6 +11,7 @@ padding-top: 100px; padding-bottom: 100px; position: relative; + transition: background-color 0.5s ease; } .Card-Container { diff --git a/src/styles/header.css b/src/styles/header.css new file mode 100644 index 0000000..d179c2f --- /dev/null +++ b/src/styles/header.css @@ -0,0 +1,144 @@ +.Main-Header { + background-color: #fff; + border-bottom-width: 2px; + border-bottom-style: solid; + border-color: #1976d2; + padding: 16px 0px; + transition: background-color 0.5s ease; +} + +.Main-Header-Dark { + background-color: #1c1f24; + border-bottom-width: 2px; + border-bottom-style: solid; + border-color: #1976d2; + padding: 16px 0px; + transition: background-color 0.5s ease; +} + +.NavLink-Element { + display: flex; + -webkit-box-align: center; + align-items: center; + color: #222; + height: 34px; + margin-right: 16px; + text-decoration: none; +} + +.NavLink-Element:hover, +.NavLink-Element-Dark:hover { + color: #039be5; + text-decoration: none; +} + +.NavLink-Element-Dark { + display: flex; + -webkit-box-align: center; + align-items: center; + color: #fff; + height: 34px; + margin-right: 16px; + text-decoration: none; +} + +.Combo-light { + font-size: 17px; + font: inherit; + outline: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + line-height: -4vh; + text-rendering: auto; + width: 100%; + border-radius: 0.5rem; + border: 2px solid #5a5a5a; + background: #dedede; + color: #222; + padding-left: 40px; + padding-right: 20px; + padding-bottom: 8px; + padding-top: 8px; + transition: border-color 0.15s ease; + cursor: pointer; +} + +.Combo-light:focus { + border: 2px solid #039be5; +} + +.Combo-Dark { + font-size: 17px; + font: inherit; + outline: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + line-height: -4vh; + text-rendering: auto; + width: 100%; + border-radius: 0.5rem; + border: 2px solid #5a5a5a; + background: #333; + color: white; + padding-left: 40px; + padding-right: 20px; + padding-bottom: 8px; + padding-top: 8px; + transition: border-color 0.15s ease; + cursor: pointer; +} + +.Combo-Dark:focus { + border: 2px solid #039be5; +} + +.svg-icon-light { + position: absolute; + left: 8px; + top: 8px; + z-index: 1; + user-select: none; + pointer-events: none; + fill: #222; +} + +.svg-icon-dark { + position: absolute; + left: 8px; + top: 8px; + z-index: 1; + user-select: none; + pointer-events: none; + fill: #fff; +} + +.svg-moon { + fill: #222; + transition: fill 0.15s ease; +} +.svg-moon:hover, +.svg-sun:hover { + fill: #039be5; + cursor: pointer; +} + +.svg-sun { + fill: #ffffff; + transition: fill 0.15s ease; +} + +@media (max-width: 700px) { + .Combo-light, + .Combo-Dark, + .svg-icon-dark, + .svg-icon-light { + display: none; + } + .svg-moon, + .svg-sun { + margin-right: 40px; + width: 30px; + } +} From d4f502827a6d80a2cdac5094c92b6f2e34deb2fa Mon Sep 17 00:00:00 2001 From: rodzy <49137701+rodzy@users.noreply.github.com> Date: Tue, 22 Sep 2020 16:16:54 -0600 Subject: [PATCH 03/12] =?UTF-8?q?[Fix]=20Tech=20stack=20visual=20bug?= =?UTF-8?q?=E2=9C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Layout/header.js | 33 ++------------------------- src/components/Stack/CardComponent.js | 12 +++++----- src/styles/stack.css | 21 ++++++++--------- 3 files changed, 18 insertions(+), 48 deletions(-) diff --git a/src/components/Layout/header.js b/src/components/Layout/header.js index 2201663..b5ec3dd 100644 --- a/src/components/Layout/header.js +++ b/src/components/Layout/header.js @@ -36,18 +36,6 @@ const LogoContainer = styled.div` margin-right: 16px; ` -const SVG = styled.svg` - fill: #ffffff; - transition: fill 0.15s ease; - &:hover { - fill: #039be5; - cursor: pointer; - } - @media screen and (max-width: 600px) { - margin-right: 40px; - width: 30px; - } -` const Title = styled.h2` display: block; font-weight: 900; @@ -96,23 +84,6 @@ const NavItems = styled.li` line-height: 1.2; ` -const NavLinks = styled.a` - appearance: none; - color: #fff; - display: flex; - padding: 0px 10px; - background-color: transparent; - border: 0px; - transition: color 300ms ease 0s; - cursor: pointer; - text-decoration: none; - - &:hover { - color: #039be5; - text-decoration: none; - } -` - const SmallContainer = styled.div` overflow: auto; ` @@ -215,7 +186,7 @@ const Header = ({ siteTitle }) => { ) : ( - { className="svg-sun" > - + )} diff --git a/src/components/Stack/CardComponent.js b/src/components/Stack/CardComponent.js index 241f714..ff75724 100644 --- a/src/components/Stack/CardComponent.js +++ b/src/components/Stack/CardComponent.js @@ -7,22 +7,22 @@ const Card = ({ image, title, description }) => { return (
-
-
+
+
{title}
-
+

{title}

{description}

-
-
+
+
{title} Date: Tue, 22 Sep 2020 16:22:46 -0600 Subject: [PATCH 04/12] Refactor techstack images folder --- src/data/firstrow.js | 9 ++++++--- src/data/fourthrow.js | 6 +++--- src/data/secondrow.js | 6 +++--- src/data/thirdrow.js | 6 +++--- src/images/{ => techstack}/angular-icon-1.svg | 0 src/images/{ => techstack}/dot-net-core-7.svg | 0 src/images/{ => techstack}/express-109.svg | 0 src/images/{ => techstack}/gatsby.svg | 0 src/images/{ => techstack}/laravel-2.svg | 0 src/images/{ => techstack}/microsoft-sql-server.svg | 0 src/images/{ => techstack}/mysql-6.svg | 0 src/images/{ => techstack}/netlify.svg | 0 src/images/{ => techstack}/nextjs-3 (1).svg | 0 src/images/{ => techstack}/nodejs-icon.svg | 0 src/images/{ => techstack}/postgresql.svg | 0 src/images/{ => techstack}/react-2.svg | 0 src/images/{ => techstack}/vercel_logo.svg | 0 17 files changed, 15 insertions(+), 12 deletions(-) rename src/images/{ => techstack}/angular-icon-1.svg (100%) rename src/images/{ => techstack}/dot-net-core-7.svg (100%) rename src/images/{ => techstack}/express-109.svg (100%) rename src/images/{ => techstack}/gatsby.svg (100%) rename src/images/{ => techstack}/laravel-2.svg (100%) rename src/images/{ => techstack}/microsoft-sql-server.svg (100%) rename src/images/{ => techstack}/mysql-6.svg (100%) rename src/images/{ => techstack}/netlify.svg (100%) rename src/images/{ => techstack}/nextjs-3 (1).svg (100%) rename src/images/{ => techstack}/nodejs-icon.svg (100%) rename src/images/{ => techstack}/postgresql.svg (100%) rename src/images/{ => techstack}/react-2.svg (100%) rename src/images/{ => techstack}/vercel_logo.svg (100%) diff --git a/src/data/firstrow.js b/src/data/firstrow.js index f195ad8..4f7f2ae 100644 --- a/src/data/firstrow.js +++ b/src/data/firstrow.js @@ -1,21 +1,24 @@ -import reactLogo from "../images/react-2.svg" -import nextjs from "../images/nextjs-3 (1).svg" -import gatsby from "../images/gatsby.svg" +import reactLogo from "../images/techstack/react-2.svg" +import nextjs from "../images/techstack/nextjs-3 (1).svg" +import gatsby from "../images/techstack/gatsby.svg" export const FIRSTROW = [ { image: reactLogo, title: "React", description: "Frontend development", + darkmode: false, }, { image: nextjs, title: "Nextjs", description: "Frontend development", + darkmode: true, }, { image: gatsby, title: "Gatsby", description: "Frontend development", + darkmode: false, }, ] diff --git a/src/data/fourthrow.js b/src/data/fourthrow.js index 1126f6d..b41af8c 100644 --- a/src/data/fourthrow.js +++ b/src/data/fourthrow.js @@ -1,6 +1,6 @@ -import expressLogo from "../images/express-109.svg" -import postgLogo from "../images/postgresql.svg" -import mysqlLogo from "../images/mysql-6.svg" +import expressLogo from "../images/techstack/express-109.svg" +import postgLogo from "../images/techstack/postgresql.svg" +import mysqlLogo from "../images/techstack/mysql-6.svg" export const FOURTHDROW = [ { diff --git a/src/data/secondrow.js b/src/data/secondrow.js index 057199e..4809a69 100644 --- a/src/data/secondrow.js +++ b/src/data/secondrow.js @@ -1,6 +1,6 @@ -import angularLogo from "../images/angular-icon-1.svg" -import netlifylogo from "../images/netlify.svg" -import vercellogo from "../images/vercel_logo.svg" +import angularLogo from "../images/techstack/angular-icon-1.svg" +import netlifylogo from "../images/techstack/netlify.svg" +import vercellogo from "../images/techstack/vercel_logo.svg" export const SECONDROW = [ { diff --git a/src/data/thirdrow.js b/src/data/thirdrow.js index 3c00c94..d16a130 100644 --- a/src/data/thirdrow.js +++ b/src/data/thirdrow.js @@ -1,6 +1,6 @@ -import dotnetLogo from "../images/dot-net-core-7.svg" -import laravelLogo from "../images/laravel-2.svg" -import nodeLogo from "../images/nodejs-icon.svg" +import dotnetLogo from "../images/techstack/dot-net-core-7.svg" +import laravelLogo from "../images/techstack/laravel-2.svg" +import nodeLogo from "../images/techstack/nodejs-icon.svg" export const THIRDROW = [ { diff --git a/src/images/angular-icon-1.svg b/src/images/techstack/angular-icon-1.svg similarity index 100% rename from src/images/angular-icon-1.svg rename to src/images/techstack/angular-icon-1.svg diff --git a/src/images/dot-net-core-7.svg b/src/images/techstack/dot-net-core-7.svg similarity index 100% rename from src/images/dot-net-core-7.svg rename to src/images/techstack/dot-net-core-7.svg diff --git a/src/images/express-109.svg b/src/images/techstack/express-109.svg similarity index 100% rename from src/images/express-109.svg rename to src/images/techstack/express-109.svg diff --git a/src/images/gatsby.svg b/src/images/techstack/gatsby.svg similarity index 100% rename from src/images/gatsby.svg rename to src/images/techstack/gatsby.svg diff --git a/src/images/laravel-2.svg b/src/images/techstack/laravel-2.svg similarity index 100% rename from src/images/laravel-2.svg rename to src/images/techstack/laravel-2.svg diff --git a/src/images/microsoft-sql-server.svg b/src/images/techstack/microsoft-sql-server.svg similarity index 100% rename from src/images/microsoft-sql-server.svg rename to src/images/techstack/microsoft-sql-server.svg diff --git a/src/images/mysql-6.svg b/src/images/techstack/mysql-6.svg similarity index 100% rename from src/images/mysql-6.svg rename to src/images/techstack/mysql-6.svg diff --git a/src/images/netlify.svg b/src/images/techstack/netlify.svg similarity index 100% rename from src/images/netlify.svg rename to src/images/techstack/netlify.svg diff --git a/src/images/nextjs-3 (1).svg b/src/images/techstack/nextjs-3 (1).svg similarity index 100% rename from src/images/nextjs-3 (1).svg rename to src/images/techstack/nextjs-3 (1).svg diff --git a/src/images/nodejs-icon.svg b/src/images/techstack/nodejs-icon.svg similarity index 100% rename from src/images/nodejs-icon.svg rename to src/images/techstack/nodejs-icon.svg diff --git a/src/images/postgresql.svg b/src/images/techstack/postgresql.svg similarity index 100% rename from src/images/postgresql.svg rename to src/images/techstack/postgresql.svg diff --git a/src/images/react-2.svg b/src/images/techstack/react-2.svg similarity index 100% rename from src/images/react-2.svg rename to src/images/techstack/react-2.svg diff --git a/src/images/vercel_logo.svg b/src/images/techstack/vercel_logo.svg similarity index 100% rename from src/images/vercel_logo.svg rename to src/images/techstack/vercel_logo.svg From 192faf5eed1f82d8cda88faa59ee83cc251e2920 Mon Sep 17 00:00:00 2001 From: rodzy <49137701+rodzy@users.noreply.github.com> Date: Tue, 22 Sep 2020 16:31:08 -0600 Subject: [PATCH 05/12] Firstrow working with darkmode icons --- src/components/Stack/FirstRow.js | 155 +++++++++++++++++-------- src/data/firstrow.js | 2 + src/images/techstack/nextjs-3-dark.svg | 1 + 3 files changed, 109 insertions(+), 49 deletions(-) create mode 100644 src/images/techstack/nextjs-3-dark.svg diff --git a/src/components/Stack/FirstRow.js b/src/components/Stack/FirstRow.js index f6dc349..e855cca 100644 --- a/src/components/Stack/FirstRow.js +++ b/src/components/Stack/FirstRow.js @@ -1,58 +1,115 @@ -import React, { Fragment } from "react" +import React, { Fragment, useContext } from "react" +import { ModeContext } from "../../context/ModeContext" import { FIRSTROW } from "../../data/firstrow" import Card from "./CardComponent" const FirstRow = () => { + + const {mode} = useContext(ModeContext) return ( - {FIRSTROW.map(item => ( - - ))} - {FIRSTROW.map(item => ( - - ))} - {FIRSTROW.map(item => ( - - ))} - {FIRSTROW.map(item => ( - - ))} - {FIRSTROW.map(item => ( - - ))} - {FIRSTROW.map(item => ( - - ))} + {FIRSTROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} + {FIRSTROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} + {FIRSTROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} + {FIRSTROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} + {FIRSTROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} + {FIRSTROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} ) } diff --git a/src/data/firstrow.js b/src/data/firstrow.js index 4f7f2ae..822dedf 100644 --- a/src/data/firstrow.js +++ b/src/data/firstrow.js @@ -1,5 +1,6 @@ import reactLogo from "../images/techstack/react-2.svg" import nextjs from "../images/techstack/nextjs-3 (1).svg" +import nextdark from "../images/techstack/nextjs-3-dark.svg" import gatsby from "../images/techstack/gatsby.svg" export const FIRSTROW = [ @@ -11,6 +12,7 @@ export const FIRSTROW = [ }, { image: nextjs, + imageDark: nextdark, title: "Nextjs", description: "Frontend development", darkmode: true, diff --git a/src/images/techstack/nextjs-3-dark.svg b/src/images/techstack/nextjs-3-dark.svg new file mode 100644 index 0000000..38022e3 --- /dev/null +++ b/src/images/techstack/nextjs-3-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file From 186eea9710424d79101fc2414477c1b48159b2b3 Mon Sep 17 00:00:00 2001 From: rodzy <49137701+rodzy@users.noreply.github.com> Date: Tue, 22 Sep 2020 16:36:37 -0600 Subject: [PATCH 06/12] Secondrow model updated --- src/components/Stack/SecondRow.js | 154 +++++++++++++++------- src/data/secondrow.js | 5 + src/images/techstack/vercel_logo-dark.svg | 3 + 3 files changed, 113 insertions(+), 49 deletions(-) create mode 100644 src/images/techstack/vercel_logo-dark.svg diff --git a/src/components/Stack/SecondRow.js b/src/components/Stack/SecondRow.js index 6ccee97..e94ff21 100644 --- a/src/components/Stack/SecondRow.js +++ b/src/components/Stack/SecondRow.js @@ -1,58 +1,114 @@ -import React, { Fragment } from "react" +import React, { Fragment, useContext } from "react" +import { ModeContext } from "../../context/ModeContext" import { SECONDROW } from "../../data/secondrow" import Card from "./CardComponent" const SecondRow = () => { + const { mode } = useContext(ModeContext) return ( - {SECONDROW.map(item => ( - - ))} - {SECONDROW.map(item => ( - - ))} - {SECONDROW.map(item => ( - - ))} - {SECONDROW.map(item => ( - - ))} - {SECONDROW.map(item => ( - - ))} - {SECONDROW.map(item => ( - - ))} + {SECONDROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} + {SECONDROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} + {SECONDROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} + {SECONDROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} + {SECONDROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} + {SECONDROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} ) } diff --git a/src/data/secondrow.js b/src/data/secondrow.js index 4809a69..42cf70f 100644 --- a/src/data/secondrow.js +++ b/src/data/secondrow.js @@ -1,21 +1,26 @@ import angularLogo from "../images/techstack/angular-icon-1.svg" import netlifylogo from "../images/techstack/netlify.svg" import vercellogo from "../images/techstack/vercel_logo.svg" +import vercellogodark from "../images/techstack/vercel_logo-dark.svg" export const SECONDROW = [ { image: angularLogo, title: "Angular 10", description: "Frontend development", + darkmode: false, }, { image: netlifylogo, title: "Netlify", description: "Frontend Deployment/hosting service", + darkmode: false, }, { image: vercellogo, + imageDark: vercellogodark, title: "Vercel", description: "Frontend Deployment/hosting service", + darkmode: true, }, ] diff --git a/src/images/techstack/vercel_logo-dark.svg b/src/images/techstack/vercel_logo-dark.svg new file mode 100644 index 0000000..52278cb --- /dev/null +++ b/src/images/techstack/vercel_logo-dark.svg @@ -0,0 +1,3 @@ + + + From 8ff21e342e1577dee2acc90b09739f162ab96fee Mon Sep 17 00:00:00 2001 From: rodzy <49137701+rodzy@users.noreply.github.com> Date: Tue, 22 Sep 2020 16:46:59 -0600 Subject: [PATCH 07/12] Removed! express icon --- src/components/Stack/FourthRow.js | 154 ++++++++++++++++++-------- src/data/fourthrow.js | 37 ++++--- src/images/techstack/GraphQL_Logo.svg | 71 ++++++++++++ src/images/techstack/express-109.svg | 3 - 4 files changed, 196 insertions(+), 69 deletions(-) create mode 100644 src/images/techstack/GraphQL_Logo.svg delete mode 100644 src/images/techstack/express-109.svg diff --git a/src/components/Stack/FourthRow.js b/src/components/Stack/FourthRow.js index a17cb8e..647e17f 100644 --- a/src/components/Stack/FourthRow.js +++ b/src/components/Stack/FourthRow.js @@ -1,58 +1,114 @@ -import React, { Fragment } from "react" +import React, { Fragment, useContext } from "react" +import { ModeContext } from "../../context/ModeContext" import { FOURTHDROW } from "../../data/fourthrow" import Card from "./CardComponent" const FourthRow = () => { + const { mode } = useContext(ModeContext) return ( - {FOURTHDROW.map(item => ( - - ))} - {FOURTHDROW.map(item => ( - - ))} - {FOURTHDROW.map(item => ( - - ))} - {FOURTHDROW.map(item => ( - - ))} - {FOURTHDROW.map(item => ( - - ))} - {FOURTHDROW.map(item => ( - - ))} + {FOURTHDROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} + {FOURTHDROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} + {FOURTHDROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} + {FOURTHDROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} + {FOURTHDROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} + {FOURTHDROW.map(item => + item.darkmode && mode ? ( + + ) : ( + + ) + )} ) } diff --git a/src/data/fourthrow.js b/src/data/fourthrow.js index b41af8c..059aadc 100644 --- a/src/data/fourthrow.js +++ b/src/data/fourthrow.js @@ -1,21 +1,24 @@ -import expressLogo from "../images/techstack/express-109.svg" +import graphqllogo from '../images/techstack/GraphQL_Logo.svg' import postgLogo from "../images/techstack/postgresql.svg" import mysqlLogo from "../images/techstack/mysql-6.svg" export const FOURTHDROW = [ - { - image:expressLogo, - title:"Express", - description:"Backend development" - }, - { - image:postgLogo, - title:"PostgreSQL", - description:"Databases management" - }, - { - image:mysqlLogo, - title:"MySQL", - description:"Databases management" - }, -] \ No newline at end of file + { + image: graphqllogo, + title: "GraphQL", + description: "Backend development", + darkmode: false, + }, + { + image: postgLogo, + title: "PostgreSQL", + description: "Databases management", + darkmode: false, + }, + { + image: mysqlLogo, + title: "MySQL", + description: "Databases management", + darkmode: false, + }, +] diff --git a/src/images/techstack/GraphQL_Logo.svg b/src/images/techstack/GraphQL_Logo.svg new file mode 100644 index 0000000..58b2cc2 --- /dev/null +++ b/src/images/techstack/GraphQL_Logo.svg @@ -0,0 +1,71 @@ + + + + diff --git a/src/images/techstack/express-109.svg b/src/images/techstack/express-109.svg deleted file mode 100644 index f5df59f..0000000 --- a/src/images/techstack/express-109.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - From afdb3ac7173e994f72ec4f2d6d72a7b3780746a3 Mon Sep 17 00:00:00 2001 From: rodzy <49137701+rodzy@users.noreply.github.com> Date: Tue, 22 Sep 2020 16:56:50 -0600 Subject: [PATCH 08/12] =?UTF-8?q?Added=20default=20user=20color=20scheme?= =?UTF-8?q?=20=F0=9F=8E=A8=F0=9F=94=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/context/ModeContext.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/context/ModeContext.js b/src/context/ModeContext.js index e5050be..9eacce9 100644 --- a/src/context/ModeContext.js +++ b/src/context/ModeContext.js @@ -1,10 +1,17 @@ import React from "react" -import useLocalStorage from '../hooks/useLocalStorage' +import useLocalStorage from "../hooks/useLocalStorage" export const ModeContext = React.createContext() const ModeProvider = props => { - const [mode, setMode] = useLocalStorage('modex',false) + const [mode, setMode] = useLocalStorage("modex", userColorScheme()) + + function userColorScheme() { + if (typeof window !== "undefined") { + if (!window.matchMedia) return + return window.matchMedia("(prefers-color-scheme:dark)").matches + } + } return ( Date: Tue, 22 Sep 2020 17:40:42 -0600 Subject: [PATCH 09/12] =?UTF-8?q?Accessibility=20tweaks=20=F0=9F=A7=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Layout/footer.js | 12 +++--------- src/components/Layout/header.js | 21 +++++++++++++++++---- src/components/Reusable/SpanP.js | 2 +- src/components/about.js | 2 +- src/components/services.js | 2 +- src/pages/index.js | 5 ++++- src/styles/footer.css | 15 +++++++++++++++ 7 files changed, 42 insertions(+), 17 deletions(-) create mode 100644 src/styles/footer.css diff --git a/src/components/Layout/footer.js b/src/components/Layout/footer.js index dc33645..f302217 100644 --- a/src/components/Layout/footer.js +++ b/src/components/Layout/footer.js @@ -1,20 +1,14 @@ import React from "react" import PropTypes from "prop-types" import Logomain from "../logomain" +import "../../styles/footer.css" const Footer = ({ siteTitle }) => { return ( <> -