sosokker/SOS12
1
0
Fork 0
mirror of https://github.com/Sosokker/SOS12.git synced 2025-12-19 20:54: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"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SOS CAMP | 12TH</title> <title>SOS CAMP | 12TH</title>
</head> </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

17
src/App.jsx
View File

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

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

16
src/components/Contacter.jsx
View File

@ -1,9 +1,9 @@
import React, { useRef, useState } from "react"; import React, {useRef, useState} from "react";
import { motion } from "framer-motion"; import {motion} from "framer-motion";
import emailjs from "@emailjs/browser"; import emailjs from "@emailjs/browser";
import { styles } from "../styles"; import {styles} from "../styles";
import { SectionWrapper } from "../hoc"; import {SectionWrapper} from "../hoc";
import { slideIn } from "../utils/motion"; import {slideIn} from "../utils/motion";
import EarthCanvas from "./canvas/Earth.jsx"; import EarthCanvas from "./canvas/Earth.jsx";
const Contact = () => { const Contact = () => {
@ -17,8 +17,8 @@ const Contact = () => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const handleChange = (e) => { const handleChange = (e) => {
const { target } = e; const {target} = e;
const { name, value } = target; const {name, value} = target;
setForm({ setForm({
...form, ...form,
@ -126,7 +126,7 @@ const Contact = () => {
variants={slideIn("right", "tween", 0.2, 1)} variants={slideIn("right", "tween", 0.2, 1)}
className='xl:flex-1 xl:h-auto md:h-[550px] h-[350px]' className='xl:flex-1 xl:h-auto md:h-[550px] h-[350px]'
> >
<EarthCanvas /> <EarthCanvas/>
</motion.div> </motion.div>
</div> </div>
); );

4
src/components/Contacts.jsx
View File

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

19
src/components/Faq.jsx
View File

@ -1,9 +1,9 @@
import React, { useState } from 'react'; import React, {useState} from 'react';
import { styles } from "../styles"; import {styles} from "../styles";
import { motion } from "framer-motion"; import {motion} from "framer-motion";
import { textVariant } from "../utils/motion"; import {textVariant} from "../utils/motion";
import { SectionWrapper } from "../hoc"; import {SectionWrapper} from "../hoc";
import { faqs } from '../constants'; import {faqs} from '../constants';
const Faq = () => { const Faq = () => {
const [activeIndex, setActiveIndex] = useState(null); const [activeIndex, setActiveIndex] = useState(null);
@ -64,7 +64,8 @@ const Faq = () => {
</motion.div> </motion.div>
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr> <hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
<form> <form>
<label htmlFor="default-search" className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"> <label htmlFor="default-search"
className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">
Search Search
</label> </label>
<div className="relative"> <div className="relative">
@ -98,7 +99,7 @@ const Faq = () => {
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr> <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"> <div className="grid gap-6 grid-cols-1 sm:grid-cols-2">
{groupedFaqs.map(({ section, faqs }, sectionIndex) => ( {groupedFaqs.map(({section, faqs}, sectionIndex) => (
<div key={sectionIndex} className="mb-8"> <div key={sectionIndex} className="mb-8">
<div <div
className={`flex items-center justify-between cursor-pointer ${ className={`flex items-center justify-between cursor-pointer ${
@ -164,7 +165,7 @@ const Faq = () => {
))} ))}
</div> </div>
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr> <hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
</div> </div>
); );
}; };

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;

4
src/components/Loader.jsx
View File

@ -1,7 +1,7 @@
import { Html, useProgress } from "@react-three/drei"; import {Html, useProgress} from "@react-three/drei";
const CanvasLoader = () => { const CanvasLoader = () => {
const { progress } = useProgress(); const {progress} = useProgress();
return ( return (
<Html <Html
as='div' as='div'

9
src/components/Menu.jsx
View File

@ -41,7 +41,6 @@ const Menu = () => {
return ( return (
<> <>
<motion.div variants={textVariant()}> <motion.div variants={textVariant()}>
<p className={styles.sectionSubTextCenter}>สวัสดีฮ๊าฟ ฟู่วววว~~</p>
<h2 className={styles.sectionCenterText}>SOS CAMP 12th</h2> <h2 className={styles.sectionCenterText}>SOS CAMP 12th</h2>
</motion.div> </motion.div>
@ -49,13 +48,7 @@ const Menu = () => {
variants={fadeIn("", "", 0.1, 1)} variants={fadeIn("", "", 0.1, 1)}
className='mt-4 text-secondary text-[17px] max-w-3xl leading-[30px] mx-auto text-center' className='mt-4 text-secondary text-[17px] max-w-3xl leading-[30px] mx-auto text-center'
> >
Hello, Welcome, Have Room, Have Condo Welcome to the 12th SOS camp, a preparation camp for SKE21 students. We hope that students will definitely gain knowledge and enjoyment.
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
</motion.p> </motion.p>
<div className='mt-20 flex flex-wrap gap-10'> <div className='mt-20 flex flex-wrap gap-10'>

12
src/components/Navbar.jsx
View File

@ -1,9 +1,9 @@
import React, { useEffect, useState } from "react"; import React, {useEffect, useState} from "react";
import { Link } from "react-router-dom"; import {Link} from "react-router-dom";
import { styles } from "../styles"; import {styles} from "../styles";
import { navLinks } from "../constants"; import {navLinks} from "../constants";
import { logo, menu, close } from "../assets"; import {close, logo, menu} from "../assets";
const Navbar = () => { const Navbar = () => {
const [active, setActive] = useState(""); const [active, setActive] = useState("");
@ -42,7 +42,7 @@ const Navbar = () => {
window.scrollTo(0, 0); window.scrollTo(0, 0);
}} }}
> >
<img src={logo} alt='logo' className='w-9 h-9 object-contain' /> <img src={logo} alt='logo' className='w-9 h-9 object-contain'/>
<p className='text-white text-[18px] font-bold cursor-pointer flex '> <p className='text-white text-[18px] font-bold cursor-pointer flex '>
SOS CAMP &nbsp; SOS CAMP &nbsp;
<span className='sm:block hidden'> | 12th</span> <span className='sm:block hidden'> | 12th</span>

14
src/components/Preproblems.jsx
View File

@ -1,15 +1,15 @@
import React from "react"; import React from "react";
import { motion } from "framer-motion"; import {motion} from "framer-motion";
import { styles } from "../styles"; import {styles} from "../styles";
import { SectionWrapper } from "../hoc"; import {SectionWrapper} from "../hoc";
import { fadeIn, textVariant } from "../utils/motion"; import {fadeIn, textVariant} from "../utils/motion";
const Preproblems = () => { const Preproblems = () => {
return ( return (
<> <>
<motion.div variants={textVariant()}> <motion.div variants={textVariant()}>
<p className={styles.sectionSubTextCenter}>เทสๆ</p> <p className={styles.sectionSubTextCenter}>ทำโจทย์หน่อย</p>
<h2 className={styles.sectionCenterText}>Problems</h2> <h2 className={styles.sectionCenterText}>Problems</h2>
</motion.div> </motion.div>
@ -17,7 +17,9 @@ const Preproblems = () => {
variants={fadeIn("", "", 0.1, 1)} variants={fadeIn("", "", 0.1, 1)}
className='mt-4 text-secondary text-[17px] max-w-3xl leading-[30px] mx-auto text-center' 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. 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> </motion.p>
</> </>
); );

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

86
src/components/Problems.jsx
View File

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import AppBar from '@mui/material/AppBar'; import {createContext, useState} from 'react';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import Card from '@mui/material/Card'; import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions'; import CardActions from '@mui/material/CardActions';
@ -7,113 +7,36 @@ import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia'; import CardMedia from '@mui/material/CardMedia';
import CssBaseline from '@mui/material/CssBaseline'; import CssBaseline from '@mui/material/CssBaseline';
import Grid from '@mui/material/Grid'; 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 Typography from '@mui/material/Typography';
import Container from '@mui/material/Container'; import Container from '@mui/material/Container';
import Link from '@mui/material/Link';
import Checkbox from '@mui/material/Checkbox'; 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 {createTheme, ThemeProvider} from '@mui/material/styles';
import cards from '../constants/Card'; import cards from '../constants/Card';
import {createContext, useState} from "react"; import myimage from '../../public/images/syntax.jpeg'
import { StarsCanvas } from "./canvas"; import {SectionWrapper} from "../hoc";
import myimage from '../images/syntax.jpeg'
import { SectionWrapper } from "../hoc";
import Preproblems from "./Preproblems"; import Preproblems from "./Preproblems";
export const ThemeContext = createContext(null); 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 defaultTheme = createTheme();
const Problems = () => { const Problems = () => {
const [theme, setTheme] = useState('dark'); const [theme, setTheme] = useState('dark');
const toggleTheme = () => { const toggleTheme = () => {
setTheme(theme === 'light' ? 'dark' : 'light'); setTheme(theme === 'light' ? 'dark' : 'light');
} }
return ( return (
<div className="Problems"> <div className="Problems">
<Preproblems /> <Preproblems/>
<ThemeContext.Provider value={{theme, toggleTheme}}> <ThemeContext.Provider value={{theme, toggleTheme}}>
<ThemeProvider theme={defaultTheme}> <ThemeProvider theme={defaultTheme}>
<CssBaseline/> <CssBaseline/>
<main> <main>
{/* Hero unit */}
<Container <Container
sx={{py: 8}} maxWidth="fit-content"> sx={{py: 8}} maxWidth="fit-content">
{/* End hero unit */}
<div className="flex mt-4 border border-gray-500 p-4"> <div className="flex mt-4 border border-gray-500 p-4">
<Grid container spacing={4}> <Grid container spacing={4}>
{/*# TODO:Edit the Jode here */}
{cards.map((card) => ( {cards.map((card) => (
<Grid item xs={12} sm={6} md={4} key={card.id}> <Grid item xs={12} sm={6} md={4} key={card.id}>
{/*<img src={require("./images/syntax.jpeg")} alt="jode"/>*/} {/*<img src={require("./images/syntax.jpeg")} alt="jode"/>*/}
@ -155,7 +78,6 @@ const Problems = () => {
</Grid> </Grid>
</div> </div>
{/*<StarsCanvas />*/}
</Container> </Container>
</main> </main>
</ThemeProvider> */ </ThemeProvider> */

11
src/components/SocialMedia.jsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { motion } from 'framer-motion'; import {motion} from 'framer-motion';
import Tilt from 'react-tilt'; import Tilt from 'react-tilt';
import { socialMediaData } from '../constants'; import {socialMediaData} from '../constants';
const SocialMedia = () => { const SocialMedia = () => {
return ( return (
@ -11,8 +11,8 @@ const SocialMedia = () => {
<Tilt className="xs:w-[250px] w-full" key={index}> <Tilt className="xs:w-[250px] w-full" key={index}>
<motion.div <motion.div
variants={{ variants={{
hidden: { opacity: 0, y: 50 }, hidden: {opacity: 0, y: 50},
visible: { opacity: 1, y: 0 }, visible: {opacity: 1, y: 0},
}} }}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
@ -30,7 +30,8 @@ const SocialMedia = () => {
> >
<a href={item.url} className="block"> <a href={item.url} className="block">
<div className="flex justify-center items-center mb-4"> <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))' }} /> <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> </div>
<h3 className="text-white text-2xl font-bold text-center">{item.title}</h3> <h3 className="text-white text-2xl font-bold text-center">{item.title}</h3>
</a> </a>

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

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

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

@ -1,11 +1,11 @@
import { useState, useRef, Suspense } from "react"; import {Suspense, useRef, useState} from "react";
import { Canvas, useFrame } from "@react-three/fiber"; import {Canvas, useFrame} from "@react-three/fiber";
import { Points, PointMaterial, Preload } from "@react-three/drei"; import {PointMaterial, Points, Preload} from "@react-three/drei";
import * as random from "maath/random/dist/maath-random.esm"; import * as random from "maath/random/dist/maath-random.esm";
const Stars = (props) => { const Stars = (props) => {
const ref = useRef(); const ref = useRef();
const [sphere] = useState(() => random.inSphere(new Float32Array(5000), { radius: 1.2 })); const [sphere] = useState(() => random.inSphere(new Float32Array(5000), {radius: 1.2}));
useFrame((state, delta) => { useFrame((state, delta) => {
ref.current.rotation.x -= delta / 10; ref.current.rotation.x -= delta / 10;
@ -30,12 +30,12 @@ const Stars = (props) => {
const StarsCanvas = () => { const StarsCanvas = () => {
return ( return (
<div className='w-full h-auto absolute inset-0 z-[-1]'> <div className='w-full h-auto absolute inset-0 z-[-1]'>
<Canvas camera={{ position: [0, 0, 1] }}> <Canvas camera={{position: [0, 0, 1]}}>
<Suspense fallback={null}> <Suspense fallback={null}>
<Stars /> <Stars/>
</Suspense> </Suspense>
<Preload all /> <Preload all/>
</Canvas> </Canvas>
</div> </div>
); );

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

@ -1,4 +1,4 @@
import StarsCanvas from "./Stars"; import StarsCanvas from "./Stars";
import EarthCanvas from "./Earth"; 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;
}

2
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 Navbar from "./Navbar";
import Menu from "./Menu"; import Menu from "./Menu";
import Contacts from "./Contacts"; import Contacts from "./Contacts";

42
src/constants/Card.jsx
View File

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

16
src/constants/index.js
View File

@ -1,11 +1,4 @@
import { import {contacts_pic, discord_icon, faq_pic, github, instagram_icon, problems,} from "../assets";
contacts_pic,
faq_pic,
problems,
github,
instagram_icon,
discord_icon,
} from "../assets";
export const navLinks = [ export const navLinks = [
{ {
@ -93,8 +86,7 @@ const faqs = [
question: 'What software do I need to install on my laptop?', 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.' answer: 'You will need to install Python 3.9.6 and PyCharm Community Edition 2021.1.3.'
}, },
] ]
const socialMediaData = [ const socialMediaData = [
@ -113,9 +105,9 @@ const socialMediaData = [
{ {
title: 'Github', title: 'Github',
icon: github, icon: github,
url: 'https://github.com/Rick-Lang/rickroll-lang', url: 'https://github.com/Sosokker/SOS12.git',
color: 'linear-gradient(to bottom right, #24292E, #444D56)', color: 'linear-gradient(to bottom right, #24292E, #444D56)',
}, },
]; ];
export { menu, faqs, socialMediaData }; export {menu, faqs, socialMediaData};

10
src/hoc/SectionWrapper.jsx
View File

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

2
src/main.jsx
View File

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

2
src/styles.js
View File

@ -18,4 +18,4 @@ const styles = {
"text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px] text-center" "text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px] text-center"
}; };
export { styles }; export {styles};