Skip to content

Commit 0e9e94f

Browse files
Deadcoder001Deadcoder001
committed
ok! mobile responsive done!
1 parent f35626e commit 0e9e94f

File tree

3 files changed

+173
-6
lines changed

3 files changed

+173
-6
lines changed

‎Ashif/src/App.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Navbar from './components/Navbar';
77
import About from './components/About';
88
import Skills from './components/Skills';
99
import Projects from './components/Projects';
10+
import ProjectsMobile from './components/ProjectsMobile';
1011
import Certifications from './components/Certifications';
1112
import Education from './components/Education';
1213
import SocialMagnet from './components/SocialMagnet';
@@ -59,8 +60,8 @@ function App() {
5960
<Hero />
6061
<About />
6162
<Skills />
62-
<Education />
63-
<Projects />
63+
<Education />
64+
{isMobile ? <ProjectsMobile /> : <Projects />}
6465
{/* <Certifications /> */}
6566
<ContactForm />
6667
<SocialMagnet />

‎Ashif/src/components/Projects.jsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -227,16 +227,25 @@ export default function Projects() {
227227
))}
228228
</div>
229229

230-
{!showAll && projectData.length > 3 && (
231-
<div className="text-center mt-12">
230+
{/* View More / View Less Button */}
231+
<div className="text-center mt-12">
232+
{!showAll && projectData.length > 3 && (
232233
<button
233234
onClick={() => setShowAll(true)}
234235
className="btn"
235236
>
236237
View More
237238
</button>
238-
</div>
239-
)}
239+
)}
240+
{showAll && (
241+
<button
242+
onClick={() => setShowAll(false)}
243+
className="btn"
244+
>
245+
View Less
246+
</button>
247+
)}
248+
</div>
240249
</div>
241250
</section>
242251
);

