Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

uploading images and progress on projects section such as addition of… #28

Merged
merged 2 commits into from
Aug 17, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified .DS_Store
Binary file not shown.
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
Expand Down
Binary file modified public/images/.DS_Store
Binary file not shown.
Binary file modified public/images/portfolio/.DS_Store
Binary file not shown.
Binary file modified public/images/portfolio/odd-duck-product/odd-duck-product-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/portfolio/salmon-cookies/.DS_Store
Binary file not shown.
Binary file modified public/images/portfolio/salmon-cookies/salmon-cookies-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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/
-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
Expand Down
2 changes: 1 addition & 1 deletion src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import './assets/styles/App.scss';
import Main from './containers/Main';

function App() {
return <Main />;
return <Main w={'100%'} />;
}

export default App;
224 changes: 78 additions & 146 deletions src/assets/styles/App.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
html {
z-index: 1;
height: 100%;
width: 100%;
margin-left: -1rem;
}

Expand Down Expand Up @@ -316,70 +317,55 @@ 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;
letter-spacing: 5px;
}

.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 {
Expand All @@ -390,137 +376,85 @@ 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;
}

.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 {
Expand All @@ -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 */
Expand Down Expand Up @@ -611,6 +542,7 @@ button:focus {
transform: rotate(0deg);
}
}

#tsparticles {
position: fixed !important;
background-repeat: no-repeat !important;
Expand Down
Loading
Loading