Skip to content

Commit c5ec752

Browse files
SamGu-NRXSamGu-NRX
committed
Fix formatting and dark mode auto switching
1 parent d5c9f63 commit c5ec752

File tree

10 files changed

+248
-119
lines changed

10 files changed

+248
-119
lines changed

‎.vscode/settings.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
{
2-
}
2+
}

‎src/SmoothScroll.jsx

+6-19
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,13 @@
3636
// export default SmoothScroll;
3737

3838
import React, { useEffect } from 'react';
39-
import { BrowserRouter, Link } from 'react-router-dom';
39+
import { BrowserRouter } from 'react-router-dom';
4040
import App from './App';
4141
import LocomotiveScroll from 'locomotive-scroll';
4242
import Aos from 'locomotive-aos';
4343
import './styles/Aos.css'; // Import AOS styles
4444
import 'locomotive-scroll/dist/locomotive-scroll.css';
45-
import getMode from './utils/getMode';
45+
import Header from './components/Header';
4646

4747
const SmoothScroll = () => {
4848
useEffect(() => {
@@ -79,23 +79,10 @@ const SmoothScroll = () => {
7979
return (
8080
<BrowserRouter basename={process.env.PUBLIC_URL}>
8181
<div id="root">
82-
<div style={{
83-
backgroundColor: getMode() === "dark" ? "#18181B" : "#f3f3f3"
84-
}}>
85-
<header style={{ opacity: 0, transition: 'opacity 0.5s ease-in-out' }}>
86-
<nav>
87-
<ul>
88-
<li><Link to="/">Home</Link></li>
89-
<li><Link to="/syllabus">Syllabus</Link></li>
90-
<li><Link to="/staff">Staff</Link></li>
91-
<li><Link to="/inquiry">Inquiry</Link></li>
92-
</ul>
93-
</nav>
94-
</header>
95-
<main id="main-container" data-scroll-container>
96-
<App />
97-
</main>
98-
</div>
82+
<Header/>
83+
<main id="main-container" data-scroll-container>
84+
<App />
85+
</main>
9986
</div>
10087
</BrowserRouter>
10188
);

‎src/components/Header.jsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@ import React from 'react';
22
import { Link } from 'react-router-dom';
33
import '../styles/App.css';
44
import '../styles/ScrollBar.css'
5+
import '../styles/Header.css';
6+
import getMode from '../utils/getMode';
57

68
const Header = () => (
79
<>
810
<div class="scroll-watcher"></div>
9-
<div><header className="bg-blue-600 text-white p-4">
11+
<div><header className={"bg-blue-600 text-white p-4" + (getMode() === "dark") ? "header-dark" : "header-light"}
12+
style={{ opacity: 0, transition: 'opacity 0.5s ease-in-out' }}>
1013
<div className="container mx-auto flex justify-between items-center">
1114
<h1 className="text-2xl">LuminAI Innovate Scholars</h1>
1215
<nav className="mt-2">

‎src/components/Popup.jsx

+51-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,56 @@
1+
// import React, { useState, useEffect } from 'react';
2+
// import '../styles/Popup.css';
3+
4+
// const Popup = (programName) => {
5+
// const [isVisible, setIsVisible] = useState(false);
6+
7+
// useEffect(() => {
8+
// const timer = setTimeout(() => {
9+
// setIsVisible(true);
10+
// }, 5000); // 30 seconds
11+
12+
// return () => clearTimeout(timer);
13+
// }, []);
14+
15+
// const handleClose = () => {
16+
// setIsVisible(false);
17+
// };
18+
19+
// return (
20+
// isVisible && (
21+
// <div className="popup-container">
22+
// <div className="popup">
23+
// <button className="close-button" onClick={handleClose}>×</button>
24+
// {/* <p>Hey there, it seems like you are interested in our ${programName} Program. </p> */}
25+
// <div className="popup-options">
26+
// <label>
27+
// <input type="checkbox" />
28+
// Yeah
29+
// </label>
30+
// <label>
31+
// <input type="checkbox" />
32+
// No thanks
33+
// </label>
34+
// </div>
35+
// </div>
36+
// </div>
37+
// )
38+
// );
39+
// };
40+
41+
// export default Popup;
42+
43+
144
import React, { useState, useEffect } from 'react';
245
import '../styles/Popup.css';
346

4-
const Popup = (programName) => {
47+
const Popup = () => {
548
const [isVisible, setIsVisible] = useState(false);
649

750
useEffect(() => {
851
const timer = setTimeout(() => {
952
setIsVisible(true);
10-
}, 30000); // 30 seconds
53+
}, 1000); // 30 seconds
1154

1255
return () => clearTimeout(timer);
1356
}, []);
@@ -19,9 +62,13 @@ const Popup = (programName) => {
1962
return (
2063
isVisible && (
2164
<div className="popup-container">
22-
<div className="popup">
65+
<div
66+
class="popup popup-glow" style={{animation: "bounceIn 1s"}}
67+
onMouseEnter={() => document.querySelector('.popup').classList.remove('popup-glow')}
68+
onMouseLeave={() => document.querySelector('.popup').classList.add('popup-glow')}
69+
>
2370
<button className="close-button" onClick={handleClose}>×</button>
24-
{/* <p>Hey there, it seems like you are interested in our ${programName} Program. </p> */}
71+
<p>Hey there, want to help make our blog better?</p>
2572
<div className="popup-options">
2673
<label>
2774
<input type="checkbox" />

‎src/pages/Home.jsx

+71-65
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,91 @@
11
import React from 'react';
22
import ApplyButton from '../components/ApplyButton';
33
import '../styles/App.css';
4-
4+
// import Aos from 'locomotive-aos';
55
import { Toaster } from 'sonner';
66
import showNotif from '../components/ToastNotif';
7+
import getMode from '../utils/getMode';
78

9+
const Home = () => {
10+
var colorMode = getMode();
11+
return (
12+
<div data-scroll-section id='main-container'
13+
className={(colorMode === "dark") ? "text-white" : "text-black"}
14+
style={{backgroundColor: (colorMode === 'dark') ? "#18181B" : "#f3f3f3"}}
15+
>
816

9-
const Home = () => (
10-
<div data-scroll-section id='main-container'>
11-
12-
<div className='flex-container'>
13-
<div className="p-4 justify-center text-center" style={{ animation: 'textPopIn 0.7s ease-in-out' }}>
14-
<h2 className="text-2xl font-bold mb-4">Welcome to LuminAI Innovate Scholars</h2>
15-
<p className="mb-4">Empowering the next generation of AI innovators through comprehensive bootcamps.</p>
16-
<ApplyButton />
17+
<div className='flex-container'>
18+
<div className="p-4 justify-center text-center" style={{ animation: 'textPopIn 0.7s ease-in-out' }}>
19+
<h2 className="text-2xl font-bold mb-4">Welcome to LuminAI Innovate Scholars</h2>
20+
<p className="mb-4">Empowering the next generation of AI innovators through comprehensive bootcamps.</p>
21+
<ApplyButton />
22+
</div>
1723
</div>
18-
</div>
19-
20-
<div className="p-4">
21-
<h2 className="text-2xl font-bold mb-4" data-aos="fade-up">Welcome to Lumin AI Innovate Scholars</h2>
22-
<p className="mb-4" data-aos="fade-up" data-aos-delay="100">Empowering the next generation of AI innovators through comprehensive bootcamps.</p>
2324

24-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4" data-aos="fade-up" data-aos-delay="200">
25-
<div className="bg-gray-100 p-4 rounded shadow-md">
26-
<h3 className="text-xl font-bold">Completely Free</h3>
27-
<p>Lumin AI Innovate Scholars is a completely free bootcamp. We believe in providing quality education to everyone without any cost at all.</p>
28-
</div>
29-
<div className="bg-gray-100 p-4 rounded shadow-md">
30-
<h3 className="text-xl font-bold">From Students, For Students</h3>
31-
<p>Our program is created by students who understand the challenges and needs of learning AI. We aim to make AI education accessible to all students.</p>
25+
<div className="p-4">
26+
<h2 className="text-2xl font-bold mb-4" data-aos="fade-up">Welcome to Lumin AI Innovate Scholars</h2>
27+
<p className="mb-4" data-aos="fade-up" data-aos-delay="100">Empowering the next generation of AI innovators through comprehensive bootcamps.</p>
28+
29+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4" data-aos="fade-up" data-aos-delay="200">
30+
<div className="bg-gray-100 p-4 rounded shadow-md">
31+
<h3 className="text-xl font-bold">Completely Free</h3>
32+
<p>Lumin AI Innovate Scholars is a completely free bootcamp. We believe in providing quality education to everyone without any cost at all.</p>
33+
</div>
34+
<div className="bg-gray-100 p-4 rounded shadow-md">
35+
<h3 className="text-xl font-bold">From Students, For Students</h3>
36+
<p>Our program is created by students who understand the challenges and needs of learning AI. We aim to make AI education accessible to all students.</p>
37+
</div>
38+
<div className="bg-gray-100 p-4 rounded shadow-md">
39+
<h3 className="text-xl font-bold">Non-Profit Organization</h3>
40+
<p>We are a non-profit organization dedicated to spreading knowledge and fostering innovation in the field of artificial intelligence.</p>
41+
</div>
42+
<div className="bg-gray-100 p-4 rounded shadow-md">
43+
<h3 className="text-xl font-bold">Legitimate Industry Standard AI</h3>
44+
<p>Our curriculum covers industry-standard AI tools and techniques, ensuring that our students are well-prepared for real-world applications.</p>
45+
</div>
3246
</div>
33-
<div className="bg-gray-100 p-4 rounded shadow-md">
34-
<h3 className="text-xl font-bold">Non-Profit Organization</h3>
35-
<p>We are a non-profit organization dedicated to spreading knowledge and fostering innovation in the field of artificial intelligence.</p>
36-
</div>
37-
<div className="bg-gray-100 p-4 rounded shadow-md">
38-
<h3 className="text-xl font-bold">Legitimate Industry Standard AI</h3>
39-
<p>Our curriculum covers industry-standard AI tools and techniques, ensuring that our students are well-prepared for real-world applications.</p>
47+
48+
<div className="mt-8" data-aos="fade-up" data-aos-delay="300">
49+
<h3 className="text-xl font-bold mb-4">Programming Frameworks and Libraries</h3>
50+
<p>We cover popular programming frameworks and libraries such as PyTorch and TensorFlow, helping you build robust AI models.</p>
51+
<ul className="list-disc list-inside">
52+
<li>Convolutional Neural Networks (CNNs)</li>
53+
<li>Image Recognition</li>
54+
<li>Natural Language Processing (NLP)</li>
55+
<li>Reinforcement Learning (RL)</li>
56+
<li>Machine Learning Algorithms</li>
57+
</ul>
4058
</div>
41-
</div>
4259

43-
<div className="mt-8" data-aos="fade-up" data-aos-delay="300">
44-
<h3 className="text-xl font-bold mb-4">Programming Frameworks and Libraries</h3>
45-
<p>We cover popular programming frameworks and libraries such as PyTorch and TensorFlow, helping you build robust AI models.</p>
46-
<ul className="list-disc list-inside">
47-
<li>Convolutional Neural Networks (CNNs)</li>
48-
<li>Image Recognition</li>
49-
<li>Natural Language Processing (NLP)</li>
50-
<li>Reinforcement Learning (RL)</li>
51-
<li>Machine Learning Algorithms</li>
52-
</ul>
53-
</div>
60+
<div className="mt-8" data-aos="fade-up" data-aos-delay="400">
61+
<h3 className="text-xl font-bold mb-4">Mathematical Foundations</h3>
62+
<p>We also cover essential mathematical concepts that are fundamental to AI, including:</p>
63+
<ul className="list-disc list-inside">
64+
<li>Matrices and Basic Linear Algebra</li>
65+
<li>Principles of Neural Networks</li>
66+
<li>Understanding Large Language Models (LLMs)</li>
67+
</ul>
68+
</div>
5469

55-
<div className="mt-8" data-aos="fade-up" data-aos-delay="400">
56-
<h3 className="text-xl font-bold mb-4">Mathematical Foundations</h3>
57-
<p>We also cover essential mathematical concepts that are fundamental to AI, including:</p>
58-
<ul className="list-disc list-inside">
59-
<li>Matrices and Basic Linear Algebra</li>
60-
<li>Principles of Neural Networks</li>
61-
<li>Understanding Large Language Models (LLMs)</li>
62-
</ul>
63-
</div>
70+
<div className="text-center mt-12" data-aos="fade-up" data-aos-delay="500">
71+
<ApplyButton />
72+
</div>
6473

65-
<div className="text-center mt-12" data-aos="fade-up" data-aos-delay="500">
66-
<ApplyButton />
67-
</div>
74+
<div>
75+
<Toaster richColors/>
76+
<button onClick={() => showNotif('Success! Message sent.', 'success')} className="btn mt-1 p-1 border rounded">
77+
Show Success Toast
78+
</button>
79+
<button onClick={() => showNotif('Failed! Message not sent.', 'error')} className="btn mt-1 p-1 border rounded">
80+
Show Error Toast
81+
</button>
6882

69-
<div>
70-
<Toaster richColors/>
71-
<button onClick={() => showNotif('Success! Message sent.', 'success')} className="btn mt-1 p-1 border rounded">
72-
Show Success Toast
73-
</button>
74-
<button onClick={() => showNotif('Failed! Message not sent.', 'error')} className="btn mt-1 p-1 border rounded">
75-
Show Error Toast
76-
</button>
83+
</div>
84+
7785

7886
</div>
79-
80-
8187
</div>
82-
</div>
83-
);
88+
);
89+
};
8490

8591
export default Home;

‎src/styles/App.css

+5-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ header {
3030

3131
/* Add top padding to main content equal to the header height */
3232
main {
33-
padding-top: calc(2rem + 2rem); /* Adjust based on header height */
3433
min-height: 100vh; /* Ensure main container takes up full viewport height */
3534
overflow: hidden; /* Prevent unwanted scrollbars */
3635
}
@@ -132,9 +131,11 @@ main {
132131
}
133132
}
134133

134+
135+
/* header */
135136
.hidden{
136137
opacity: 0;
137-
transition: all 1s;
138+
transition: all 1s;
138139
}
139140

140141
@media(prefers-reduced-motion) {
@@ -145,4 +146,6 @@ main {
145146

146147
.show{
147148
opacity: 1;
149+
background: linear-gradient(to top, rgba(255, 255, 255, 100) 0%, rgba(255, 255, 255, 50) 100%);
150+
148151
}

‎src/styles/Header.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
.header-light{
6+
background: linear-gradient(to top, rgba(255, 0, 255, 100) 0%, rgba(255, 0, 255, 50) 100%);
7+
};
8+
9+
.header-dark{
10+
background: linear-gradient(to top, rgba(0, 0, 0, 90) 0%, rgba(255, 255, 255, 50) 100%);
11+
};
12+
13+
.header-dark, .header-light{
14+
position: fixed;
15+
width: 100%;
16+
z-index: 1000;
17+
top: 0;
18+
left: 0;
19+
height: 80px;
20+
animation: linear;
21+
animation-timeline: scroll(y);
22+
scale: 0, 1;
23+
transform-origin: left;
24+
}

0 commit comments

Comments
 (0)