mirror of
https://github.com/Sosokker/SOS12.git
synced 2025-12-18 20:24:05 +01:00
Maybe Final, still need to add more questions
This commit is contained in:
Krittin SETDHAVANICH
parent
acad5e8e7f
commit
ab218a5559
@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
@ -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>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -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"
|
||||
|
||||
|
||||
1056
src/assets/logo.svg
1056
src/assets/logo.svg
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 90 KiB |
@ -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">
|
||||
|
||||
@ -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;
|
||||
@ -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'>
|
||||
|
||||
@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
|
||||
|
||||
import {styles} from "../styles";
|
||||
import {navLinks} from "../constants";
|
||||
import { logo, menu, close } from "../assets";
|
||||
import {close, logo, menu} from "../assets";
|
||||
|
||||
const Navbar = () => {
|
||||
const [active, setActive] = useState("");
|
||||
|
||||
@ -9,7 +9,7 @@ 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>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -361,3 +351,4 @@ h4.mail {
|
||||
box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@ -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 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/>
|
||||
<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> */
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useState, useRef, Suspense } from "react";
|
||||
import {Suspense, useRef, useState} from "react";
|
||||
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";
|
||||
|
||||
const Stars = (props) => {
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
body {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
@ -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";
|
||||
|
||||
@ -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 = [
|
||||
{
|
||||
@ -96,7 +89,6 @@ const faqs = [
|
||||
]
|
||||
|
||||
|
||||
|
||||
const socialMediaData = [
|
||||
{
|
||||
title: 'Instagram',
|
||||
@ -113,7 +105,7 @@ 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)',
|
||||
},
|
||||
];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user