Skip to content

Commit be3bc17

Browse files
abnerjsabnerjs
committed
feat: turn jobs preview scalable
1 parent 16520fc commit be3bc17

File tree

1 file changed

+107
-218
lines changed

1 file changed

+107
-218
lines changed

‎src/pages/Home/Works/Works.tsx‎

Lines changed: 107 additions & 218 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,55 @@ import {
1919
} from 'src/assets/images/works'
2020
import ImageStack from 'src/components/ImageStack/ImageStack'
2121

22+
interface IHoverPanel {
23+
bgColor: string
24+
images: any[]
25+
type: 'desktop' | 'mobile' | 'both'
26+
link: string
27+
title: string
28+
tool: string
29+
dev: string
30+
}
31+
32+
const jobs: IHoverPanel[] = [
33+
{
34+
bgColor: '#C3CCE1',
35+
images: PortalRelatoriosAssets,
36+
type: 'both',
37+
link: 'https://github.com/abnerjs/PortalRelatorios',
38+
title: 'Portal de Relatórios',
39+
tool: 'React + .NET',
40+
dev: 'Design & Desenvolvimento',
41+
},
42+
{
43+
bgColor: '#D4B492',
44+
images: SwingmdAssets,
45+
type: 'desktop',
46+
link: 'https://github.com/abnerjs/SwingMaterialDesign',
47+
title: 'Material Design',
48+
tool: 'Java Swing',
49+
dev: 'Desenvolvimento de Componentes',
50+
},
51+
{
52+
bgColor: '#D4CAC6',
53+
images: PontoAssets,
54+
type: 'both',
55+
link: 'https://www.figma.com/design/QkJJWaMoIeOkxN9UcDMWkc/Sistema-de-Ponto?node-id=1942-10750&t=5vr7MhWFxPzpHoHU-1',
56+
title: 'Sistema de Ponto',
57+
tool: 'Figma',
58+
dev: 'Design & Interação',
59+
},
60+
{
61+
bgColor: '#57A6A2',
62+
images: IntegraAssets,
63+
type: 'desktop',
64+
link: 'https://www.behance.net/gallery/95516641/Integra-party-corona',
65+
title: 'Identidade Visual',
66+
tool: 'Photoshop',
67+
dev: 'Design',
68+
},
69+
]
70+
2271
const HoverPanel = (props: any) => {
2372
return (
2473
<div
@@ -39,232 +88,72 @@ const HoverPanel = (props: any) => {
3988
transition: 'all ease 0.4s',
4089
}}
4190
>
42-
<div
43-
className='subPanel'
44-
style={{
45-
width: '100%',
46-
height: '25%',
47-
display: 'flex',
48-
justifyContent: 'center',
49-
alignItems: 'center',
50-
backgroundColor: '#C3CCE1',
51-
}}
52-
>
53-
<ImageStack
54-
images={PortalRelatoriosAssets}
55-
type='desktop'
56-
/>
57-
</div>
58-
<div
59-
className='subPanel'
60-
style={{
61-
width: '100%',
62-
height: '25%',
63-
display: 'flex',
64-
justifyContent: 'center',
65-
alignItems: 'center',
66-
backgroundColor: '#D4B492',
67-
}}
68-
>
69-
<ImageStack
70-
images={SwingmdAssets}
71-
type='desktop'
72-
/>
73-
</div>
74-
<div
75-
className='subPanel'
76-
style={{
77-
width: '100%',
78-
height: '25%',
79-
display: 'flex',
80-
justifyContent: 'center',
81-
alignItems: 'center',
82-
backgroundColor: '#D4CAC6',
83-
}}
84-
>
85-
<ImageStack
86-
images={PontoAssets}
87-
type='both'
88-
/>
89-
</div>
90-
<div
91-
className='subPanel'
92-
style={{
93-
width: '100%',
94-
height: '25%',
95-
display: 'flex',
96-
justifyContent: 'center',
97-
alignItems: 'center',
98-
backgroundColor: '#57A6A2',
99-
}}
100-
>
101-
<ImageStack
102-
images={IntegraAssets}
103-
type='desktop'
104-
/>
105-
</div>
91+
{jobs.map((job) => (
92+
<div
93+
className='subPanel'
94+
style={{
95+
width: '100%',
96+
height: '25%',
97+
display: 'flex',
98+
justifyContent: 'center',
99+
alignItems: 'center',
100+
backgroundColor: job.bgColor,
101+
}}
102+
>
103+
<ImageStack
104+
images={job.images}
105+
type={job.type}
106+
/>
107+
</div>
108+
))}
106109
</div>
107110
</div>
108111
)
109112
}
110113

