Skip to content

Commit 41600b3

Browse files
HxnDevHxnDev
committed
Improvement (Profile Picture Container)
1 parent 830ffee commit 41600b3

File tree

1 file changed

+139
-119
lines changed

1 file changed

+139
-119
lines changed

‎src/components/home/HeroSection.jsx‎

Lines changed: 139 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useRef, useEffect } from 'react';
2-
import { Title, Text, Container, Button, Group, Image, Grid, Box } from '@mantine/core';
2+
import { Title, Text, Container, Button, Group, Grid, Box } from '@mantine/core';
33
import { IconDownload, IconBrandGithub, IconArrowRight } from '@tabler/icons-react';
44
import { gsap } from 'gsap';
55

@@ -81,6 +81,11 @@ const HeroSection = () => {
8181
background: 'radial-gradient(circle at 30% 50%, rgba(155, 0, 255, 0.15), transparent 70%)'
8282
}}
8383
>
84+
{/* Floating orbs background decoration */}
85+
<div className="orb orb-1"></div>
86+
<div className="orb orb-2"></div>
87+
<div className="orb orb-3"></div>
88+
8489
<Container size="lg">
8590
<Grid gutter={60}>
8691
<Grid.Col md={7} ref={textRef}>
@@ -180,135 +185,150 @@ const HeroSection = () => {
180185
</Grid.Col>
181186

182187
<Grid.Col md={5} style={{ position: 'relative' }}>
183-
<Box
184-
ref={imageRef}
185-
style={{
186-
position: 'relative',
187-
perspective: '1000px',
188-
transformStyle: 'preserve-3d'
189-
}}
190-
>
191-
<Box
192-
style={{
193-
position: 'absolute',
194-
top: '-40px',
195-
left: '-40px',
196-
right: '-40px',
197-
bottom: '-40px',
198-
background: 'linear-gradient(135deg, rgba(155, 0, 255, 0.3), rgba(0, 245, 255, 0.2))',
199-
borderRadius: '40% 60% 60% 40% / 40% 40% 60% 60%',
200-
filter: 'blur(60px)',
201-
opacity: 0.5,
202-
zIndex: -1,
203-
animation: 'morphBlob 8s infinite ease-in-out'
204-
}}
205-
/>
206-
207-
<Image
208-
src="/hxndev.github.io/images/profile.jpg"
209-
alt="Hassan Shahzad"
210-
radius="xl"
211-
height={450}
212-
fit="cover"
213-
style={{
214-
border: '4px solid rgba(155, 0, 255, 0.3)',
215-
boxShadow: '0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(155, 0, 255, 0.4)',
216-
transform: 'perspective(1000px) rotateY(-5deg)',
217-
transition: 'all 0.5s ease'
218-
}}
219-
/>
188+
<div className="profile-container" ref={imageRef}>
189+
<div className="profile-image-wrapper">
190+
<img
191+
src="/hxndev.github.io/images/profile.jpg"
192+
alt="Hassan Shahzad"
193+
className="profile-image"
194+
/>
195+
</div>
220196

221197
{/* Decorative elements */}
222-
<Box
223-
style={{
224-
position: 'absolute',
225-
top: '-20px',
226-
right: '-20px',
227-
width: '100px',
228-
height: '100px',
229-
borderRadius: '50%',
230-
background: 'linear-gradient(135deg, #00F5FF, transparent)',
231-
opacity: 0.7,
232-
filter: 'blur(20px)'
233-
}}
234-
/>
235-
236-
<Box
237-
style={{
238-
position: 'absolute',
239-
bottom: '-30px',
240-
left: '-30px',
241-
width: '150px',
242-
height: '150px',
243-
borderRadius: '50%',
244-
background: 'linear-gradient(135deg, #9B00FF, transparent)',
245-
opacity: 0.6,
246-
filter: 'blur(30px)'
247-
}}
248-
/>
249-
</Box>
198+
<div className="glow-effect"></div>
199+
<div className="circle-decoration circle-1"></div>
200+
<div className="circle-decoration circle-2"></div>
201+
</div>
250202
</Grid.Col>
251203
</Grid>
252204
</Container>
253-
254-
{/* Add animated scroll indicator */}
255-
<Box
256-
style={{
257-
position: 'absolute',
258-
bottom: '30px',
259-
left: '50%',
260-
transform: 'translateX(-50%)',
261-
display: 'flex',
262-
flexDirection: 'column',
263-
alignItems: 'center',
264-
opacity: 0.7,
265-
animation: 'fadeInUp 2s 1s forwards'
266-
}}
267-
>
268-
<Text size="sm" mb={10} style={{ opacity: 0.7 }}>Scroll to explore</Text>
269-
<Box
270-
style={{
271-
width: '30px',
272-
height: '50px',
273-
border: '2px solid rgba(155, 0, 255, 0.5)',
274-
borderRadius: '25px',
275-
display: 'flex',
276-
justifyContent: 'center',
277-
padding: '5px 0'
278-
}}
279-
>
280-
<Box
281-
style={{
282-
width: '6px',
283-
height: '10px',
284-
background: 'linear-gradient(#9B00FF, #00F5FF)',
285-
borderRadius: '3px',
286-
animation: 'scrollIndicator 2s infinite'
287-
}}
288-
/>
289-
</Box>
290-
</Box>
291-
292-
{/* Add keyframes for animations */}
205+
206+
{/* Custom CSS for the new profile design */}
293207
<style>
294208
{`
295-
@keyframes morphBlob {
296-
0% { border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%; }
297-
25% { border-radius: 60% 40% 40% 60% / 60% 60% 40% 40%; }
298-
50% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
299-
75% { border-radius: 40% 60% 60% 40% / 60% 60% 40% 40%; }
300-
100% { border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%; }
209+
.profile-container {
210+
position: relative;
211+
height: 100%;
212+
display: flex;
213+
justify-content: center;
214+
align-items: center;
215+
perspective: 1000px;
216+
}
217+
218+
.profile-image-wrapper {
219+
position: relative;
220+
height: 400px;
221+
width: 400px;
222+
border-radius: 50%;
223+
overflow: hidden;
224+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(155, 0, 255, 0.4);
225+
transform: perspective(1000px) rotateY(-5deg);
226+
transition: all 0.5s ease;
227+
border: 4px solid rgba(155, 0, 255, 0.3);
228+
}
229+
230+
.profile-image {
231+
width: 100%;
232+
height: 100%;
233+
object-fit: cover;
234+
transition: transform 0.5s ease;
235+
}
236+
237+
.profile-image-wrapper:hover .profile-image {
238+
transform: scale(1.05);
239+
}
240+
241+
.glow-effect {
242+
position: absolute;
243+
width: 100%;
244+
height: 100%;
245+
border-radius: 50%;
246+
background: radial-gradient(circle at center, rgba(155, 0, 255, 0.2), transparent 70%);
247+
filter: blur(20px);
248+
opacity: 0.7;
249+
z-index: -1;
250+
}
251+
252+
.circle-decoration {
253+
position: absolute;
254+
border-radius: 50%;
255+
filter: blur(15px);
256+
}
257+
258+
.circle-1 {
259+
top: -10%;
260+
right: -5%;
261+
width: 100px;
262+
height: 100px;
263+
background: linear-gradient(135deg, #00F5FF, transparent);
264+
opacity: 0.7;
265+
}
266+
267+
.circle-2 {
268+
bottom: -10%;
269+
left: -5%;
270+
width: 150px;
271+
height: 150px;
272+
background: linear-gradient(135deg, #9B00FF, transparent);
273+
opacity: 0.6;
274+
}
275+
276+
.orb {
277+
position: absolute;
278+
border-radius: 50%;
279+
filter: blur(30px);
280+
opacity: 0.4;
281+
z-index: -1;
282+
}
283+
284+
.orb-1 {
285+
top: 20%;
286+
right: 10%;
287+
width: 150px;
288+
height: 150px;
289+
background: radial-gradient(circle at center, rgba(0, 245, 255, 0.3), transparent);
290+
animation: float 15s infinite ease-in-out;
291+
}
292+
293+
.orb-2 {
294+
bottom: 15%;
295+
left: 10%;
296+
width: 180px;
297+
height: 180px;
298+
background: radial-gradient(circle at center, rgba(155, 0, 255, 0.3), transparent);
299+
animation: float 18s infinite ease-in-out reverse;
300+
}
301+
302+
.orb-3 {
303+
top: 40%;
304+
left: 20%;
305+
width: 100px;
306+
height: 100px;
307+
background: radial-gradient(circle at center, rgba(255, 56, 100, 0.2), transparent);
308+
animation: float 12s infinite ease-in-out 2s;
309+
}
310+
311+
@keyframes float {
312+
0% { transform: translateY(0) translateX(0); }
313+
25% { transform: translateY(-20px) translateX(10px); }
314+
50% { transform: translateY(0) translateX(20px); }
315+
75% { transform: translateY(20px) translateX(10px); }
316+
100% { transform: translateY(0) translateX(0); }
301317
}
302318
303-
@keyframes scrollIndicator {
304-
0% { transform: translateY(0); opacity: 1; }
305-
75% { transform: translateY(20px); opacity: 0; }
306-
100% { transform: translateY(0); opacity: 0; }
319+
@media (max-width: 992px) {
320+
.profile-image-wrapper {
321+
height: 300px;
322+
width: 300px;
323+
margin: 40px auto 0;
324+
}
307325
}
308326
309-
@keyframes fadeInUp {
310-
from { opacity: 0; transform: translate(-50%, 30px); }
311-
to { opacity: 0.7; transform: translate(-50%, 0); }
327+
@media (max-width: 768px) {
328+
.profile-image-wrapper {
329+
height: 250px;
330+
width: 250px;
331+
}
312332
}
313333
`}
314334
</style>

0 commit comments

Comments
 (0)