Maybe Final, still need to add more questions

2025-12-18 20:24:05 +01:00 · 2023-07-03 15:27:01 +07:00 · 2023-07-03 15:27:01 +07:00 · ab218a5559
commit ab218a5559
parent acad5e8e7f
28 changed files with 2049 additions and 1153 deletions
--- a/index.html
+++ b/index.html
@ -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>
--- a/public/images/syntax.jpeg
+++ b/public/images/syntax.jpeg
--- a/public/logo.svg
+++ b/public/logo.svg
@ -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>
--- a/src/App.jsx
+++ b/src/App.jsx
@ -1,6 +1,5 @@
-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"

@ -9,13 +8,13 @@ const App = () => {
        <BrowserRouter>
            <div className='relative z-0 bg-primary'>
                <div className='bg-[#050816]'>
-          <Navbar />
+                    <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 />} />
+                        <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>
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
--- a/src/components/Contacter.jsx
+++ b/src/components/Contacter.jsx
@ -1,9 +1,9 @@
-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 = () => {
@ -17,8 +17,8 @@ const Contact = () => {
    const [loading, setLoading] = useState(false);

    const handleChange = (e) => {
-    const { target } = e;
-    const { name, value } = target;
+        const {target} = e;
+        const {name, value} = target;

        setForm({
            ...form,
@ -126,7 +126,7 @@ const Contact = () => {
                variants={slideIn("right", "tween", 0.2, 1)}
                className='xl:flex-1 xl:h-auto md:h-[550px] h-[350px]'
            >
-        <EarthCanvas />
+                <EarthCanvas/>
            </motion.div>
        </div>
    );
--- a/src/components/Contacts.jsx
+++ b/src/components/Contacts.jsx
@ -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>
--- a/src/components/Faq.jsx
+++ b/src/components/Faq.jsx
@ -1,9 +1,9 @@
-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);
@ -64,7 +64,8 @@ const Faq = () => {
            </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">
+                <label htmlFor="default-search"
+                       className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">
                    Search
                </label>
                <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>
            <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
                            className={`flex items-center justify-between cursor-pointer ${
@ -164,7 +165,7 @@ const Faq = () => {
                ))}
            </div>
            <hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
-</div>
+        </div>
    );
 };

--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@ -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;
--- a/src/components/Loader.jsx
+++ b/src/components/Loader.jsx
@ -1,7 +1,7 @@
-import { Html, useProgress } from "@react-three/drei";
+import {Html, useProgress} from "@react-three/drei";

 const CanvasLoader = () => {
-  const { progress } = useProgress();
+    const {progress} = useProgress();
    return (
        <Html
            as='div'
--- a/src/components/Menu.jsx
+++ b/src/components/Menu.jsx
@ -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'>
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@ -1,9 +1,9 @@
-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("");
@ -42,7 +42,7 @@ const Navbar = () => {
                        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 '>
                        SOS CAMP &nbsp;
                        <span className='sm:block hidden'> | 12th</span>
--- a/src/components/Preproblems.jsx
+++ b/src/components/Preproblems.jsx
@ -1,15 +1,15 @@
 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>
+                <p className={styles.sectionSubTextCenter}>ทำโจทย์หน่อย</p>
                <h2 className={styles.sectionCenterText}>Problems</h2>
            </motion.div>

@ -17,7 +17,9 @@ const Preproblems = () => {
                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.
+                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>
        </>
    );
--- a/src/components/Problems.css
+++ b/src/components/Problems.css
@ -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;
 }
+
--- a/src/components/Problems.jsx
+++ b/src/components/Problems.jsx
@ -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,113 +7,36 @@ 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 toggleTheme = () => {
        setTheme(theme === 'light' ? 'dark' : 'light');
    }
-
    return (
        <div className="Problems">
-         <Preproblems />
+            <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"/>*/}
@ -155,7 +78,6 @@ const Problems = () => {

                                </Grid>
                            </div>
-                            {/*<StarsCanvas />*/}
                        </Container>
                    </main>
                </ThemeProvider> */
--- a/src/components/SocialMedia.jsx
+++ b/src/components/SocialMedia.jsx
@ -1,7 +1,7 @@
 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 (
@ -11,8 +11,8 @@ const SocialMedia = () => {
                    <Tilt className="xs:w-[250px] w-full" key={index}>
                        <motion.div
                            variants={{
-                hidden: { opacity: 0, y: 50 },
-                visible: { opacity: 1, y: 0 },
+                                hidden: {opacity: 0, y: 50},
+                                visible: {opacity: 1, y: 0},
                            }}
                            initial="hidden"
                            animate="visible"
@ -30,7 +30,8 @@ const SocialMedia = () => {
                        >
                            <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))' }} />
+                                    <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>
--- a/src/components/canvas/Earth.jsx
+++ b/src/components/canvas/Earth.jsx
@ -1,6 +1,6 @@
-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";

@ -8,7 +8,7 @@ const Earth = () => {
    const earth = useGLTF("./planet/scene.gltf");

    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
            frameloop='demand'
            dpr={[1, 2]}
-      gl={{ preserveDrawingBuffer: true }}
+            gl={{preserveDrawingBuffer: true}}
            camera={{
                fov: 45,
                near: 0.1,
@ -26,15 +26,15 @@ const EarthCanvas = () => {
                position: [-4, 3, 6],
            }}
        >
-      <Suspense fallback={<CanvasLoader />}>
+            <Suspense fallback={<CanvasLoader/>}>
                <OrbitControls
                    autoRotate
                    enableZoom={false}
                    maxPolarAngle={Math.PI / 2}
                    minPolarAngle={Math.PI / 2}
                />
-        <Earth />
-        <Preload all />
+                <Earth/>
+                <Preload all/>
            </Suspense>
        </Canvas>
    );
--- a/src/components/canvas/Stars.jsx
+++ b/src/components/canvas/Stars.jsx
@ -1,11 +1,11 @@
-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 [sphere] = useState(() => random.inSphere(new Float32Array(5000), {radius: 1.2}));

    useFrame((state, delta) => {
        ref.current.rotation.x -= delta / 10;
@ -30,12 +30,12 @@ const Stars = (props) => {
 const StarsCanvas = () => {
    return (
        <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}>
-          <Stars />
+                    <Stars/>
                </Suspense>

-        <Preload all />
+                <Preload all/>
            </Canvas>
        </div>
    );
--- a/src/components/canvas/index.js
+++ b/src/components/canvas/index.js
@ -1,4 +1,4 @@
 import StarsCanvas from "./Stars";
 import EarthCanvas from "./Earth";

-export { StarsCanvas, EarthCanvas };
+export {StarsCanvas, EarthCanvas};
--- a/src/components/index.css
+++ b/src/components/index.css
@ -1,4 +0,0 @@
-body {
-    background: black;
-    color: white;
-  }
--- a/src/components/index.js
+++ b/src/components/index.js
@ -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";
--- a/src/constants/Card.jsx
+++ b/src/constants/Card.jsx
@ -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

    }
 ]
--- a/src/constants/index.js
+++ b/src/constants/index.js
@ -1,11 +1,4 @@
-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 = [
    {
@ -93,8 +86,7 @@ const faqs = [
        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 = [
@ -113,9 +105,9 @@ const socialMediaData = [
    {
        title: '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)',
    },
 ];

-export { menu, faqs, socialMediaData };
+export {menu, faqs, socialMediaData};
--- a/src/hoc/SectionWrapper.jsx
+++ b/src/hoc/SectionWrapper.jsx
@ -1,7 +1,7 @@
-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() {
@ -10,14 +10,14 @@ const StarWrapper = (Component, idName) =>
                variants={staggerContainer()}
                initial='hidden'
                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`}
            >
        <span className='hash-span' id={idName}>
          &nbsp;
        </span>

-        <Component />
+                <Component/>
            </motion.section>
        );
    };
--- a/src/main.jsx
+++ b/src/main.jsx
@ -6,6 +6,6 @@ import "./index.css";

 ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
-    <App />
+        <App/>
    </React.StrictMode>
 );
--- a/src/styles.js
+++ b/src/styles.js
@ -18,4 +18,4 @@ const styles = {
        "text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px] text-center"
 };

-export { styles };
+export {styles};
				`@ -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>