├── .babelrc ├── .gitignore ├── .travis.yml ├── README.md ├── package-lock.json ├── package.json ├── poi.config.js ├── public ├── favicon.ico ├── favicon.png └── index.html └── src ├── images ├── avatar │ ├── 4ctue.jpg │ ├── Acaleph.jpg │ ├── Chip.jpg │ ├── Cyris.jpg │ ├── Explorer.jpg │ ├── Junier.jpg │ ├── Kev1n.jpg │ ├── MATRIX.jpg │ ├── Michael.jpg │ ├── Moesang.png │ ├── Processor.jpeg │ ├── Roc826.jpg │ ├── Sora.jpg │ ├── Y.jpg │ ├── Yotubird.png │ ├── ahlaman.jpg │ ├── airbasic.jpg │ ├── aklis.jpg │ ├── alex.jpg │ ├── ash.jpg │ ├── at0m.png │ ├── b0lv42.jpg │ ├── bigmud.jpg │ ├── c014.png │ ├── chenzhanxian.jpg │ ├── ckj123.jpg │ ├── cosmos.jpg │ ├── cru5h.jpg │ ├── d1gg12.jpg │ ├── deadwind4.jpeg │ ├── edward_L.jpg │ ├── eric.jpg │ ├── f1rry.png │ ├── fantasyqt.jpg │ ├── hcamael.jpg │ ├── heartsky.jpg │ ├── jibo.jpg │ ├── li4no.jpg │ ├── lightless.jpg │ ├── logong.jpg │ ├── lorexxar.jpg │ ├── mian.jpg │ ├── mingy.jpg │ ├── nervermoes.jpg │ ├── ngc7293.jpg │ ├── princessprincepal.jpg │ ├── seadom.png │ ├── spine.jpg │ ├── sysorem.jpg │ ├── tata.jpg │ ├── undefinedv.jpg │ ├── veritas501.jpeg │ ├── vvv_347.png │ ├── wenzhuan.jpg │ └── xiaoyao52110.jpg ├── background.svg ├── cross.svg ├── github-logo.svg ├── logo-blue.svg ├── logo.svg ├── next.svg ├── qrcode.png ├── title.png └── weixin-logo.svg ├── scripts ├── app.js ├── components │ ├── Footer.jsx │ ├── Header.jsx │ ├── Main │ │ ├── About.jsx │ │ ├── Glory.jsx │ │ ├── Home.jsx │ │ ├── Main.jsx │ │ ├── Member.jsx │ │ └── UseTyped.jsx │ ├── Menu.jsx │ └── Vidar.jsx └── config │ ├── about.json │ ├── glory.json │ └── member.js └── scss ├── _base.scss ├── _function.scss ├── _mixin.scss ├── _variable.scss ├── fonts └── RBNo2Light.otf ├── keyframes └── _keyframes.scss ├── modules ├── _footer.scss ├── _header.scss ├── _main.scss ├── _menu.scss └── _vidar.scss └── style.scss /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-app"], 3 | "plugins": ["react-require"] 4 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /dist 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | # idea 20 | .idea 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "10.9.0" 5 | install: 6 | - npm install 7 | script: 8 | - npm run build 9 | 10 | deploy: 11 | provider: pages 12 | skip_cleanup: true 13 | github_token: $GITHUB_TOKEN 14 | keep_history: true 15 | fqdn: vidar.cyris.moe 16 | local_dir: dist/ 17 | on: 18 | branch: master -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vidar-Website 2 | Vidar-Team official site. 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vidar-website", 3 | "version": "1.0.0", 4 | "description": "Vidar-Team official site", 5 | "main": "src/scripts/app.js", 6 | "scripts": { 7 | "build": "poi --prod && cp dist/index.html dist/404.html", 8 | "dev": "poi --serve" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/iCyris/Vidar-Website.git" 13 | }, 14 | "keywords": [ 15 | "Vidar-Team", 16 | "Homepage" 17 | ], 18 | "author": "Cyris (https://cyris.moe/)", 19 | "bugs": { 20 | "url": "https://github.com/iCyris/Vidar-Website/issues" 21 | }, 22 | "homepage": "https://vidar.club", 23 | "devDependencies": { 24 | "babel-plugin-react-require": "^3.1.1", 25 | "babel-preset-react-app": "^9.0.0", 26 | "poi": "^12.6.10", 27 | "typed.js": "^2.0.10" 28 | }, 29 | "dependencies": { 30 | "@popperjs/core": "^2.9.2", 31 | "node-sass": "^4.13.1", 32 | "react": "^16.8.6", 33 | "react-dom": "^16.8.6", 34 | "react-popper": "^2.2.5", 35 | "react-router-dom": "^5.0.0", 36 | "sass-loader": "^7.1.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /poi.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: 'src/scripts/app.js', 3 | output: { 4 | publicUrl: "/" 5 | } 6 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/public/favicon.ico -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/public/favicon.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | Vidar - AS WE DO, AS YOU KNOW 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /src/images/avatar/4ctue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/4ctue.jpg -------------------------------------------------------------------------------- /src/images/avatar/Acaleph.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/Acaleph.jpg -------------------------------------------------------------------------------- /src/images/avatar/Chip.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/Chip.jpg -------------------------------------------------------------------------------- /src/images/avatar/Cyris.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/Cyris.jpg -------------------------------------------------------------------------------- /src/images/avatar/Explorer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/Explorer.jpg -------------------------------------------------------------------------------- /src/images/avatar/Junier.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/Junier.jpg -------------------------------------------------------------------------------- /src/images/avatar/Kev1n.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/Kev1n.jpg -------------------------------------------------------------------------------- /src/images/avatar/MATRIX.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/MATRIX.jpg -------------------------------------------------------------------------------- /src/images/avatar/Michael.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/Michael.jpg -------------------------------------------------------------------------------- /src/images/avatar/Moesang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/Moesang.png -------------------------------------------------------------------------------- /src/images/avatar/Processor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/Processor.jpeg -------------------------------------------------------------------------------- /src/images/avatar/Roc826.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/Roc826.jpg -------------------------------------------------------------------------------- /src/images/avatar/Sora.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/Sora.jpg -------------------------------------------------------------------------------- /src/images/avatar/Y.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/Y.jpg -------------------------------------------------------------------------------- /src/images/avatar/Yotubird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/Yotubird.png -------------------------------------------------------------------------------- /src/images/avatar/ahlaman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/ahlaman.jpg -------------------------------------------------------------------------------- /src/images/avatar/airbasic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/airbasic.jpg -------------------------------------------------------------------------------- /src/images/avatar/aklis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/aklis.jpg -------------------------------------------------------------------------------- /src/images/avatar/alex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/alex.jpg -------------------------------------------------------------------------------- /src/images/avatar/ash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/ash.jpg -------------------------------------------------------------------------------- /src/images/avatar/at0m.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/at0m.png -------------------------------------------------------------------------------- /src/images/avatar/b0lv42.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/b0lv42.jpg -------------------------------------------------------------------------------- /src/images/avatar/bigmud.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/bigmud.jpg -------------------------------------------------------------------------------- /src/images/avatar/c014.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/c014.png -------------------------------------------------------------------------------- /src/images/avatar/chenzhanxian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/chenzhanxian.jpg -------------------------------------------------------------------------------- /src/images/avatar/ckj123.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/ckj123.jpg -------------------------------------------------------------------------------- /src/images/avatar/cosmos.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/cosmos.jpg -------------------------------------------------------------------------------- /src/images/avatar/cru5h.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/cru5h.jpg -------------------------------------------------------------------------------- /src/images/avatar/d1gg12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/d1gg12.jpg -------------------------------------------------------------------------------- /src/images/avatar/deadwind4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/deadwind4.jpeg -------------------------------------------------------------------------------- /src/images/avatar/edward_L.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/edward_L.jpg -------------------------------------------------------------------------------- /src/images/avatar/eric.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/eric.jpg -------------------------------------------------------------------------------- /src/images/avatar/f1rry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/f1rry.png -------------------------------------------------------------------------------- /src/images/avatar/fantasyqt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/fantasyqt.jpg -------------------------------------------------------------------------------- /src/images/avatar/hcamael.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/hcamael.jpg -------------------------------------------------------------------------------- /src/images/avatar/heartsky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/heartsky.jpg -------------------------------------------------------------------------------- /src/images/avatar/jibo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/jibo.jpg -------------------------------------------------------------------------------- /src/images/avatar/li4no.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/li4no.jpg -------------------------------------------------------------------------------- /src/images/avatar/lightless.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/lightless.jpg -------------------------------------------------------------------------------- /src/images/avatar/logong.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/logong.jpg -------------------------------------------------------------------------------- /src/images/avatar/lorexxar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/lorexxar.jpg -------------------------------------------------------------------------------- /src/images/avatar/mian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/mian.jpg -------------------------------------------------------------------------------- /src/images/avatar/mingy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/mingy.jpg -------------------------------------------------------------------------------- /src/images/avatar/nervermoes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/nervermoes.jpg -------------------------------------------------------------------------------- /src/images/avatar/ngc7293.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/ngc7293.jpg -------------------------------------------------------------------------------- /src/images/avatar/princessprincepal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/princessprincepal.jpg -------------------------------------------------------------------------------- /src/images/avatar/seadom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/seadom.png -------------------------------------------------------------------------------- /src/images/avatar/spine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/spine.jpg -------------------------------------------------------------------------------- /src/images/avatar/sysorem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/sysorem.jpg -------------------------------------------------------------------------------- /src/images/avatar/tata.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/tata.jpg -------------------------------------------------------------------------------- /src/images/avatar/undefinedv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/undefinedv.jpg -------------------------------------------------------------------------------- /src/images/avatar/veritas501.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/veritas501.jpeg -------------------------------------------------------------------------------- /src/images/avatar/vvv_347.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/vvv_347.png -------------------------------------------------------------------------------- /src/images/avatar/wenzhuan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/wenzhuan.jpg -------------------------------------------------------------------------------- /src/images/avatar/xiaoyao52110.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/avatar/xiaoyao52110.jpg -------------------------------------------------------------------------------- /src/images/cross.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 资源 18 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/images/github-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/images/logo-blue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | logo 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | logo 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/images/next.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 11 | 12 | next 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/images/qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/qrcode.png -------------------------------------------------------------------------------- /src/images/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/images/title.png -------------------------------------------------------------------------------- /src/images/weixin-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scripts/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | import Vidar from './components/Vidar' 4 | import '../scss/style.scss' 5 | 6 | render ( 7 | , 8 | document.getElementById('root') 9 | ) 10 | 11 | console.log('> 『 Vidar-Team 』 - As we do, as you know.') 12 | console.log('> Hey, we sell hot dogs on the first teaching building. 🌭') -------------------------------------------------------------------------------- /src/scripts/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import { usePopper } from 'react-popper' 3 | 4 | export default (props) => { 5 | const [referenceElement, setReferenceElement] = useState(null) 6 | const [popperElement, setPopperElement] = useState(null) 7 | const [visible, setVisible] = useState(null) 8 | const { styles, attributes } = usePopper(referenceElement, popperElement, { 9 | placement: 'top', 10 | modifiers: [ 11 | { 12 | name: 'offset', 13 | options: { 14 | offset: [0, 10], 15 | }, 16 | }, 17 | ], 18 | }) 19 | 20 | useEffect(()=>{ 21 | if(popperElement) { 22 | popperElement.focus() 23 | } 24 | }, [popperElement]) 25 | 26 | const showPopper = (e) => { 27 | e.preventDefault() 28 | setVisible(true) 29 | } 30 | 31 | const hidePopper = (e) => { 32 | if(e.relatedTarget !== referenceElement){ 33 | setVisible(false) 34 | } else { 35 | popperElement.focus() 36 | } 37 | } 38 | 39 | return ( 40 |
41 |
42 | 48 | 49 | 50 | 58 | 59 | 60 | { visible ?
61 | 62 |
: null } 63 |
64 |
65 |
66 |
67 |
68 |
69 | public@vidar.club 70 |
71 | 74 |
75 |
76 | ) 77 | } -------------------------------------------------------------------------------- /src/scripts/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default (props) => ( 4 |
5 | 11 |
12 |
13 | {/* ASCII('V') => binary (reversed fot stylesheet) */} 14 | 0 15 | 1 16 | 1 17 | 0 18 | 0 19 | 1 20 | 1 21 |
22 |
23 |
24 | ) -------------------------------------------------------------------------------- /src/scripts/components/Main/About.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import about_info from '../../config/about.json' 3 | 4 | export default (props) => { 5 | 6 | const focus = about_info.focus.map(item => 7 |
  • 8 |

    {item}

    9 |
    • 10 | ) 11 | 12 | return ( 13 |
    14 |
    15 | 16 | 17 | 18 | 19 | 20 |
    21 |
    22 |

    23 | About 24 |

    25 | 26 |
    27 |
    28 |

    29 | 简介 30 |

    31 |

    32 | {about_info.intro} 33 |

    34 |
    35 | 36 |
    37 |

    38 | 研究领域 39 |

    40 |
      41 | {focus} 42 |
    43 |
    44 | 45 |
    46 |

    47 | 项目 48 |

    49 |
      50 | {about_info.project} 51 |
    52 |
    53 |
    54 |
    55 |
    56 | ) 57 | } -------------------------------------------------------------------------------- /src/scripts/components/Main/Glory.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import glory_info from '../../config/glory' 3 | 4 | export default (props) => { 5 | 6 | if (glory_info[0].id === "1") { glory_info.reverse() } 7 | 8 | const tBody = glory_info.map( item => 9 | 10 | {item.id} 11 | {item.time} 12 | {item.name} 13 | {item.result} 14 | 15 | ) 16 | 17 | return ( 18 |
    19 |
    20 |
    Glory
    21 |
    22 |
    23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | {tBody} 34 | 35 |
    编号时间比赛名次
    36 |
    37 | ) 38 | } -------------------------------------------------------------------------------- /src/scripts/components/Main/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import useTyped from './UseTyped' 3 | 4 | const slogans = [ 5 | "As we do, as you know.", 6 | "Growing up with awe of technology.", 7 | "Those who seek truth must not be arrogant." 8 | ] 9 | 10 | export default (props) => { 11 | const sloganRef = React.useRef(null) 12 | 13 | useTyped(sloganRef, { 14 | strings: slogans, 15 | typeSpeed: 35, 16 | backSpeed: 25, 17 | startDelay: 400, 18 | backDelay: 800, 19 | loop: true 20 | }) 21 | 22 | return ( 23 |
    24 |
    25 | 22594e13276480dd456a8441babc227b / ˈvidɑ:, tim 26 |
    27 |
    28 |
    29 |
    30 |
    31 |
    32 |
    33 |
    34 | 35 |
    36 |
    37 | ) 38 | } -------------------------------------------------------------------------------- /src/scripts/components/Main/Main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Route, withRouter, Switch } from 'react-router-dom' 3 | import Home from './Home' 4 | import About from './About' 5 | import Member from './Member' 6 | import Glory from './Glory' 7 | 8 | export default withRouter((props) => { 9 | const pageID = { 10 | "/": "01", 11 | "/about": "02", 12 | "/member": "03", 13 | "/glory": "04" 14 | }, 15 | pageArray = ["/", "/about", "/member", "/glory"] 16 | 17 | let currentPageID = pageID["/"], 18 | nextPage = "/about" 19 | 20 | const handleLocationChange = () => { 21 | let currentLocationPath = location.pathname 22 | 23 | switch (currentLocationPath) { 24 | case "/": 25 | currentPageID = pageID["/"]; nextPage = pageArray[1] 26 | break 27 | case "/about": 28 | currentPageID = pageID["/about"]; nextPage = pageArray[2] 29 | break 30 | case "/member": 31 | currentPageID = pageID["/member"]; nextPage = pageArray[3] 32 | break 33 | case "/glory": 34 | currentPageID = pageID["/glory"]; nextPage = pageArray[0] 35 | break 36 | default: 37 | currentPageID = pageID["/"]; nextPage = pageArray[0] 38 | } 39 | } 40 | 41 | handleLocationChange() 42 | 43 | const routePage = () => { 44 | props.history.push(nextPage) 45 | handleLocationChange() 46 | } 47 | 48 | return ( 49 |
    50 |
    51 |
    52 |
    53 | {currentPageID} 54 |
    55 |
    56 |
    57 |
    58 | WELCOME 59 |
    60 |
    61 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 |
    84 | ) 85 | }) -------------------------------------------------------------------------------- /src/scripts/components/Main/Member.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import member_info from '../../config/member.js' 3 | 4 | export default (props) => { 5 | const memberProfile = member_info.map( member => 6 |
    7 | 12 | 13 | {member.id} 14 | 15 |
    16 |

    22 |

    23 |
    24 | ) 25 | 26 | return ( 27 |
    28 |
    29 |
    30 |

    Member

    31 | {memberProfile} 32 |
    33 |
    34 |
    35 | ) 36 | } -------------------------------------------------------------------------------- /src/scripts/components/Main/UseTyped.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Typed from 'typed.js' 3 | 4 | const useRerender = () => { 5 | const [flag, setFlag] = React.useState(true) 6 | return () => setFlag(!flag) 7 | } 8 | 9 | const useTyped = (ref, options) => { 10 | const instance = React.useRef(null) 11 | const rerender = useRerender() 12 | 13 | React.useEffect(() => { 14 | if (ref.current === null) return 15 | ;instance.current = new Typed(ref.current, options) 16 | ;rerender() 17 | 18 | return () => instance.current.destroy() 19 | }, [ref]) 20 | 21 | return instance.current 22 | } 23 | 24 | export default useTyped -------------------------------------------------------------------------------- /src/scripts/components/Menu.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | 3 | export default (props) => { 4 | const [dataState, setDataState] = useState("init") 5 | 6 | const handleClick = () => { 7 | (dataState === "close" || dataState === "init") ? setDataState("open") : setDataState("close") 8 | } 9 | 10 | return ( 11 |
    12 |
    13 |
    14 |
    15 |
    16 |
    17 | 45 |
    46 |
    47 |
    48 |
    49 |
    50 |
    51 |
    52 | ) 53 | } -------------------------------------------------------------------------------- /src/scripts/components/Vidar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BrowserRouter as Router } from 'react-router-dom' 3 | import Header from './Header' 4 | import Main from './Main/Main' 5 | import Menu from './Menu' 6 | import Footer from './Footer' 7 | 8 | export default () => ( 9 |
    10 |
    11 | 12 |
    13 | 14 | 15 |
    16 |
    17 | ) -------------------------------------------------------------------------------- /src/scripts/config/about.json: -------------------------------------------------------------------------------- 1 | { 2 | "intro": "Vidar-Team 成立于2008年9月 ，其名 Vidar 来源于北欧神话\"诸神黄昏\"中幸存于难、带领人类重建了家园的神 Víðarr，是由杭州电子科技大学一群热爱信息安全的小伙伴自发成立的技术型团体 ，作为高校战队活跃于各大ctf赛事。", 3 | "focus": ["Web 开发及渗透", "逆向工程", "二进制", "Windows & Linux", "移动安全"], 4 | "project": "CTF 平台、盘丝洞" 5 | } -------------------------------------------------------------------------------- /src/scripts/config/glory.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "1", 4 | "time": "2016", 5 | "name": "SCTF 2016 (成都三叶草) 线上赛", 6 | "result": "第八名" 7 | }, 8 | { 9 | "id": "2", 10 | "time": "2016", 11 | "name": "CCTF 2016 (重邮) 线上赛", 12 | "result": "第四名" 13 | }, 14 | { 15 | "id": "3", 16 | "time": "2016", 17 | "name": "ALICTF 2016 (Alibaba) 线上赛", 18 | "result": "第八名、第十四名 (国内第五)" 19 | }, 20 | { 21 | "id": "4", 22 | "time": "2016", 23 | "name": "WHCTF 2016 (华中科技大学) 线上赛", 24 | "result": "第九名" 25 | }, 26 | { 27 | "id": "5", 28 | "time": "2016", 29 | "name": "WHCTF 2016 (华中科技大学) 线下赛", 30 | "result": "第八名" 31 | }, 32 | { 33 | "id": "6", 34 | "time": "2016", 35 | "name": "SSCTF 2016 (四叶草安全) 线下赛", 36 | "result": "第六名" 37 | }, 38 | { 39 | "id": "7", 40 | "time": "2016", 41 | "name": "XCTF联赛 2016 线上赛", 42 | "result": "第二十名 (110066)" 43 | }, 44 | { 45 | "id": "8", 46 | "time": "2016", 47 | "name": "XCTF联赛 2016 线上赛", 48 | "result": "第七名 (没有一个系统是安全的)" 49 | }, 50 | { 51 | "id": "9", 52 | "time": "2016", 53 | "name": "XCTF联赛 2016 全球总决赛", 54 | "result": "第十四名" 55 | }, 56 | { 57 | "id": "10", 58 | "time": "2016", 59 | "name": "ISCC 2016 线下赛 (北理) 线下赛", 60 | "result": "特等奖 (第一名)" 61 | }, 62 | { 63 | "id": "11", 64 | "time": "2016", 65 | "name": "丝绸之路网络安全精英赛", 66 | "result": "亚军" 67 | }, 68 | { 69 | "id": "12", 70 | "time": "2016", 71 | "name": "全国公安某安全对抗赛", 72 | "result": "第五名" 73 | }, 74 | { 75 | "id": "13", 76 | "time": "2016", 77 | "name": "CTFTIME 2016", 78 | "result": "国内排名第四 (暂)" 79 | }, 80 | { 81 | "id": "14", 82 | "time": "2016", 83 | "name": "华山杯网络安全技能大赛", 84 | "result": "三等奖" 85 | }, 86 | { 87 | "id": "15", 88 | "time": "2016", 89 | "name": "L-CTF 2016 线上赛", 90 | "result": "第八名" 91 | }, 92 | { 93 | "id": "16", 94 | "time": "2016", 95 | "name": "第三届问鼎杯全国保密技能大赛", 96 | "result": "第一名、特等奖" 97 | }, 98 | { 99 | "id": "17", 100 | "time": "2016", 101 | "name": "第五届\"蓝盾杯\"网络空间安全竞赛全国总决赛", 102 | "result": "三等奖" 103 | }, 104 | { 105 | "id": "18", 106 | "time": "2017", 107 | "name": "ISCC 2017 线下赛 (北理) 线下赛", 108 | "result": "一等奖" 109 | }, 110 | { 111 | "id": "19", 112 | "time": "2017", 113 | "name": "第十届全国大学生信息安全竞赛作品赛", 114 | "result": "三等奖" 115 | }, 116 | { 117 | "id": "20", 118 | "time": "2017", 119 | "name": "世界智能驾驶挑战赛 (信息安全组)", 120 | "result": "三等奖" 121 | }, 122 | { 123 | "id": "21", 124 | "time": "2017", 125 | "name": "TCTF 线下赛", 126 | "result": "第8名" 127 | }, 128 | { 129 | "id": "22", 130 | "time": "2017", 131 | "name": "SSCTF 线上赛", 132 | "result": "第七名" 133 | }, 134 | { 135 | "id": "23", 136 | "time": "2017", 137 | "name": "SSCTF 线下赛", 138 | "result": "第六名" 139 | }, 140 | { 141 | "id": "24", 142 | "time": "2017", 143 | "name": "RCTF", 144 | "result": "第十一名" 145 | }, 146 | { 147 | "id": "25", 148 | "time": "2017", 149 | "name": "360 春秋杯线下赛", 150 | "result": "二等奖 (孕妇防护服) & 三等奖（蜂花护发素糊孕妇防护服）" 151 | }, 152 | { 153 | "id": "26", 154 | "time": "2017", 155 | "name": "360 春秋杯线上赛", 156 | "result": "第一名 (孕妇防护服)" 157 | }, 158 | { 159 | "id": "27", 160 | "time": "2017", 161 | "name": "NJCTF 线下赛", 162 | "result": "第二名" 163 | }, 164 | { 165 | "id": "28", 166 | "time": "2017", 167 | "name": "RSCTF 线上赛", 168 | "result": "第一名" 169 | }, 170 | { 171 | "id": "29", 172 | "time": "2017", 173 | "name": "BCTF 线上赛", 174 | "result": "第13名" 175 | }, 176 | { 177 | "id": "30", 178 | "time": "2017", 179 | "name": "NJCTF 线上赛", 180 | "result": "第二名(Nsis)" 181 | }, 182 | { 183 | "id": "31", 184 | "time": "2017", 185 | "name": "ZCTF 线上赛", 186 | "result": "二等奖 (呵呵哒啦) & 三等奖 (110066)" 187 | }, 188 | { 189 | "id": "32", 190 | "time": "2017", 191 | "name": "全国大学生软件测试大赛 Web 安全测试", 192 | "result": "特等奖" 193 | }, 194 | { 195 | "id": "33", 196 | "time": "2017", 197 | "name": "第一届企业内网安全实战靶场对抗赛 (ISW)", 198 | "result": "二等奖" 199 | }, 200 | { 201 | "id": "34", 202 | "time": "2017", 203 | "name": "全国大学生信息安全竞赛技能赛 线上赛", 204 | "result": "第六名 二等奖" 205 | }, 206 | { 207 | "id": "35", 208 | "time": "2017", 209 | "name": "TCTF-0CTF 线上赛", 210 | "result": "第二十九名" 211 | }, 212 | { 213 | "id": "36", 214 | "time": "2017", 215 | "name": "BCTF 线上赛", 216 | "result": "第十三名" 217 | }, 218 | { 219 | "id": "37", 220 | "time": "2018", 221 | "name": "强网杯网络安全挑战赛 线下赛", 222 | "result": "二等奖" 223 | }, 224 | { 225 | "id": "38", 226 | "time": "2018", 227 | "name": "强网杯网络安全挑战赛 线上赛", 228 | "result": "第二十名" 229 | }, 230 | { 231 | "id": "39", 232 | "time": "2018", 233 | "name": "“强网”拟态防御国际精英挑战赛 线下赛", 234 | "result": "二等奖" 235 | }, 236 | { 237 | "id": "40", 238 | "time": "2018", 239 | "name": "SUCTF 2018 线上赛", 240 | "result": "第二名" 241 | }, 242 | { 243 | "id": "41", 244 | "time": "2018", 245 | "name": "N1CTF 2018 国际赛", 246 | "result": "第九名" 247 | }, 248 | { 249 | "id": "42", 250 | "time": "2018", 251 | "name": "RSCTF / TCTF 决赛", 252 | "result": "第一名" 253 | }, 254 | { 255 | "id": "43", 256 | "time": "2018", 257 | "name": "ISCC 2018 线下赛", 258 | "result": "二等奖" 259 | }, 260 | { 261 | "id": "44", 262 | "time": "2018", 263 | "name": "XCTF Final 线下赛", 264 | "result": "第六名" 265 | }, 266 | { 267 | "id": "45", 268 | "time": "2018", 269 | "name": "“网鼎杯”网络安全大赛初赛 线上赛", 270 | "result": "第五名" 271 | }, 272 | { 273 | "id": "46", 274 | "time": "2018", 275 | "name": "“网鼎杯”网络安全大赛线下半决赛", 276 | "result": "第二名" 277 | }, 278 | { 279 | "id": "47", 280 | "time": "2018", 281 | "name": "浙江省大学生首届网络与信息安全竞赛", 282 | "result": "第一名" 283 | }, 284 | { 285 | "id": "48", 286 | "time": "2018", 287 | "name": "LCTF 2018", 288 | "result": "第二名" 289 | }, 290 | { 291 | "id": "49", 292 | "time": "2019", 293 | "name": "“强网”拟态防御国际精英挑战赛 线下赛", 294 | "result": "三等奖" 295 | }, 296 | { 297 | "id": "50", 298 | "time": "2019", 299 | "name": "第三届世界智能驾驶挑战赛 (信息安全组)", 300 | "result": "三等奖" 301 | }, 302 | { 303 | "id": "51", 304 | "time": "2019", 305 | "name": "西湖论剑 2019 中国杭州网络安全技能大赛企业组对抗赛", 306 | "result": "三等奖" 307 | }, 308 | { 309 | "id": "52", 310 | "time": "2019", 311 | "name": "西湖论剑 2019 中国杭州网络安全技能大赛大学生组团队对抗赛", 312 | "result": "第二名" 313 | }, 314 | { 315 | "id": "53", 316 | "time": "2019", 317 | "name": "西湖论剑 2019 中国杭州网络安全技能大赛企业组可信众测赛", 318 | "result": "20.5w 奖金" 319 | }, 320 | { 321 | "id": "54", 322 | "time": "2019", 323 | "name": "De1CTF 2019", 324 | "result": "第九名" 325 | }, 326 | { 327 | "id": "55", 328 | "time": "2019", 329 | "name": "WCTF 2019 线下赛", 330 | "result": "第九名" 331 | }, 332 | { 333 | "id": "56", 334 | "time": "2019", 335 | "name": "RSCTF / TCTF 2019", 336 | "result": "第六名" 337 | }, 338 | { 339 | "id": "57", 340 | "time": "2019", 341 | "name": "X-NUCA (全国高校网安联赛) 2019", 342 | "result": "二等奖" 343 | }, 344 | { 345 | "id": "58", 346 | "time": "2019", 347 | "name": "Byte CTF", 348 | "result": "第五名" 349 | }, 350 | { 351 | "id": "59", 352 | "time": "2019", 353 | "name": "浙江省第二届大学生网络与安全信息竞赛", 354 | "result": "第一/二/三名" 355 | }, 356 | { 357 | "id": "60", 358 | "time": "2019", 359 | "name": "第五届上海市大学生网络安全大赛", 360 | "result": "一等奖" 361 | }, 362 | { 363 | "id": "61", 364 | "time": "2020", 365 | "name": "高校战“疫”网络安全分享赛", 366 | "result": "第十三名" 367 | }, 368 | { 369 | "id": "62", 370 | "time": "2020", 371 | "name": "2020数字中国创新大赛虎符网络安全赛道 线上赛", 372 | "result": "第二名" 373 | }, 374 | { 375 | "id": "63", 376 | "time": "2020", 377 | "name": "第二届“网鼎杯”网络安全大赛-青龙组 线上赛", 378 | "result": "第九名" 379 | }, 380 | { 381 | "id": "64", 382 | "time": "2020", 383 | "name": "RCTF 2020", 384 | "result": "第三名" 385 | }, 386 | { 387 | "id": "65", 388 | "time": "2020", 389 | "name": "XCTF-CyBRICS", 390 | "result": "全球第七, 国内第三" 391 | }, 392 | { 393 | "id": "66", 394 | "time": "2020", 395 | "name": "第四届“强网杯”全国网络安全挑战赛 线上赛", 396 | "result": "二等奖" 397 | }, 398 | { 399 | "id": "67", 400 | "time": "2020", 401 | "name": "GACTF 2020", 402 | "result": "第一名" 403 | }, 404 | { 405 | "id": "68", 406 | "time": "2020", 407 | "name": "首届“钓鱼城杯”国际网络安全创新大赛", 408 | "result": "二等奖" 409 | }, 410 | { 411 | "id": "69", 412 | "time": "2020", 413 | "name": "浙江省第三届大学生网络与安全信息竞赛", 414 | "result": "第一/二/三名" 415 | }, 416 | { 417 | "id": "70", 418 | "time": "2020", 419 | "name": "第四届“强网杯”全国网络安全挑战赛 决赛", 420 | "result": "第九名" 421 | }, 422 | { 423 | "id": "71", 424 | "time": "2020", 425 | "name": "N1CTF 2020", 426 | "result": "第五名" 427 | }, 428 | { 429 | "id": "72", 430 | "time": "2020", 431 | "name": "WCTF 世界黑客大师赛 2020 ", 432 | "result": "第九名" 433 | }, 434 | { 435 | "id": "73", 436 | "time": "2020", 437 | "name": "XCTF高校网络安全专题挑战赛|华为云专场", 438 | "result": "第一名" 439 | }, 440 | { 441 | "id": "74", 442 | "time": "2021", 443 | "name": "2021数字中国创新大赛虎符网络安全赛道", 444 | "result": "第十名" 445 | }, 446 | { 447 | "id": "75", 448 | "time": "2021", 449 | "name": "第六届XCTF国际网络攻防联赛 决赛", 450 | "result": "第七名" 451 | } 452 | ] 453 | -------------------------------------------------------------------------------- /src/scripts/config/member.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | "id": "lightless", 3 | "intro": "Web 安全 / 安全工程师 / 半吊子开发 / 半吊子安全研究", 4 | "avatar": require("../../images/avatar/lightless.jpg"), 5 | "url": "https://lightless.me/" 6 | }, 7 | { 8 | "id": "Edward_L", 9 | "intro": "13 级 HDUISA 会长 / Web 安全 / 华为安全部门 / 二进制安全，fuzz，符号执行方向研究", 10 | "avatar": require("../../images/avatar/edward_L.jpg"), 11 | "url": "#" 12 | }, 13 | { 14 | "id": "逆风", 15 | "intro": "13 级菜鸡 / 大数据打杂", 16 | "avatar": require("../../images/avatar/deadwind4.jpeg"), 17 | "url": "https://github.com/deadwind4" 18 | }, 19 | { 20 | "id": "陈斩仙", 21 | "intro": "什么都不会 / 咸鱼研究生 / 安恒、长亭 / SJTU", 22 | "avatar": require("../../images/avatar/chenzhanxian.jpg"), 23 | "url": "https://mxgcccc4.github.io/" 24 | }, 25 | { 26 | "id": "Eric", 27 | "intro": "渗透 / 人工智能 / 北师大博士在读", 28 | "avatar": require("../../images/avatar/eric.jpg"), 29 | "url": "https://3riccc.github.io" 30 | }, 31 | { 32 | "id": "Explorer", 33 | "intro": "14 级 HDUISA 会长 / 二进制安全 / 曾被 NULL、TD、蓝莲花等拉去凑人数 / 差点没毕业 / 长亭安研", 34 | "avatar": require("../../images/avatar/Explorer.jpg"), 35 | "url": "#" 36 | }, 37 | { 38 | "id": "Aklis", 39 | "intro": "14 级 HDUISA 副会长 / 二次元 / 拼多多安全工程师", 40 | "avatar": require("../../images/avatar/aklis.jpg"), 41 | "url": "#" 42 | }, 43 | { 44 | "id": "Sysorem", 45 | "intro": "14 级网安协会会长 / HDUISA 成员 / Web 安全 / Freebuf 安全社区特约作者 / FSI2015Freebuf 特邀嘉宾", 46 | "avatar": require("../../images/avatar/sysorem.jpg"), 47 | "url": "#" 48 | }, 49 | { 50 | "id": "Hcamael", 51 | "intro": "13 级 / 知道创宇 404 安全研究员 / 现在 Nu1L 划划水 / IoT、Web、二进制漏洞，密码学，区块链都看得懂一点，但啥也不会", 52 | "avatar": require("../../images/avatar/hcamael.jpg"), 53 | "url": "#" 54 | }, 55 | { 56 | "id": "LoRexxar", 57 | "intro": "14 级 / Web 🐶 / 杭电江流儿 / 自走棋主教守门员", 58 | "avatar": require("../../images/avatar/lorexxar.jpg"), 59 | "url": "https://lorexxar.cn/" 60 | }, 61 | { 62 | "id": "A1ex", 63 | "intro": "14 级网安协会副会长 / Web 安全", 64 | "avatar": require("../../images/avatar/alex.jpg"), 65 | "url": "#" 66 | }, 67 | { 68 | "id": "Ahlaman", 69 | "intro": "14 级网安协会副会长 / 无线安全", 70 | "avatar": require("../../images/avatar/ahlaman.jpg"), 71 | "url": "#" 72 | }, 73 | { 74 | "id": "Undefinedv", 75 | "intro": "15 级网安协会会长 / Web 安全", 76 | "avatar": require("../../images/avatar/undefinedv.jpg"), 77 | "url": "#" 78 | }, 79 | { 80 | "id": "Spine", 81 | "intro": "逆向 / 二进制安全", 82 | "avatar": require("../../images/avatar/spine.jpg"), 83 | "url": "#" 84 | }, 85 | { 86 | "id": "Tata", 87 | "intro": "二进制 CGC 入门水准 / 半吊子爬虫与反爬虫", 88 | "avatar": require("../../images/avatar/tata.jpg"), 89 | "url": "#" 90 | }, 91 | { 92 | "id": "Airbasic", 93 | "intro": "Web 安全 / 长亭科技安服部门 / TSRC 2015 年年度英雄榜第八、2016 年年度英雄榜第十三", 94 | "avatar": require("../../images/avatar/airbasic.jpg"), 95 | "url": "#" 96 | }, 97 | { 98 | "id": "jibo", 99 | "intro": "15 级 / 什么都不会的开发 / 打什么都菜", 100 | "avatar": require("../../images/avatar/jibo.jpg"), 101 | "url": "#" 102 | }, 103 | { 104 | "id": "Processor", 105 | "intro": "15 级 Vidar 会长 / 送分型逆向选手 / 13 段剑纯 / 差点没毕业 / 阿斯巴甜有点甜", 106 | "avatar": require("../../images/avatar/Processor.jpeg"), 107 | "url": "https://processor.pub/" 108 | }, 109 | { 110 | "id": "HeartSky", 111 | "intro": "15 级 / 挖不到洞 / 打不动 CTF / 内网渗透不了 / 工具写不出", 112 | "avatar": require("../../images/avatar/heartsky.jpg"), 113 | "url": "http://heartsky.info" 114 | }, 115 | { 116 | "id": "Minygd", 117 | "intro": "15 级 / 删库跑路熟练工 / 没事儿拍个照 / 企鹅", 118 | "avatar": require("../../images/avatar/mingy.jpg"), 119 | "url": "#" 120 | }, 121 | { 122 | "id": "Yotubird", 123 | "intro": "15 级 / 已入 Python 神教", 124 | "avatar": require("../../images/avatar/Yotubird.png"), 125 | "url": "#" 126 | }, 127 | { 128 | "id": "c014", 129 | "intro": "15 级 / Web 🐶 / 汪汪汪", 130 | "avatar": require("../../images/avatar/c014.png"), 131 | "url": "#" 132 | }, 133 | { 134 | "id": "Junier", 135 | "intro": "16 级 / 立志学术的统计er / R / 为楼上的脱单事业做出了贡献", 136 | "avatar": require("../../images/avatar/Junier.jpg"), 137 | "url": "#" 138 | }, 139 | { 140 | "id": "bigmud", 141 | "intro": "16 级会长 / Web 后端 / 会一点点 Web 安全 / 会一丢丢二进制", 142 | "avatar": require("../../images/avatar/bigmud.jpg"), 143 | "url": "#" 144 | }, 145 | { 146 | "id": "NeverMoes", 147 | "intro": "16 级 / Java 福娃 / 上班 996 / 下班 669", 148 | "avatar": require("../../images/avatar/nervermoes.jpg"), 149 | "url": "#" 150 | }, 151 | { 152 | "id": "Sora", 153 | "intro": "16 级 / Web Developer", 154 | "avatar": require("../../images/avatar/Sora.jpg"), 155 | "url": "https://github.com/Last-Order" 156 | }, 157 | { 158 | "id": "fantasyqt", 159 | "intro": "16 级 / 可能会运维 / 摸鱼选手", 160 | "avatar": require("../../images/avatar/fantasyqt.jpg"), 161 | "url": "http://0x2f.xyz" 162 | }, 163 | { 164 | "id": "vvv_347", 165 | "intro": "16 级 / Rev / Windows / Freelancer", 166 | "avatar": require("../../images/avatar/vvv_347.png"), 167 | "url": "https://vvv-347.space" 168 | }, 169 | { 170 | "id": "veritas501", 171 | "intro": "16 级 / Bin / 被迫研狗", 172 | "avatar": require("../../images/avatar/veritas501.jpeg"), 173 | "url": "https://veritas501.space" 174 | }, 175 | { 176 | "id": "LuckyCat", 177 | "intro": "16 级 / Web 🐱 / 现于长亭科技实习", 178 | "avatar": require("../../images/avatar/princessprincepal.jpg"), 179 | "url": "https://jianshu.com/u/ad5c1e097b84" 180 | }, 181 | { 182 | "id": "Ash", 183 | "intro": "16 级 / Java 开发攻城狮 / 996 选手 / 濒临猝死", 184 | "avatar": require("../../images/avatar/ash.jpg"), 185 | "url": "#" 186 | }, 187 | { 188 | "id": "Cyris", 189 | "intro": "16 级 / Web 前端 / 美工 / 阿里云搬砖", 190 | "avatar": "https://cdn.jsdelivr.net/npm/cyris/images/avatar.png", 191 | "url": "https://cyris.moe/" 192 | }, 193 | { 194 | "id": "Acaleph", 195 | "intro": "16 级 / Web 前端 / 水母一小只 / 程序员鼓励师 / Cy 来组饥荒！", 196 | "avatar": require("../../images/avatar/Acaleph.jpg"), 197 | "url": "#" 198 | }, 199 | { 200 | "id": "b0lv42", 201 | "intro": "16级 / 大果子 / 毕业1年仍在寻找vidar娘接盘侠", 202 | "avatar": require("../../images/avatar/b0lv42.jpg"), 203 | "url": "https://b0lv42.github.io/" 204 | }, 205 | { 206 | "id": "ngc7293", 207 | "intro": "16 级 / 蟒蛇饲养员 / 高数小王子", 208 | "avatar": require("../../images/avatar/ngc7293.jpg"), 209 | "url": "https://ngc7292.github.io/" 210 | }, 211 | { 212 | "id": "ckj123", 213 | "intro": "16 级 / Web / 菜鸡第一人", 214 | "avatar": require("../../images/avatar/ckj123.jpg"), 215 | "url": "https://www.ckj123.com" 216 | }, 217 | { 218 | "id": "cru5h", 219 | "intro": "16 级 / Web", 220 | "avatar": require("../../images/avatar/cru5h.jpg"), 221 | "url": "#" 222 | }, 223 | { 224 | "id": "xiaoyao52110", 225 | "intro": "16 级 / Bin 打杂 / 他们说菜都是假的，我是真的", 226 | "avatar": require("../../images/avatar/xiaoyao52110.jpg"), 227 | "url": "#" 228 | }, 229 | { 230 | "id": "Li4n0", 231 | "intro": "17 级 / Web 安全爱好者 / 半个程序员 / 没有女朋友", 232 | "avatar": require("../../images/avatar/li4no.jpg"), 233 | "url": "https://blog.0e1.top" 234 | }, 235 | { 236 | "id": "迟原静", 237 | "intro": "17级 / Focus on Java Security", 238 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=xyVPFvQ2dWReoBiahd7naSw&s=640", 239 | "url": "#" 240 | }, 241 | { 242 | "id": "Ch1p", 243 | "intro": "17 级 / 自称 Bin 手实际啥都不会 / 二次元安全", 244 | "avatar": require("../../images/avatar/Chip.jpg"), 245 | "url": "http://ch1p.top" 246 | }, 247 | { 248 | "id": "f1rry", 249 | "intro": "17 级 / Web", 250 | "avatar": require("../../images/avatar/f1rry.png"), 251 | "url": "#" 252 | }, 253 | { 254 | "id": "mian", 255 | "intro": "17 级 / 业余开发 / 专业摸鱼", 256 | "avatar": require("../../images/avatar/mian.jpg"), 257 | "url": "https://www.intmian.com" 258 | }, 259 | { 260 | "id": "ACce1er4t0r", 261 | "intro": "17级 / 普通的ctfer / 尝试变成全栈 / 找不到工作", 262 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=gRBlwiawx1lF4UkPKh4Liczg&s=640", 263 | "url": "#" 264 | }, 265 | { 266 | "id": "MiGo", 267 | "intro": "17级 / 二战人 / 老二次元 / 兴趣驱动生活", 268 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=XzZggL7hDeicLXb2FSic6sfg&s=640", 269 | "url": "https://migoooo.github.io/" 270 | }, 271 | { 272 | "id": "BrownFly", 273 | "intro": "17级 / RedTeamer / 字节跳动安全工程师", 274 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=EnNslsFelj9HibuKoNHwmyg&s=640", 275 | "url": "https://brownfly.github.io" 276 | }, 277 | { 278 | "id": "Aris", 279 | "intro": "17级/ Key厨 / 腾讯玄武倒水的", 280 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=anjeaJmx1X79Yp1DNxWrRA&s=640", 281 | "url": "https://blog.ar1s.top" 282 | }, 283 | { 284 | "id": "hsiaoxychen", 285 | "intro": "17级 / 游戏厂打工仔 / 来深圳找我快活", 286 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=YGiaicyZ3NkWfOoGOlLPWvAw&s=640", 287 | "url": "https://chenxy.me" 288 | }, 289 | { 290 | "id": "Lou00", 291 | "intro": "17级 / web / 东南读研", 292 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=fdAMuUicvOObMv3eZC8y0Ew&s=640", 293 | "url": "https://blog.lou00.top" 294 | }, 295 | { 296 | "id": "wenzhuan", 297 | "intro": "18 级 / 完全不会安全 / 一个做设计的鸽子美工 / 天天画表情包", 298 | "avatar": require("../../images/avatar/wenzhuan.jpg"), 299 | "url": "https://wzyxv1n.top/" 300 | }, 301 | { 302 | "id": "Cosmos", 303 | "intro": "18级 / 莫得灵魂的开发 / 茄粉 / 作豚 / 米厨", 304 | 305 | "avatar": require("../../images/avatar/cosmos.jpg"), 306 | "url": "https://cosmos.red" 307 | }, 308 | { 309 | "id": "Y", 310 | "intro": "18 级 / Bin / Win / 电竞缺乏视力 / 开发太菜 / 只会 C / CSGO 白给选手", 311 | "avatar": require("../../images/avatar/Y.jpg"), 312 | "url": "https://blog.xyzz.ml:444/" 313 | }, 314 | { 315 | "id": "Annevi", 316 | "intro": "18级 / 会点开发的退休web手 / 想学挖洞 / 混吃等死", 317 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=WN9x96MpjSJ3Gc7a3SHtDw&s=640", 318 | "url": "https://annevi.cn" 319 | }, 320 | { 321 | "id": "logong", 322 | "intro": "18 级 / 求大佬带我IoT入门 / web太难了只能做做misc维持生计 / 摸🐟", 323 | "avatar": require("../../images/avatar/logong.jpg"), 324 | "url": "http://logong.vip" 325 | }, 326 | { 327 | "id": "Kevin", 328 | "intro": "18 级 / Web / 车万", 329 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=jaXAqywDMbia39e4OfGXicPQ&s=640", 330 | "url": "https://harmless.blue/" 331 | }, 332 | { 333 | "id": "LurkNoi", 334 | "intro": "18级 / 会一丢丢crypto / 摸鱼", 335 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=CLTlN5QPS3aI60icIoxGmdQ&s=640", 336 | "url": "#" 337 | }, 338 | { 339 | "id": "幼稚园", 340 | "intro": "18级会长 / 二进制安全 / 干拉", 341 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=G2o7mX9RCTkiaCHeEiaJLBwA&s=640", 342 | "url": "https://danisjiang.com" 343 | }, 344 | { 345 | "id": "lostflower", 346 | "intro": "18级 / 游戏引擎开发 / 尚有梦想的game maker", 347 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=eQHtN69C2tgM8Ul8PmtTKw&s=640", 348 | "url": "https://r000setta.github.io" 349 | }, 350 | { 351 | "id": "Roc826", 352 | "intro": "18 级 / Web 底层选手", 353 | "avatar": require("../../images/avatar/Roc826.jpg"), 354 | "url": "http://www.roc826.cn/" 355 | }, 356 | { 357 | "id": "Seadom", 358 | "intro": "18 级 / Web / 真·菜到超乎想象 / 拼死学（mo）习（yu）中", 359 | "avatar": require("../../images/avatar/seadom.png"), 360 | "url": "#" 361 | }, 362 | { 363 | "id": "ObjectNotFound", 364 | "intro": "18级 / 懂点Web & Misc / 懂点运维 / 正在懂游戏引擎 / 我们联合！", 365 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=yQnkF86Uy6UkZrZmFYLL4g&s=640", 366 | "url": "https://www.zhouweitong.site" 367 | }, 368 | { 369 | "id": "Moesang", 370 | "intro": "18 级 / 不擅长 Web / 擅长摸鱼 / 摸鱼！", 371 | "avatar": require("../../images/avatar/Moesang.png"), 372 | "url": "https://blog.wz22.cc" 373 | }, 374 | { 375 | "id": "E99p1ant", 376 | "intro": "18级 / 囊地鼠饲养员 / 写了一个叫 Cardinal 的平台", 377 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=AJQ9RJRCavhSibMZtRq2JOQ&s=640", 378 | "url": "https://github.red/" 379 | }, 380 | { 381 | "id": "Michael", 382 | "intro": "18 级 / Java / 会除我佬", 383 | "avatar": require("../../images/avatar/Michael.jpg"), 384 | "url": "http://michaelsblog.top/" 385 | }, 386 | { 387 | "id": "matrixtang", 388 | "intro": "18级 / 编译器工程师( 伪 / 半吊子PL- 静态分析方向", 389 | "avatar": require("../../images/avatar/MATRIX.jpg"), 390 | "url": "#" 391 | }, 392 | { 393 | "id": "r4u", 394 | "intro": "18级 / 不可以摸🐠哦", 395 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=rJCqQv1EzicpDW77nMa5bYw&s=640", 396 | "url": "http://r4u.top/" 397 | }, 398 | { 399 | "id": "357", 400 | "intro": "18级 / 并不会web / 端茶送水选手", 401 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=POaV9Y85NiaUcibaETEKTpfw&s=640", 402 | "url": "#" 403 | }, 404 | { 405 | "id": "Akira", 406 | "intro": "19级 / 不会web / 半吊子运维 / 今天您漏油了吗", 407 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=ku1vqyI1hLJr61PGIlic7Ow&s=640", 408 | "url": "https://4kr.top" 409 | }, 410 | { 411 | "id": "qz", 412 | "intro": "19级 / 摸鱼美工 / 学习图形学、渲染ing", 413 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=q5qVDcvyzxee4qiays52mibA&s=640", 414 | "url": "https://fl0.top/" 415 | }, 416 | { 417 | "id": "Switch", 418 | "intro": "19级 / 脖子笔直歪脖手", 419 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=E3j3BJrsAfyl1arfnFKufQ&s=640", 420 | "url": "https://me.liki.link/" 421 | }, 422 | { 423 | "id": "0x4qE", 424 | "intro": "19级 / </p><p>Web", 425 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=K7icYial1VVzlNl7hrD9MlNw&s=640", 426 | "url": "https://github.com/0x4qE" 427 | }, 428 | { 429 | "id": "xi4oyu", 430 | "intro": "19级 / 骨瘦如柴的胖手", 431 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=JfeMY6Lz5ZU4GmtTV85otQ&s=640", 432 | "url": "https://www.xi4oyu.top/" 433 | }, 434 | { 435 | "id": "R3n0", 436 | "intro": "19级 / bin底层选手", 437 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=icY08gnMlXtoYIJ9ib3eJQ2g&s=640", 438 | "url": "https://r3n0.top" 439 | }, 440 | { 441 | "id": "m140", 442 | "intro": "19级 / 不会re / dl萌新 / 太弱小了，没有力量 / 想学游戏", 443 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=zt0iccbnGuV8dOpXIYrJgvg&s=640", 444 | "url": "#" 445 | }, 446 | { 447 | "id": "Mezone", 448 | "intro": "19级 / 普通的binary爱好者。", 449 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=rDD29iahzzg8AvQX7fdbFPg&s=640", 450 | "url": "#" 451 | }, 452 | { 453 | "id": "d1gg12", 454 | "intro": "19级 / 魂学家 / 🐟粉", 455 | "avatar": require("../../images/avatar/d1gg12.jpg"), 456 | "url": "https://d1gg12.github.io/" 457 | }, 458 | { 459 | "id": "Trotsky", 460 | "intro": "19级 / 半个全栈 / 安卓摸🐟 / P 社玩家 / 🍆粉", 461 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=LiasEshjTXTrNzJjPHVY3Vw&s=640", 462 | "url": "https://altonhe.github.io/" 463 | }, 464 | { 465 | "id": "Gamison", 466 | "intro": "19级 / 挖坑不填的web选手", 467 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=0VaAu2go9mvrMXu1ibmKy1g&s=640", 468 | "url": "http://aw.gamison.top" 469 | }, 470 | { 471 | "id": "Tinmix", 472 | "intro": "19级会长 / DL爱好者 / web苦手", 473 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=L2EclrAltb7lk3LBPY6oWA&s=640", 474 | "url": "http://poi.ac" 475 | }, 476 | { 477 | "id": "Rt", 478 | "intro": "19级 / 假装懂一点WINDOWS的RE手", 479 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=p1TD1qwKfEK8NZExRDqic1A&s=640", 480 | "url": "https://wr-web.github.io" 481 | }, 482 | { 483 | "id": "Potat0", 484 | "intro": "20级 / 乐色Re手 / 顺带做一做Misc", 485 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=NicTy1CDqeHsgzbZEIUU2wg&s=640", 486 | "url": "https://potat0.cc/" 487 | }, 488 | { 489 | "id": "Summer", 490 | "intro": "20级 / 歪脖手 / 想学运维 / 发呆业务爱好者", 491 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=4y6zxTBSB3cbseeyPvQWng&s=640", 492 | "url": "https://blog.m1dsummer.top" 493 | }, 494 | { 495 | "id": "chuj", 496 | "intro": "20级 / 普通 PWN手 / 国际冣偄 / 不好好学习，生活中就会多出许多魔法和奇迹", 497 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=aM4tJSQSxB5gcauIMDEtUg&s=640", 498 | "url": "https://cjovi.icu/" 499 | }, 500 | { 501 | "id": "4nsw3r", 502 | "intro": "20级 / re / 不会pwn / 没有博客", 503 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=j3LOiav9IluKSYg1VEibblZw&s=640", 504 | "url": "#" 505 | }, 506 | { 507 | "id": "4ctue", 508 | "intro": "20级 / 可能是IOT的MISC手 / 可能是美工 / 废物晚期", 509 | "avatar": require("../../images/avatar/4ctue.jpg"), 510 | "url": "#" 511 | }, 512 | { 513 | "id": "0wl", 514 | "intro": "20级 / Re手 / 菜", 515 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=06FRYslcuprt59OxibicdhqQ&s=640", 516 | "url": "https://0wl-alt.github.io" 517 | }, 518 | { 519 | "id": "At0m", 520 | "intro": "20级 / web / 想学iot", 521 | "avatar": require("../../images/avatar/at0m.png"), 522 | "url": "https://homeboyc.cn/" 523 | }, 524 | { 525 | "id": "ChenMoFeiJin", 526 | "intro": "20级 / Crypto / 摸鱼学代师", 527 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=5xyCaLib3lovjrUzf5pWxDQ&s=640", 528 | "url": "https://chenmofeijin.top" 529 | }, 530 | { 531 | "id": "Klrin", 532 | "intro": "20级 / WEB / 菜的抠脚 / 想学GO", 533 | "avatar": "https://thirdqq.qlogo.cn/g?b=sdk&k=nnzEWNwxMS88jKYre5fOjg&s=640", 534 | "url": "https://blog.mjclouds.com/" 535 | } 536 | ] -------------------------------------------------------------------------------- /src/scss/_base.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | html { 7 | font-size: 16px; 8 | } 9 | 10 | body { 11 | color: $theme-color-white; 12 | background-color: $theme-color-black; 13 | } 14 | 15 | #root { 16 | position: absolute; 17 | width: 100%; height: 100%; 18 | left: 0; top: 0; 19 | overflow: hidden; 20 | font-family: $theme-font-normal; 21 | } 22 | 23 | a { 24 | text-decoration: none; 25 | &, &:hover, &:active { color: $theme-color-white; } 26 | } 27 | 28 | @font-face { 29 | font-family: "RBNo2Light"; 30 | src: url("./fonts/RBNo2Light.otf"); 31 | } 32 | 33 | ::selection { 34 | color: $theme-color-black; 35 | background-color: $theme-color-white; 36 | } -------------------------------------------------------------------------------- /src/scss/_function.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/scss/_function.scss -------------------------------------------------------------------------------- /src/scss/_mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin pc-layout { 2 | @media screen and (min-width: 761px) { 3 | @content; 4 | } 5 | } 6 | 7 | @mixin sp-layout { 8 | @media screen and (max-width: 760px) { 9 | @content; 10 | } 11 | } 12 | 13 | @mixin fuck-scrollbar { 14 | // (╯°Д°)╯︵ ┻━┻ 15 | &::-webkit-scrollbar { 16 | display: none; 17 | } 18 | -ms-overflow-style: none; 19 | overflow: -moz-scrollbars-none; 20 | scrollbar-width: none; 21 | } -------------------------------------------------------------------------------- /src/scss/_variable.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Colors 3 | */ 4 | $theme-color-black: #323232; 5 | $theme-color-white: #f1f0ea; 6 | $theme-color-green: #98bfba; 7 | $theme-color-gold: #c3b9a9; 8 | $theme-color-red: #b54653; 9 | $theme-color-blue: #5081A2; 10 | 11 | /* 12 | * Fonts 13 | */ 14 | $theme-font-article: Lato, "Hiragino Sans GB", "华文细黑", "STHeiti", "微软雅黑", "Microsoft YaHei", SimHei, "Helvetica Neue", Helvetica, Arial, sans-serif; 15 | $theme-font-special: "RBNo2Light", Raleway, Consolas, monospace, sans-serif; 16 | $theme-font-normal: Raleway, Consolas, monospace, sans-serif; -------------------------------------------------------------------------------- /src/scss/fonts/RBNo2Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCyris/Vidar-Website/55635f04c9d1f9f89c5cc4ef010482952943225d/src/scss/fonts/RBNo2Light.otf -------------------------------------------------------------------------------- /src/scss/keyframes/_keyframes.scss: -------------------------------------------------------------------------------- 1 | @keyframes fadein { 2 | 0% { 3 | opacity: 0; 4 | } 5 | 100% { 6 | opacity: 1; 7 | } 8 | } 9 | 10 | @keyframes fadeout { 11 | 0% { 12 | opacity: 1; 13 | } 14 | 100% { 15 | opacity: 0; 16 | } 17 | } 18 | 19 | @keyframes bottom-slide-to-top { 20 | 0% { 21 | bottom: -3rem; 22 | } 23 | 100% { 24 | bottom: calc(100% + 3rem); 25 | } 26 | } 27 | 28 | @keyframes bottom-slide-in { 29 | 0% { 30 | transform: translateY(100%); 31 | } 32 | 100% { 33 | transform: translateY(0); 34 | } 35 | } 36 | 37 | @keyframes top-slide-in { 38 | 0% { 39 | transform: translateY(-100%); 40 | } 41 | 100% { 42 | transform: translateY(0); 43 | } 44 | } 45 | 46 | @keyframes left-slide-in { 47 | 0% { 48 | transform: translateX(-100%); 49 | } 50 | 100% { 51 | transform: translateX(0); 52 | } 53 | } 54 | 55 | @keyframes right-slide-in { 56 | 0% { 57 | transform: translateX(100%); 58 | } 59 | 100% { 60 | transform: translateX(0); 61 | } 62 | } 63 | 64 | @keyframes right-slide-out { 65 | 0% { 66 | transform: translateX(0); 67 | } 68 | 100% { 69 | transform: translateX(100%); 70 | } 71 | } 72 | 73 | @keyframes home-title-in { 74 | 0% { 75 | opacity: 0; 76 | transform: translateY(18%); 77 | } 78 | 100% { 79 | opacity: 1; 80 | transform: translateY(0); 81 | } 82 | } 83 | 84 | @keyframes next-button-animation { 85 | 0% { 86 | transform: translateX(-10%); 87 | } 88 | 50% { 89 | transform: translateX(10%); 90 | } 91 | 100% { 92 | transform: translateX(-10%); 93 | } 94 | } 95 | 96 | @keyframes rotate-1turn { 97 | 0% { 98 | transform: rotate(0); 99 | } 100 | 100% { 101 | transform: rotate(360deg); 102 | } 103 | } 104 | 105 | @keyframes rotate0-90 { 106 | 0% { 107 | transform: rotate(0); 108 | } 109 | 100% { 110 | transform: rotate(90deg); 111 | } 112 | } 113 | 114 | @keyframes rotate0-90-0{ 115 | 0%{ 116 | transform:rotate(0deg); 117 | } 118 | 50%{ 119 | transform:rotate(90deg); 120 | } 121 | 100%{ 122 | transform:rotate(0deg); 123 | } 124 | } 125 | 126 | @keyframes close-button-inner-in__type1 { 127 | 0% { 128 | opacity: 0; 129 | transform: rotate(45deg) translate(-16%, -16%); 130 | } 131 | 100% { 132 | opacity: 1; 133 | transform: rotate(45deg) translate(0, 0); 134 | } 135 | } 136 | 137 | @keyframes close-button-inner-in__type2 { 138 | 0% { 139 | opacity: 0; 140 | transform: rotate(-45deg) translate(16%, 16%); 141 | } 142 | 100% { 143 | opacity: 1; 144 | transform: rotate(-45deg) translate(0, 0); 145 | } 146 | } 147 | 148 | @keyframes top-fade-in { 149 | 0% { 150 | opacity: 0; 151 | transform: translateY(-6%); 152 | } 153 | 100% { 154 | opacity: 1; 155 | transform: translateY(0); 156 | } 157 | } 158 | 159 | @keyframes bottom-fade-in { 160 | 0% { 161 | opacity: 0; 162 | transform: translateY(20%); 163 | } 164 | 100% { 165 | opacity: 1; 166 | transform: translateY(0); 167 | } 168 | } 169 | 170 | @keyframes scaleX0-1 { 171 | 0% { 172 | transform: scaleX(0); 173 | } 174 | 100% { 175 | transform: scaleX(1); 176 | } 177 | } 178 | 179 | /* inspired from yui540 */ 180 | @keyframes fall-bound { 181 | 0% { 182 | transform: translateY(-500%) scaleX(1) scaleY(1); 183 | opacity: 0; } 184 | 40% { 185 | transform: translateY(0%) scaleX(1.6) scaleY(0.8); 186 | opacity: 1; } 187 | 50% { 188 | transform: translateY(-6%) scaleX(1) scaleY(1); 189 | opacity: 1; } 190 | 60% { 191 | transform: translateY(0%) scaleX(1.3) scaleY(0.9); 192 | opacity: 1; } 193 | 70% { 194 | transform: translateY(-3%) scaleX(1) scaleY(1); 195 | opacity: 1; } 196 | 80% { 197 | transform: translateY(0%) scaleX(1.15) scaleY(0.95); 198 | opacity: 1; } 199 | 90% { 200 | transform: translateY(-1.5%) scaleX(1) scaleY(1); 201 | opacity: 1; } 202 | 100% { 203 | transform: translateY(0%) scaleX(1) scaleY(1); 204 | opacity: 1; } } 205 | 206 | @keyframes paka { 207 | 0% { 208 | transform: rotate(0deg); } 209 | 40% { 210 | transform: rotate(-50deg); } 211 | 50% { 212 | transform: rotate(-42deg); } 213 | 60% { 214 | transform: rotate(-50deg); } 215 | 70% { 216 | transform: rotate(-46deg); } 217 | 80% { 218 | transform: rotate(-50deg); } 219 | 90% { 220 | transform: rotate(-48deg); } 221 | 100% { 222 | transform: rotate(-50deg); } } 223 | 224 | @keyframes paka- { 225 | 0% { 226 | transform: rotate(0deg); } 227 | 40% { 228 | transform: rotate(50deg); } 229 | 50% { 230 | transform: rotate(42deg); } 231 | 60% { 232 | transform: rotate(50deg); } 233 | 70% { 234 | transform: rotate(46deg); } 235 | 80% { 236 | transform: rotate(50deg); } 237 | 90% { 238 | transform: rotate(48deg); } 239 | 100% { 240 | transform: rotate(50deg); } } 241 | 242 | @keyframes text-slide-top { 243 | from { 244 | transform: translateY(20%); 245 | opacity: 0; } 246 | to { 247 | transform: translateY(-50%); 248 | opacity: 1; } } -------------------------------------------------------------------------------- /src/scss/modules/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | position: absolute; 3 | display: flex; 4 | justify-content: space-between; 5 | 6 | ._sns { 7 | position: relative; 8 | } 9 | 10 | ._contact { 11 | position: relative; 12 | } 13 | 14 | @include pc-layout { 15 | width: 70%; height: 5vmin; 16 | left: 15%; bottom: 10vmin; 17 | 18 | ._sns { 19 | bottom: 0; 20 | 21 | a { 22 | position: relative; 23 | width: 5vmin; height: 5vmin; 24 | display: inline-block; 25 | margin-right: 3vmin; 26 | transition: all .3s ease; 27 | transform-origin: center; 28 | 29 | &:hover { transform: scale(1.1); } 30 | 31 | i { 32 | position: absolute; 33 | display: block; 34 | width: inherit; height: inherit; 35 | background-size: 5vmin; 36 | background-position: center; 37 | background-repeat: no-repeat; 38 | } 39 | 40 | &:nth-child(1) i { background-image: url("../images/github-logo.svg"); } 41 | &:nth-child(2) i { background-image: url("../images/weixin-logo.svg"); } 42 | } 43 | 44 | .footer__popper { 45 | background-color: #fff; 46 | padding: .2rem; 47 | border-radius: 5%; 48 | width: 10rem; 49 | height: 10rem; 50 | z-index: 200; 51 | 52 | &:before { 53 | position: absolute; 54 | z-index: -1; 55 | content: ""; 56 | right: calc(50% - 10px); 57 | bottom: -8px; 58 | border-style: solid; 59 | border-width: 10px 10px 0 10px; 60 | border-color: #fff transparent transparent transparent; 61 | } 62 | 63 | .footer__qr-code { 64 | width: 100%; 65 | } 66 | } 67 | } 68 | 69 | ._contact { 70 | height: 5vmin; 71 | 72 | .footer__email, .footer__line, .footer__beian{ 73 | position: relative; 74 | display: inline-block; 75 | line-height: 5vmin; 76 | } 77 | 78 | .footer__line { 79 | width: 5rem; height: 1px; 80 | margin-right: 3vmin; 81 | } 82 | 83 | .footer__email { 84 | height: 5vmin; 85 | font-size: 1rem; 86 | margin-right: 3vmin; 87 | } 88 | 89 | .footer__beian { 90 | font-size: 1rem; 91 | height: 5vmin; 92 | font-family: $theme-font-article; 93 | } 94 | } 95 | } 96 | 97 | @include sp-layout { 98 | 99 | } 100 | } -------------------------------------------------------------------------------- /src/scss/modules/_header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | position: absolute; 3 | box-sizing: border-box; 4 | 5 | ._logo { 6 | .header__logo { 7 | display: block; 8 | background-image: url("../images/logo.svg"); 9 | background-repeat: no-repeat; 10 | background-position: center; 11 | } 12 | .header__name { 13 | display: block; 14 | font-family: $theme-font-article; 15 | white-space: nowrap; 16 | 17 | div { 18 | position: absolute; 19 | transform-origin: center; 20 | transition: all .3s ease; 21 | text-align: center; 22 | } 23 | } 24 | } 25 | 26 | @include pc-layout { 27 | width: 10%; height: 100%; 28 | border-right: 1px solid transparentize($theme-color-white, .5); 29 | text-align: center; 30 | perspective: 500px; 31 | 32 | &::after { 33 | content: ""; position: absolute; 34 | width: .3rem; height: 3rem; 35 | right: -.15rem; bottom: -3rem; 36 | background-color: $theme-color-white; 37 | animation: bottom-slide-to-top 3.2s ease .36s infinite; 38 | } 39 | 40 | ._logo { 41 | position: absolute; 42 | width: 100%; height: 25%; 43 | display: flex; 44 | flex-wrap: wrap; 45 | 46 | .header__logo { 47 | position: relative; 48 | width: 100%; height: 10vw; 49 | background-size: 65%; 50 | margin-top: 3vmin; 51 | transition: all .3s ease; 52 | &:hover, &:active { transform: rotateY(8deg) rotateX(-8deg); } 53 | animation: fadein .04s linear alternate 9 forwards; 54 | } 55 | 56 | .header__name { 57 | position: relative; 58 | width: 100%; height: 60%; 59 | 60 | div { 61 | $size: 1rem; 62 | width: 6vh; height: $size; 63 | left: calc(50% - 3vh); top: calc(50% - .5rem); 64 | transform: rotate(-90deg) translateX(-100%); 65 | font-size: $size; 66 | line-height: $size; 67 | letter-spacing: .3rem; 68 | opacity: 0; 69 | animation: fadein .8s ease .36s forwards; 70 | } 71 | } 72 | } 73 | 74 | ._binary { 75 | position: absolute; 76 | width: 100%; height: 20%; 77 | bottom: 10vmin; 78 | 79 | .header__binary { 80 | $size: 1.2rem; 81 | position: absolute; 82 | width: $size; height: 100%; 83 | left: calc(50% - .6rem); 84 | box-sizing: border-box; 85 | display: flex; 86 | flex-wrap: wrap; 87 | align-items: flex-end; 88 | 89 | span { 90 | position: relative; 91 | box-sizing: border-box; 92 | width: .8rem; height: $size; 93 | line-height: $size; 94 | display: block; 95 | font-size: $size; 96 | font-family: monospace, Serif; 97 | transform-origin: center; 98 | transform: rotate(-90deg) translateY(.2rem); 99 | opacity: 0; 100 | 101 | // animation 102 | $animation: fadein .8s ease-in-out alternate infinite; 103 | @for $i from 1 through 7 { 104 | &:nth-child(#{$i}) { 105 | animation: $animation #{random() + 0.36}s; 106 | } 107 | } 108 | } 109 | 110 | .one { 111 | color: $theme-color-black; 112 | background-color: $theme-color-white; 113 | } 114 | } 115 | } 116 | } 117 | 118 | @include sp-layout { 119 | ._logo { 120 | .header__logo {} 121 | 122 | .header__name {} 123 | } 124 | 125 | ._binary { 126 | .header__binary {} 127 | } 128 | } 129 | } -------------------------------------------------------------------------------- /src/scss/modules/_main.scss: -------------------------------------------------------------------------------- 1 | ._line { 2 | position: absolute; 3 | width: 3rem; height: 1px; 4 | background-color: transparentize($theme-color-white, .5); 5 | 6 | &::before, &::after { 7 | position: absolute; content: ""; 8 | width: 1rem; height: 2px; 9 | background-color: $theme-color-white; 10 | } 11 | 12 | &::before { 13 | left: -1rem; top: calc(50% - 1px); 14 | } 15 | 16 | &::after { 17 | right: -1rem; top: calc(50% - 1px); 18 | } 19 | } 20 | 21 | .main { 22 | position: absolute; 23 | 24 | // welcome 25 | ._welcome { 26 | position: absolute; 27 | width: 50%; height: 1rem; 28 | left: 0; top: 0; 29 | display: flex; 30 | 31 | .welcome__id { 32 | position: relative; 33 | width: calc(6rem + 5vmin); height: inherit; 34 | 35 | .id { 36 | width: 5rem; height: inherit; 37 | font-size: 1.1rem; 38 | font-weight: bolder; 39 | text-align: center; 40 | letter-spacing: 2px; 41 | font-family: $theme-font-special; 42 | transform: translateY(100%); 43 | opacity: 0; 44 | animation: bottom-slide-in .4s ease forwards, fadein .2s ease .2s forwards; 45 | } 46 | 47 | ._line { 48 | bottom: 0; 49 | transform: translateX(1rem); 50 | } 51 | } 52 | 53 | .welcome__text { 54 | position: relative; 55 | line-height: 1rem; 56 | } 57 | } 58 | 59 | // home part 60 | ._home { 61 | position: absolute; 62 | width: 100%; height: 50vmin; 63 | left: 0; top: calc(50% - 25vmin); 64 | 65 | .home__subtitle { 66 | position: relative; 67 | width: auto; height: 5vmin; 68 | background-color: $theme-color-white; 69 | color: $theme-color-black; 70 | overflow: hidden; 71 | line-height: 5vmin; 72 | padding: 0 2vmin; 73 | display: inline-block; 74 | box-sizing: border-box; 75 | font-size: .8rem; 76 | margin-bottom: 1vmin; 77 | opacity: 0; 78 | animation: fadein .8s ease forwards; 79 | } 80 | 81 | .home__title { 82 | position: relative; 83 | width: 60%; height: 24vmin; 84 | } 85 | 86 | .home__title-background { 87 | position: absolute; 88 | width: 100%; height: 100%; 89 | background-image: url("../images/background.svg"); 90 | background-repeat: no-repeat; 91 | background-position: left; 92 | background-size: 100%; 93 | transform: translateX(-8%); 94 | opacity: 0; 95 | animation: fadein .4s ease forwards; 96 | } 97 | 98 | .home__title-wrap { 99 | position: absolute; 100 | width: 100%; height: 100%; 101 | overflow: hidden; 102 | 103 | .inner { 104 | position: absolute; 105 | width: inherit; height: inherit; 106 | background-image: url("../images/title.png"); 107 | background-repeat: no-repeat; 108 | background-position: left; 109 | background-size: 85%; 110 | transform: translateY(100%); 111 | transform-origin: bottom; 112 | animation: home-title-in 1s ease forwards; 113 | 114 | &::after { 115 | content: ""; position: absolute; 116 | width: 5rem; height: 5px; 117 | background-color: $theme-color-red; 118 | left: 0; bottom: 0; 119 | transform: translateX(-100%); 120 | transform-origin: left; 121 | animation: left-slide-in 1s ease .7s forwards; 122 | } 123 | } 124 | } 125 | 126 | .home__slogan { 127 | position: relative; 128 | margin-top: 5vmin; 129 | width: 100%; height: 15vmin; 130 | color: $theme-color-white; 131 | font-size: 2rem; 132 | font-family: $theme-font-special; 133 | font-weight: 400; 134 | letter-spacing: .4rem; 135 | 136 | span { 137 | display: inline-block; 138 | } 139 | } 140 | } 141 | 142 | // about part 143 | ._about { 144 | position: absolute; 145 | width: calc(100% - 15vmin); height: 50vmin; 146 | left: 0; top: calc(50% - 25vmin); 147 | display: flex; 148 | 149 | .about__square { 150 | position: relative; 151 | width: 35%; height: 100%; 152 | 153 | span { 154 | position: absolute; 155 | display: block; 156 | width: 14vw; height: 14vw; 157 | left: 0; top: calc(50% - 7vw); 158 | opacity: 0; 159 | 160 | $transform: rotateX(65deg) rotateY(0deg) rotateZ(45deg) translateZ(0); 161 | 162 | &:nth-child(1) { transform: $transform translate(-50%, -50%); } 163 | &:nth-child(2) { transform: $transform translate(-25%, -25%); } 164 | &:nth-child(3) { transform: $transform translate( 0%, 0%); } 165 | &:nth-child(4) { transform: $transform translate( 25%, 25%); } 166 | &:nth-child(5) { transform: $transform translate( 50%, 50%); } 167 | 168 | &::after { 169 | content: ""; position: absolute; 170 | width: 100%; height: 100%; 171 | left: 0; top: 0; 172 | background-color: transparentize($theme-color-white, .3); 173 | transform-origin: center center; 174 | 175 | } 176 | 177 | // animation 178 | @for $i from 1 through 5 { 179 | &:nth-child(#{6 - $i}) { 180 | animation: fadein 1s ease #{0.1 * $i}s forwards; 181 | } 182 | 183 | &:nth-child(#{$i})::after { 184 | animation: rotate-1turn 12s linear infinite; 185 | } 186 | } 187 | } 188 | } 189 | 190 | .about__article { 191 | position: relative; 192 | width: 65%; height: 100%; 193 | font-family: $theme-font-article; 194 | 195 | .about__article-title { 196 | width: 100%; height: 4rem; 197 | font-family: $theme-font-special; 198 | font-size: 4rem; 199 | letter-spacing: .7rem; 200 | padding: .1rem 0; 201 | border-bottom: 3px solid $theme-color-white; 202 | overflow: hidden; 203 | 204 | span { 205 | display: inline-block; 206 | opacity: 0; 207 | transform: translateY(100%); 208 | animation: bottom-slide-in .8s ease forwards, fadein .8s ease forwards 209 | } 210 | } 211 | 212 | .about__article-body { 213 | overflow: auto; 214 | -webkit-overflow-scrolling: touch; 215 | width: 100%; height: calc(100% - 4.2rem); 216 | 217 | @include fuck-scrollbar; 218 | } 219 | 220 | .about__article-part1 { 221 | margin-top: 2rem; 222 | 223 | p { 224 | margin-bottom: .7rem; 225 | } 226 | } 227 | 228 | .about__article-content { 229 | opacity: 0; 230 | animation: top-fade-in .8s ease .1s forwards; 231 | 232 | .title { 233 | margin-top: 1.5rem; 234 | margin-bottom: .5rem; 235 | color: $theme-color-green; 236 | font-size: 1.1rem; 237 | } 238 | 239 | li { 240 | list-style-position: inside; 241 | p {display: inline-block} 242 | } 243 | } 244 | } 245 | } 246 | 247 | // member part 248 | ._member { 249 | position: absolute; 250 | width: calc(100% - 20vmin); height: 60vmin; 251 | left: 0; top: calc(50% - 30vmin); 252 | font-family: $theme-font-article; 253 | background-color: transparentize($theme-color-white, .85); 254 | background-image: url("../images/cross.svg"); 255 | background-size: 2rem; 256 | 257 | .member__line-start, .member__line-end { 258 | position: absolute; 259 | width: 108%; height: 3px; 260 | z-index: 100; 261 | 262 | &::after { 263 | content: ""; position: absolute; 264 | background-color: $theme-color-white; 265 | width: 100%; height: 100%; 266 | transform-origin: center; 267 | transform: scaleX(0); 268 | animation: scaleX0-1 .8s ease forwards; 269 | } 270 | } 271 | 272 | .member__line-start { left: -4%; top: 0; } 273 | .member__line-end { left: -4%; bottom: 0; } 274 | 275 | .member__content { 276 | width: 100%; height: 100%; 277 | overflow-y: auto; 278 | overflow-x: hidden; 279 | -webkit-overflow-scrolling: touch; 280 | box-sizing: border-box; 281 | padding: 2rem 2rem 1rem 2rem; 282 | 283 | @include fuck-scrollbar; 284 | 285 | h2 { 286 | font-family: $theme-font-special; 287 | letter-spacing: .7rem; 288 | font-size: 2.4rem; 289 | margin-bottom: 2rem; 290 | opacity: 0; 291 | animation: fadein .04s linear alternate 7 forwards; 292 | } 293 | } 294 | 295 | .profile { 296 | position: relative; 297 | box-sizing: border-box; 298 | width: 100%; height: 5rem; 299 | margin-bottom: 1.5rem; 300 | display: flex; 301 | opacity: 0; 302 | animation: bottom-fade-in .6s ease .4s forwards; 303 | 304 | .member__avatar { 305 | display: inline-block; 306 | width: 4rem; 307 | text-align: center; 308 | 309 | img, span { 310 | position: relative; 311 | display: inline-block; 312 | } 313 | 314 | img { 315 | width: 3.5rem; height: 3.5rem; 316 | border-radius: 50%; 317 | box-sizing: border-box; 318 | border: 1px solid $theme-color-white; 319 | background-color: #fff; 320 | overflow: hidden; 321 | } 322 | 323 | span { 324 | font-size: .8rem; 325 | width: 120%; 326 | transform: translateX(-10%); 327 | word-break: break-all; 328 | margin-top: 5px; 329 | } 330 | } 331 | 332 | .member__intro { 333 | display: flex; 334 | width: calc(100% - 5rem); 335 | margin-left: 1rem; 336 | 337 | p { 338 | margin: auto; 339 | font-size: .9rem; 340 | font-family: $theme-font-article; 341 | background-color: transparentize($theme-color-white, .9); 342 | width: 100%; height: 3.5rem; 343 | box-sizing: border-box; 344 | padding: 0 1rem; 345 | line-height: 3.5rem; 346 | white-space: nowrap; 347 | overflow-x: scroll; 348 | 349 | @include fuck-scrollbar; 350 | 351 | &::before { 352 | content: ""; position: absolute; 353 | background-color: $theme-color-white; 354 | width: calc(100% - 5rem); height: 1px; 355 | transform: translate(-1rem, -.8rem); 356 | } 357 | } 358 | } 359 | } 360 | } 361 | 362 | // glory part 363 | ._glory { 364 | position: absolute; 365 | width: calc(100% - 18vmin); height: 50vmin; 366 | left: 0; top: calc(50% - 25vmin); 367 | font-family: $theme-font-article; 368 | 369 | .glory__open { 370 | position: absolute; 371 | width: 26vmin; height: 26vmin; 372 | left: calc(50% - 13vmin); top: calc(50% - 13vmin); 373 | display: flex; 374 | animation: fadeout 1s ease 1.2s forwards; 375 | 376 | .text { 377 | position: relative; 378 | margin: auto; 379 | opacity: 0; 380 | font-family: $theme-font-special; 381 | font-size: 3.6rem; 382 | letter-spacing: .6rem; 383 | animation: text-slide-top .5s cubic-bezier(0.68, 0.04, 0.25, 1) .7s forwards; 384 | } 385 | 386 | .coverage { 387 | position: absolute; 388 | width: 100%; height: 100%; 389 | left: 0; top: 0; 390 | opacity: 0; 391 | animation: fall-bound .7s cubic-bezier(0.94, 0.01, 1, 1) forwards; 392 | 393 | &::before, &::after { 394 | content: ""; position: absolute; 395 | width: 50%; height: 100%; 396 | background-image: url("../images/logo-blue.svg"); 397 | background-size: 200%; 398 | background-repeat: no-repeat; 399 | transform-origin: bottom center; 400 | } 401 | 402 | &::before { 403 | left: 0; top: 0; 404 | background-position: left center; 405 | animation: paka .6s cubic-bezier(0.94, 0.01, 1, 1) .7s forwards; 406 | } 407 | 408 | &::after { 409 | right: 0; top: 0; 410 | background-position: right center; 411 | animation: paka- .6s cubic-bezier(0.94, 0.01, 1, 1) .7s forwards; 412 | } 413 | 414 | } 415 | } 416 | 417 | table { 418 | display: block; 419 | width: 100%; height: 100%; 420 | border-collapse: collapse; 421 | overflow-y: auto; 422 | overflow-x: hidden; 423 | -webkit-overflow-scrolling: touch; 424 | font-size: .9rem; 425 | border-radius: 5px; 426 | opacity: 0; 427 | animation: fadein 1s ease 1.2s forwards; 428 | 429 | @include fuck-scrollbar; 430 | 431 | th, td { 432 | padding: .9rem; 433 | } 434 | 435 | thead { 436 | background-color: $theme-color-blue; 437 | } 438 | 439 | tbody { 440 | td { 441 | text-align: center; 442 | } 443 | 444 | tr { 445 | &:nth-child(odd) {background-color: transparentize($theme-color-blue, .6); } 446 | &:nth-child(even) {background-color: transparentize($theme-color-blue, .3); } 447 | } 448 | } 449 | } 450 | } 451 | 452 | // link part 453 | ._links { 454 | position: absolute; 455 | top: 0; right: 0; 456 | font-size: 1rem; 457 | 458 | span { 459 | margin: 0 4px; 460 | } 461 | } 462 | 463 | // next part 464 | ._next { 465 | position: absolute; 466 | width: 10vmin; height: 10vmin; 467 | top: calc(50% - 5vmin); right: 0; 468 | background-image: url("../images/next.svg"); 469 | background-repeat: no-repeat; 470 | background-position: center; 471 | cursor: pointer; 472 | background-color: $theme-color-black; 473 | border: 0; 474 | outline: none; 475 | animation: next-button-animation 2s ease-in-out infinite; 476 | 477 | a { 478 | position: absolute; 479 | display: block; 480 | width: 100%; height: 100%; 481 | left: 0; top: 0; 482 | } 483 | } 484 | 485 | @include pc-layout { 486 | width: 70%; height: calc(100% - 10vmin); 487 | left: 15%; top: 5vmin; 488 | } 489 | } -------------------------------------------------------------------------------- /src/scss/modules/_menu.scss: -------------------------------------------------------------------------------- 1 | .menu { 2 | position: absolute; 3 | z-index: 100; 4 | 5 | ._content { 6 | position: absolute; 7 | background-color: $theme-color-white; 8 | 9 | .content__list { 10 | box-sizing: border-box; 11 | height: 100%; 12 | text-align: center; 13 | display: flex; 14 | flex-direction: column; 15 | 16 | a { 17 | margin: auto; 18 | opacity: 0; 19 | display: block; 20 | transition: color .3s ease; 21 | &, &:hover, &:active { color: $theme-color-black; } 22 | 23 | &:hover { 24 | color: $theme-color-green; 25 | } 26 | } 27 | } 28 | 29 | &[data-state="init"] { 30 | transform: translateX(100%); 31 | } 32 | 33 | &[data-state="close"] { 34 | animation: right-slide-out .35s ease forwards; 35 | } 36 | 37 | &[data-state="open"] { 38 | animation: right-slide-in .35s ease forwards; 39 | 40 | .content__list a { 41 | $animation: fadein .04s linear alternate 5 forwards; 42 | &:nth-child(1) { animation: $animation .30s } 43 | &:nth-child(2) { animation: $animation .34s } 44 | &:nth-child(3) { animation: $animation .36s } 45 | &:nth-child(4) { animation: $animation .32s } 46 | } 47 | } 48 | } 49 | 50 | ._button-wrap { 51 | &[data-state="open"] { display: block; } 52 | &[data-state="close"], &[data-state="init"] { display: none; } 53 | } 54 | 55 | @include pc-layout { 56 | position: absolute; 57 | box-sizing: border-box; 58 | width: 10%; height: 100%; 59 | right: 0; top: 0; 60 | border-left: 1px solid transparentize($theme-color-white, .5); 61 | 62 | ._content { 63 | width: 100vw; height: 100vh; 64 | left: -90vw; top: 0; 65 | 66 | .content__list { 67 | padding: 25vh 0; 68 | 69 | a { 70 | font-size: 3rem; 71 | letter-spacing: .6rem; 72 | } 73 | 74 | .current { 75 | color: #98bfba; 76 | border-bottom: 3px solid $theme-color-green; 77 | pointer-events:none; 78 | } 79 | } 80 | } 81 | 82 | ._button-wrap { 83 | position: inherit; 84 | width: 100%; height: 100%; 85 | cursor: pointer; 86 | box-sizing: border-box; 87 | 88 | &[data-state="open"] { cursor: default; } 89 | } 90 | 91 | .inner { 92 | position: absolute; 93 | width: 10vw; height: 10vw; 94 | left: 0; top: calc(50% - 5vw); 95 | } 96 | 97 | .menu__button-open { 98 | div { 99 | position: absolute; 100 | width: 50%; height: 2px; 101 | background-color: $theme-color-white; 102 | left: calc(50% - 2.5vw); top: calc(50% - 1px); 103 | 104 | &::before, &::after { 105 | content: ""; position: absolute; 106 | width: 100%; height: 100%; 107 | background-color: $theme-color-white; 108 | } 109 | 110 | &::before { transform: translateY(-1vw); } 111 | &::after { transform: translateY( 1vw); } 112 | } 113 | } 114 | 115 | .menu__button-close { 116 | cursor: pointer; 117 | transform-origin: center; 118 | transform: scale(.7); 119 | transition: transform .5s cubic-bezier(.55,.05,.22,.99); 120 | 121 | &:hover { 122 | transform: scale(.6); 123 | } 124 | 125 | .ring { 126 | position: absolute; 127 | width: 100%; height: 100%; 128 | border-radius:50%; 129 | box-sizing: border-box; 130 | animation: rotate-1turn 2s linear infinite; 131 | 132 | &::before, &::after { 133 | content: ""; 134 | position: absolute; 135 | border: 3px solid transparent; 136 | box-sizing: border-box; 137 | top: 0; left: 0; 138 | bottom: 0; right: 0; 139 | border-radius: 50%; 140 | } 141 | 142 | &::before { 143 | border-left: 3px solid $theme-color-black; 144 | } 145 | 146 | &::after { 147 | border-left: 3px solid $theme-color-black; 148 | animation: rotate0-90-0 2s linear infinite; 149 | } 150 | } 151 | 152 | .inner { 153 | position: absolute; 154 | width: 50%; height: 3px; 155 | left: 25%; top: calc(50% - 1.5px); 156 | 157 | &::before, &::after { 158 | content: ""; position: absolute; 159 | width: 100%; height: 100%; 160 | left: 0; top: 0; 161 | background-color: $theme-color-black; 162 | transform-origin: 50% 50%; 163 | opacity: 0; 164 | } 165 | 166 | &::before { 167 | transform: rotate(45deg); 168 | animation: close-button-inner-in__type1 .4s cubic-bezier(.69,.01,.2,.99) forwards; 169 | } 170 | 171 | &::after { 172 | transform: rotate(-45deg); 173 | animation: close-button-inner-in__type2 .4s cubic-bezier(.69,.01,.2,.99) forwards; 174 | animation-delay: .1s; 175 | } 176 | } 177 | } 178 | } 179 | } -------------------------------------------------------------------------------- /src/scss/modules/_vidar.scss: -------------------------------------------------------------------------------- 1 | @import 'header', 'main', 'menu', 'footer'; -------------------------------------------------------------------------------- /src/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import 'variable', 'mixin', 'function', 'base'; 2 | 3 | @import 'keyframes/keyframes'; 4 | @import 'modules/vidar'; --------------------------------------------------------------------------------