Skip to content

Commit dc6cef2

Browse files
arpitkumar2004arpitkumar2004
committed
Mobile responsivemess increases
1 parent 2a9011c commit dc6cef2

File tree

6 files changed

+58
-31
lines changed

6 files changed

+58
-31
lines changed

‎TODO.md‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,34 @@
1-
# TODO: Improve Mobile Navbar UX
1+
# Mobile Responsiveness Improvements for Portfolio Website
22

3-
- [x] Step 1: Add smooth animations for menu open/close transitions.
4-
- [x] Step 2: Improve button styling with better visual feedback (hover, active states).
5-
- [x] Step 3: Add overlay background when menu is open for better focus.
6-
- [x] Step 4: Enhance accessibility with better focus management.
7-
- [x] Step 5: Add swipe gestures or better touch interactions if needed.
3+
## Overview
4+
Make the website fully mobile-friendly by improving UI, font sizes, and div sizes in Experience, Education, and Technical Proficiencies sections.
5+
6+
## Tasks
7+
- [x] Update Experience component for mobile responsiveness
8+
- Reduced h2 font size from text-2xl to text-xl md:text-2xl
9+
- Adjusted divider width from w-24 h-1.5 to w-20 h-1 md:w-24 md:h-1.5
10+
- Card layouts already stack properly on small screens
11+
- Icon sizes and spacing optimized
12+
13+
- [x] Update Education component for mobile responsiveness
14+
- Reduced h2 font size from text-2xl to text-xl md:text-2xl
15+
- Adjusted divider width from w-24 h-1.5 to w-20 h-1 md:w-24 md:h-1.5
16+
- Layout improved for mobile devices
17+
18+
- [x] Update Technical Proficiencies section for mobile responsiveness
19+
- Adjusted coursework section padding from p-10 to p-6 md:p-10
20+
- Adjusted domains section padding from p-10 to p-6 md:p-10
21+
- Reduced "Core Coursework" heading from text-2xl to text-xl md:text-2xl
22+
- Reduced "Domains & Applications" heading from text-2xl to text-xl md:text-2xl
23+
- Grid layouts already optimized for mobile stacking
24+
- Coursework and domains list layouts adjusted
25+
26+
- [x] Test responsiveness across different screen sizes
27+
- Verified layouts on mobile, tablet, and desktop
28+
- Ensured no overflow or cramped elements
29+
- All sections now mobile-friendly with appropriate font sizes and padding
30+
31+
## Files to Edit
32+
- src/components/Experience.tsx
33+
- src/components/Education.tsx
34+
- src/data/skillsData.tsx

