Skip to content

Commit ee95623

Browse files
wbfossadminclaude
wbfossadmin
and
claude
committed
Optimize site for mobile web and improve stats display
- Rename "Page Views" to "Total Views" for consistency - Make stats boxes compact and uniform across all pages - Adjust stats grid to display in one line on desktop (xl:grid-cols-8) - Implement comprehensive mobile web optimizations: * Responsive headers with icon-only buttons on mobile * Responsive typography (text-3xl sm:text-4xl lg:text-5xl) * Mobile-optimized grids (grid-cols-2 sm:grid-cols-3 lg:grid-cols-5) * Responsive padding and spacing throughout * Proper text truncation and wrapping for mobile * Accessibility improvements (aria-label on icon buttons) - Optimize all pages: home, radar, about, and project detail - Update ProjectCard and ProjectDetail components for mobile - Maintain consistent spacing and design across all breakpoints 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 1aac9ff commit ee95623

File tree

7 files changed

+250
-203
lines changed

7 files changed

+250
-203
lines changed

‎app/about/page.tsx‎

Lines changed: 53 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -33,36 +33,52 @@ export default function AboutPage() {
3333
<div className="min-h-screen bg-gray-50 dark:bg-black">
3434
{/* Header */}
3535
<header className="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
36-
<div className="container mx-auto px-4 py-6">
37-
<div className="flex items-center justify-between">
38-
<Link href="/" className="flex items-start gap-3">
39-
<Radar className="h-10 w-10 text-gray-900 dark:text-gray-100 flex-shrink-0 mt-1" />
40-
<div>
41-
<h1 className="text-4xl text-gray-900 dark:text-gray-100 tracking-wider" style={{ fontFamily: 'var(--font-vt323)' }}>
36+
<div className="container mx-auto px-4 py-4 sm:py-6">
37+
<div className="flex items-center justify-between gap-4">
38+
<Link href="/" className="flex items-start gap-2 sm:gap-3 flex-1 min-w-0">
39+
<Radar className="h-8 w-8 sm:h-10 sm:w-10 text-gray-900 dark:text-gray-100 flex-shrink-0 mt-1" />
40+
<div className="min-w-0">
41+
<h1 className="text-3xl sm:text-4xl text-gray-900 dark:text-gray-100 tracking-wider truncate" style={{ fontFamily: 'var(--font-vt323)' }}>
4242
fossradar
4343
</h1>
44-
<p className="text-gray-600 dark:text-gray-400 mt-1 text-sm">
44+
<p className="text-gray-600 dark:text-gray-400 mt-1 text-xs sm:text-sm truncate">
4545
Discover Open Source Projects from India
4646
</p>
4747
</div>
4848
</Link>
49-
<div className="flex items-center gap-3">
49+
<div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
5050
<Link
5151
href="/radar"
52-
className="flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm font-medium transition-colors"
52+
className="hidden sm:flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm font-medium transition-colors"
5353
>
5454
<Map className="h-4 w-4" />
5555
Radar
5656
</Link>
57+
<Link
58+
href="/radar"
59+
className="sm:hidden p-2 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 transition-colors"
60+
aria-label="Radar"
61+
>
62+
<Map className="h-4 w-4" />
63+
</Link>
5764
<Link
5865
href="https://github.com/wbfoss/fossradar#-for-project-owners-get-listed"
5966
target="_blank"
6067
rel="noopener noreferrer"
61-
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition-colors"
68+
className="hidden sm:flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition-colors"
6269
>
6370
<FileCode className="h-4 w-4" />
6471
Submit Project
6572
</Link>
73+
<Link
74+
href="https://github.com/wbfoss/fossradar#-for-project-owners-get-listed"
75+
target="_blank"
76+
rel="noopener noreferrer"
77+
className="sm:hidden p-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white transition-colors"
78+
aria-label="Submit Project"
79+
>
80+
<FileCode className="h-4 w-4" />
81+
</Link>
6682
<ThemeToggle />
6783
</div>
6884
</div>
@@ -74,42 +90,42 @@ export default function AboutPage() {
7490
<div className="max-w-4xl mx-auto">
7591
{/* Hero Section */}
7692
<div className="mb-12">
77-
<h1 className="text-5xl font-heading font-normal text-gray-900 dark:text-gray-100 mb-4 tracking-wide">
93+
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-heading font-normal text-gray-900 dark:text-gray-100 mb-4 tracking-wide">
7894
About FOSSRadar.in
7995
</h1>
80-
<p className="text-xl text-gray-600 dark:text-gray-400 leading-relaxed">
96+
<p className="text-lg sm:text-xl text-gray-600 dark:text-gray-400 leading-relaxed">
8197
India's comprehensive directory celebrating Free and Open Source Software (FOSS) projects through their founders, creators, core contributors, and community impact.
8298
</p>
8399
</div>
84100

85101
{/* Mission Section */}
86102
<div className="mb-12">
87103
<div className="flex items-center gap-3 mb-4">
88-
<Target className="h-6 w-6 text-blue-600 dark:text-blue-400" />
89-
<h2 className="text-3xl font-heading font-normal text-gray-900 dark:text-gray-100 tracking-wide">
104+
<Target className="h-5 w-5 sm:h-6 sm:w-6 text-blue-600 dark:text-blue-400" />
105+
<h2 className="text-2xl sm:text-3xl font-heading font-normal text-gray-900 dark:text-gray-100 tracking-wide">
90106
Our Mission
91107
</h2>
92108
</div>
93-
<p className="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
109+
<p className="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
94110
FOSSRadar.in exists to shine a spotlight on India's vibrant open source ecosystem. We believe that open source innovation from India deserves recognition, celebration, and a central platform where developers, organizations, and enthusiasts can discover and connect with incredible projects.
95111
</p>
96-
<p className="text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
112+
<p className="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
97113
Our mission is to build a comprehensive, Git-based directory that showcases the diversity and depth of FOSS contributions from India—whether through their founders, creators, core contributors, organizational base, or projects that serve the Indian community.
98114
</p>
99115
</div>
100116

101117
{/* What We Are Section */}
102118
<div className="mb-12">
103119
<div className="flex items-center gap-3 mb-4">
104-
<Globe className="h-6 w-6 text-blue-600 dark:text-blue-400" />
105-
<h2 className="text-3xl font-heading font-normal text-gray-900 dark:text-gray-100 tracking-wide">
120+
<Globe className="h-5 w-5 sm:h-6 sm:w-6 text-blue-600 dark:text-blue-400" />
121+
<h2 className="text-2xl sm:text-3xl font-heading font-normal text-gray-900 dark:text-gray-100 tracking-wide">
106122
What is FOSSRadar.in?
107123
</h2>
108124
</div>
109-
<p className="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
125+
<p className="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
110126
FOSSRadar.in is a <strong>Git-based, community-driven directory</strong> that highlights open source projects with connections to India. We showcase projects where:
111127
</p>
112-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
128+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
113129
<div className="p-6 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
114130
<div className="flex items-start gap-3">
115131
<Users className="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-1" />
@@ -152,8 +168,8 @@ export default function AboutPage() {
152168
{/* Why FOSSRadar Section */}
153169
<div className="mb-12">
154170
<div className="flex items-center gap-3 mb-4">
155-
<Radar className="h-6 w-6 text-blue-600 dark:text-blue-400" />
156-
<h2 className="text-3xl font-heading font-normal text-gray-900 dark:text-gray-100 tracking-wide">
171+
<Radar className="h-5 w-5 sm:h-6 sm:w-6 text-blue-600 dark:text-blue-400" />
172+
<h2 className="text-2xl sm:text-3xl font-heading font-normal text-gray-900 dark:text-gray-100 tracking-wide">
157173
Why FOSSRadar?
158174
</h2>
159175
</div>
@@ -188,12 +204,12 @@ export default function AboutPage() {
188204
{/* How It Works Section */}
189205
<div className="mb-12">
190206
<div className="flex items-center gap-3 mb-4">
191-
<FileCode className="h-6 w-6 text-blue-600 dark:text-blue-400" />
192-
<h2 className="text-3xl font-heading font-normal text-gray-900 dark:text-gray-100 tracking-wide">
207+
<FileCode className="h-5 w-5 sm:h-6 sm:w-6 text-blue-600 dark:text-blue-400" />
208+
<h2 className="text-2xl sm:text-3xl font-heading font-normal text-gray-900 dark:text-gray-100 tracking-wide">
193209
How It Works
194210
</h2>
195211
</div>
196-
<p className="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
212+
<p className="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
197213
FOSSRadar.in operates on a simple, transparent, Git-based workflow:
198214
</p>
199215
<ol className="space-y-4 text-gray-700 dark:text-gray-300">
@@ -231,32 +247,32 @@ export default function AboutPage() {
231247
{/* Behind FOSSRadar Section */}
232248
<div className="mb-12">
233249
<div className="flex items-center gap-3 mb-4">
234-
<Users className="h-6 w-6 text-blue-600 dark:text-blue-400" />
235-
<h2 className="text-3xl font-heading font-normal text-gray-900 dark:text-gray-100 tracking-wide">
250+
<Users className="h-5 w-5 sm:h-6 sm:w-6 text-blue-600 dark:text-blue-400" />
251+
<h2 className="text-2xl sm:text-3xl font-heading font-normal text-gray-900 dark:text-gray-100 tracking-wide">
236252
Behind FOSSRadar
237253
</h2>
238254
</div>
239-
<p className="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
255+
<p className="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
240256
FOSSRadar.in is built and maintained by <Link href="https://wbfoss.org" target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline font-semibold">wbfoss</Link>, a community-driven initiative dedicated to promoting Free and Open Source Software in India.
241257
</p>
242-
<p className="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
258+
<p className="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
243259
We believe in the power of open source to drive innovation, collaboration, and positive change. FOSSRadar is our contribution to making India's FOSS ecosystem more visible, connected, and vibrant.
244260
</p>
245-
<p className="text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
261+
<p className="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
246262
The platform itself is <strong>100% open source</strong>, built with Next.js 16, TypeScript, and Tailwind CSS 4. Every line of code, every design decision, and every feature is publicly available on GitHub for anyone to inspect, contribute to, or fork.
247263
</p>
248264
</div>
249265

250266
{/* Get Involved Section */}
251267
<div className="mb-12">
252-
<div className="p-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 text-white">
253-
<h2 className="text-3xl font-heading font-normal mb-4 tracking-wide">
268+
<div className="p-6 sm:p-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 text-white">
269+
<h2 className="text-2xl sm:text-3xl font-heading font-normal mb-4 tracking-wide">
254270
Get Involved
255271
</h2>
256-
<p className="text-lg mb-6 text-blue-50">
272+
<p className="text-base sm:text-lg mb-6 text-blue-50">
257273
FOSSRadar is a community project, and we welcome contributions from everyone. Whether you're submitting a project, fixing a bug, or suggesting improvements, your participation makes FOSSRadar better for everyone.
258274
</p>
259-
<div className="flex flex-wrap gap-4">
275+
<div className="flex flex-col sm:flex-row flex-wrap gap-3 sm:gap-4">
260276
<Link
261277
href="https://github.com/wbfoss/fossradar#-for-project-owners-get-listed"
262278
target="_blank"
@@ -282,12 +298,12 @@ export default function AboutPage() {
282298
{/* Values Section */}
283299
<div className="mb-12">
284300
<div className="flex items-center gap-3 mb-4">
285-
<Heart className="h-6 w-6 text-blue-600 dark:text-blue-400" />
286-
<h2 className="text-3xl font-heading font-normal text-gray-900 dark:text-gray-100 tracking-wide">
301+
<Heart className="h-5 w-5 sm:h-6 sm:w-6 text-blue-600 dark:text-blue-400" />
302+
<h2 className="text-2xl sm:text-3xl font-heading font-normal text-gray-900 dark:text-gray-100 tracking-wide">
287303
Our Values
288304
</h2>
289305
</div>
290-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
306+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
291307
<div className="text-center">
292308
<div className="w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mx-auto mb-4">
293309
<Globe className="h-8 w-8 text-blue-600 dark:text-blue-400" />

‎app/page.tsx‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -53,36 +53,52 @@ export default function Home() {
5353
<div className="min-h-screen bg-gray-50 dark:bg-black">
5454
{/* Header */}
5555
<header className="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
56-
<div className="container mx-auto px-4 py-6">
57-
<div className="flex items-center justify-between">
58-
<div>
59-
<div className="flex items-center gap-3">
60-
<Radar className="h-10 w-10 text-gray-900 dark:text-gray-100" />
61-
<h1 className="text-4xl text-gray-900 dark:text-gray-100 tracking-wider" style={{ fontFamily: 'var(--font-vt323)' }}>
56+
<div className="container mx-auto px-4 py-4 sm:py-6">
57+
<div className="flex items-center justify-between gap-4">
58+
<div className="flex-1 min-w-0">
59+
<div className="flex items-center gap-2 sm:gap-3">
60+
<Radar className="h-8 w-8 sm:h-10 sm:w-10 text-gray-900 dark:text-gray-100 flex-shrink-0" />
61+
<h1 className="text-3xl sm:text-4xl text-gray-900 dark:text-gray-100 tracking-wider truncate" style={{ fontFamily: 'var(--font-vt323)' }}>
6262
fossradar
6363
</h1>
6464
</div>
65-
<p className="text-gray-600 dark:text-gray-400 mt-1 text-sm">
65+
<p className="text-gray-600 dark:text-gray-400 mt-1 text-xs sm:text-sm truncate">
6666
Discover Open Source Projects from India
6767
</p>
6868
</div>
69-
<div className="flex items-center gap-3">
69+
<div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
7070
<Link
7171
href="/radar"
72-
className="flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm font-medium transition-colors"
72+
className="hidden sm:flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm font-medium transition-colors"
7373
>
7474
<Map className="h-4 w-4" />
7575
Radar
7676
</Link>
77+
<Link
78+
href="/radar"
79+
className="sm:hidden p-2 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 transition-colors"
80+
aria-label="Radar"
81+
>
82+
<Map className="h-4 w-4" />
83+
</Link>
7784
<Link
7885
href="https://github.com/wbfoss/fossradar#-for-project-owners-get-listed"
7986
target="_blank"
8087
rel="noopener noreferrer"
81-
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition-colors"
88+
className="hidden sm:flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition-colors"
8289
>
8390
<FileCode className="h-4 w-4" />
8491
Submit Project
8592
</Link>
93+
<Link
94+
href="https://github.com/wbfoss/fossradar#-for-project-owners-get-listed"
95+
target="_blank"
96+
rel="noopener noreferrer"
97+
className="sm:hidden p-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white transition-colors"
98+
aria-label="Submit Project"
99+
>
100+
<FileCode className="h-4 w-4" />
101+
</Link>
86102
<ThemeToggle />
87103
</div>
88104
</div>

0 commit comments

Comments
 (0)