Skip to content

S
SWLab Docs for Park
Commit 71ed96cd authored by 박민석's avatar 박민석
Browse files
Options

update main

parent 4fb3ebb9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 282 additions and 133 deletions
.DS_Store 0 → 100644
View file @ 71ed96cd
File added
.vscode/settings.json
View file @ 71ed96cd
{}
\ No newline at end of file
{
"files.exclude": {
".editorconfig": true,
".eslintignore": true,
".vscode/": true,
"**/.gitignore": true,
"**/.gitkeep": true,
"node/": true,
"dist/": true,
"yarn.lock": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"search.useGlobalIgnoreFiles": true
}
\ No newline at end of file
swlab-main/index.html
View file @ 71ed96cd
......@@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/png" href="./src/assets/images/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<title>SW Lab</title>
</head>
<body>
<div id="root"></div>
......
swlab-main/package-lock.json
View file @ 71ed96cd
This diff is collapsed.
swlab-main/package.json
View file @ 71ed96cd
......@@ -14,6 +14,7 @@
"@react-three/fiber": "^8.16.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.1.0",
"styled-components": "^6.1.8",
"three": "^0.163.0"
},
......
swlab-main/src/App.jsx
View file @ 71ed96cd
......@@ -2,12 +2,19 @@
import './styles/index.scss'
import Banner from './components/Banner'
import Header from './components/Header'
import Section from './components/Section'
import Card from './components/Card'
function App () {
return (
<>
<Header />
<Banner />
<Section>
<Card title='title1' subTitle='subTitle1' desc='desc1' />
<Card title='title1' subTitle='subTitle1' desc='desc1' />
<Card title='title1' subTitle='subTitle1' desc='desc1' />
</Section>
</>
)
}
......
swlab-main/src/components/Banner.jsx
View file @ 71ed96cd
......@@ -4,6 +4,8 @@ import { Canvas, useFrame } from '@react-three/fiber'
import { Points, PointMaterial } from '@react-three/drei'
import * as random from 'maath/random/dist/maath-random.esm'
import styled from 'styled-components'
import { SiGithub } from 'react-icons/si'
import Button from './Button'
const Galaxy = (props) => {
const ref = useRef()
......@@ -14,11 +16,10 @@ const Galaxy = (props) => {
ref.current.rotation.y -= delta / 15
})
return (
// <group rotation={[0, 0, Math.PI / 4]}>
<group rotation={[0, 0, Math.PI / 4]}>
<Points ref={ref} positions={sphere} stride={3} frustumCulled={false} {...props}>
{/* <PointMaterial transparent color="#ffa0e0" size={0.005} sizeAttenuation={true} depthWrite={false} /> */}
<PointMaterial transparent color='#2174e0' size={0.005} sizeAttenuation={true} depthWrite={false} />
<PointMaterial transparent color='#0072CE' size={0.005} sizeAttenuation={true} depthWrite={false} />
</Points>
</group>
)
......@@ -33,6 +34,11 @@ export default function Banner () {
<Overlay>
<BannerTitle type='main' fontSize='5em'>Bankware Global</BannerTitle>
<BannerTitle type='sub' fontSize='3.5em'>Software Lab.</BannerTitle>
<BannerDesc>Analyzing new technologies and ideas • Developing innovative products and services</BannerDesc>
<ButtonGroup>
<Button text='Documetation' />
<Button text='GitHub' icon={<SiGithub />}/>
</ButtonGroup>
</Overlay>
</Wrapper>
)
......@@ -41,7 +47,7 @@ export default function Banner () {
const Wrapper = styled.div`
position: relative;
width: 100%;
height: 600px;
height: 510px;
background-color: #12071f;
`
const Overlay = styled.div`
......@@ -57,7 +63,19 @@ const BannerTitle = styled.h1`
font-size: ${(props) => props.fontSize};
font-weight: 600;
letter-spacing: -0.05em;
background: ${(props) => (props.type === 'main' ? 'linear-gradient(30deg, #2174e0, #fff)' : '#fff')};
background: ${(props) => (props.type === 'main' ? 'linear-gradient(30deg, #0072CE, #fff)' : '#fff')};
background-clip: text;
-webkit-text-fill-color: transparent;
`
const BannerDesc = styled.h3`
font-size: 1.5em;
font-weight: 400;
margin-top: 15px;
color: #fff;
`
const ButtonGroup = styled.div`
display: flex;
margin-top: 15px;
width: 100%;
justify-content: center;
`
swlab-main/src/components/Button.jsx 0 → 100644
View file @ 71ed96cd
// @ts-nocheck
import styled from 'styled-components'
export default function Button (props) {
const { icon, text } = props
return <Wrapper>
{text}
<span>{ icon }</span>
</Wrapper>
}
const Wrapper = styled.div`
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
padding: 12px 32px 10px 32px;
border: 2px solid #0072CE;
border-radius: 28px;
color: #0072CE;
font-weight: 600;
font-size: 1.5em;
margin: 14px;
&:hover {
background-color: #0072CE;
transition: 1s ease;
color: rgba(0, 0, 0, 1);
}
svg {
margin-top: 3px;
margin-left: 7px;
}
`
swlab-main/src/components/Card.jsx 0 → 100644
View file @ 71ed96cd
// @ts-nocheck
import styled from 'styled-components'
export default function Card (props) {
const { title, subTitle, desc } = props
return <Wrapper>
<div>{title}</div>
<div>{subTitle}</div>
<div>{desc}</div>
</Wrapper>
}
const Wrapper = styled.div`
width: 300px;
height: 500px;
border: 1px solid red;
border-radius: 10px;
background-color: #fff;
`
swlab-main/src/components/Header.jsx
View file @ 71ed96cd
......@@ -34,10 +34,10 @@ const Wrapper = styled.div`
color: #fff;
`
const Logo = styled.div`
margin-top: 10px;
margin-top: 4px;
margin-right: 4px;
width: 40px;
height: 45px;
width: 35px;
height: 40px;
background-image: url(${props => props.image});
background-size: contain;
background-repeat: no-repeat;
......
swlab-main/src/components/Nav.jsx
View file @ 71ed96cd
// @ts-nocheck
import styled from 'styled-components'
import styled, { keyframes } from 'styled-components'
export default function Nav () {
return (<Menu>
<MenuItem>Documentation</MenuItem>
<MenuItem><p>Blog</p></MenuItem>
<MenuItem><p>Documentation</p></MenuItem>
</Menu>)
}
const Menu = styled.div`
const shine = keyframes`
0% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
`
const Menu = styled.ul`
display: flex;
align-items: center;
`
const MenuItem = styled.div`
const MenuItem = styled.li`
margin: 0 1.875rem;
cursor: pointer;
font-weight: 600;
font-size: 20px;
&:hover {
p {
background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(0,212,255,1) 50%, rgba(0,114,206,1) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 500% auto;
animation: ${shine} 1500ms ease-in-out infinite alternate;
}
}
`
swlab-main/src/components/Section.jsx 0 → 100644
View file @ 71ed96cd
// @ts-nocheck
import styled from 'styled-components'
export default function Section (props) {
return <Wrapper>
{props.children}
</Wrapper>
}
const Wrapper = styled.div`
display: flex;
justify-content: center;
padding: 80px 0;
`
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment