sosokker/SOS12
1
0
Fork 0
mirror of https://github.com/Sosokker/SOS12.git synced 2025-12-18 12:14:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Maybe Final, still need to add more questions

Browse Source
This commit is contained in:
Krittin SETDHAVANICH 2023-07-03 15:27:01 +07:00
parent acad5e8e7f
commit ab218a5559
28 changed files with 2049 additions and 1153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./public/logo.svg" />
<link rel="icon" type="svg" href="./src/assets/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SOS CAMP | 12TH</title>
</head>

0
src/images/syntax.jpeg → public/images/syntax.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 56 KiB

1
public/logo.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

37
src/App.jsx
View File

@ -1,26 +1,25 @@
import { BrowserRouter } from "react-router-dom";
import { Routes, Route } from 'react-router-dom';
import { Menu, Navbar, Contacts, StarsCanvas, Problems, Faq } from "./components";
import {BrowserRouter, Route, Routes} from "react-router-dom";
import {Contacts, Faq, Menu, Navbar, Problems} from "./components";
import "./index.css"
import "./components/Problems.css"
const App = () => {
return (
<BrowserRouter>
<div className='relative z-0 bg-primary'>
<div className='bg-[#050816]'>
<Navbar />
<Routes>
<Route path="/" element={<Menu />} />
<Route path="/problems" element={<Problems />} />
<Route path="/contacts" element={<Contacts />} />
<Route path="/contact" element={<Contacts />} />
<Route path="/faq" element={<Faq />} />
</Routes>
</div>
</div>
</BrowserRouter>
);
return (
<BrowserRouter>
<div className='relative z-0 bg-primary'>
<div className='bg-[#050816]'>
<Navbar/>
<Routes>
<Route path="/" element={<Menu/>}/>
<Route path="/problems" element={<Problems/>}/>
<Route path="/contacts" element={<Contacts/>}/>
<Route path="/contact" element={<Contacts/>}/>
<Route path="/faq" element={<Faq/>}/>
</Routes>
</div>
</div>
</BrowserRouter>
);
}
export default App;

1056
src/assets/logo.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 90 KiB

236
src/components/Contacter.jsx
View File