‎Ashif/src/components/ProjectsMobile.jsx‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import React, { useState } from 'react';
2+
import { Highlighter } from "@/components/ui/highlighter";
3+
import project1Img from '../assets/projects/project1.png';
4+
import project2Img from '../assets/projects/project2.png';
5+
import project5Img from '../assets/projects/project5.png';
6+
import project6Img from '../assets/projects/project6.png';
7+
import project7Img from '../assets/projects/project7.png';
8+
import project8Img from '../assets/projects/project8.png';
9+
import project9Img from '../assets/projects/project9.png';
10+
11+
// Use the same data structure as Projects.jsx, including videoUrl
12+
const projectData = [
13+
{
14+
title: 'Sahityaa Sangamm',
15+
description: 'A modern e-commerce platform built with Blade and Laravel.',
16+
videoUrl: 'https://res.cloudinary.com/dktapziq9/video/upload/v1764394626/1764393871242766_dqfnqn.mp4',
17+
imageUrl: project1Img,
18+
liveUrl: 'https://sahityaasangamm.in',
19+
repoUrl: '#',
20+
tags: ['Blade', 'Laravel', 'MySQL'],
21+
},
22+
{
23+
title: 'Portfolio Website',
24+
description: 'My personal portfolio website built with React and Tailwind CSS.',
25+
videoUrl: 'https://res.cloudinary.com/dktapziq9/video/upload/v1764395075/1764395026924189_ij9257.mov',
26+
imageUrl: project7Img,
27+
liveUrl: 'https://ashifelahi.netlify.app',
28+
repoUrl: 'https://github.com/Deadcoder001/React-Personal-Portfolio.git',
29+
tags: ['React', 'Tailwind CSS', 'GSAP', 'Spline', 'Framer Motion', 'Lenis'],
30+
},
31+
{
32+
title: 'ONS Trading Application',
33+
description: 'A real-time trading application using Django and Bootstrap 5.',
34+
videoUrl: 'https://res.cloudinary.com/dktapziq9/video/upload/v1764395357/1764395325884939_lrg7f4.mp4',
35+
imageUrl: project5Img,
36+
liveUrl: 'https://ons-trading.onrender.com',
37+
repoUrl: 'https://github.com/Deadcoder001/ons_trading.git',
38+
tags: ['Django', 'yfinance', 'Bootstrap 5'],
39+
},
40+
{
41+
title: 'Jana Kalyan Swastha sewa',
42+
description: 'A Healthcare website built with HTML and php.',
43+
imageUrl: project6Img,
44+
liveUrl: 'https://jkssewa.org',
45+
repoUrl: '#',
46+
tags: ['HTML', 'CSS', 'JavaScript','PHP', 'MySQL'],
47+
},
48+
{
49+
title: 'Janaewa',
50+
description: 'A NGO website built with HTML, CSS and JavaScript.',
51+
imageUrl: project8Img,
52+
liveUrl: 'https://janasewa.org',
53+
repoUrl: '#',
54+
tags: ['HTML', 'CSS', 'JavaScript'],
55+
},
56+
{
57+
title: 'Earmacs',
58+
description: 'A Hotel Management website built with Wordpress and PHP.',
59+
imageUrl: project9Img,
60+
liveUrl: 'https://earmacs.com',
61+
repoUrl: '#',
62+
tags: ['Wordpress', 'PHP'],
63+
},
64+
];
65+
66+
export default function ProjectsMobile() {
67+
const [showAll, setShowAll] = useState(false);
68+
const displayedProjects = showAll ? projectData : projectData.slice(0, 3);
69+
70+
return (
71+
<section id="projects-mobile" className="w-full bg-white text-black py-12 px-2">
72+
<div className="text-center mb-8">
73+
<h2 className="text-3xl font-bold font-pixel underline-wavy-yellow inline-block">
74+
<Highlighter action="underline" color="#FFD700">
75+
Projects 🚀
76+
</Highlighter>
77+
</h2>
78+
</div>
79+
<div className="flex flex-col gap-6 max-w-md mx-auto">
80+
{displayedProjects.map((project, idx) => (
81+
<div key={idx} className="bg-white rounded-xl shadow p-4 flex flex-col">
82+
<div className="w-full h-40 rounded-lg overflow-hidden mb-3 bg-gray-100">
83+
{project.videoUrl ? (
84+
<video
85+
src={project.videoUrl}
86+
autoPlay
87+
loop
88+
muted
89+
playsInline
90+
className="w-full h-full object-cover"
91+
poster={project.imageUrl}
92+
/>
93+
) : (
94+
<img
95+
src={project.imageUrl}
96+
alt={project.title}
97+
className="w-full h-full object-cover"
98+
/>
99+
)}
100+
</div>
101+
<h3 className="text-lg font-bold mb-1">{project.title}</h3>
102+
<p className="text-xs text-gray-600 mb-2">{project.description}</p>
103+
<div className="flex flex-wrap gap-1 mb-2">
104+
{project.tags && project.tags.map((tag) => (
105+
<span
106+
key={tag}
107+
className="bg-gray-200 text-gray-800 text-[10px] font-semibold px-2 py-0.5 rounded-full"
108+
>
109+
{tag}
110+
</span>
111+
))}
112+
</div>
113+
<div className="flex gap-3 mt-auto">
114+
<a
115+
href={project.liveUrl}
116+
target="_blank"
117+
rel="noopener noreferrer"
118+
className="btn !w-auto !h-auto !px-4 !py-2 !text-xs !rounded-lg"
119+
>
120+
Visit Site
121+
</a>
122+
{project.repoUrl && project.repoUrl !== '#' && (
123+
<a
124+
href={project.repoUrl}
125+
target="_blank"
126+
rel="noopener noreferrer"
127+
className="btn !w-auto !h-auto !px-4 !py-2 !text-xs !rounded-lg bg-gray-200 text-gray-800 hover:bg-gray-300"
128+
>
129+
View Code
130+
</a>
131+
)}
132+
</div>
133+
</div>
134+
))}
135+
</div>
136+
{/* View More / View Less Button */}
137+
<div className="text-center mt-8">
138+
{!showAll && projectData.length > 3 && (
139+
<button
140+
onClick={() => setShowAll(true)}
141+
className="btn"
142+
>
143+
View More
144+
</button>
145+
)}
146+
{showAll && (
147+
<button
148+
onClick={() => setShowAll(false)}
149+
className="btn"
150+
>
151+
View Less
152+
</button>
153+
)}
154+
</div>
155+
</section>
156+
);
157+
}

0 commit comments

Comments
 (0)