Skip to content

Commit 2e6c23c

Browse files
Merge pull request #98 from lugvitc/master
deploy changes
2 parents e79c318 + 7cfada9 commit 2e6c23c

File tree

3 files changed

+323
-2
lines changed

3 files changed

+323
-2
lines changed

src/App.jsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import Password2024 from "./pages/events/event/password2024/Password2024";
3737
import FOSSit2024 from "./pages/events/event/fossit2024/FOSSit2024.jsx";
3838
import StuxNet from "./pages/events/event/StuxNet/StuxNet.jsx";
3939
import LinuxInstallation2024 from "./pages/events/event/LinuxInstallation2024/LinuxInstallation2024.jsx";
40+
import LinuxInstallation2025 from "./pages/events/event/LinuxInstallation2025/LinuxInstallation2025.jsx";
4041
import Cyber0day3 from "./pages/events/event/cod3/cod3";
4142

4243
import Chapter_1 from "./pages/learn/chapters/Chapter_1";
@@ -70,6 +71,7 @@ export const paths = {
7071
fossit2024: "/fossit2024",
7172
StuxNet: "/StuxNet",
7273
LinuxInstallation2024: "/linuxInstallation2024",
74+
LinuxInstallation2025: "/linuxInstallation2025",
7375
Cyber0day3: "/Cyber0day3",
7476

7577
cli: "/cli",
@@ -208,9 +210,13 @@ const router = createHashRouter([
208210
path: "/chapter_6",
209211
element: <Chapter_6 />,
210212
},
211-
213+
{
214+
path: "/LinuxInstallation2025",
215+
element: <LinuxInstallation2025 />,
216+
},
217+
212218
// {
213-
// path:'*',
219+
// path:'*',
214220
// element: <PageNotFound></PageNotFound> ,
215221
// },
216222
]);

