blob: 35cfe8b3c2c2f654bc3c628855edc288e5e41648 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import PageHead from '@/components/PageHead.astro'
import ProjectCard from '@/components/ProjectCard.astro'
import Layout from '@/layouts/Layout.astro'
import { getAllProjects } from '@/lib/data-utils'
const projects = await getAllProjects()
---
<Layout class="max-w-3xl">
<PageHead slot="head" title="About" />
<Breadcrumbs items={[{ label: 'About', icon: 'lucide:info' }]} />
<div class="max-w-4xl mx-auto">
<section class="pt-24 pb-20 px-6">
<div class="max-w-6xl mx-auto text-center hero-content">
<h1 class="hidden h-full py-4 font-mono leading-none font-medium italic md:block md:text-7xl">
foss<span class="text-primary">cet</span>
</h1>
<p class="text-xl md:text-2xl text-slate-300 max-w-3xl mx-auto mb-12 leading-relaxed text-grey">
Free & Open Source revolutionaries at CET - Building software freedom, one commit at a time.
</p>
</div>
</section>
<!-- Stats -->
<section class="py-20 px-6 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-emerald-500/5 to-cyan-500/5"></div>
<div class="max-w-6xl mx-auto relative">
<div class="grid md:grid-cols-4 gap-8 text-center">
<div class="fade-in" style="transition-delay: 100ms" style="transition: all 0.1s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.09)'" onmouseout="this.style.transform='scale(1)'" onclick="window.location.href = '/members'">
<div class="stat-number text-emerald-400 font-mono" data-target="50">0</div>
<div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Active Members</div>
</div>
<div class="fade-in" style="transition-delay: 100ms" style="transition: all 0.1s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.09)'" onmouseout="this.style.transform='scale(1)'" onclick="window.location.href = '/blog'">
<div class="stat-number text-emerald-400 font-mono" data-target="25">0</div>
<div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Projects Live</div>
</div>
<div class="fade-in" style="transition-delay: 100ms" style="transition: all 0.1s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.09)'" onmouseout="this.style.transform='scale(1)'" onclick="window.location.href = '/blog'">
<div class="stat-number text-emerald-400 font-mono" data-target="150">0</div>
<div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Commits Pushed</div>
</div>
<div class="fade-in" style="transition-delay: 100ms" style="transition: all 0.1s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.09)'" onmouseout="this.style.transform='scale(1)'" onclick="window.location.href = '/events'">
<div class="stat-number text-emerald-400 font-mono" data-target="8">0</div>
<div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Events Hosted</div>
</div>
</div>
</div>
</section>
<!-- Mission -->
<section class="py-20 px-6">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-20 fade-in">
<h2 class="text-4xl md:text-5xl font-black bg-gradient-to-r from-slate-200 to-slate-400 bg-clip-text mb-6">Our Mission</h2>
<div class="w-24 h-1 bg-gradient-to-r from-emerald-400 to-cyan-400 mx-auto rounded-full"></div>
</div>
<div class="grid items-center">
<div class="space-y-6 fade-in" style="transition-delay: 200ms">
<h3 class="text-3xl font-bold text-white mb-6"><span class="text-primary">F</span>ree and <span class="text-primary">O</span>pen <span class="text-primary">S</span>ource <span class="text-primary">S</span>oftware</h3>
<p class="text-lg text-slate-300 leading-relaxed">
We're bringing FOSS to CET students by replacing proprietary tools with Linux, GitHub workflows,
and community-driven development. From kernel hacking to UI/UX contributions, we're building
the next generation of open source maintainers.
</p>
</div>
<br>
<div class="space-y-6 fade-in" style="transition-delay: 200ms">
<h3 class="text-3xl font-bold text-white mb-6">Student Awareness and Software Responsibility</h3>
<p class="text-lg text-slate-300 leading-relaxed">
While addressing the FOSS movement, we also want to raise student awareness and improve anti-piracy and unresponsible software usage tendecies by providing free and open-source alternates.
</p>
</div>
</div>
</div>
</section>
<!-- Header -->
<div class="text-center mb-16">
<h1 class="text-5xl font-bold bg-clip-text text-transparent mb-4">
<span class="text-primary">
The FOSS Movement
</span>
</h1>
</div>
<!-- Timeline Container -->
<div class="relative">
<!-- Vertical Line -->
<div class="absolute left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-emerald-400 to-cyan-500"></div>
<!-- Timeline Items -->
<div class="space-y-12">
<!-- 1983-1985 -->
<div class="flex items-center pl-16 relative group">
<div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
<i class="fas fa-rocket"></i>
</div>
<div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4" style="transition: all 0.3s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
<div class="flex items-center mb-2" id='container'>
<span class="text-2xl font-mono"><span class="text-primary">1983–1985</span></span>
<div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
<span class="text-sm text-slate-400">Global Foundations</span>
</div>
<h3 class="text-2xl font-bold text-white mb-2">GNU Project & FSF</h3>
<p class="text-slate-300">Richard Stallman launches GNU (1983) and Free Software Foundation (1985), creates GPL license. Emacs also released as first product under GNU License.</p>
</div>
</div>
<!-- 1991-1993 -->
<div class="flex items-center pl-16 relative group">
<div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
<i class="fab fa-linux"></i>
</div>
<div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4" style="transition: all 0.3s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
<div class="flex items-center mb-2">
<span class="text-2xl font-mono"><span class="text-primary">1991–1993</span></span>
<div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
<span class="text-sm text-slate-400">Kernel Boom</span>
</div>
<h3 class="text-2xl font-bold text-white mb-2">Linux Kernel Released</h3>
<p class="text-slate-300">Linus Torvalds releases Linux kernel (1991); BSD variants gain traction post-lawsuits.</p>
</div>
</div>
<!-- 1998 -->
<div class="flex items-center pl-16 relative group">
<div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
<i class="fas fa-globe"></i>
</div>
<div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4" style="transition: all 0.3s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
<div class="flex items-center mb-2">
<span class="text-2xl font-mono"><span class="text-primary">1998</span></span>
<div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
<span class="text-sm text-slate-400">Term Coined</span>
</div>
<h3 class="text-2xl font-bold text-white mb-2">"Open Source" is Born</h3>
<p class="text-slate-300">Term coined for broader appeal; Apache/Red Hat commercialize FOSS.</p>
</div>
</div>
<!-- 2000-2001 India -->
<div class="flex items-center pl-16 relative group">
<div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
<i class="fas fa-flag"></i>
</div>
<div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4" style="transition: all 0.3s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
<div class="flex items-center mb-2">
<span class="text-2xl font-mono text-orange-400"><span class="text-primary">2000-2001</span></span>
<div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
<span class="text-sm text-slate-400">India Awakens</span>
</div>
<h3 class="text-2xl font-bold text-white mb-2">Kerala Leads</h3>
<p class="text-slate-300">Kerala's IT@School promotes FOSS education; FSF India starts in Trivandrum.</p>
</div>
</div>
<!-- 2025-2026 -->
<div class="flex items-center pl-16 relative group">
<div class="absolute -left-12 w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
<i class="fas fa-users"></i>
</div>
<div class="bg-gradient-to-r from-emerald-500/20 to-cyan-500/20 backdrop-blur-sm p-8 rounded-2xl border-2 border-emerald-500/50 shadow-2xl w-full ml-4" style="transition: all 0.3s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
<div class="flex items-center mb-3">
<span class="text-2xl font-mono text-emerald-400">2025–2026</span>
<div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
<span class="text-sm text-slate-400">FOSS@CET</span></span>
</div>
<h3 class="text-3xl font-black bg-gradient-to-r from-white to-slate-200 bg-clip-text text-transparent mb-3">
<span class="italic">foss<span class="text-primary">cet</span></span> is launched
</h3>
<p class="text-slate-300">The FOSS movement is brought back to our very own CET, stronger than ever.</p>
<div class="flex space-x-4 text-sm">
</div>
</div>
</div>
</div>
</div>
</Layout>
|