@ -1,135 +1,135 @@
import React, { useRef, useState } from "react";
import { motion } from "framer-motion";
import React, {useRef, useState} from "react";
import {motion} from "framer-motion";
import emailjs from "@emailjs/browser";
import { styles } from "../styles";
import { SectionWrapper } from "../hoc";
import { slideIn } from "../utils/motion";
import {styles} from "../styles";
import {SectionWrapper} from "../hoc";
import {slideIn} from "../utils/motion";
import EarthCanvas from "./canvas/Earth.jsx";
const Contact = () => {
const formRef = useRef();
const [form, setForm] = useState({
name: "",
email: "",
message: "",
});
const [loading, setLoading] = useState(false);
const handleChange = (e) => {
const { target } = e;
const { name, value } = target;
setForm({
...form,
[name]: value,
const formRef = useRef();
const [form, setForm] = useState({
name: "",
email: "",
message: "",
});
};
const handleSubmit = (e) => {
e.preventDefault();
setLoading(true);
const [loading, setLoading] = useState(false);
emailjs
.send(
import.meta.env.VITE_APP_EMAILJS_SERVICE_ID,
import.meta.env.VITE_APP_EMAILJS_TEMPLATE_ID,
{
from_name: form.name,
to_name: "JJ",
from_email: form.email,
to_email: "Jwizzed@outlook.com",
message: form.message,
},
import.meta.env.VITE_APP_EMAILJS_PUBLIC_KEY
)
.then(
() => {
setLoading(false);
alert("Thank you. I will get back to you as soon as possible.");
const handleChange = (e) => {
const {target} = e;
const {name, value} = target;
setForm({
name: "",
email: "",
message: "",
});
},
(error) => {
setLoading(false);
console.error(error);
setForm({
...form,
[name]: value,
});
};
alert("Ahh, something went wrong. Please try again.");
}
);
};
const handleSubmit = (e) => {
e.preventDefault();
setLoading(true);
return (
<div
className={`xl:mt-12 flex xl:flex-row flex-col-reverse gap-10 overflow-hidden`}
>
<motion.div
variants={slideIn("left", "tween", 0.2, 1)}
className='flex-[0.75] bg-black-100 p-8 rounded-2xl'
>
<p className={styles.sectionSubText}>Get in touch</p>
<h3 className={styles.sectionHeadText}>Contact.</h3>
emailjs
.send(
import.meta.env.VITE_APP_EMAILJS_SERVICE_ID,
import.meta.env.VITE_APP_EMAILJS_TEMPLATE_ID,
{
from_name: form.name,
to_name: "JJ",
from_email: form.email,
to_email: "Jwizzed@outlook.com",
message: form.message,
},
import.meta.env.VITE_APP_EMAILJS_PUBLIC_KEY
)
.then(
() => {
setLoading(false);
alert("Thank you. I will get back to you as soon as possible.");
<form
ref={formRef}
onSubmit={handleSubmit}
className='mt-12 flex flex-col gap-8'
setForm({
name: "",
email: "",
message: "",
});
},
(error) => {
setLoading(false);
console.error(error);
alert("Ahh, something went wrong. Please try again.");
}
);
};
return (
<div
className={`xl:mt-12 flex xl:flex-row flex-col-reverse gap-10 overflow-hidden`}
>
<label className='flex flex-col'>
<span className='text-white font-medium mb-4'>Your Name</span>
<input
type='text'
name='name'
value={form.name}
onChange={handleChange}
placeholder="What's your good name?"
className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
/>
</label>
<label className='flex flex-col'>
<span className='text-white font-medium mb-4'>Your email</span>
<input
type='email'
name='email'
value={form.email}
onChange={handleChange}
placeholder="What's your web address?"
className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
/>
</label>
<label className='flex flex-col'>
<span className='text-white font-medium mb-4'>Your Message</span>
<textarea
rows={7}
name='message'
value={form.message}
onChange={handleChange}
placeholder='What you want to say?'
className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
/>
</label>
<motion.div
variants={slideIn("left", "tween", 0.2, 1)}
className='flex-[0.75] bg-black-100 p-8 rounded-2xl'
>
<p className={styles.sectionSubText}>Get in touch</p>
<h3 className={styles.sectionHeadText}>Contact.</h3>
<button
type='submit'
className='bg-tertiary py-3 px-8 rounded-xl outline-none w-fit text-white font-bold shadow-md shadow-primary'
>
{loading ? "Sending..." : "Send"}
</button>
</form>
</motion.div>
<form
ref={formRef}
onSubmit={handleSubmit}
className='mt-12 flex flex-col gap-8'
>
<label className='flex flex-col'>
<span className='text-white font-medium mb-4'>Your Name</span>
<input
type='text'
name='name'
value={form.name}
onChange={handleChange}
placeholder="What's your good name?"
className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
/>
</label>
<label className='flex flex-col'>
<span className='text-white font-medium mb-4'>Your email</span>
<input
type='email'
name='email'
value={form.email}
onChange={handleChange}
placeholder="What's your web address?"
className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
/>
</label>
<label className='flex flex-col'>
<span className='text-white font-medium mb-4'>Your Message</span>
<textarea
rows={7}
name='message'
value={form.message}
onChange={handleChange}
placeholder='What you want to say?'
className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
/>
</label>
<motion.div
variants={slideIn("right", "tween", 0.2, 1)}
className='xl:flex-1 xl:h-auto md:h-[550px] h-[350px]'
>
<EarthCanvas />
</motion.div>
</div>
);
<button
type='submit'
className='bg-tertiary py-3 px-8 rounded-xl outline-none w-fit text-white font-bold shadow-md shadow-primary'
>
{loading ? "Sending..." : "Send"}
</button>
</form>
</motion.div>
<motion.div
variants={slideIn("right", "tween", 0.2, 1)}
className='xl:flex-1 xl:h-auto md:h-[550px] h-[350px]'
>
<EarthCanvas/>
</motion.div>
</div>
);
};
export default SectionWrapper(Contact, "contact");

4
src/components/Contacts.jsx
View File

@ -3,13 +3,13 @@ import {SectionWrapper} from "../hoc";
import Contact from "./Contacter.jsx"
import SocialMedia from "./SocialMedia.jsx";
import {styles} from "../styles.js";
import { StarsCanvas } from "./canvas";
import {StarsCanvas} from "./canvas";
const Contacts = () => {
return (
<div>
<Contact/>
<StarsCanvas />
<StarsCanvas/>
<div className="mt-8">
<h2 className={`${styles.sectionSubTextCenter}`}>SOS12 Social Media</h2>

317
src/components/Faq.jsx
View File

@ -1,171 +1,172 @@
import React, { useState } from 'react';
import { styles } from "../styles";
import { motion } from "framer-motion";
import { textVariant } from "../utils/motion";
import { SectionWrapper } from "../hoc";
import { faqs } from '../constants';
import React, {useState} from 'react';
import {styles} from "../styles";
import {motion} from "framer-motion";
import {textVariant} from "../utils/motion";
import {SectionWrapper} from "../hoc";
import {faqs} from '../constants';
const Faq = () => {
const [activeIndex, setActiveIndex] = useState(null);
const [activeSection, setActiveSection] = useState(null);
const [searchTerm, setSearchTerm] = useState('');
const [activeIndex, setActiveIndex] = useState(null);
const [activeSection, setActiveSection] = useState(null);
const [searchTerm, setSearchTerm] = useState('');
const toggleFAQ = (sectionIndex, faqIndex) => {
setActiveIndex((prevIndex) => {
if (
prevIndex !== null &&
prevIndex[0] === sectionIndex &&
prevIndex[1] === faqIndex
) {
return null; // Collapse the clicked FAQ
}
return [sectionIndex, faqIndex]; // Expand the clicked FAQ
});
};
const toggleFAQ = (sectionIndex, faqIndex) => {
setActiveIndex((prevIndex) => {
if (
prevIndex !== null &&
prevIndex[0] === sectionIndex &&
prevIndex[1] === faqIndex
) {
return null; // Collapse the clicked FAQ
}
return [sectionIndex, faqIndex]; // Expand the clicked FAQ
});
};
const toggleSection = (section) => {
setActiveSection((prevSection) => {
if (prevSection === section) {
return null; // Close the clicked section
}
return section; // Open the clicked section
});
};
const toggleSection = (section) => {
setActiveSection((prevSection) => {
if (prevSection === section) {
return null; // Close the clicked section
}
return section; // Open the clicked section
});
};
const filteredFaqs = faqs.filter(
(faq) =>
faq.section.toLowerCase().includes(searchTerm.toLowerCase()) ||
faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
faq.answer.toLowerCase().includes(searchTerm.toLowerCase())
);
const filteredFaqs = faqs.filter(
(faq) =>
faq.section.toLowerCase().includes(searchTerm.toLowerCase()) ||
faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
faq.answer.toLowerCase().includes(searchTerm.toLowerCase())
);
const groupedFaqs = filteredFaqs.reduce((acc, curr) => {
const foundIndex = acc.findIndex((item) => item.section === curr.section);
if (foundIndex === -1) {
acc.push({
section: curr.section,
faqs: [curr],
});
} else {
acc[foundIndex].faqs.push(curr);
}
return acc;
}, []);
const groupedFaqs = filteredFaqs.reduce((acc, curr) => {
const foundIndex = acc.findIndex((item) => item.section === curr.section);
if (foundIndex === -1) {
acc.push({
section: curr.section,
faqs: [curr],
});
} else {
acc[foundIndex].faqs.push(curr);
}
return acc;
}, []);
const handleSearch = (e) => {
setSearchTerm(e.target.value);
};
const handleSearch = (e) => {
setSearchTerm(e.target.value);
};
return (
<div>
<motion.div variants={textVariant()}>
<p className={`${styles.sectionSubText} `}>ถามหน่อย</p>
<h2 className={`${styles.sectionHeadText}`}>Frequently Asked Questions</h2>
</motion.div>
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
<form>
<label htmlFor="default-search" className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">
Search
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg
aria-hidden="true"
className="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
></path>
</svg>
</div>
<input
type="search"
id="default-search"
className="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Search..."
value={searchTerm}
onChange={handleSearch}
/>
</div>
</form>
return (
<div>
<motion.div variants={textVariant()}>
<p className={`${styles.sectionSubText} `}>ถามหน่อย</p>
<h2 className={`${styles.sectionHeadText}`}>Frequently Asked Questions</h2>
</motion.div>
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
<form>
<label htmlFor="default-search"
className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">
Search
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg
aria-hidden="true"
className="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
></path>
</svg>
</div>
<input
type="search"
id="default-search"
className="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Search..."
value={searchTerm}
onChange={handleSearch}
/>
</div>
</form>
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
<div className="grid gap-6 grid-cols-1 sm:grid-cols-2">
{groupedFaqs.map(({ section, faqs }, sectionIndex) => (
<div key={sectionIndex} className="mb-8">
<div
className={`flex items-center justify-between cursor-pointer ${
activeSection === section ? 'text-blue-700' : 'text-white-900'
}`}
onClick={() => toggleSection(section)}
>
<h2 className="text-2xl font-semibold mb-4">{section}</h2>
<svg
xmlns="http://www.w3.org/2000/svg"
className={`w-6 h-6 ${
activeSection === section ? 'text-blue-700' : 'text-gray-500'
}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d={
activeSection === section
? 'M19 9l-7 7-7-7'
: 'M9 5l7 7-7 7'
}
/>
</svg>
</div>
{activeSection === section && (
<div>
{faqs.map((faq, faqIndex) => (
<a
key={faqIndex}
href="#"
className={`block p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 ${
activeIndex &&
activeIndex[0] === sectionIndex &&
activeIndex[1] === faqIndex
? 'mb-4'
: 'mb-2'
}`}
onClick={(e) => {
e.preventDefault();
toggleFAQ(sectionIndex, faqIndex);
}}
>
<h5 className="mb-2 text-xl font-semibold tracking-tight text-gray-900 dark:text-white">
{faq.question}
</h5>
{activeIndex &&
activeIndex[0] === sectionIndex &&
activeIndex[1] === faqIndex && (
<p className="font-normal text-gray-700 dark:text-gray-400">
{faq.answer}
</p>
)}
</a>
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
<div className="grid gap-6 grid-cols-1 sm:grid-cols-2">
{groupedFaqs.map(({section, faqs}, sectionIndex) => (
<div key={sectionIndex} className="mb-8">
<div
className={`flex items-center justify-between cursor-pointer ${
activeSection === section ? 'text-blue-700' : 'text-white-900'
}`}
onClick={() => toggleSection(section)}
>
<h2 className="text-2xl font-semibold mb-4">{section}</h2>
<svg
xmlns="http://www.w3.org/2000/svg"
className={`w-6 h-6 ${
activeSection === section ? 'text-blue-700' : 'text-gray-500'
}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d={
activeSection === section
? 'M19 9l-7 7-7-7'
: 'M9 5l7 7-7 7'
}
/>
</svg>
</div>
{activeSection === section && (
<div>
{faqs.map((faq, faqIndex) => (
<a
key={faqIndex}
href="#"
className={`block p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 ${
activeIndex &&
activeIndex[0] === sectionIndex &&
activeIndex[1] === faqIndex
? 'mb-4'
: 'mb-2'
}`}
onClick={(e) => {
e.preventDefault();
toggleFAQ(sectionIndex, faqIndex);
}}
>
<h5 className="mb-2 text-xl font-semibold tracking-tight text-gray-900 dark:text-white">
{faq.question}
</h5>
{activeIndex &&
activeIndex[0] === sectionIndex &&
activeIndex[1] === faqIndex && (
<p className="font-normal text-gray-700 dark:text-gray-400">
{faq.answer}
</p>
)}
</a>
))}
</div>
)}
</div>
))}
</div>
)}
</div>
))}
</div>
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
</div>
);
</div>
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
</div>
);
};
export default SectionWrapper(Faq, "");

