diff --git a/.DS_Store b/.DS_Store
index 90248b433..f16768672 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/package.json b/package.json
index 61a05aa00..e7c5c9139 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
"@brookr/react-switch": "^6.0.1",
"@chakra-ui/css-reset": "^2.1.2",
"@chakra-ui/icons": "^2.1.0",
- "@chakra-ui/react": "^2.7.1",
+ "@chakra-ui/react": "^2.8.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.10.6",
"@headlessui/react": "^1.7.13",
@@ -63,7 +63,9 @@
"react-scripts": "5.0.1",
"react-scroll": "^1.8.9",
"react-simple-placeholder-image": "^0.1.2",
+ "react-spring": "^9.7.2",
"react-tsparticles": "^2.10.1",
+ "react-use-gesture": "^9.1.3",
"react-vertical-timeline-component": "^3.6.0",
"redux": "^4.2.1",
"web-vitals": "^3.3.2"
diff --git a/public/images/.DS_Store b/public/images/.DS_Store
index b19dbc547..c676b9e2a 100644
Binary files a/public/images/.DS_Store and b/public/images/.DS_Store differ
diff --git a/public/images/portfolio/.DS_Store b/public/images/portfolio/.DS_Store
index 21c6b07a0..a7f0507f0 100644
Binary files a/public/images/portfolio/.DS_Store and b/public/images/portfolio/.DS_Store differ
diff --git a/public/images/portfolio/odd-duck-product/odd-duck-product-1.png b/public/images/portfolio/odd-duck-product/odd-duck-product-1.png
index 096de10db..96afe7700 100644
Binary files a/public/images/portfolio/odd-duck-product/odd-duck-product-1.png and b/public/images/portfolio/odd-duck-product/odd-duck-product-1.png differ
diff --git a/public/images/portfolio/salmon-cookies/.DS_Store b/public/images/portfolio/salmon-cookies/.DS_Store
index 957928620..9a1bb9972 100644
Binary files a/public/images/portfolio/salmon-cookies/.DS_Store and b/public/images/portfolio/salmon-cookies/.DS_Store differ
diff --git a/public/images/portfolio/salmon-cookies/salmon-cookies-1.png b/public/images/portfolio/salmon-cookies/salmon-cookies-1.png
index 35cc3bfcf..c3f854fdf 100644
Binary files a/public/images/portfolio/salmon-cookies/salmon-cookies-1.png and b/public/images/portfolio/salmon-cookies/salmon-cookies-1.png differ
diff --git a/public/images/portfolio/salmon-cookies/salmon-cookies-II-2.png b/public/images/portfolio/salmon-cookies/salmon-cookies-II-2.png
new file mode 100644
index 000000000..f48e1e4da
Binary files /dev/null and b/public/images/portfolio/salmon-cookies/salmon-cookies-II-2.png differ
diff --git a/public/images/portfolio/salmon-cookies/salmon-cookies-II.png b/public/images/portfolio/salmon-cookies/salmon-cookies-II.png
new file mode 100644
index 000000000..a4ee7e1b9
Binary files /dev/null and b/public/images/portfolio/salmon-cookies/salmon-cookies-II.png differ
diff --git a/public/index.html b/public/index.html
index 6db193ae6..7843b214e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,7 +11,7 @@
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
-
+
diff --git a/src/App.js b/src/App.js
index 4f0fb159c..300aaed7b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,7 +5,7 @@ import './assets/styles/App.scss';
import Main from './containers/Main';
function App() {
- return ;
+ return ;
}
export default App;
diff --git a/src/assets/styles/App.scss b/src/assets/styles/App.scss
index 144ab425a..54d63adb9 100644
--- a/src/assets/styles/App.scss
+++ b/src/assets/styles/App.scss
@@ -6,6 +6,7 @@
html {
z-index: 1;
height: 100%;
+ width: 100%;
margin-left: -1rem;
}
@@ -316,14 +317,15 @@ button:focus {
/* Navbar Section */
/* --------- */
+/* --------- */
+/* Navbar Section */
+/* --------- */
+
#home {
- justify-content: space-between;
justify-content: center;
margin: auto;
- min-width: 100vh;
width: 100%;
font: 12px/18px 'opensans-bold', sans-serif;
- // flex-grow: 1;
color: white;
text-transform: uppercase;
z-index: 5;
@@ -331,55 +333,39 @@ button:focus {
}
.sticky {
- background-color: #1b1a2ea9 !important;
- transition: all 0.3s ease-out 0s !important;
- box-shadow: 0px 10px 10px 0px rgba(9, 5, 29, 0.171) !important;
+ background-color: #1b1a2ea9;
+ transition: all 0.3s ease-out;
+ box-shadow: 0px 10px 10px 0px rgba(9, 5, 29, 0.171);
}
.navbar {
- top: 0 !important;
- left: 0 !important;
- right: 0 !important;
- position: fixed !important;
+ top: 0;
+ left: 0;
+ right: 0;
+ position: fixed;
+ width: 100%;
display: flex;
flex-direction: row;
z-index: 52;
max-height: 100px;
- flex-grow: 1;
background-color: transparent;
- transition: all 0.3s ease-out 0s !important;
- padding: 0.3rem 2rem !important;
- font-size: 1.2rem !important;
+ transition: all 0.3s ease-out;
+ padding: 0.3rem 2rem;
+ font-size: 1.2rem;
justify-content: space-between;
- align-items: center !important;
- align-content: center !important;
- padding-bottom: 3px;
- padding-top: 0;
-}
-
-.navbar.sticky {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 999;
-}
-
-.logo-nav {
- display: flex;
- flex-grow: 1;
- flex-direction: row;
align-items: center;
- justify-content: space-between;
- width: 100%;
+ align-content: center;
+ padding-bottom: 3px;
}
+.logo-nav,
.logoGroup {
display: flex;
flex-grow: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
+ width: 100%;
}
.logo-button {
@@ -390,121 +376,71 @@ button:focus {
}
.navbar-toggler {
- position: relative !important;
- background-color: transparent !important;
- border-color: transparent !important;
+ position: relative;
+ background-color: transparent;
+ border-color: transparent;
}
.navbar-toggler span {
- display: block !important;
- background-color: #be50f4 !important;
- height: 4px !important;
- width: 27px !important;
- margin-top: 5px !important;
- margin-bottom: 5px !important;
- transform: rotate(0deg) !important;
- left: 0 !important;
- opacity: 1 !important;
+ display: block;
+ background-color: #be50f4;
+ height: 4px;
+ width: 27px;
+ margin: 5px 0;
+ transform: rotate(0deg);
}
.navbar-toggler:focus,
.navbar-toggler:active {
- outline: 0 !important;
+ outline: 0;
}
.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
- transition: transform 0.35s ease-in-out !important;
-}
-
-.navbar-toggler:not(.collapsed) span:nth-child(1) {
- position: absolute !important;
- left: 12px !important;
- top: 10px !important;
- transform: rotate(135deg) !important;
- opacity: 0.9 !important;
-}
-
-.navbar-toggler:not(.collapsed) span:nth-child(2) {
- height: 12px !important;
- visibility: hidden !important;
- background-color: transparent !important;
-}
-
-.navbar-toggler:not(.collapsed) span:nth-child(3) {
- position: absolute !important;
- left: 12px !important;
- top: 10px !important;
- transform: rotate(-135deg) !important;
- opacity: 0.9 !important;
+ transition: transform 0.35s ease-in-out;
}
@media (max-width: 767px) {
.navbar {
- padding: 1rem 2rem !important;
- font-size: 1.4rem !important;
- background-color: #181a27 !important;
- height: auto;
- // margin: 5px 0;
+ padding: 1rem 2rem;
+ font-size: 1.4rem;
+ background-color: #181a27;
justify-content: center;
}
+
+ .nav-link {
+ padding: 0.7rem 1rem;
+ }
}
+
.navbar-nav {
align-items: center;
- top: 0;
-}
-.navbar-nav .nav-item a::after {
- display: none !important;
-}
-
-.navbar-brand {
- display: flex;
- height: 3em !important;
- width: 6em !important;
- color: rgb(250, 250, 250) !important;
}
+.navbar-brand,
.logo {
- height: 3em !important;
- width: 6em !important;
+ display: flex;
+ height: 3em;
+ width: 6em;
+ color: rgb(250, 250, 250);
}
.navbar-nav .nav-link {
flex-grow: 1;
- // width: 10px;
- color: white !important;
- padding-right: 1rem !important;
- padding-left: 1rem !important;
- text-align: center; // Center the text in the navbar links
-}
-
-// .nav-link {
-// padding: 0.8rem 1rem !important;
-// }
-
-@media (max-width: 767px) {
- .nav-link {
- padding: 0.7rem 1rem !important;
- }
+ color: white;
+ padding: 0 1rem;
+ text-align: center;
}
.nav-item {
padding-left: 10px;
- margin-top: auto;
- align-items: center;
margin: auto;
-}
-
-.navbar-nav .nav-item {
- // !display: inline-block;
- position: relative;
- margin: 10px;
- // margin-left: 20px;
+ align-items: center;
}
.navbar-nav .nav-item a {
font-weight: 400;
- transition: all 0.3s ease-out 0s;
+ transition: all 0.3s ease-out;
position: relative;
z-index: 1;
}
@@ -512,15 +448,13 @@ button:focus {
.navbar-nav .nav-item a::after {
content: '';
position: relative;
- // !display: block;
- // height: 5px;
width: 0;
border-radius: 16px;
background: #c95bf5;
bottom: 1px;
left: 0;
z-index: -1;
- transition: all 0.3s ease-out 0s;
+ transition: all 0.3s ease-out;
}
.navbar-nav .nav-item a:hover::after {
@@ -532,51 +466,48 @@ button:focus {
width: 20px;
margin-right: 5px;
vertical-align: middle;
-}
-
-/* Style the active link icon */
-.navbar-nav .nav-link.active svg {
- fill: #ff5a5f;
-}
-
-/* Style the default color of the icons */
-.navbar-nav .nav-link svg {
fill: white;
}
-/* Style the hover color of the icons */
-.navbar-nav .nav-link:hover svg {
- fill: #c95bf5;
-}
-
-/* Style the active color of the icons */
+.navbar-nav .nav-link:hover svg,
.navbar-nav .nav-link.active svg {
fill: #c95bf5;
}
-/* Style the active link icon */
.navbar-nav .nav-link.active svg {
fill: #ff5a5f;
}
-/* Style the default color of the icons */
-.navbar-nav .nav-link svg {
- fill: white;
-}
-
-/* Style the hover color of the icons */
-.navbar-nav .nav-link:hover svg {
- fill: #c95bf5;
-}
-
-/* Style the active color of the icons */
-.navbar-nav .nav-link.active svg {
- fill: #c95bf5;
-}
/* --------- */
/* Home section */
/* --------- */
+
+// #home {
+// justify-content: space-between;
+// justify-content: center;
+// margin: auto;
+// min-width: 100vh;
+// width: 100%;
+// font: 12px/18px 'opensans-bold', sans-serif;
+// // flex-grow: 1;
+// color: white;
+// text-transform: uppercase;
+// z-index: 5;
+// letter-spacing: 5px;
+// }
+
+#home {
+ justify-content: center;
+ margin: auto;
+ width: 100%;
+ font: 12px/18px 'opensans-bold', sans-serif;
+ color: white;
+ text-transform: uppercase;
+ z-index: 5;
+ letter-spacing: 5px;
+}
+
.wave {
animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
animation-duration: 2.1s; /* Change to speed up or slow down */
@@ -611,6 +542,7 @@ button:focus {
transform: rotate(0deg);
}
}
+
#tsparticles {
position: fixed !important;
background-repeat: no-repeat !important;
diff --git a/src/assets/theme.js b/src/assets/theme.js
index 4d52e2dcb..89689ab7f 100644
--- a/src/assets/theme.js
+++ b/src/assets/theme.js
@@ -113,29 +113,36 @@ const theme = extendTheme({
translucentQuaternary901: 'rgba(0, 31, 34, 0.6)', // Very dark greenish-blue
},
},
+ breakpoints: {
+ xs: '20em', // 320px
+ xs2: '24.375em',
+ base: '36em', // 576px
+ sm: '36em', // 576px
+ md: '48em', // 768px <-- avg mobile
+ md2: '52.75em', // 768px <-- avg mobile
+ lg: '62em', // 992px
+ xl: '80em', // 1280px <-- avg desktop
+ '2xl': '96em', // 1536px, if you want to go beyond the standard sizes
+ },
styles: {
global: {
'html, body': {
color: 'gray.600',
lineHeight: 'tall',
+ fontSize: 'md',
width: '100%',
+ height: '100%',
},
a: {
color: 'teal.500',
},
- // '*:hover': {
- // transform: 'scale(1.05)',
- // overflow: 'hidden',
- // border: '1.7px solid rgba(79, 183, 179, 0.673)',
- // boxShadow:
- // '0 0 15px rgba(79, 183, 179, 0.8), 0 0 25px rgba(79, 183, 179, 0.8), 0 0 35px rgba(79, 183, 179, 0.8), 0 0 45px rgba(79, 183, 179, 1)',
- // },
'*': {
boxSizing: 'border-box',
},
'#root': {
// backgroundColor: "#f5f5f5",
minHeight: '100vh',
+ minWidth: '100%',
display: 'flex',
flexDirection: 'column',
},
diff --git a/src/components/headings/header/Header.js b/src/components/headings/header/Header.js
index 8ac9e54ef..45538863f 100644
--- a/src/components/headings/header/Header.js
+++ b/src/components/headings/header/Header.js
@@ -1,5 +1,6 @@
import { Box } from '@chakra-ui/react';
import React, { Component } from 'react';
+import NavBar from '../navbar/NavBar';
class Header extends Component {
titles = [];
@@ -13,6 +14,7 @@ class Header extends Component {