Skip to content

Commit 16520fc

Browse files
abnerjsabnerjs
committed
feat: ImageStack working on home
1 parent 2c76b2d commit 16520fc

File tree

6 files changed

+147
-144
lines changed

6 files changed

+147
-144
lines changed

‎src/assets/images/works/portal-relatorios/dashboard.png‎ renamed to ‎src/assets/images/works/portalRelatorios/dashboard.png‎

File renamed without changes.

‎src/assets/images/works/portal-relatorios/users.png‎ renamed to ‎src/assets/images/works/portalRelatorios/users.png‎

File renamed without changes.

‎src/pages/Works/WorksContainer/WorkItem/ImageStack/ImageStack.tsx‎ renamed to ‎src/components/ImageStack/ImageStack.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ interface Props {
55

66
const ImageStack = (props: Props) => {
77
return (
8-
<div className='img relative !h-5/6'>
8+
<div className='img relative w-5/6 !h-5/6'>
99
{props.images.map((img, index) => {
1010
let transformArgs = ''
1111
let transformOrigin = 'origin-center'

‎src/components/Navbar/Navbar.tsx‎

Lines changed: 98 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,116 @@
1-
import { Icon } from "@iconify/react";
2-
import { Drawer, Portal } from "@mui/material";
3-
import { useEffect, useState } from "react";
4-
import { Link, useLocation, useNavigate } from "react-router-dom";
5-
import MagneticButton from "../MagneticButton/MagneticButton";
6-
import Stripe from "../Stripe/Stripe";
7-
import "./Navbar.css";
8-
import nameblack from "src/assets/images/navbar/nameblack.png";
9-
import name from "src/assets/images/navbar/namewhite.png";
10-
import useTransitionStore from "src/store/storeConfig";
1+
import { Icon } from '@iconify/react'
2+
import { Drawer, Portal } from '@mui/material'
3+
import { useEffect, useState } from 'react'
4+
import { Link, useLocation, useNavigate } from 'react-router-dom'
5+
import MagneticButton from '../MagneticButton/MagneticButton'
6+
import Stripe from '../Stripe/Stripe'
7+
import './Navbar.css'
8+
import nameblack from 'src/assets/images/navbar/nameblack.png'
9+
import name from 'src/assets/images/navbar/namewhite.png'
10+
import useTransitionStore from 'src/store/storeConfig'
1111

1212
interface Props {
13-
black?: boolean;
13+
black?: boolean
1414
}
1515

1616
const Navbar = (props: Props) => {
17-
const changeTransition = useTransitionStore((state) => state.change);
18-
const changeLabel = useTransitionStore((state) => state.changeLabel);
19-
const navigate = useNavigate();
20-
const location = useLocation();
21-
const [show, setShow] = useState(false);
22-
const [expand, setExpand] = useState(false);
17+
const changeTransition = useTransitionStore((state) => state.change)
18+
const changeLabel = useTransitionStore((state) => state.changeLabel)
19+
const navigate = useNavigate()
20+
const location = useLocation()
21+
const [show, setShow] = useState(false)
22+
const [expand, setExpand] = useState(false)
2323

2424
const controlNavbar = () => {
25-
if (typeof window !== "undefined") {
26-
setShow(window.scrollY > 300);
25+
if (typeof window !== 'undefined') {
26+
setShow(window.scrollY > 300)
2727
}
28-
};
28+
}
2929

3030
const handlerGoTo = (url: string, label: string) => {
31-
if(location.pathname === url) return;
32-
changeTransition(1);
33-
changeLabel(`• ${label} •`);
31+
if (location.pathname === url) return
32+
changeTransition(1)
33+
changeLabel(`• ${label} •`)
3434

3535
const timer = setTimeout(() => {
36-
navigate(url);
37-
}, 500);
36+
navigate(url)
37+
}, 500)
3838
return () => {
39-
clearTimeout(timer);
40-
};
41-
};
39+
clearTimeout(timer)
40+
}
41+
}
4242

4343
useEffect(() => {
44-
if (typeof window !== "undefined") {
45-
window.addEventListener("scroll", controlNavbar);
44+
if (typeof window !== 'undefined') {
45+
window.addEventListener('scroll', controlNavbar)
4646

4747
return () => {
48-
window.removeEventListener("scroll", controlNavbar);
49-
};
48+
window.removeEventListener('scroll', controlNavbar)
49+
}
5050
}
51-
}, [show]);
51+
}, [show])
5252

5353
return (
54-
<div className="navbar">
55-
<div className={`title${props.black ? " black" : ""}`}>
54+
<div className='navbar'>
55+
<div className={`title${props.black ? ' black' : ''}`}>
5656
<MagneticButton
57-
onClick={() => handlerGoTo("/", "INÍCIO")}
58-
variant="text"
57+
onClick={() => handlerGoTo('/', 'INÍCIO')}
58+
variant='text'
5959
>
60-
<img src={props.black ? nameblack : name} height={45} alt="" />
60+
<img
61+
src={props.black ? nameblack : name}
62+
className='h-12'
63+
alt=''
64+
/>
6165
</MagneticButton>
6266
</div>
6367

64-
<div className={`options${props.black ? " black" : ""}`}>
68+
<div className={`options${props.black ? ' black' : ''}`}>
6569
<MagneticButton
66-
onClick={() => handlerGoTo("/works", "TRABALHOS")}
70+
onClick={() => handlerGoTo('/works', 'TRABALHOS')}
6771
disableRipple
68-
variant="text"
72+
variant='text'
6973
>
7074
Trabalhos
7175
</MagneticButton>
7276
<MagneticButton
73-
onClick={() => handlerGoTo("/about", "SOBRE")}
77+
onClick={() => handlerGoTo('/about', 'SOBRE')}
7478
disableRipple
75-
variant="text"
79+
variant='text'
7680
>
7781
Sobre
7882
</MagneticButton>
7983
<MagneticButton
80-
onClick={() => handlerGoTo("/contact", "CONTATO")}
84+
onClick={() => handlerGoTo('/contact', 'CONTATO')}
8185
disableRipple
82-
variant="text"
86+
variant='text'
8387
>
8488
Contato
8589
</MagneticButton>
8690
</div>
8791

88-
<div className={`options mobile${props.black ? " black" : ""}`}>
92+
<div className={`options mobile${props.black ? ' black' : ''}`}>
8993
<MagneticButton
9094
onClick={() => setExpand(!expand)}
9195
disableRipple
92-
variant="text"
96+
variant='text'
9397
>
9498
Menu
9599
</MagneticButton>
96100
</div>
97101

98102
<Portal>
99103
<div
100-
className="btnController"
104+
className='btnController'
101105
style={{
102-
transform: `scale(${show || expand ? "1" : "0"})`,
106+
transform: `scale(${show || expand ? '1' : '0'})`,
103107
}}
104108
>
105109
<MagneticButton
106-
className={`scrolledNavBtn${expand ? " active" : ""}`}
110+
className={`scrolledNavBtn${expand ? ' active' : ''}`}
107111
onClick={() => setExpand(!expand)}
108112
>
109-
<div className={`nav-icon${expand ? " active" : ""}`}>
113+
<div className={`nav-icon${expand ? ' active' : ''}`}>
110114
<span></span>
111115
<span></span>
112116
<span></span>
@@ -115,117 +119,117 @@ const Navbar = (props: Props) => {
115119
</MagneticButton>
116120
</div>
117121
<Drawer
118-
anchor="right"
122+
anchor='right'
119123
open={expand}
120124
transitionDuration={500}
121125
onClose={() => {
122-
setExpand(false);
126+
setExpand(false)
123127
}}
124128
slotProps={{
125129
backdrop: {
126130
style: {
127-
backdropFilter: "blur(8px)",
131+
backdropFilter: 'blur(8px)',
128132
},
129133
},
130134
}}
131135
>
132-
<div className="title">NAVEGAÇÃO</div>
136+
<div className='title'>NAVEGAÇÃO</div>
133137
<Stripe />
134-
<div className="options">
138+
<div className='options'>
135139
<MagneticButton
136140
onClick={() => {
137-
setExpand(false);
138-
handlerGoTo("/", "INÍCIO");
141+
setExpand(false)
142+
handlerGoTo('/', 'INÍCIO')
139143
}}
140144
disableRipple
141-
variant="text"
145+
variant='text'
142146
>
143147
Início
144148
</MagneticButton>
145149
<MagneticButton
146150
onClick={() => {
147-
setExpand(false);
148-
handlerGoTo("/works", "TRABALHOS");
151+
setExpand(false)
152+
handlerGoTo('/works', 'TRABALHOS')
149153
}}
150154
disableRipple
151-
variant="text"
155+
variant='text'
152156
>
153157
Trabalhos
154158
</MagneticButton>
155159
<MagneticButton
156160
onClick={() => {
157-
setExpand(false);
158-
handlerGoTo("/about", "SOBRE");
161+
setExpand(false)
162+
handlerGoTo('/about', 'SOBRE')
159163
}}
160164
disableRipple
161-
variant="text"
165+
variant='text'
162166
>
163167
Sobre
164168
</MagneticButton>
165169
<MagneticButton
166170
onClick={() => {
167-
setExpand(false);
168-
handlerGoTo("/contact", "CONTATO");
171+
setExpand(false)
172+
handlerGoTo('/contact', 'CONTATO')
169173
}}
170174
disableRipple
171-
variant="text"
175+
variant='text'
172176
>
173177
Contato
174178
</MagneticButton>
175179
</div>
176180

177-
<div className="socials">
178-
<div className="title">REDES SOCIAIS</div>
179-
<div className="links">
181+
<div className='socials'>
182+
<div className='title'>REDES SOCIAIS</div>
183+
<div className='links'>
180184
<Link
181185
to={{
182186
pathname:
183-
"https://wa.me/5518997361645?text=Ol%C3%A1%2C%20Abner.%20Venho%20por%20meio%20do%20seu%20portfolio%20e%20gostaria%20de%20falar%20contigo!",
187+
'https://wa.me/5518997361645?text=Ol%C3%A1%2C%20Abner.%20Venho%20por%20meio%20do%20seu%20portfolio%20e%20gostaria%20de%20falar%20contigo!',
184188
}}
185-
target="_blank"
189+
target='_blank'
186190
>
187-
<MagneticButton variant="text">
188-
<Icon icon="akar-icons:whatsapp-fill" />
191+
<MagneticButton variant='text'>
192+
<Icon icon='akar-icons:whatsapp-fill' />
189193
</MagneticButton>
190194
</Link>
191195
<Link
192-
to={{ pathname: "https://www.instagram.com/eae.abner/" }}
193-
target="_blank"
196+
to={{ pathname: 'https://www.instagram.com/eae.abner/' }}
197+
target='_blank'
194198
>
195-
<MagneticButton variant="text">
196-
<Icon icon="mdi:instagram" />
199+
<MagneticButton variant='text'>
200+
<Icon icon='mdi:instagram' />
197201
</MagneticButton>
198202
</Link>
199203
<Link
200-
to={{ pathname: "https://gitHub.com/abnerjs" }}
201-
target="_blank"
204+
to={{ pathname: 'https://gitHub.com/abnerjs' }}
205+
target='_blank'
202206
>
203-
<MagneticButton variant="text">
204-
<Icon icon="mdi:github" />
207+
<MagneticButton variant='text'>
208+
<Icon icon='mdi:github' />
205209
</MagneticButton>
206210
</Link>
207211
<Link
208-
to={{ pathname: "https://www.linkedin.com/in/abner-j-silva/" }}
209-
target="_blank"
212+
to={{ pathname: 'https://www.linkedin.com/in/abner-j-silva/' }}
213+
target='_blank'
210214
>
211-
<MagneticButton variant="text">
212-
<Icon icon="ri:linkedin-fill" />
215+
<MagneticButton variant='text'>
216+
<Icon icon='ri:linkedin-fill' />
213217
</MagneticButton>
214218
</Link>
215219
<Link
216-
to={{ pathname: "https://www.behance.net/abnerjsilva" }}
217-
target="_blank"
220+
to={{ pathname: 'https://www.behance.net/abnerjsilva' }}
221+
target='_blank'
218222
>
219-
<MagneticButton variant="text">
220-
<Icon icon="ri:behance-fill" />
223+
<MagneticButton variant='text'>
224+
<Icon icon='ri:behance-fill' />
221225
</MagneticButton>
222226
</Link>
223227
</div>
224228
</div>
225229
</Drawer>
226230
</Portal>
227231
</div>
228-
);
229-
};
232+
)
233+
}
230234

231-
export default Navbar;
235+
export default Navbar

0 commit comments

Comments
 (0)