54
src/components/Hero.jsx
View File

@ -1,54 +0,0 @@
import { motion } from "framer-motion";
import { Canvas } from "@react-three/fiber";
import { styles } from "../styles";
import { ComputersCanvas } from "./canvas";
import Model from "./canvas/Bananacat";
import { DirectionalLight } from "three";
import * as THREE from 'three'
const Hero = () => {
return (
<section className={`relative w-full h-screen mx-auto`}>
<div
className={`absolute inset-0 top-[120px] max-w-7xl mx-auto ${styles.paddingX} flex flex-row items-start gap-5`}
>
<div className='flex flex-col justify-center items-center mt-5'>
<div className='w-5 h-5 rounded-full bg-[#915EFF]' />
<div className='w-1 sm:h-80 h-40 violet-gradient' />
</div>
<div>
<h1 className={`${styles.heroHeadText} text-white`}>
Hi, I'm <span className='text-[#915EFF]'>Adrian</span>
</h1>
<p className={`${styles.heroSubText} mt-2 text-white-100`}>
I develop 3D visuals, user <br className='sm:block hidden' />
interfaces and web applications
</p>
</div>
</div>
{/* <ComputersCanvas /> */}
<div className='absolute xs:bottom-10 bottom-32 w-full flex justify-center items-center'>
<a href='#about'>
<div className='w-[35px] h-[64px] rounded-3xl border-4 border-secondary flex justify-center items-start p-2'>
<motion.div
animate={{
y: [0, 24, 0],
}}
transition={{
duration: 1.5,
repeat: Infinity,
repeatType: "loop",
}}
className='w-3 h-3 rounded-full bg-secondary mb-1'
/>
</div>
</a>
</div>
</section>
);
};
export default Hero;

52
src/components/Loader.jsx
View File

@ -1,31 +1,31 @@
import { Html, useProgress } from "@react-three/drei";
import {Html, useProgress} from "@react-three/drei";
const CanvasLoader = () => {
const { progress } = useProgress();
return (
<Html
as='div'
center
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
}}
>
<span className='canvas-loader'></span>
<p
style={{
fontSize: 14,
color: "#F1F1F1",
fontWeight: 800,
marginTop: 40,
}}
>
{progress.toFixed(2)}%
</p>
</Html>
);
const {progress} = useProgress();
return (
<Html
as='div'
center
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
}}
>
<span className='canvas-loader'></span>
<p
style={{
fontSize: 14,
color: "#F1F1F1",
fontWeight: 800,
marginTop: 40,
}}
>
{progress.toFixed(2)}%
</p>
</Html>
);
};
export default CanvasLoader;

9
src/components/Menu.jsx
View File

