Skip to content

Commit 830ffee

Browse files
HxnDevHxnDev
committed
Fix (Project Details Not Working)
1 parent 6e18880 commit 830ffee

File tree

3 files changed

+107
-50
lines changed

3 files changed

+107
-50
lines changed

‎src/components/projects/EnhancedProjectCard.jsx‎

Lines changed: 57 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,30 @@ const EnhancedProjectCard = ({
4747
setIsHovered(false);
4848
};
4949

50+
// Handle card click with proper navigation
51+
const handleCardClick = (e) => {
52+
e.preventDefault();
53+
// Add debug logs to trace execution
54+
console.log("Card clicked for project:", projectId);
55+
console.log("onViewDetails function available:", !!onViewDetails);
56+
57+
if (onViewDetails && projectId) {
58+
// Call the handler function with the project ID
59+
onViewDetails(projectId);
60+
}
61+
};
62+
63+
// Handle details button click
64+
const handleDetailsClick = (e) => {
65+
e.preventDefault();
66+
e.stopPropagation();
67+
console.log("Details button clicked for project:", projectId);
68+
69+
if (onViewDetails && projectId) {
70+
onViewDetails(projectId);
71+
}
72+
};
73+
5074
return (
5175
<Paper
5276
ref={cardRef}
@@ -56,6 +80,7 @@ const EnhancedProjectCard = ({
5680
withBorder
5781
onMouseEnter={handleMouseEnter}
5882
onMouseLeave={handleMouseLeave}
83+
onClick={handleCardClick}
5984
style={{
6085
height: '100%',
6186
display: 'flex',
@@ -66,7 +91,8 @@ const EnhancedProjectCard = ({
6691
border: featured ? '2px solid rgba(155, 0, 255, 0.5)' : undefined,
6792
backgroundColor: 'rgba(28, 29, 34, 0.7)',
6893
position: 'relative',
69-
overflow: 'hidden'
94+
overflow: 'hidden',
95+
cursor: 'pointer' // Add pointer cursor to indicate clickable
7096
}}
7197
>
7298
{/* Background glow effect for featured projects */}
@@ -114,55 +140,46 @@ const EnhancedProjectCard = ({
114140
}}
115141
/>
116142

117-
{/* Hover overlay */}
143+
{/* Overlay gradient for better text visibility */}
118144
<Box
119145
style={{
120146
position: 'absolute',
121147
top: 0,
122148
left: 0,
123149
right: 0,
124150
bottom: 0,
125-
background: 'linear-gradient(to top, rgba(0,0,0,0.7), transparent 50%)',
126-
opacity: isHovered ? 1 : 0,
127-
transition: 'opacity 0.3s ease',
128-
display: 'flex',
129-
alignItems: 'center',
130-
justifyContent: 'center'
151+
background: isHovered
152+
? 'linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.1))'
153+
: 'linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.2) 70%, rgba(0,0,0,0))',
154+
opacity: 1,
155+
transition: 'all 0.3s ease'
131156
}}
132-
>
157+
/>
158+
159+
{/* Featured badge (if applicable) */}
160+
{featured && (
133161
<Box
134-
onClick={() => onViewDetails && onViewDetails(projectId)}
135162
style={{
136-
cursor: 'pointer',
137-
padding: '8px 16px',
138-
background: 'linear-gradient(45deg, #9B00FF, #00F5FF)',
139-
color: 'white',
140-
borderRadius: '25px',
141-
fontWeight: 'bold',
142-
transform: isHovered ? 'translateY(0)' : 'translateY(20px)',
143-
opacity: isHovered ? 1 : 0,
144-
transition: 'all 0.3s ease'
163+
position: 'absolute',
164+
top: '10px',
165+
left: '10px',
166+
zIndex: 2
145167
}}
146168
>
147-
View Details
169+
<Badge
170+
color="grape"
171+
radius="xl"
172+
variant="filled"
173+
gradient={{ from: '#9B00FF', to: '#00F5FF' }}
174+
>
175+
Featured
176+
</Badge>
148177
</Box>
149-
</Box>
178+
)}
150179
</Box>
151180

152181
{/* Content */}
153182
<Box style={{ flex: 1, display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 1 }}>
154-
{featured && (
155-
<Badge
156-
color="grape"
157-
mb="xs"
158-
radius="xl"
159-
variant="filled"
160-
gradient={{ from: '#9B00FF', to: '#00F5FF' }}
161-
>
162-
Featured
163-
</Badge>
164-
)}
165-
166183
<Title order={4} mb="xs" style={{ color: '#e0e0e0' }}>{title}</Title>
167184
<Text size="sm" color="dimmed" mb="md" style={{ flex: 1 }}>{description}</Text>
168185

@@ -196,6 +213,7 @@ const EnhancedProjectCard = ({
196213
href={githubUrl}
197214
target="_blank"
198215
rel="noopener noreferrer"
216+
onClick={(e) => e.stopPropagation()} // Prevent triggering card click
199217
style={{
200218
padding: '8px 12px',
201219
borderRadius: '25px',
@@ -220,6 +238,7 @@ const EnhancedProjectCard = ({
220238
href={liveUrl}
221239
target="_blank"
222240
rel="noopener noreferrer"
241+
onClick={(e) => e.stopPropagation()} // Prevent triggering card click
223242
style={{
224243
padding: '8px 12px',
225244
borderRadius: '25px',
@@ -239,30 +258,26 @@ const EnhancedProjectCard = ({
239258
</a>
240259
)}
241260

242-
<a
243-
href="#"
244-
onClick={(e) => {
245-
e.preventDefault();
246-
onViewDetails && onViewDetails(projectId);
247-
}}
261+
<Box
262+
onClick={handleDetailsClick}
248263
style={{
249264
padding: '8px 12px',
250265
borderRadius: '25px',
251266
marginLeft: 'auto',
252267
color: '#00F5FF',
253-
backgroundColor: 'transparent',
254-
textDecoration: 'none',
268+
backgroundColor: isHovered ? 'rgba(0, 245, 255, 0.1)' : 'transparent',
255269
fontSize: '14px',
256270
display: 'flex',
257271
alignItems: 'center',
258272
gap: '6px',
273+
cursor: 'pointer',
259274
transition: 'all 0.3s ease',
260275
opacity: isHovered ? 1 : 0.7
261276
}}
262277
>
263278
<IconInfoCircle size={16} />
264279
Details
265-
</a>
280+
</Box>
266281
</Group>
267282
</Box>
268283
</Paper>

‎src/components/utils/assetPreloader.jsx‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,30 @@ export const preloadImage = (src) => {
7979
'/hxndev.github.io/images/profile.jpg',
8080

8181
// Project images for featured projects
82-
'/hxndev.github.io/images/projects/virtual-mouse.jpg',
83-
'/hxndev.github.io/images/projects/tictactoe.jpg',
84-
'/hxndev.github.io/images/projects/solar-system.jpg',
82+
'/hxndev.github.io/images/projects/3d-solar-system.jpg',
83+
'/hxndev.github.io/images/projects/ai-chess.jpg',
84+
'/hxndev.github.io/images/projects/brilliant-pro.jpg',
85+
'/hxndev.github.io/images/projects/event-management.jpg',
86+
'/hxndev.github.io/images/projects/exam-scheduler.jpg',
87+
'/hxndev.github.io/images/projects/face-mesh.jpg',
88+
'/hxndev.github.io/images/projects/graphical-password.jpg',
89+
'/hxndev.github.io/images/projects/hawkseye.jpg',
90+
'/hxndev.github.io/images/projects/image-to-sketch.jpg',
91+
'/hxndev.github.io/images/projects/insta-profile.jpg',
92+
'/hxndev.github.io/images/projects/job-fit.jpg',
93+
'/hxndev.github.io/images/projects/password-cracker.jpg',
94+
'/hxndev.github.io/images/projects/phy-app.jpg',
8595
'/hxndev.github.io/images/projects/portfolio.jpg',
96+
'/hxndev.github.io/images/projects/pose-detection.jpg',
97+
'/hxndev.github.io/images/projects/qr-code.jpg',
98+
'/hxndev.github.io/images/projects/ripple-effect.jpg',
99+
'/hxndev.github.io/images/projects/rock-paper-scissors.jpg',
100+
'/hxndev.github.io/images/projects/simple-translator.jpg',
101+
'/hxndev.github.io/images/projects/vehicle-buy-sell.jpg',
102+
'/hxndev.github.io/images/projects/video-to-gif.jpg',
103+
'/hxndev.github.io/images/projects/virtual-drag-and-drop.jpg',
104+
'/hxndev.github.io/images/projects/virtual-mouse.jpg',
105+
86106

87107
// Fallback images
88108
'https://placehold.co/600x400/9B00FF/FFFFFF?text=Image+Not+Found'

‎src/pages/Projects.jsx‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState, useEffect } from 'react';
22
import { Title, Text, Container, Box, Alert, Button, Loader, SimpleGrid } from '@mantine/core';
33
import { IconAlertCircle, IconRocket } from '@tabler/icons-react';
4+
import { useNavigate, useLocation } from 'react-router-dom';
45

56
// Custom hooks
67
import { useProjectFilter } from '../hooks/useProjectFilter';
@@ -18,6 +19,8 @@ const Projects = () => {
1819
const { reducedMotion } = useAnimationContext();
1920
const [isLoading, setIsLoading] = useState(true);
2021
const [error, setError] = useState(null);
22+
const navigate = useNavigate();
23+
const location = useLocation();
2124

2225
// Fetch projects data
2326
const {
@@ -34,12 +37,13 @@ const Projects = () => {
3437
}
3538

3639
// Check for direct project link in URL
37-
const urlParams = new URLSearchParams(window.location.search);
40+
const urlParams = new URLSearchParams(location.search);
3841
const projectId = urlParams.get('project');
3942
if (projectId && projectsData && projectsData.length > 0) {
43+
console.log("Found project ID in URL:", projectId);
4044
handleViewDetails(projectId);
4145
}
42-
}, [projectsLoading, projectsData]);
46+
}, [projectsLoading, projectsData, location.search]);
4347

4448
// Project filtering hook
4549
const {
@@ -63,20 +67,38 @@ const Projects = () => {
6367
returnToGallery
6468
} = useProjectDetail();
6569

66-
// Handle view project details
67-
const handleViewDetails = (projectId, action = 'modal') => {
70+
// Handle view project details with proper navigation
71+
const handleViewDetails = (projectId, action = 'page') => {
72+
console.log("handleViewDetails called with projectId:", projectId, "action:", action);
73+
6874
if (action === 'reset') {
6975
resetFilters();
76+
navigate('/hxndev.github.io/projects');
77+
return;
78+
}
79+
80+
if (!projectId) {
81+
console.error("No project ID provided to handleViewDetails");
7082
return;
7183
}
7284

7385
if (action === 'modal') {
7486
openProjectModal(projectId, projectsData);
7587
} else if (action === 'page') {
88+
// Update the URL
89+
navigate(`/hxndev.github.io/projects?project=${projectId}`);
90+
// View project details
7691
viewProjectDetails(projectId, projectsData);
7792
}
7893
};
7994

95+
// Handle back to gallery
96+
const handleBackToGallery = () => {
97+
// Update URL to remove project parameter
98+
navigate('/hxndev.github.io/projects');
99+
returnToGallery();
100+
};
101+
80102
return (
81103
<Container size="lg">
82104
{viewMode === 'gallery' ? (
@@ -191,7 +213,7 @@ const Projects = () => {
191213
// Detail view
192214
<ProjectDetail
193215
project={selectedProject}
194-
onBack={returnToGallery}
216+
onBack={handleBackToGallery}
195217
/>
196218
)}
197219

0 commit comments

Comments
 (0)