Skip to content

Commit 852d650

Browse files
RyanFitzgeraldRyanFitzgerald
committed
Mobile responsiveness tweaks
1 parent d8668f1 commit 852d650

File tree

6 files changed

+206
-155
lines changed

6 files changed

+206
-155
lines changed

‎src/components/About.astro‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@
22
import { siteConfig } from "../config";
33
---
44

5-
<section id="about" class="p-16 md:p-24">
5+
<section id="about" class="p-8 sm:p-12 md:p-16 lg:p-24">
66
<div>
77
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-start">
88
<div class="lg:col-span-4">
9-
<h2 class="text-5xl lg:text-7xl font-bold text-gray-900">About Me</h2>
9+
<h2
10+
class="text-3xl sm:text-4xl md:text-5xl xl:text-7xl font-bold text-gray-900"
11+
>
12+
About Me
13+
</h2>
1014
<div
1115
class="w-[75px] h-[5px] mt-2 rounded-full"
1216
style={`background-color: ${siteConfig.accentColor}`}
@@ -15,15 +19,15 @@ import { siteConfig } from "../config";
1519
</div>
1620

1721
<div class="lg:col-span-8 space-y-8">
18-
<p class="text-2xl leading-relaxed text-gray-600">
22+
<p class="text-lg sm:text-xl md:text-2xl leading-relaxed text-gray-600">
1923
{siteConfig.aboutMe}
2024
</p>
2125