src/components/timeline/EventsTimeLine.jsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ function EventsTimeLine() {
1919
const [text11, setText11] = useState("");
2020
const [text12, setText12] = useState("");
2121
const [text13, setText13] = useState("");
22+
const [text14, setText14] = useState("");
2223

2324
const valueRef = useRef(null);
2425
const valueRef2 = useRef(null);
@@ -33,6 +34,7 @@ function EventsTimeLine() {
3334
const valueRef11 = useRef(null);
3435
const valueRef12 = useRef(null);
3536
const valueRef13 = useRef(null);
37+
const valueRef14 = useRef(null);
3638

3739
function handleChange() {
3840
let value = valueRef.current.value;
@@ -165,6 +167,16 @@ function EventsTimeLine() {
165167
window.location.href = "/#/Cyber0day3";
166168
}
167169
}
170+
function handleChange14() {
171+
let value14 = valueRef14.current.value;
172+
console.log(value14);
173+
setText14(value14);
174+
if (text14 == "man LinuxInstallationBooth202") {
175+
setText14("");
176+
console.log(value14 + " i am here ");
177+
window.location.href = "/#/linuxInstallation2025";
178+
}
179+
}
168180

169181
return (
170182
<>
@@ -1056,6 +1068,67 @@ function EventsTimeLine() {
10561068
<div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-[#fff] shadow"></div>
10571069
</div>
10581070
</div>
1071+
1072+
{/* <!-- right --> */}
1073+
<div class="flex md:contents">
1074+
<div class="col-start-5 col-end-6 mr-10 md:mx-auto relative">
1075+
<div class="h-full w-6 flex items-center justify-center">
1076+
<div class="h-full w-1 bg-[#fff] pointer-events-none"></div>
1077+
</div>
1078+
<div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-[#fff] shadow"></div>
1079+
</div>
1080+
<div class="bg-transparent text-white col-start-6 col-end-10 p-4 rounded-xl my-4 mr-auto shadow-md">
1081+
<EventTerminal
1082+
title="lug:~$cli-v.0.0.1x"
1083+
children="coiacascasuin"
1084+
>
1085+
<p>
1086+
<b className="text-blue-gray-600">lug@vitc:~/events$ </b>{" "}
1087+
<b className="text-light-green-300">sudo LinuxInstallation Booth 2025</b>
1088+
</p>
1089+
{/* <br /> */}
1090+
<p>
1091+
<b className="text-blue-gray-600">
1092+
[sudo] password for lugvitc:
1093+
</b>{" "}
1094+
<b className="text-light-green-300"></b>
1095+
</p>
1096+
<p>
1097+
<b className="text-blue-gray-600">
1098+
[root@lugvitc superuser]#
1099+
</b>{" "}
1100+
<b className="text-light-green-300">cat ./LinuxInstallation Booth 2025.sh </b>
1101+
</p>
1102+
<p>
1103+
On 11th and 12th August 2025, the Linux Club organized a Linux Installation
1104+
Booth in AB1 Portico. The event was interactive, attracting a huge number of
1105+
participants, allowing them to gain practical experience in installing
1106+
and configuring Linux distributions while fostering a deeper appreciation
1107+
for open-source technologies.
1108+
</p>
1109+
<br />
1110+
<NavLink
1111+
className="text-light-green-300 underline "
1112+
to={paths.LinuxInstallation2025}
1113+
>
1114+
Read more here...
1115+
</NavLink>
1116+
<br />
1117+
or Type 'man LinuxInstallationBooth2025' to use our CLI|
1118+
<pre>
1119+
$~:{" "}
1120+
<input
1121+
ref={valueRef14}
1122+
type="text"
1123+
name=""
1124+
id="command"
1125+
className="bg-transparent outline-none"
1126+
onChange={handleChange14}
1127+
/>{" "}
1128+
</pre>
1129+
</EventTerminal>
1130+
</div>
1131+
</div>
10591132
</div>
10601133
</div>
10611134
</>
Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
import React, { useEffect } from "react";
2+
import Particle from "../../../../components/Particle/Particle";
3+
import { useRef, useState } from "react";
4+
// Import Swiper React components
5+
import { Swiper, SwiperSlide } from "swiper/react";
6+
7+
// Import Swiper styles
8+
import "swiper/css";
9+
import "swiper/css/pagination";
10+
11+
import img1 from "../../../../images/events/LinuxInstallation2024/img1.png";
12+
import img2 from "../../../../images/events/LinuxInstallation2024/img2.jpg";
13+
import img3 from "../../../../images/events/LinuxInstallation2024/img3.jpg";
14+
import img4 from "../../../../images/events/LinuxInstallation2024/img4.jpg";
15+
import img5 from "../../../../images/events/LinuxInstallation2024/img5.jpg";
16+
import poster from "../../../../images/events/LinuxInstallation2024/poster.png";
17+
18+
19+
// import required modules
20+
import { Pagination } from "swiper/modules";
21+
22+
function LinuxInstallation2024() {
23+
useEffect(() => {
24+
// Scroll to the top when the component mounts
25+
window.scrollTo(0, 0);
26+
});
27+
return (
28+
<>
29+
<Particle />
30+
<div className="bg-transparent font-space">
31+
<div className="text-gray-300 container mx-auto p-8 overflow-hidden md:rounded-lg md:p-10 lg:p-12">
32+
<p className="font-space text-4xl font-bold text-gray-200 max-w-5xl lg:text-7xl lg:pr-24 md:text-6xl">
33+
Linux Installation Booth 2025
34+
</p>
35+
<div className="h-10"></div>
36+
<p className="max-w-2xl font-space text-xl text-gray-400 md:text-2xl">
37+
On 11th and 12th August 2025, the Linux Club organized a Linux
38+
Installation Booth in AB1.The event was interactive, attracting
39+
a huge number of participants, allowing them to gain practical
40+
experience in installing and configuring Linux distributions
41+
while fostering a deeper appreciation for open-source technologies.
42+
</p>
43+
44+
<div className="h-12 md:h-24"></div>
45+
46+
<div className="grid gap-8 md:grid-cols-2">
47+
<div className="flex flex-col justify-center">
48+
<p className="self-start inline font-space text-xl font-medium text-transparent bg-clip-text bg-gradient-to-br from-green-400 to-green-600">
49+
The Linux Club Technical Team
50+
</p>
51+
{/* <h2 className="text-4xl font-bold">.</h2> */}
52+
<div className="h-6"></div>
53+
<p className=" text-2xl text-gray-400 md:pr-10">
54+
The club's goal is to make Linux accessible to everyone.
55+
</p>
56+
<div className="h-8"></div>
57+
<div className="grid grid-cols-2 gap-4 pt-8 border-t border-gray-800">
58+
{/* <div>
59+
<p className="font-semibold text-gray-400">Part 1</p>
60+
<div className="h-4"></div>
61+
<p className="font-space text-gray-400">Lecture</p>
62+
</div> */}
63+
<div>
64+
<p className="font-semibold text-gray-400">
65+
Linux Distro Distribution
66+
</p>
67+
<div className="h-4"></div>
68+
{/* <p className="font-space text-gray-400">Live Bugfix</p> */}
69+
</div>
70+
</div>
71+
</div>
72+
<div>
73+
{/* <div className="-mr-2 rounded-lg md:rounded-l-full h-96">
74+
<video className=" rounded-lg" controls autoPlay>
75+
<source
76+
src="https://docs.material-tailwind.com/demo.mp4"
77+
type="video/mp4"
78+
/>
79+
Your browser does not support the video tag.
80+
</video>
81+
</div> */}
82+
</div>
83+
</div>
84+
85+
<div className="h-12 md:h-40"></div>
86+
87+
<p className="font-space text-4xl">
88+
<span className="text-gray-400">Gallery</span>
89+
</p>
90+
91+
<div className="h-20"></div>
92+
<div className="bg-transparent">
93+
<Swiper
94+
slidesPerView={3}
95+
spaceBetween={30}
96+
pagination={{
97+
clickable: true,
98+
}}
99+
modules={[Pagination]}
100+
className="mySwiper"
101+
>
102+
<SwiperSlide>
103+
<img src={poster} alt="loading image ./...../." />
104+
</SwiperSlide>
105+
<SwiperSlide>
106+
<img src={img1} alt="loading image ./...../." />
107+
</SwiperSlide>
108+
<SwiperSlide>
109+
<img src={img2} alt="loading image ./...../." />
110+
</SwiperSlide>
111+
<SwiperSlide>
112+
<img src={img3} alt="loading image ./...../." />
113+
</SwiperSlide>
114+
<SwiperSlide>
115+
<img src={img4} alt="loading image ./...../." />
116+
</SwiperSlide>
117+
<SwiperSlide>
118+
<img src={img5} alt="loading image ./...../." />
119+
</SwiperSlide>
120+
121+
122+
</Swiper>
123+
</div>
124+
125+
{/* use the below component in case the content is too large */}
126+
{/* <div className="grid gap-8 md:grid-cols-3">
127+
<div className="flex flex-col justify-center md:col-span-2">
128+
<p className="self-start inline font-space text-xl font-medium text-transparent bg-clip-text bg-gradient-to-br from-teal-400 to-teal-600">
129+
We are humans
130+
</p>
131+
<h2 className="text-4xl font-bold">We could work together</h2>
132+
<div className="h-6"></div>
133+
<p className="font-space text-xl text-gray-400 md:pr-10">
134+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam
135+
autem, a recusandae vero praesentium qui impedit doloremque
136+
molestias.
137+
</p>
138+
<div className="h-8"></div>
139+
<div className="grid gap-6 pt-8 border-t border-gray-800 lg:grid-cols-3">
140+
<div>
141+
<p className="font-semibold text-gray-400">Made with love</p>
142+
<div className="h-4"></div>
143+
<p className="font-space text-gray-400">
144+
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
145+
Delectus labor.
146+
</p>
147+
</div>
148+
<div>
149+
<p className="font-semibold text-gray-400">It's easy to build</p>
150+
<div className="h-4"></div>
151+
<p className="font-space text-gray-400">
152+
Ipsum dolor sit, amet consectetur adipisicing elit. Delectus
153+
amet consectetur.
154+
</p>
155+
</div>
156+
<div>
157+
<p className="font-semibold text-gray-400">It's easy to build</p>
158+
<div className="h-4"></div>
159+
<p className="font-space text-gray-400">
160+
Ipsum dolor sit, amet consectetur adipisicing elit. Delectus
161+
amet consectetur.
162+
</p>
163+
</div>
164+
</div>
165+
</div>
166+
<div>
167+
<div className="-mr-24 rounded-lg md:rounded-l-full bg-gradient-to-br from-gray-900 to-black h-96"></div>
168+
</div>
169+
</div> */}
170+
171+
<div className="h-10 md:h-40"></div>
172+
173+
<section className="bg-[#1A1920] text-gray-100 font-space">
174+
<div className="container max-w-5xl px-4 py-12 mx-auto">
175+
<div className="grid gap-4 mx-4 sm:grid-cols-12">
176+
<div className="col-span-12 sm:col-span-3">
177+
<div className="text-center sm:text-left mb-14 before:block before:w-24 before:h-3 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:bg-violet-400">
178+
<h5 className="text-2xl font-semibold">
179+
Linux Installation Booth 2025
180+
</h5>
181+
<span className="text-sm font-bold tracki uppercase text-white">
182+
Event Details
183+
</span>
184+
</div>
185+
</div>
186+
<div className="relative col-span-12 px-4 space-y-6 sm:col-span-9">
187+
<div className="col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 sm:before:absolute sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:bg-blue-400">
188+
<div className="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-violet-400">
189+
<time className="text-xs tracki uppercase text-white">
190+
</time>
191+
<p className="mt-3">
192+
The Linux Club's mission to make Linux accessible to all,
193+
regardless of technical expertise, was clearly successful,
194+
as over 200 participants eagerly participated in the event.
195+
The club’s approach was not only inclusive but also empowering,
196+
drawing students from diverse backgrounds who were excited
197+
to explore something new.
198+
</p>
199+
</div>
200+
<div className="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-violet-400">
201+
<time className="text-xs tracki uppercase text-white"></time>
202+
<p className="mt-3">
203+
The installation booth became a hub of activity, providing a
204+
welcoming, supportive learning environment for attendees.
205+
Students received personalized, hands-on guidance, with
206+
step-by-step instructions and assistance throughout the Linux
207+
installation process. The booth was staffed by knowledgeable
208+
volunteers who patiently helped participants troubleshoot any
209+
challenges, ensuring they felt confident with their new skills.
210+
This thoughtful and collaborative approach allowed students to
211+
interact, ask questions, and gain a deeper understanding of the
212+
Linux operating system.
213+
</p>
214+
</div>
215+
<div className="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-violet-400">
216+
<time className="text-xs tracki uppercase text-white"></time>
217+
<p className="mt-3">
218+
The infectious curiosity and enthusiasm displayed by the
219+
participants were a testament to the Linux Club’s efforts
220+
in sparking interest and demystifying Linux for the student
221+
community. The event not only broadened awareness about the
222+
power of open-source software but also fostered a sense of
223+
camaraderie and shared learning among participants. It was
224+
clear that the Linux Club had succeeded in creating an event
225+
that not only introduced new users to Linux but also encouraged
226+
ongoing exploration and mastery of the operating system.
227+
</p>
228+
</div>
229+
</div>
230+
</div>
231+
</div>
232+
</div>
233+
</section>
234+
235+
<div className="h-12"></div>
236+
</div>
237+
</div>
238+
</>
239+
);
240+
}
241+
242+
export default LinuxInstallation2024;

0 commit comments

Comments
 (0)