‎src/components/Education.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,28 +44,28 @@ const EducationCard = ({ edu }: { edu: EducationItem }) => (
4444
animate={{ opacity: 1, y: 0 }}
4545
exit={{ opacity: 0 }}
4646
transition={{ duration: 0.3 }}
47-
className="bg-white border border-gray-200 rounded-xl p-6 hover:shadow-lg transition-shadow duration-300"
47+
className="bg-white border border-gray-200 rounded-xl p-4 md:p-6 hover:shadow-lg transition-shadow duration-300"
4848
>
4949
<div className="flex flex-col sm:flex-row justify-between items-start gap-2 mb-4">
5050
<div className="flex items-center">
5151
<img src={iitkgpLogo} alt="IIT Kharagpur" className="w-12 h-12" />
5252
<div className="flex flex-col ml-4">
53-
<h3 className="text-xl font-semibold text-gray-900">{edu.institution}</h3>
54-
<p className="text-md text-gray-600">{edu.degree}</p>
55-
<p className="text-sm text-gray-500 flex items-center gap-2 mt-1 ml-0.5">
53+
<h3 className="text-lg md:text-xl font-semibold text-gray-900">{edu.institution}</h3>
54+
<p className="text-sm md:text-md text-gray-600">{edu.degree}</p>
55+
<p className="text-xs md:text-sm text-gray-500 flex items-center gap-2 mt-1 ml-0.5">
5656
{/* <MapPin className="w-4 h-4" /> */}
5757
{edu.location}
5858
</p>
5959
</div>
6060
</div>
61-
<div className="text-sm text-gray-500 text-left sm:text-right flex-shrink-0 mt-2 sm:mt-0">
61+
<div className="text-xs md:text-sm text-gray-500 text-left sm:text-right flex-shrink-0 mt-2 sm:mt-0">
6262
<div className="flex items-center gap-2">
63-
<Calendar className="w-4 h-4" />
63+
<Calendar className="w-3 h-3 md:w-4 md:h-4" />
6464
<span>{edu.duration}</span>
6565
</div>
6666
{edu.gpa && (
6767
<div className="flex items-center gap-2 mt-1">
68-
<Award className="w-4 h-4" />
68+
<Award className="w-3 h-3 md:w-4 md:h-4" />
6969
<span>GPA: {edu.gpa}</span>
7070
</div>
7171
)}
@@ -88,10 +88,10 @@ export default function Education() {
8888
return (
8989
<div className="py-16 bg-white font-sans">
9090
<div className="max-w-4xl mx-auto px-4">
91-
<h2 className="text-2xl font-bold text-center text-gray-800 mb-4">
91+
<h2 className="text-xl md:text-2xl font-bold text-center text-gray-800 mb-4">
9292
My Educational Background
9393
</h2>
94-
<div className="w-24 h-1.5 bg-blue-600 mx-auto rounded-full mb-12" />
94+
<div className="w-20 h-1 md:w-24 md:h-1.5 bg-blue-600 mx-auto rounded-full mb-12" />
9595

9696
<div className="space-y-8">
9797
<AnimatePresence mode="popLayout">

‎src/components/Experience.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -105,25 +105,25 @@ const ExperienceCard = ({ exp }: { exp: ExperienceItem }) => {
105105
animate={{ opacity: 1, y: 0 }}
106106
exit={{ opacity: 0 }}
107107
transition={{ duration: 0.3 }}
108-
className="bg-white border border-gray-200 rounded-xl p-6 hover:shadow-lg transition-shadow duration-300 cursor-pointer"
108+
className="bg-white border border-gray-200 rounded-xl p-4 md:p-6 hover:shadow-lg transition-shadow duration-300 cursor-pointer"
109109
onClick={() => setIsExpanded(!isExpanded)}
110110
>
111111
{/* Minimized view: Company, last position, location, duration */}
112112
<div className="flex flex-col sm:flex-row justify-between items-start gap-2 mb-4">
113113
<div className='flex items-center'>
114114
{companyIcons[exp.company] || <Building2 className="w-6 h-6 text-blue-600" />}
115115
<div className="flex flex-col">
116-
<a href={exp.link} title='Link to company page' className="text-lg font-semibold text-gray-900 ml-6 hover:text-blue-600 hover:underline transition-colors">{exp.company}</a>
117-
<p className="text-md text-gray-700 ml-6 mt-1">{exp.roles[0]?.title}</p>
118-
<p className="text-sm text-gray-500 ml-6 mt-1 flex items-center gap-2">
116+
<a href={exp.link} title='Link to company page' className="text-base md:text-lg font-semibold text-gray-900 ml-6 hover:text-blue-600 hover:underline transition-colors">{exp.company}</a>
117+
<p className="text-sm md:text-md text-gray-700 ml-6 mt-1">{exp.roles[0]?.title}</p>
118+
<p className="text-xs md:text-sm text-gray-500 ml-6 mt-1 flex items-center gap-2">
119119
{/* <MapPin className="w-4 h-4" /> */}
120120
{exp.location}
121121
</p>
122122
</div>
123123
</div>
124-
<div className="text-sm text-gray-500 text-left sm:text-right flex-shrink-0 mt-2 sm:mt-0">
124+
<div className="text-xs md:text-sm text-gray-500 text-left sm:text-right flex-shrink-0 mt-2 sm:mt-0">
125125
<div className="flex items-center gap-2">
126-
<Calendar className="w-4 h-4" />
126+
<Calendar className="w-3 h-3 md:w-4 md:h-4" />
127127
<span>{exp.totalDuration}</span>
128128
</div>
129129
</div>
@@ -174,10 +174,10 @@ export default function Experience() {
174174
return (
175175
<div className="py-16 bg-gray-50 font-sans">
176176
<div className="max-w-4xl mx-auto px-4">
177-
<h2 className="text-2xl font-bold text-center text-gray-800 mb-4">
177+
<h2 className="text-xl md:text-2xl font-bold text-center text-gray-800 mb-4">
178178
My Professional Experience till date
179179
</h2>
180-
<div className="w-24 h-1.5 bg-blue-600 mx-auto rounded-full mb-12" />
180+
<div className="w-20 h-1 md:w-24 md:h-1.5 bg-blue-600 mx-auto rounded-full mb-12" />
181181

182182
<div className="space-y-2">
183183
{/* Display all experiences as expandable cards */}

‎src/data/skillsData.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export default function TechnicalProficiencies() {
164164
<section id="technical" className="py-16 bg-gradient-to-br from-slate-50 to-blue-50" ref={sectionRef}>
165165
<div className="max-w-7xl mx-auto px-6 text-center">
166166
<motion.h2
167-
className="text-2xl md:text-2xl font-bold text-center mb-6 text-black bg-clip-text"
167+
className="text-xl md:text-2xl font-bold text-center mb-6 text-black bg-clip-text"
168168
initial={{ opacity: 0, y: -30 }}
169169
whileInView={{ opacity: 1, y: 0 }}
170170
transition={{ duration: 0.8 }}
@@ -187,7 +187,7 @@ export default function TechnicalProficiencies() {
187187
<motion.div
188188
key={idx}
189189
ref={el => cardsRef.current[idx] = el}
190-
className="group relative bg-white/80 backdrop-blur-sm shadow-xl rounded-3xl p-8 border border-white/20 hover:border-blue-200 transition-all duration-500 hover:shadow-2xl hover:shadow-blue-100/50"
190+
className="group relative bg-white/80 backdrop-blur-sm shadow-xl rounded-3xl p-6 md:p-8 border border-white/20 hover:border-blue-200 transition-all duration-500 hover:shadow-2xl hover:shadow-blue-100/50"
191191
whileHover={{
192192
y: -8,
193193
scale: 1.02,
@@ -257,7 +257,7 @@ export default function TechnicalProficiencies() {
257257
{/* Coursework Section */}
258258
<motion.div
259259
ref={courseworkRef}
260-
className="bg-white/90 backdrop-blur-sm shadow-2xl rounded-3xl p-10 border border-white/30 mb-12"
260+
className="bg-white/90 backdrop-blur-sm shadow-2xl rounded-3xl p-6 md:p-10 border border-white/30 mb-12"
261261
style={{ willChange: 'transform' }}
262262
>
263263
<div className="flex items-center gap-4 mb-8 justify-center">
@@ -268,7 +268,7 @@ export default function TechnicalProficiencies() {
268268
>
269269
<BookOpen className="w-6 h-6 text-green-600" />
270270
</motion.div>
271-
<h3 className="text-2xl font-bold text-gray-800">Core Coursework</h3>
271+
<h3 className="text-xl md:text-2xl font-bold text-gray-800">Core Coursework</h3>
272272
</div>
273273
<motion.ul
274274
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-gray-700 text-sm text-left max-w-5xl mx-auto"
@@ -303,7 +303,7 @@ export default function TechnicalProficiencies() {
303303
{/* Domain & Application Section */}
304304
<motion.div
305305
ref={domainsRef}
306-
className="bg-white/90 backdrop-blur-sm shadow-2xl rounded-3xl p-10 border border-white/30"
306+
className="bg-white/90 backdrop-blur-sm shadow-2xl rounded-3xl p-6 md:p-10 border border-white/30"
307307
style={{ willChange: 'transform' }}
308308
>
309309
<div className="flex items-center gap-4 mb-8 justify-center">
@@ -314,7 +314,7 @@ export default function TechnicalProficiencies() {
314314
>
315315
<Target className="w-6 h-6 text-purple-600" />
316316
</motion.div>
317-
<h3 className="text-2xl font-bold text-gray-800">Domains & Applications</h3>
317+
<h3 className="text-xl md:text-2xl font-bold text-gray-800">Domains & Applications</h3>
318318
</div>
319319
<motion.ul
320320
className="grid grid-cols-1 md:grid-cols-2 gap-6 text-gray-700 text-sm text-left max-w-5xl mx-auto"

‎src/pages/ProjectDetail.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -332,7 +332,7 @@ const ProjectDetail: React.FC = () => {
332332

333333
{/* --- SIMILAR PROJECTS SECTION --- */}
334334
<div className="mt-20 pt-12 border-t">
335-
<h2 className="text-2xl font-bold text-center mb-8 text-gray-900">
335+
<h2 className="text-xl md:text-2xl font-bold text-center mb-8 text-gray-900">
336336
{similarProjects.length > 0 ? 'Explore Similar Projects' : 'Explore Other Projects'}
337337
</h2>
338338

‎src/pages/Projects.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const Projects: React.FC = () => {
8585
animate={{ y: 0 }}
8686
transition={{ duration: 0.5 }}
8787
>
88-
My Projects
88+
Explore my Projects...
8989
</motion.h1>
9090

9191
{/* --- IMPROVED CONTROLS --- */}

0 commit comments

Comments
 (0)