2226
<div class="pt-4">
2327
<div class="flex flex-wrap gap-3">
2428
{
2529
siteConfig.skills.map((skill) => (
26-
<span class="px-4 py-2 bg-gray-100 text-gray-800 rounded-full text-lg font-medium hover:bg-gray-200 transition-colors duration-200">
30+
<span class="px-3 sm:px-4 py-1.5 sm:py-2 bg-gray-100 text-gray-800 rounded-full text-sm sm:text-base md:text-lg font-medium hover:bg-gray-200 transition-colors duration-200">
2731
{skill}
2832
</span>
2933
))

‎src/components/Education.astro‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ const hasEducation = siteConfig.education && siteConfig.education.length > 0;
55

66
{
77
hasEducation && (
8-
<section id="education" class="p-16 md:p-24">
8+
<section id="education" class="p-8 sm:p-12 md:p-16 lg:p-24">
99
<div>
1010
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-start">
1111
<div class="lg:col-span-4">
12-
<h2 class="text-5xl lg:text-7xl font-bold text-gray-900">
12+
<h2 class="text-3xl sm:text-4xl md:text-5xl xl:text-7xl font-bold text-gray-900">
1313
Education
1414
</h2>
1515
<div
@@ -21,20 +21,20 @@ const hasEducation = siteConfig.education && siteConfig.education.length > 0;
2121
<div class="lg:col-span-8">
2222
<div class="space-y-8">
2323
{siteConfig.education.map((edu) => (
24-
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-300">
24+
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 sm:p-5 md:p-6 hover:shadow-md transition-shadow duration-300">
2525
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between mb-4">
2626
<div>
27-
<h3 class="text-xl font-semibold text-gray-900">
27+
<h3 class="text-lg sm:text-xl font-semibold text-gray-900">
2828
{edu.degree}
2929
</h3>
3030
<p
31-
class="text-lg"
31+
class="text-base sm:text-lg"
3232
style={`color: ${siteConfig.accentColor}`}
3333
>
3434
{edu.school}
3535
</p>
3636
</div>
37-
<span class="text-sm text-gray-500 mt-2 sm:mt-0">
37+
<span class="text-xs sm:text-sm text-gray-500 mt-2 sm:mt-0">
3838
{edu.dateRange}
3939
</span>
4040
</div>
@@ -43,7 +43,9 @@ const hasEducation = siteConfig.education && siteConfig.education.length > 0;
4343
{edu.achievements.map((achievement) => (
4444
<li class="flex items-start">
4545
<span class="inline-block w-1.5 h-1.5 rounded-full bg-gray-400 mt-2 mr-3 flex-shrink-0" />
46-
<span class="text-gray-600">{achievement}</span>
46+
<span class="text-sm sm:text-base text-gray-600">
47+
{achievement}
48+
</span>
4749
</li>
4850
))}
4951
</ul>

‎src/components/Experience.astro‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ const hasExperience = siteConfig.experience && siteConfig.experience.length > 0;
55

66
{
77
hasExperience && (
8-
<section id="experience" class="p-16 md:p-24">
8+
<section id="experience" class="p-8 sm:p-12 md:p-16 lg:p-24">
99
<div>
1010
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-start">
1111
<div class="lg:col-span-4">
12-
<h2 class="text-5xl lg:text-7xl font-bold text-gray-900">
12+
<h2 class="text-3xl sm:text-4xl md:text-5xl xl:text-7xl font-bold text-gray-900">
1313
Experience
1414
</h2>
1515
<div
@@ -27,27 +27,27 @@ const hasExperience = siteConfig.experience && siteConfig.experience.length > 0;
2727
class="absolute left-1/2 -top-2 w-4 h-4 bg-white border-2 rounded-full -translate-x-1/2 z-20 transition-all duration-300"
2828
style={`border-color: ${siteConfig.accentColor}; background-color: ${siteConfig.accentColor}`}
2929
/>
30-
30+
3131
{/* Connecting line below card */}
3232
{index < siteConfig.experience.length - 1 && (
3333
<div class="absolute left-1/2 bottom-0 w-0.5 h-12 bg-gray-300 -translate-x-1/2 translate-y-full z-10" />
3434
)}
35-
35+
3636
{/* Experience card */}
37-
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-300">
37+
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 sm:p-5 md:p-6 hover:shadow-md transition-shadow duration-300">
3838
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4">
3939
<div>
40-
<h3 class="text-xl font-semibold text-gray-900">
40+
<h3 class="text-lg sm:text-xl font-semibold text-gray-900">
4141
{exp.title}
4242
</h3>
4343
<p
44-
class="text-lg"
44+
class="text-base sm:text-lg"
4545
style={`color: ${siteConfig.accentColor}`}
4646
>
4747
{exp.company}
4848
</p>
4949
</div>
50-
<span class="text-sm text-gray-500 mt-2 sm:mt-0">
50+
<span class="text-xs sm:text-sm text-gray-500 mt-2 sm:mt-0">
5151
{exp.dateRange}
5252
</span>
5353
</div>
@@ -56,7 +56,9 @@ const hasExperience = siteConfig.experience && siteConfig.experience.length > 0;
5656
{exp.bullets.map((bullet) => (
5757
<li class="flex items-start">
5858
<span class="inline-block w-1.5 h-1.5 rounded-full bg-gray-400 mt-2 mr-3 flex-shrink-0" />
59-
<span class="text-gray-600">{bullet}</span>
59+
<span class="text-sm sm:text-base text-gray-600">
60+
{bullet}
61+
</span>
6062
</li>
6163
))}
6264
</ul>

‎src/components/Footer.astro‎

Lines changed: 46 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ const hasEducation = siteConfig.education && siteConfig.education.length > 0;
88

99
<footer class="relative bg-gray-50 border-t border-gray-200">
1010
<div class="mx-auto max-w-6xl px-6 py-12 lg:px-8">
11-
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-8">
11+
<div
12+
class="flex flex-col md:flex-row md:items-center md:justify-between gap-8"
13+
>
1214
<div class="flex flex-col gap-4">
1315
<h3 class="text-2xl font-bold text-gray-800">
1416
{siteConfig.name}
@@ -118,27 +120,53 @@ const hasEducation = siteConfig.education && siteConfig.education.length > 0;
118120
</a>
119121
</div>
120122
</div>
121-
122-
<div class="flex flex-col md:items-end gap-4">
123+
124+
<div class="hidden md:block flex flex-col md:items-end gap-4">
123125
<nav class="flex gap-x-8">
124-
<a href="#about" class="text-sm text-gray-600 hover:text-gray-800 transition-colors">About</a>
125-
{hasProjects && (
126-
<a href="#projects" class="text-sm text-gray-600 hover:text-gray-800 transition-colors">Projects</a>
127-
)}
128-
{hasExperience && (
129-
<a href="#experience" class="text-sm text-gray-600 hover:text-gray-800 transition-colors">Experience</a>
130-
)}
131-
{hasEducation && (
132-
<a href="#education" class="text-sm text-gray-600 hover:text-gray-800 transition-colors">Education</a>
133-
)}
126+
<a
127+
href="#about"
128+
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
129+
>About</a
130+
>
131+
{
132+
hasProjects && (
133+
<a
134+
href="#projects"
135+
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
136+
>
137+
Projects
138+
</a>
139+
)
140+
}
141+
{
142+
hasExperience && (
143+
<a
144+
href="#experience"
145+
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
146+
>
147+
Experience
148+
</a>
149+
)
150+
}
151+
{
152+
hasEducation && (
153+
<a
154+
href="#education"
155+
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
156+
>
157+
Education
158+
</a>
159+
)
160+
}
134161
</nav>
135162
<p class="text-sm text-gray-500">
136-
© {new Date().getFullYear()} {siteConfig.name}. All rights reserved.
163+
© {new Date().getFullYear()}
164+
{siteConfig.name}. All rights reserved.
137165
</p>
138166
</div>
139167
</div>
140168
</div>
141-
169+
142170
<!-- Decorative pattern -->
143171
<div class="absolute inset-0 -z-10 overflow-hidden">
144172
<svg
@@ -158,10 +186,9 @@ const hasEducation = siteConfig.education && siteConfig.education.length > 0;
158186
stroke="currentColor"
159187
stroke-width="0.5"
160188
fill="none"
161-
opacity="0.4"
162-
/>
189+
opacity="0.4"></path>
163190
</pattern>
164-
<rect width="100%" height="100%" fill="url(#footer-pattern)" />
191+
<rect width="100%" height="100%" fill="url(#footer-pattern)"></rect>
165192
</svg>
166193
</div>
167-
</footer>
194+
</footer>

0 commit comments

Comments
 (0)