@ -41,7 +41,6 @@ const Menu = () => {
return (
<>
<motion.div variants={textVariant()}>
<p className={styles.sectionSubTextCenter}>สวัสดีฮ๊าฟ ฟู่วววว~~</p>
<h2 className={styles.sectionCenterText}>SOS CAMP 12th</h2>
</motion.div>
@ -49,13 +48,7 @@ const Menu = () => {
variants={fadeIn("", "", 0.1, 1)}
className='mt-4 text-secondary text-[17px] max-w-3xl leading-[30px] mx-auto text-center'
>
Hello, Welcome, Have Room, Have Condo
Have K-Y, Good Take Care, Do Everything
Eat Chicken, Eat Duck
Drink Cola, Drink fanta
Drink aLong the Way, Good Job, Programmer Job
Steve Job, Job Job, Python Job, Dangerous Job
Look into my eyes, Thank you xoxo
Welcome to the 12th SOS camp, a preparation camp for SKE21 students. We hope that students will definitely gain knowledge and enjoyment.
</motion.p>
<div className='mt-20 flex flex-wrap gap-10'>

180
src/components/Navbar.jsx
View File

@ -1,102 +1,102 @@
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import React, {useEffect, useState} from "react";
import {Link} from "react-router-dom";
import { styles } from "../styles";
import { navLinks } from "../constants";
import { logo, menu, close } from "../assets";
import {styles} from "../styles";
import {navLinks} from "../constants";
import {close, logo, menu} from "../assets";
const Navbar = () => {
const [active, setActive] = useState("");
const [toggle, setToggle] = useState(false);
const [scrolled, setScrolled] = useState(false);
const [active, setActive] = useState("");
const [toggle, setToggle] = useState(false);
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => {
const scrollTop = window.scrollY;
if (scrollTop > 100) {
setScrolled(true);
} else {
setScrolled(false);
}
};
useEffect(() => {
const handleScroll = () => {
const scrollTop = window.scrollY;
if (scrollTop > 100) {
setScrolled(true);
} else {
setScrolled(false);
}
};
window.addEventListener("scroll", handleScroll);
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
return (
<nav
className={`${
styles.paddingX
} w-full flex items-center py-5 fixed top-0 z-20 ${
scrolled ? "bg-primary" : "bg-transparent"
}`}
>
<div className='w-full flex justify-between items-center max-w-7xl mx-auto'>
<Link
to='/'
className='flex items-center gap-2'
onClick={() => {
setActive("");
window.scrollTo(0, 0);
}}
>
<img src={logo} alt='logo' className='w-9 h-9 object-contain' />
<p className='text-white text-[18px] font-bold cursor-pointer flex '>
SOS CAMP &nbsp;
<span className='sm:block hidden'> | 12th</span>
</p>
</Link>
<ul className='list-none hidden sm:flex flex-row gap-10'>
{navLinks.map((nav) => (
<li
key={nav.id}
className={`${
active === nav.title ? "text-white" : "text-secondary"
} hover:text-white text-[18px] font-medium cursor-pointer`}
onClick={() => setActive(nav.title)}
>
<a href={`${nav.id}`}>{nav.title}</a>
</li>
))}
</ul>
<div className='sm:hidden flex flex-1 justify-end items-center'>
<img
src={toggle ? close : menu}
alt='menu'
className='w-[28px] h-[28px] object-contain'
onClick={() => setToggle(!toggle)}
/>
<div
return (
<nav
className={`${
!toggle ? "hidden" : "flex"
} p-6 black-gradient absolute top-20 right-0 mx-4 my-2 min-w-[140px] z-10 rounded-xl`}
>
<ul className='list-none flex justify-end items-start flex-1 flex-col gap-4'>
{navLinks.map((nav) => (
<li
key={nav.id}
className={`font-poppins font-medium cursor-pointer text-[16px] ${
active === nav.title ? "text-white" : "text-secondary"
}`}
onClick={() => {
setToggle(!toggle);
setActive(nav.title);
}}
styles.paddingX
} w-full flex items-center py-5 fixed top-0 z-20 ${
scrolled ? "bg-primary" : "bg-transparent"
}`}
>
<div className='w-full flex justify-between items-center max-w-7xl mx-auto'>
<Link
to='/'
className='flex items-center gap-2'
onClick={() => {
setActive("");
window.scrollTo(0, 0);
}}
>
<a href={`#${nav.id}`}>{nav.title}</a>
</li>
))}
</ul>
</div>
</div>
</div>
</nav>
);
<img src={logo} alt='logo' className='w-9 h-9 object-contain'/>
<p className='text-white text-[18px] font-bold cursor-pointer flex '>
SOS CAMP &nbsp;
<span className='sm:block hidden'> | 12th</span>
</p>
</Link>
<ul className='list-none hidden sm:flex flex-row gap-10'>
{navLinks.map((nav) => (
<li
key={nav.id}
className={`${
active === nav.title ? "text-white" : "text-secondary"
} hover:text-white text-[18px] font-medium cursor-pointer`}
onClick={() => setActive(nav.title)}
>
<a href={`${nav.id}`}>{nav.title}</a>
</li>
))}
</ul>
<div className='sm:hidden flex flex-1 justify-end items-center'>
<img
src={toggle ? close : menu}
alt='menu'
className='w-[28px] h-[28px] object-contain'
onClick={() => setToggle(!toggle)}
/>
<div
className={`${
!toggle ? "hidden" : "flex"
} p-6 black-gradient absolute top-20 right-0 mx-4 my-2 min-w-[140px] z-10 rounded-xl`}
>
<ul className='list-none flex justify-end items-start flex-1 flex-col gap-4'>
{navLinks.map((nav) => (
<li
key={nav.id}
className={`font-poppins font-medium cursor-pointer text-[16px] ${
active === nav.title ? "text-white" : "text-secondary"
}`}
onClick={() => {
setToggle(!toggle);
setActive(nav.title);
}}
>
<a href={`#${nav.id}`}>{nav.title}</a>
</li>
))}
</ul>
</div>
</div>
</div>
</nav>
);
};
export default Navbar;

38
src/components/Preproblems.jsx
View File

@ -1,26 +1,28 @@
import React from "react";
import { motion } from "framer-motion";
import {motion} from "framer-motion";
import { styles } from "../styles";
import { SectionWrapper } from "../hoc";
import { fadeIn, textVariant } from "../utils/motion";
import {styles} from "../styles";
import {SectionWrapper} from "../hoc";
import {fadeIn, textVariant} from "../utils/motion";
const Preproblems = () => {
return (
<>
<motion.div variants={textVariant()}>
<p className={styles.sectionSubTextCenter}>เทสๆ</p>
<h2 className={styles.sectionCenterText}>Problems</h2>
</motion.div>
return (
<>
<motion.div variants={textVariant()}>
<p className={styles.sectionSubTextCenter}>ทำโจทย์หน่อย</p>
<h2 className={styles.sectionCenterText}>Problems</h2>
</motion.div>
<motion.p
variants={fadeIn("", "", 0.1, 1)}
className='mt-4 text-secondary text-[17px] max-w-3xl leading-[30px] mx-auto text-center'
>
Welcome to the 12th SOS camp, a preparation camp for SKE21 students. We hope that students will definitely gain knowledge and enjoyment.
</motion.p>
</>
);
<motion.p
variants={fadeIn("", "", 0.1, 1)}
className='mt-4 text-secondary text-[17px] max-w-3xl leading-[30px] mx-auto text-center'
>
A <a className="underline decoration-pink-500"> fundamental</a> Python exercise often focuses on
introducing and reinforcing core programming concepts and syntax in the Python programming language. It
typically involves solving a specific problem or completing a task using Python code.
</motion.p>
</>
);
};
export default SectionWrapper(Preproblems, "about");

17
src/components/Problems.css
View File

@ -1,14 +1,3 @@
/*body {*/
/* background: black;*/
/* color: white;*/
/*}*/
/*#light {*/
/* background: white;*/
/* color: black;*/
/*}*/
.MuiPaper-root.MuiAppBar-root {
background: #161E29;
}
@ -72,6 +61,7 @@ h6.MuiTypography-root a:hover {
footer.MuiBox-root {
background-color: #161E29;
}
h6.MuiTypography-root {
color: #7DD6F6;
}
@ -102,7 +92,7 @@ h2.MuiTypography-root {
border-radius: 0;
}
.MuiButtonBase-root.MuiCheckbox-root :hover{
.MuiButtonBase-root.MuiCheckbox-root :hover {
background-color: #2B3E52;
border-radius: 0;
}
@ -216,7 +206,7 @@ h2.MuiTypography-root {
border-radius: 0;
}
#light .MuiButtonBase-root.MuiCheckbox-root :hover{
#light .MuiButtonBase-root.MuiCheckbox-root :hover {
background-color: #2B3E52;
border-radius: 0;
}
@ -361,3 +351,4 @@ h4.mail {
box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
cursor: pointer;
}

168
src/components/Problems.jsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import {createContext, useState} from 'react';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
@ -7,161 +7,83 @@ import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import CssBaseline from '@mui/material/CssBaseline';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import Link from '@mui/material/Link';
import Checkbox from '@mui/material/Checkbox';
import Switch from '@mui/material/Switch';
import {styled} from '@mui/material/styles';
import FormControlLabel from '@mui/material/FormControlLabel';
import {createTheme, ThemeProvider} from '@mui/material/styles';
import cards from '../constants/Card';
import {createContext, useState} from "react";
import { StarsCanvas } from "./canvas";
import myimage from '../images/syntax.jpeg'
import { SectionWrapper } from "../hoc";
import myimage from '../../public/images/syntax.jpeg'
import {SectionWrapper} from "../hoc";
import Preproblems from "./Preproblems";
export const ThemeContext = createContext(null);
// switch theme button ---------------------------------------------------------------
const MaterialUISwitch = styled(Switch)(({theme}) => ({
width: 62,
height: 34,
padding: 7,
'& .MuiSwitch-switchBase': {
margin: 1,
padding: 0,
transform: 'translateX(6px)',
'&.Mui-checked': {
color: '#fff',
transform: 'translateX(22px)',
'& .MuiSwitch-thumb:before': {
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
'#fff',
)}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
},
'& + .MuiSwitch-track': {
opacity: 1,
backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : 'white',
},
},
},
'& .MuiSwitch-thumb': {
backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#7892B5',
width: 32,
height: 32,
'&:before': {
content: "''",
position: 'absolute',
width: '100%',
height: '100%',
left: 0,
top: 0,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
'#fff',
)}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
},
},
'& .MuiSwitch-track': {
opacity: 1,
backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
borderRadius: 20 / 2,
},
}));
// switch theme button ----------------------------------------------------------------
function Copyright() {
return (
<Typography variant="body2" color="#5585A4" align="center">
{'Copyright © '}
<Link color="inherit" href="https://mui.com/">
Your Website
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
const defaultTheme = createTheme();
const Problems = () => {
const [theme, setTheme] = useState('dark');
const [theme, setTheme] = useState('dark');
const toggleTheme = () => {
setTheme(theme === 'light' ? 'dark' : 'light');
}
return (
<div className="Problems">
<Preproblems />
<ThemeContext.Provider value={{theme, toggleTheme}}>
<Preproblems/>
<ThemeContext.Provider value={{theme, toggleTheme}}>
<ThemeProvider theme={defaultTheme}>
<CssBaseline/>
<main>
{/* Hero unit */}
<Container
sx={{py: 8}} maxWidth="fit-content">
{/* End hero unit */}
<div className="flex mt-4 border border-gray-500 p-4">
<Grid container spacing={4}>
{/*# TODO:Edit the Jode here */}
{cards.map((card) => (
<Grid item xs={12} sm={6} md={4} key={card.id}>
{/*<img src={require("./images/syntax.jpeg")} alt="jode"/>*/}
<Card
sx={{
height: '100%',
display: 'flex',
flexDirection: 'column',
}}
>
<CardMedia
component="div"
<Grid container spacing={4}>
{cards.map((card) => (
<Grid item xs={12} sm={6} md={4} key={card.id}>
{/*<img src={require("./images/syntax.jpeg")} alt="jode"/>*/}
<Card
sx={{
// 16:9
pt: '56.25%',
height: 0,
// objectFit: 'cover',
height: '100%',
display: 'flex',
flexDirection: 'column',
}}
image={myimage}
/>
>
<CardMedia
component="div"
sx={{
// 16:9
pt: '56.25%',
height: 0,
// objectFit: 'cover',
}}
image={myimage}
/>
<CardContent sx={{flexGrow: 1}}>
<Typography gutterBottom variant="h5" component="h2"
color="#7DD6F6">
{card.title}
</Typography>
<Typography color="aliceblue">
{card.describe}
</Typography>
</CardContent>
<CardActions>
<Button size="small"><a
href={card.link}>View</a></Button>
<Checkbox className="jodeCheckBox"/>
</CardActions>
</Card>
</Grid>
))}
<CardContent sx={{flexGrow: 1}}>
<Typography gutterBottom variant="h5" component="h2"
color="#7DD6F6">
{card.title}
</Typography>
<Typography color="aliceblue">
{card.describe}
</Typography>
</CardContent>
<CardActions>
<Button size="small"><a
href={card.link}>View</a></Button>
<Checkbox className="jodeCheckBox"/>
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Grid>
</div>
{/*<StarsCanvas />*/}
</Container>
</main>
</ThemeProvider> */
</ThemeContext.Provider>
</div>
</ThemeContext.Provider>
</div>
);
}

77
src/components/SocialMedia.jsx
View File

@ -1,45 +1,46 @@
import React from 'react';
import { motion } from 'framer-motion';
import {motion} from 'framer-motion';
import Tilt from 'react-tilt';
import { socialMediaData } from '../constants';
import {socialMediaData} from '../constants';
const SocialMedia = () => {
return (
<div className="flex justify-center mt-4">
<div className="flex flex-wrap gap-4">
{socialMediaData.map((item, index) => (
<Tilt className="xs:w-[250px] w-full" key={index}>
<motion.div
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{
delay: index * 0.2,
duration: 0.5,
type: 'spring',
stiffness: 100,
}}
className="w-full p-4 rounded-lg shadow-lg"
style={{
background: item.color,
boxShadow: '0px 4px 10px rgba(255, 255, 255, 0.2)',
}}
>
<a href={item.url} className="block">
<div className="flex justify-center items-center mb-4">
<img src={item.icon} alt={item.title} className="w-8 h-8" style={{ filter: 'drop-shadow(2px 4px 6px rgba(255, 255, 255, 0.5))' }} />
</div>
<h3 className="text-white text-2xl font-bold text-center">{item.title}</h3>
</a>
</motion.div>
</Tilt>
))}
</div>
</div>
);
return (
<div className="flex justify-center mt-4">
<div className="flex flex-wrap gap-4">
{socialMediaData.map((item, index) => (
<Tilt className="xs:w-[250px] w-full" key={index}>
<motion.div
variants={{
hidden: {opacity: 0, y: 50},
visible: {opacity: 1, y: 0},
}}
initial="hidden"
animate="visible"
transition={{
delay: index * 0.2,
duration: 0.5,
type: 'spring',
stiffness: 100,
}}
className="w-full p-4 rounded-lg shadow-lg"
style={{
background: item.color,
boxShadow: '0px 4px 10px rgba(255, 255, 255, 0.2)',
}}
>
<a href={item.url} className="block">
<div className="flex justify-center items-center mb-4">
<img src={item.icon} alt={item.title} className="w-8 h-8"
style={{filter: 'drop-shadow(2px 4px 6px rgba(255, 255, 255, 0.5))'}}/>
</div>
<h3 className="text-white text-2xl font-bold text-center">{item.title}</h3>
</a>
</motion.div>
</Tilt>
))}
</div>
</div>
);
}
export default SocialMedia;

64
src/components/canvas/Earth.jsx
View File

@ -1,43 +1,43 @@
import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
import React, {Suspense} from "react";
import {Canvas} from "@react-three/fiber";
import {OrbitControls, Preload, useGLTF} from "@react-three/drei";
import CanvasLoader from "../Loader";
const Earth = () => {
const earth = useGLTF("./planet/scene.gltf");
const earth = useGLTF("./planet/scene.gltf");
return (
<primitive object={earth.scene} scale={2.5} position-y={0} rotation-y={0} />
);
return (
<primitive object={earth.scene} scale={2.2} position-y={0} rotation-y={0}/>
);
};
const EarthCanvas = () => {
return (
<Canvas
shadows
frameloop='demand'
dpr={[1, 2]}
gl={{ preserveDrawingBuffer: true }}
camera={{
fov: 45,
near: 0.1,
far: 200,
position: [-4, 3, 6],
}}
>
<Suspense fallback={<CanvasLoader />}>
<OrbitControls
autoRotate
enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>
<Earth />
<Preload all />
</Suspense>
</Canvas>
);
return (
<Canvas
shadows
frameloop='demand'
dpr={[1, 2]}
gl={{preserveDrawingBuffer: true}}
camera={{
fov: 45,
near: 0.1,
far: 200,
position: [-4, 3, 6],
}}
>
<Suspense fallback={<CanvasLoader/>}>
<OrbitControls
autoRotate
enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>
<Earth/>
<Preload all/>
</Suspense>
</Canvas>
);
};
export default EarthCanvas;

64
src/components/canvas/Stars.jsx
View File

@ -1,44 +1,44 @@
import { useState, useRef, Suspense } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { Points, PointMaterial, Preload } from "@react-three/drei";
import {Suspense, useRef, useState} from "react";
import {Canvas, useFrame} from "@react-three/fiber";
import {PointMaterial, Points, Preload} from "@react-three/drei";
import * as random from "maath/random/dist/maath-random.esm";
const Stars = (props) => {
const ref = useRef();
const [sphere] = useState(() => random.inSphere(new Float32Array(5000), { radius: 1.2 }));
const ref = useRef();
const [sphere] = useState(() => random.inSphere(new Float32Array(5000), {radius: 1.2}));
useFrame((state, delta) => {
ref.current.rotation.x -= delta / 10;
ref.current.rotation.y -= delta / 15;
});
useFrame((state, delta) => {
ref.current.rotation.x -= delta / 10;
ref.current.rotation.y -= delta / 15;
});
return (
<group rotation={[0, 0, Math.PI / 4]}>
<Points ref={ref} positions={sphere} stride={3} frustumCulled {...props}>
<PointMaterial
transparent
color='#f272c8'
size={0.002}
sizeAttenuation={true}
depthWrite={false}
/>
</Points>
</group>
);
return (
<group rotation={[0, 0, Math.PI / 4]}>
<Points ref={ref} positions={sphere} stride={3} frustumCulled {...props}>
<PointMaterial
transparent
color='#f272c8'
size={0.002}
sizeAttenuation={true}
depthWrite={false}
/>
</Points>
</group>
);
};
const StarsCanvas = () => {
return (
<div className='w-full h-auto absolute inset-0 z-[-1]'>
<Canvas camera={{ position: [0, 0, 1] }}>
<Suspense fallback={null}>
<Stars />
</Suspense>
return (
<div className='w-full h-auto absolute inset-0 z-[-1]'>
<Canvas camera={{position: [0, 0, 1]}}>
<Suspense fallback={null}>
<Stars/>
</Suspense>
<Preload all />
</Canvas>
</div>
);
<Preload all/>
</Canvas>
</div>
);
};
export default StarsCanvas;

2
src/components/canvas/index.js
View File

@ -1,4 +1,4 @@
import StarsCanvas from "./Stars";
import EarthCanvas from "./Earth";
export { StarsCanvas, EarthCanvas };
export {StarsCanvas, EarthCanvas};

4
src/components/index.css
View File

@ -1,4 +0,0 @@
body {
background: black;
color: white;
}

22
src/components/index.js
View File

@ -1,4 +1,4 @@
import { StarsCanvas, EarthCanvas } from './canvas';
import {EarthCanvas, StarsCanvas} from './canvas';
import Navbar from "./Navbar";
import Menu from "./Menu";
import Contacts from "./Contacts";
@ -9,14 +9,14 @@ import Preproblems from './Preproblems';
import SocialMedia from './Socialmedia';
export {
Navbar,
Menu,
Contacts,
CanvasLoader,
StarsCanvas,
Faq,
Problems,
Preproblems,
SocialMedia,
EarthCanvas,
Navbar,
Menu,
Contacts,
CanvasLoader,
StarsCanvas,
Faq,
Problems,
Preproblems,
SocialMedia,
EarthCanvas,
};

42
src/constants/Card.jsx
View File

@ -4,133 +4,133 @@ const cards = [
'describe': 'Mai tum leaw',
'link': 'https://elabsheet.org/elab/taskpads/show/jr070sqaqp/',
'img': './images/syntax.jpeg',
'id':1
'id': 1
},
{
'title': 'Variables',
'describe': 'Mai tum leaw',
'link': 'https://elabsheet.org/elab/taskpads/change/jr070sqaqp/yqxiczozva/',
'img': './images/syntax.jpeg',
'id':2
'id': 2
},
{
'title': 'Data Type 01',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':3
'id': 3
},
{
'title': 'Data Type 02',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':4
'id': 4
},
{
'title': 'Data Type 03',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':5
'id': 5
},
{
'title': 'Numbers, Casting, String',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':6
'id': 6
},
{
'title': 'Strings',
'describe': 'Mai tum leaw',
'link': 'https://elabsheet.org/elab/taskpads/change/4k422fwoou/v49ajp3qgh/',
'img': './images/syntax.jpeg',
'id':7
'id': 7
},
{
'title': 'Boolean 01',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':8
'id': 8
},
{
'title': 'Boolean 02',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':9
'id': 9
},
{
'title': 'Operators 01',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':10
'id': 10
},
{
'title': 'Operators 02',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':11
'id': 11
},
{
'title': 'Lists',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':12
'id': 12
},
{
'title': 'Tuples',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':13
'id': 13
},
{
'title': 'Sets',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':14
'id': 14
},
{
'title': 'Dictionaries',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':15
'id': 15
},
{
'title': 'If Else 01',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':16
'id': 16
},
{
'title': 'If Else 02',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':17
'id': 17
},
{
'title': 'If Else 03',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':18
'id': 18
},
{
'title': 'While Loops',
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':19
'id': 19
},
{
@ -138,7 +138,7 @@ const cards = [
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':20
'id': 20
},
{
@ -146,7 +146,7 @@ const cards = [
'describe': 'Mai tum leaw',
'link': 'www.',
'img': './images/syntax.jpeg',
'id':21
'id': 21
}
]

208
src/constants/index.js
View File

@ -1,121 +1,113 @@
import {
contacts_pic,
faq_pic,
problems,
github,
instagram_icon,
discord_icon,
} from "../assets";
import {contacts_pic, discord_icon, faq_pic, github, instagram_icon, problems,} from "../assets";
export const navLinks = [
{
id: "problems",
title: "Problems",
},
{
id: "faq",
title: "FAQ",
},
{
id: "contact",
title: "Contacts",
},
{
id: "problems",
title: "Problems",
},
{
id: "faq",
title: "FAQ",
},
{
id: "contact",
title: "Contacts",
},
];
const menu = [
{
title: "Problems",
icon: problems,
},
{
title: "FAQ",
icon: faq_pic,
},
{
title: "Contacts",
icon: contacts_pic,
},
{
title: "Problems",
icon: problems,
},
{
title: "FAQ",
icon: faq_pic,
},
{
title: "Contacts",
icon: contacts_pic,
},
];
const faqs = [
{
section: 'About SKE',
question: 'What is SKE?',
answer: 'Software and Knowledge Engineering or SKE (pronounce "ski") for short, is a branch in a Computer Engineering, Kasetsart University. Our branch is also a part of the international Undergraduate Program (IUP).'
},
{
section: 'About SKE',
question: 'What are the required courses for this branch?',
answer: 'For freshmen it is required to learn the general engineering courses such as "Engineering Mathematics I", "General Physics I" and "Physics Lab I". You will also need to apply for essential Computer Engineering courses such as, "Computer Programming I" and "Discrete Mathematics and Algebra". For Computer Programming I, you will get to learn the fundamentals of programming with Python. For Discrete Mathematics and Algebra, you will learn about the basic of discrete mathematics and algebra, which is essential for programming.'
},
{
section: 'About SKE',
question: 'Are the courses difficult?',
answer: 'The difficulty of each course varies on each learner, it depends on whether you have basics or not. You might need to adjust and may have to work harder than others, also try to learn by yourself and practice doing exercises.'
},
{
section: 'About SKE',
question: 'Is a computer requires? What about specifications?',
answer: 'A computor is required though it is REALLY recommended to have a laptop. Portable computers will make your life easier and should always be taken to university. For windows, you should pick a laptop with medium specs such as, Core i5 or Ryzen 5 CPU, 8GB RAM, 512 HDD. Make sure to get teh latest generation of CPU to have faster performance. For Mac, it is recommended to get at least M1 CPU.'
},
{
section: 'About SKE',
question: 'When does the course start and what to prepare?',
answer: 'The first semester\'s start date is 7th August. Though there will be events before that day like SKE tutorial camp'
},
{
section: 'About SOS12 Camp',
question: 'What is SOS Camp?',
answer: 'SOS Camp is a preparation camp for freshmen to gain knowledge about the programming. It is also a camp to help you prepare for the first semester. The camp will be held on 18th-21th July.'
},
{
section: 'About SOS12 Camp',
question: 'What programming languages will be covered in the camp?',
answer: 'This camp will cover Python.'
},
{
section: 'About SOS12 Camp',
question: 'Do I need prior programming experience to attend the camp?',
answer: 'No, you do not need any prior programming experience to attend the camp. The camp will start from the very basics of programming.'
},
{
section: 'Programming',
question: 'Will the camp cover both theoretical and practical aspects of programming?',
answer: 'Yes, the camp will cover both theoretical and practical aspects of programming. The camp will start with a lecture and then you will be given exercises to practice what you have learned.'
},
{
section: 'Programming',
question: 'Can I bring my own laptop or do I need to use university computers',
answer: 'You can bring your own laptop. However, if you do not have a laptop, you can use the university computers.'
},
{
section: 'Programming',
question: 'What software do I need to install on my laptop?',
answer: 'You will need to install Python 3.9.6 and PyCharm Community Edition 2021.1.3.'
},
]
{
section: 'About SKE',
question: 'What is SKE?',
answer: 'Software and Knowledge Engineering or SKE (pronounce "ski") for short, is a branch in a Computer Engineering, Kasetsart University. Our branch is also a part of the international Undergraduate Program (IUP).'
},
{
section: 'About SKE',
question: 'What are the required courses for this branch?',
answer: 'For freshmen it is required to learn the general engineering courses such as "Engineering Mathematics I", "General Physics I" and "Physics Lab I". You will also need to apply for essential Computer Engineering courses such as, "Computer Programming I" and "Discrete Mathematics and Algebra". For Computer Programming I, you will get to learn the fundamentals of programming with Python. For Discrete Mathematics and Algebra, you will learn about the basic of discrete mathematics and algebra, which is essential for programming.'
},
{
section: 'About SKE',
question: 'Are the courses difficult?',
answer: 'The difficulty of each course varies on each learner, it depends on whether you have basics or not. You might need to adjust and may have to work harder than others, also try to learn by yourself and practice doing exercises.'
},
{
section: 'About SKE',
question: 'Is a computer requires? What about specifications?',
answer: 'A computor is required though it is REALLY recommended to have a laptop. Portable computers will make your life easier and should always be taken to university. For windows, you should pick a laptop with medium specs such as, Core i5 or Ryzen 5 CPU, 8GB RAM, 512 HDD. Make sure to get teh latest generation of CPU to have faster performance. For Mac, it is recommended to get at least M1 CPU.'
},
{
section: 'About SKE',
question: 'When does the course start and what to prepare?',
answer: 'The first semester\'s start date is 7th August. Though there will be events before that day like SKE tutorial camp'
},
{
section: 'About SOS12 Camp',
question: 'What is SOS Camp?',
answer: 'SOS Camp is a preparation camp for freshmen to gain knowledge about the programming. It is also a camp to help you prepare for the first semester. The camp will be held on 18th-21th July.'
},
{
section: 'About SOS12 Camp',
question: 'What programming languages will be covered in the camp?',
answer: 'This camp will cover Python.'
},
{
section: 'About SOS12 Camp',
question: 'Do I need prior programming experience to attend the camp?',
answer: 'No, you do not need any prior programming experience to attend the camp. The camp will start from the very basics of programming.'
},
{
section: 'Programming',
question: 'Will the camp cover both theoretical and practical aspects of programming?',
answer: 'Yes, the camp will cover both theoretical and practical aspects of programming. The camp will start with a lecture and then you will be given exercises to practice what you have learned.'
},
{
section: 'Programming',
question: 'Can I bring my own laptop or do I need to use university computers',
answer: 'You can bring your own laptop. However, if you do not have a laptop, you can use the university computers.'
},
{
section: 'Programming',
question: 'What software do I need to install on my laptop?',
answer: 'You will need to install Python 3.9.6 and PyCharm Community Edition 2021.1.3.'
},
]
const socialMediaData = [
{
title: 'Instagram',
icon: instagram_icon,
url: 'https://www.instagram.com/sos_camp12/',
color: 'linear-gradient(to bottom right, #FF0080, #7928CA)',
},
{
title: 'Discord',
icon: discord_icon,
url: 'https://discord.gg/wPAFD6qh',
color: 'linear-gradient(to bottom right, #7289DA, #5865F2)',
},
{
title: 'Github',
icon: github,
url: 'https://github.com/Rick-Lang/rickroll-lang',
color: 'linear-gradient(to bottom right, #24292E, #444D56)',
},
{
title: 'Instagram',
icon: instagram_icon,
url: 'https://www.instagram.com/sos_camp12/',
color: 'linear-gradient(to bottom right, #FF0080, #7928CA)',
},
{
title: 'Discord',
icon: discord_icon,
url: 'https://discord.gg/wPAFD6qh',
color: 'linear-gradient(to bottom right, #7289DA, #5865F2)',
},
{
title: 'Github',
icon: github,
url: 'https://github.com/Sosokker/SOS12.git',
color: 'linear-gradient(to bottom right, #24292E, #444D56)',
},
];
export { menu, faqs, socialMediaData };
export {menu, faqs, socialMediaData};

32
src/hoc/SectionWrapper.jsx
View File

@ -1,25 +1,25 @@
import { motion } from "framer-motion";
import {motion} from "framer-motion";
import { styles } from "../styles";
import { staggerContainer } from "../utils/motion";
import {styles} from "../styles";
import {staggerContainer} from "../utils/motion";
const StarWrapper = (Component, idName) =>
function HOC() {
return (
<motion.section
variants={staggerContainer()}
initial='hidden'
whileInView='show'
viewport={{ once: true, amount: 0.25 }}
className={`${styles.padding} max-w-7xl mx-auto relative z-0`}
>
function HOC() {
return (
<motion.section
variants={staggerContainer()}
initial='hidden'
whileInView='show'
viewport={{once: true, amount: 0.25}}
className={`${styles.padding} max-w-7xl mx-auto relative z-0`}
>
<span className='hash-span' id={idName}>
&nbsp;
</span>
<Component />
</motion.section>
);
};
<Component/>
</motion.section>
);
};
export default StarWrapper;

330
src/index.css
View File

@ -5,200 +5,200 @@
@tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
color-scheme: dark;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
color-scheme: dark;
}
.hash-span {
margin-top: -100px;
padding-bottom: 100px;
display: block;
margin-top: -100px;
padding-bottom: 100px;
display: block;
}
.black-gradient {
background: #000000; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#434343,
#000000
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#434343,
#000000
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: #000000; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#434343,
#000000
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#434343,
#000000
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.violet-gradient {
background: #804dee;
background: linear-gradient(-90deg, #804dee 0%, rgba(60, 51, 80, 0) 100%);
background: -webkit-linear-gradient(
-90deg,
#804dee 0%,
rgba(60, 51, 80, 0) 100%
);
background: #804dee;
background: linear-gradient(-90deg, #804dee 0%, rgba(60, 51, 80, 0) 100%);
background: -webkit-linear-gradient(
-90deg,
#804dee 0%,
rgba(60, 51, 80, 0) 100%
);
}
.green-pink-gradient {
background: "#00cea8";
background: linear-gradient(90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
background: -webkit-linear-gradient(-90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
background: "#00cea8";
background: linear-gradient(90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
background: -webkit-linear-gradient(-90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
}
.orange-text-gradient {
background: #f12711; /* fallback for old browsers */
background: -webkit-linear-gradient(
to top,
#f12711,
#f5af19
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to top,
#f12711,
#f5af19
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: #f12711; /* fallback for old browsers */
background: -webkit-linear-gradient(
to top,
#f12711,
#f5af19
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to top,
#f12711,
#f5af19
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.green-text-gradient {
background: #11998e; /* fallback for old browsers */
background: -webkit-linear-gradient(
to top,
#11998e,
#38ef7d
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to top,
#11998e,
#38ef7d
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: #11998e; /* fallback for old browsers */
background: -webkit-linear-gradient(
to top,
#11998e,
#38ef7d
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to top,
#11998e,
#38ef7d
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.blue-text-gradient {
/* background: -webkit-linear-gradient(#eee, #333); */
background: #56ccf2; /* fallback for old browsers */
background: -webkit-linear-gradient(
to top,
#2f80ed,
#56ccf2
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to top,
#2f80ed,
#56ccf2
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* background: -webkit-linear-gradient(#eee, #333); */
background: #56ccf2; /* fallback for old browsers */
background: -webkit-linear-gradient(
to top,
#2f80ed,
#56ccf2
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to top,
#2f80ed,
#56ccf2
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pink-text-gradient {
background: #ec008c; /* fallback for old browsers */
background: -webkit-linear-gradient(
to top,
#ec008c,
#fc6767
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to top,
#ec008c,
#fc6767
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: #ec008c; /* fallback for old browsers */
background: -webkit-linear-gradient(
to top,
#ec008c,
#fc6767
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to top,
#ec008c,
#fc6767
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* canvas- styles */
.canvas-loader {
font-size: 10px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: mulShdSpin 1.1s infinite ease;
transform: translateZ(0);
font-size: 10px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: mulShdSpin 1.1s infinite ease;
transform: translateZ(0);
}
@keyframes mulShdSpin {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #ffffff,
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff,
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff,
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff,
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff,
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff,
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
}
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #ffffff,
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff,
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff,
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff,
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff,
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff,
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
}
}

6
src/main.jsx
View File

@ -5,7 +5,7 @@ import App from "./App";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
<React.StrictMode>
<App/>
</React.StrictMode>
);

32
src/styles.js
View File

@ -1,21 +1,21 @@
const styles = {
paddingX: "sm:px-16 px-6",
paddingY: "sm:py-16 py-6",
padding: "sm:px-16 px-6 sm:py-16 py-10",
paddingX: "sm:px-16 px-6",
paddingY: "sm:py-16 py-6",
padding: "sm:px-16 px-6 sm:py-16 py-10",
heroHeadText:
"font-black text-white lg:text-[80px] sm:text-[60px] xs:text-[50px] text-[40px] lg:leading-[98px] mt-2",
heroSubText:
"text-[#dfd9ff] font-medium lg:text-[30px] sm:text-[26px] xs:text-[20px] text-[16px] lg:leading-[40px]",
heroHeadText:
"font-black text-white lg:text-[80px] sm:text-[60px] xs:text-[50px] text-[40px] lg:leading-[98px] mt-2",
heroSubText:
"text-[#dfd9ff] font-medium lg:text-[30px] sm:text-[26px] xs:text-[20px] text-[16px] lg:leading-[40px]",
sectionHeadText:
"text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]",
sectionSubText:
"sm:text-[18px] text-[14px] text-secondary uppercase tracking-wider",
sectionSubTextCenter:
"sm:text-[18px] text-[14px] text-secondary uppercase tracking-wider text-center",
sectionCenterText:
"text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px] text-center"
sectionHeadText:
"text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]",
sectionSubText:
"sm:text-[18px] text-[14px] text-secondary uppercase tracking-wider",
sectionSubTextCenter:
"sm:text-[18px] text-[14px] text-secondary uppercase tracking-wider text-center",
sectionCenterText:
"text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px] text-center"
};
export { styles };
export {styles};

148
src/utils/motion.js
View File

@ -1,88 +1,88 @@
export const textVariant = (delay) => {
return {
hidden: {
y: -50,
opacity: 0,
},
show: {
y: 0,
opacity: 1,
transition: {
type: "spring",
duration: 1.25,
delay: delay,
},
},
};
return {
hidden: {
y: -50,
opacity: 0,
},
show: {
y: 0,
opacity: 1,
transition: {
type: "spring",
duration: 1.25,
delay: delay,
},
},
};
};
export const fadeIn = (direction, type, delay, duration) => {
return {
hidden: {
x: direction === "left" ? 100 : direction === "right" ? -100 : 0,
y: direction === "up" ? 100 : direction === "down" ? -100 : 0,
opacity: 0,
},
show: {
x: 0,
y: 0,
opacity: 1,
transition: {
type: type,
delay: delay,
duration: duration,
ease: "easeOut",
},
},
};
return {
hidden: {
x: direction === "left" ? 100 : direction === "right" ? -100 : 0,
y: direction === "up" ? 100 : direction === "down" ? -100 : 0,
opacity: 0,
},
show: {
x: 0,
y: 0,
opacity: 1,
transition: {
type: type,
delay: delay,
duration: duration,
ease: "easeOut",
},
},
};
};
export const zoomIn = (delay, duration) => {
return {
hidden: {
scale: 0,
opacity: 0,
},
show: {
scale: 1,
opacity: 1,
transition: {
type: "tween",
delay: delay,
duration: duration,
ease: "easeOut",
},
},
};
return {
hidden: {
scale: 0,
opacity: 0,
},
show: {
scale: 1,
opacity: 1,
transition: {
type: "tween",
delay: delay,
duration: duration,
ease: "easeOut",
},
},
};
};
export const slideIn = (direction, type, delay, duration) => {
return {
hidden: {
x: direction === "left" ? "-100%" : direction === "right" ? "100%" : 0,
y: direction === "up" ? "100%" : direction === "down" ? "100%" : 0,
},
show: {
x: 0,
y: 0,
transition: {
type: type,
delay: delay,
duration: duration,
ease: "easeOut",
},
},
};
return {
hidden: {
x: direction === "left" ? "-100%" : direction === "right" ? "100%" : 0,
y: direction === "up" ? "100%" : direction === "down" ? "100%" : 0,
},
show: {
x: 0,
y: 0,
transition: {
type: type,
delay: delay,
duration: duration,
ease: "easeOut",
},
},
};
};
export const staggerContainer = (staggerChildren, delayChildren) => {
return {
hidden: {},
show: {
transition: {
staggerChildren: staggerChildren,
delayChildren: delayChildren || 0,
},
},
};
return {
hidden: {},
show: {
transition: {
staggerChildren: staggerChildren,
delayChildren: delayChildren || 0,
},
},
};
};