111114
const WorksContent = (props: any) => {
112-
const elemPortalRelat = useRef<HTMLDivElement>(null)
113-
const elemSwingMaterial = useRef<HTMLDivElement>(null)
114-
const elemPonto = useRef<HTMLDivElement>(null)
115-
const elemParty = useRef<HTMLDivElement>(null)
116-
return (
117-
<>
118-
<div
119-
ref={elemPortalRelat}
120-
className='content'
121-
onMouseEnter={() => {
122-
props.setHoverIndex(0)
123-
props.setScale(1)
124-
}}
125-
onMouseLeave={() => props.setScale(0)}
126-
onClick={() => {
127-
window.open('https://github.com/abnerjs/PortalRelatorios')
128-
window.open(
129-
'https://www.figma.com/file/3AVOpouhDNUlUjsqSJcFdv/Portal-de-Relat%C3%B3rios?node-id=0%3A1&t=tLE4Z9AefrNkrbHo-1',
130-
'blank'
131-
)
132-
}}
133-
onMouseDown={(e) => {
134-
if (e.button === 1) {
135-
window.open('https://github.com/abnerjs/PortalRelatorios', 'blank')
136-
window.open(
137-
'https://www.figma.com/file/3AVOpouhDNUlUjsqSJcFdv/Portal-de-Relat%C3%B3rios?node-id=0%3A1&t=tLE4Z9AefrNkrbHo-1',
138-
'blank'
139-
)
140-
}
141-
}}
142-
>
143-
<MenuContext
144-
targetId={elemPortalRelat.current!}
145-
link={'https://github.com/abnerjs/PortalRelatorios'}
146-
link2={
147-
'https://www.figma.com/file/3AVOpouhDNUlUjsqSJcFdv/Portal-de-Relat%C3%B3rios?node-id=0%3A1&t=tLE4Z9AefrNkrbHo-1'
148-
}
149-
/>
150-
<div className='text'>Portal de Relatórios</div>
151-
<div className='info'>
152-
<div className='type'>React + .NET</div>
153-
<div className='dev'>Design & Desenvolvimento</div>
154-
</div>
155-
<div className='container'></div>
156-
</div>
115+
const elem = useRef<HTMLDivElement>(null)
116+
const elem1 = useRef<HTMLDivElement>(null)
117+
const elem2 = useRef<HTMLDivElement>(null)
118+
const elem3 = useRef<HTMLDivElement>(null)
157119

158-
<hr />
120+
const elems = [elem, elem1, elem2, elem3]
159121

160-
<div
161-
ref={elemSwingMaterial}
162-
className='content'
163-
onMouseEnter={() => {
164-
props.setHoverIndex(1)
165-
props.setScale(1)
166-
}}
167-
onMouseLeave={() => props.setScale(0)}
168-
onClick={() =>
169-
window.open('https://github.com/abnerjs/SwingMaterialDesign')
170-
}
171-
onMouseDown={(e) => {
172-
if (e.button === 1) {
173-
window.open(
174-
'https://github.com/abnerjs/SwingMaterialDesign',
175-
'blank'
176-
)
177-
}
178-
}}
179-
>
180-
<MenuContext
181-
targetId={elemSwingMaterial.current!}
182-
link={'https://github.com/abnerjs/SwingMaterialDesign'}
183-
/>
184-
<div className='text'>Material Design</div>
185-
<div className='info'>
186-
<div className='type'>Java Swing</div>
187-
<div className='dev'>Desenvolvimento de Componentes</div>
188-
</div>
189-
</div>
190-
191-
<hr />
192-
193-
<div
194-
ref={elemPonto}
195-
className='content mobile'
196-
onMouseEnter={() => {
197-
props.setHoverIndex(2)
198-
props.setScale(1)
199-
}}
200-
onMouseLeave={() => props.setScale(0)}
201-
onClick={() => {
202-
window.open(
203-
'https://www.figma.com/design/QkJJWaMoIeOkxN9UcDMWkc/Sistema-de-Ponto?node-id=1942-10750&t=5vr7MhWFxPzpHoHU-1'
204-
)
205-
}}
206-
onMouseDown={(e) => {
207-
if (e.button === 1) {
208-
window.open(
209-
'https://www.figma.com/design/QkJJWaMoIeOkxN9UcDMWkc/Sistema-de-Ponto?node-id=1942-10750&t=5vr7MhWFxPzpHoHU-1',
210-
'blank'
211-
)
212-
window.open(
213-
'https://www.figma.com/design/QkJJWaMoIeOkxN9UcDMWkc/Sistema-de-Ponto?node-id=1942-10750&t=5vr7MhWFxPzpHoHU-1',
214-
'blank'
215-
)
216-
}
217-
}}
218-
>
219-
<MenuContext
220-
targetId={elemPonto.current!}
221-
link={
222-
'https://www.figma.com/design/QkJJWaMoIeOkxN9UcDMWkc/Sistema-de-Ponto?node-id=1942-10750&t=5vr7MhWFxPzpHoHU-1'
223-
}
224-
/>
225-
<div className='text'>Sistema de Ponto</div>
226-
<div className='info'>
227-
<div className='type'>Figma</div>
228-
<div className='dev'>Design & Interação</div>
229-
</div>
230-
</div>
231-
232-
<hr className='mobile' />
233-
234-
<div
235-
ref={elemParty}
236-
className='content mobile'
237-
onMouseEnter={() => {
238-
props.setHoverIndex(3)
239-
props.setScale(1)
240-
}}
241-
onMouseLeave={() => props.setScale(0)}
242-
onClick={() =>
243-
window.open(
244-
'https://www.behance.net/gallery/95516641/Integra-party-corona'
245-
)
246-
}
247-
onMouseDown={(e) => {
248-
if (e.button === 1) {
249-
window.open(
250-
'https://www.behance.net/gallery/95516641/Integra-party-corona',
251-
'blank'
252-
)
253-
}
254-
}}
255-
>
256-
<MenuContext
257-
targetId={elemParty.current!}
258-
link={'https://www.behance.net/gallery/95516641/Integra-party-corona'}
259-
/>
260-
<div className='text'>Identidade Visual</div>
261-
<div className='info'>
262-
<div className='type'>Photoshop</div>
263-
<div className='dev'>Design</div>
264-
</div>
265-
</div>
266-
267-
<hr className='mobile' />
122+
return (
123+
<>
124+
{jobs.map((job, index) => (
125+
<>
126+
<div
127+
ref={elems[index]}
128+
className='content'
129+
onMouseEnter={() => {
130+
props.setHoverIndex(index)
131+
props.setScale(1)
132+
}}
133+
onMouseLeave={() => props.setScale(0)}
134+
onClick={() => {
135+
window.open(job.link)
136+
}}
137+
onMouseDown={(e) => {
138+
if (e.button === 1) {
139+
window.open(job.link, 'blank')
140+
}
141+
}}
142+
>
143+
<MenuContext
144+
targetId={elems[index].current!}
145+
link={job.link}
146+
/>
147+
<div className='text'>{job.title}</div>
148+
<div className='info'>
149+
<div className='type'>{job.tool}</div>
150+
<div className='dev'>{job.dev}</div>
151+
</div>
152+
<div className='container'></div>
153+
</div>
154+
<hr className={index > 1 ? 'mobile' : ''} />
155+
</>
156+
))}
268157
</>
269158
)
270159
}

0 commit comments

Comments
 (0)