Skip to content

Commit 2a3e6f8

Browse files
committed
Added typewriter effect
1 parent 803a471 commit 2a3e6f8

File tree

6 files changed

+79
-32
lines changed

6 files changed

+79
-32
lines changed

package-lock.json

Lines changed: 39 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"react": "^17.0.2",
1717
"react-dom": "^17.0.2",
1818
"react-router-dom": "^6.2.2",
19+
"typewriter-effect": "^2.18.2",
1920
"validator": "^13.7.0"
2021
},
2122
"devDependencies": {

src/App.jsx

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,35 +11,31 @@ import Registered from "./Components/Registered";
1111
import { MantineProvider } from "@mantine/core";
1212
function App() {
1313
return (
14-
<MantineProvider theme={{colorScheme:'dark'}}>
15-
16-
<Routes>
17-
18-
<Route path="/registered" element={<Registered />} />
19-
20-
<Route path="/getUglyTableSecretlyButOpenly" element={<AllUsers />} />
21-
<Route
22-
path="/"
23-
element={
24-
<NotificationsProvider position="top-right">
25-
<div className="App scroll-smooth">
26-
<div className="min-h-screen relative">
27-
<Navbar />
28-
<Event />
29-
<div className="absolute bottom-0 z-[-10] w-full">
30-
<Waves />
14+
<MantineProvider theme={{ colorScheme: "dark" }}>
15+
<Routes>
16+
<Route path="/registered" element={<Registered />} />
17+
<Route path="/getUglyTableSecretlyButOpenly" element={<AllUsers />} />
18+
<Route
19+
path="/"
20+
element={
21+
<NotificationsProvider position="top-right">
22+
<div className="App scroll-smooth">
23+
<div className="min-h-screen relative">
24+
<Navbar />
25+
<Event />
26+
<div className="absolute bottom-0 z-[-10] w-full">
27+
<Waves />
28+
</div>
29+
</div>
30+
<div className="text-[#e1e1e1] bg-[#121212]">
31+
<Form />
3132
</div>
3233
</div>
33-
<div className="text-[#e1e1e1] bg-[#121212]" >
34-
<Form />
35-
</div>
36-
</div>
37-
</NotificationsProvider>
38-
}
39-
/>
40-
</Routes>
34+
</NotificationsProvider>
35+
}
36+
/>
37+
</Routes>
4138
</MantineProvider>
42-
4339
);
4440
}
4541

src/Components/AboutEvent.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function AboutEvent() {
1212
</span>
1313
<div className="mt-2">
1414
<span>
15-
Initialize is a 5-week long event focused on competitive programming,
15+
Initialize is a five-week long event focused on competitive programming,
1616
data structures, and algorithms. Over five weeks, you will be learning
1717
DSA and CP concepts right from the basics and also be competing with
1818
your peers in weekly contests. The event will conclude in a final show

src/Components/Event.jsx

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
11
import React from "react";
22
import Logo from "./../frlogo.png";
3+
import TypewriterComponent from "typewriter-effect";
4+
5+
36
export default function Event() {
47
return (
58
<div className="grid md:grid-cols-2 grid-cols-1 place-content-center w-[75%] gap-[2rem] mx-auto md:mt-16 mt-8">
69
<div className="self-center md:justify-self-start justify-self-center w-[70%] h-full ">
710
<img src={Logo} alt="logo" />
811
</div>
9-
<span className="md:text-[4rem] text-[2rem] text-[#e1e1e1] md:text-right text-center self-center font-mono">
10-
11-
Boot-up your CP journey with <em><span className="text-[#9333ea]" >initialize</span>();</em>
12-
12+
<span className="md:text-[3.5rem] text-[2rem] text-[#e1e1e1] md:text-right text-center self-center font-mono">
13+
Boot-up your CP journey with{" "}
14+
{/* <em>
15+
<span className="text-[#9333ea]">initialize</span>();
16+
</em> */}
17+
<TypewriterComponent
18+
options={{
19+
strings: ['<em><span style="color:#9333ea;">initialize</span>();</>'],
20+
autoStart: true,
21+
loop: true,
22+
}}
23+
/>
1324
<span className="mt-2 block text-[1.1rem] md:text-right text-center font-sans">
1425
Registration closes on 13th March 2022, 11:59 PM
1526
</span>

src/Components/Navbar.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React from "react";
44
export default function Navbar() {
55
return (
66
<div className="flex flex-col sm:flex-row bg-[#121212] w-full items-center gap-4 sm:justify-between md:px-[6rem] px-[2rem] py-4">
7-
<span className="text-[1.25rem] md:text-[1.75rem] text-[#e1e1e1] font-mono text-center"><span className="text-[#16e2f3]">from</span> cS<span className="text-[#9333ea]">.events </span><span ><span className="text-[#16e2f3]">import </span>initialize</span> </span>
7+
<span className="text-[1.25rem] md:text-[1.75rem] text-[#e1e1e1] font-mono text-center"><span className="text-[#6ADDF0]">from</span> cS<span className="text-[#9333ea]">.events </span><span ><span className="text-[#EF8B0E]">import </span>initialize</span> </span>
88
<div>
99
<a target="_blank" href="https://www.codingstudio.club/">
1010
<span className="text-[#e1e1e1] cursor-pointer mr-8 text-[1.1rem]">About Us</span>

0 commit comments

Comments
 (0)