diff --git a/package-lock.json b/package-lock.json index de71bf2..c7647cc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -236,6 +236,16 @@ "@babel/types": "^7.4.4" } }, + "@babel/helper-string-parser": { + "version": "7.19.4", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", + "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==" + }, + "@babel/helper-validator-identifier": { + "version": "7.19.1", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", + "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==" + }, "@babel/helper-wrap-function": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz", @@ -911,6 +921,29 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-9.0.1.tgz", "integrity": "sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==" }, + "@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "requires": { + "@emotion/memoize": "^0.8.0" + } + }, + "@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "@hapi/address": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.0.0.tgz", @@ -2089,6 +2122,51 @@ "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.2.tgz", "integrity": "sha512-CxwvxrZ9OirpXQ201Ec57OmGhmI8/ui/GwTDy0hSp6CmRvgRC0pSair6Z04Ck+JStA0sMPZzSJ3uE4n17EXpPQ==" }, + "babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + }, + "dependencies": { + "@babel/helper-annotate-as-pure": { + "version": "7.18.6", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz", + "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==", + "requires": { + "@babel/types": "^7.18.6" + } + }, + "@babel/helper-module-imports": { + "version": "7.18.6", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz", + "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==", + "requires": { + "@babel/types": "^7.18.6" + } + }, + "@babel/types": { + "version": "7.20.2", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/@babel/types/-/types-7.20.2.tgz", + "integrity": "sha512-FnnvsNWgZCr232sqtXggapvlkk/tuwR/qhGzcmxI0GXLCjmPYQPzio2FbdlWuY6y1sHFfQKk+rRbUZ9VStQMog==", + "requires": { + "@babel/helper-string-parser": "^7.19.4", + "@babel/helper-validator-identifier": "^7.19.1", + "to-fast-properties": "^2.0.0" + } + } + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -2705,6 +2783,11 @@ } } }, + "camelize": { + "version": "1.0.1", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -3719,6 +3802,11 @@ "postcss": "^7.0.5" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -3808,6 +3896,23 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + }, + "dependencies": { + "postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + } + } + }, "css-tree": { "version": "1.0.0-alpha.28", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.28.tgz", @@ -9287,6 +9392,11 @@ "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" }, + "picomatch": { + "version": "2.3.1", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" + }, "pify": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", @@ -11615,6 +11725,11 @@ } } }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -12158,6 +12273,23 @@ "schema-utils": "^1.0.0" } }, + "styled-components": { + "version": "5.3.6", + "resolved": "https://nexus.box.dev-datawatch.com/repository/npm-group/styled-components/-/styled-components-5.3.6.tgz", + "integrity": "sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", diff --git a/package.json b/package.json index d29fe69..ae1a159 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "react-router-dom": "^5.2.0", "react-scripts": "3.0.1", "react-slick": "^0.25.2", - "slick-carousel": "^1.8.1" + "slick-carousel": "^1.8.1", + "styled-components": "^5.3.6" }, "engines": { "node": "14.18.3", diff --git a/src/js/home.jsx b/src/js/home.jsx index 4424342..494cbab 100644 --- a/src/js/home.jsx +++ b/src/js/home.jsx @@ -3,6 +3,65 @@ import treehacks_text from "../png/treehacks-text.png"; import { home, live_cutoff, ended_cutoff } from "./content.json"; import EmailSignupWidget from "./email-signup-widget.jsx"; import applylaptop from "../svg/laptop.svg"; +import styled, { keyframes } from "styled-components"; +import { Drone } from "./new_images/drone"; +import { Laptop } from "./new_images/laptop"; +import { World } from "./new_images/world"; +import { VR } from "./new_images/vr"; +import { Cloud } from "./new_images/cloud"; +import { HooverTower } from "./new_images/hoover"; +import LOGO from "./new_images/LOGO.png"; + +const Button = styled.button` + background: linear-gradient(86.93deg, #0cb08a 2.37%, #111827 106.02%); + border-radius: 10px; + color: white; + border: transparent; + padding: 15px; + font-size: 15px; + font-weight: 400; + padding-left: 30px; + padding-right: 30px; + margin-top: 20px; + font-family: Poppins; + width: fit-content; + &:hover { + box-shadow: 0px 0px 15px 0px #e4e4e4; + transform: scale(1.1); + background-color: #fff; + cursor: pointer; + } + transition: 0.2s all; +`; + +const SponsorButton = styled.button` + background: linear-gradient(86.93deg, #0cb08a 2.37%, #111827 106.02%); + border-radius: 10px; + color: white; + border: transparent; + padding: 15px; + font-weight: 400; + padding-left: 30px; + padding-right: 30px; + margin-top: 20px; + font-size: 15px; + &:hover { + box-shadow: 0px 0px 15px 0px #e4e4e4; + transform: scale(1.1); + background-color: #fff; + } + transition: 0.2s all; + cursor: pointer; + font-family: Poppins; + width: fit-content; +`; + +const SVGBackground = styled.div` + background: #1f2937; + padding: 20px; + height: fit-content; + border-radius: 50%; +`; const STATUSES = { beforeRegistration: 1, @@ -45,36 +104,146 @@ class Home extends React.Component { hasBegun = Date.now() > new Date(live_cutoff); return ( -
- treehacks large text - -
- {/* {STATUS === STATUSES.registration && ( -
- - - + <> +
+
+ + + + + + + + + + + + + + + +
+ +
+ +
+
- )} */} - - {/*
*/} -
- Feb 19-20 -
- Stanford University - {/* {STATUS === STATUSES.registration && ( - - apply now - - )} - {STATUS === STATUSES.beforeRegistration && } */}
+ +
+

+ TreeHacks 2023 +

+

+ + Stanford's + {" "} + premiere hackathon is back +
+ in-person! +

+ +

+ Join more than 2,000 hackers across the{" "} + world +
to build the next big thing +

+

+ February 17th - 19th, 2023 @ Stanford University +

+ + + + + Sponsor TreeHacks +
+ + {/*
+ {STATUS === STATUSES.registration && ( +
+ + + +
+ )} + +
+
+ Feb 17-19, 2023 +
Hacker applications will open in December +
+ Stanford University + {STATUS === STATUSES.registration && ( + + apply now + + )} + {STATUS === STATUSES.beforeRegistration && } +
+
*/}
-
+ ); } } diff --git a/src/js/new_images/LOGO.png b/src/js/new_images/LOGO.png new file mode 100644 index 0000000..1b6828d Binary files /dev/null and b/src/js/new_images/LOGO.png differ diff --git a/src/js/new_images/cloud.js b/src/js/new_images/cloud.js new file mode 100644 index 0000000..76d1ed2 --- /dev/null +++ b/src/js/new_images/cloud.js @@ -0,0 +1,110 @@ +import React from "react"; + +export const Cloud = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/js/new_images/drone.js b/src/js/new_images/drone.js new file mode 100644 index 0000000..da36b8e --- /dev/null +++ b/src/js/new_images/drone.js @@ -0,0 +1,144 @@ +import React from "react"; +import dronestyle from "./dronestyle.scss"; + +export const Drone = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/js/new_images/dronestyle.scss b/src/js/new_images/dronestyle.scss new file mode 100644 index 0000000..709bcd9 --- /dev/null +++ b/src/js/new_images/dronestyle.scss @@ -0,0 +1,18 @@ +#test { + animation-duration: 2s; + animation-iteration-count: infinite; + animation-name: updown; + + @keyframes updown { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-40px); + transform: translateX(-10px); + } + 100% { + transform: translateY(0); + } + } +} diff --git a/src/js/new_images/hoover.js b/src/js/new_images/hoover.js new file mode 100644 index 0000000..22dbab0 --- /dev/null +++ b/src/js/new_images/hoover.js @@ -0,0 +1,4916 @@ +import React from "react"; + +export const HooverTower = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/js/new_images/laptop.js b/src/js/new_images/laptop.js new file mode 100644 index 0000000..a876f5d --- /dev/null +++ b/src/js/new_images/laptop.js @@ -0,0 +1,5127 @@ +import React from "react"; + +export const Laptop = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/js/new_images/vr.js b/src/js/new_images/vr.js new file mode 100644 index 0000000..95a96e2 --- /dev/null +++ b/src/js/new_images/vr.js @@ -0,0 +1,80 @@ +import React from "react"; + +export const VR = () => { + return ( + + + + + + + + + + + + + + + + ); +}; diff --git a/src/js/new_images/world.js b/src/js/new_images/world.js new file mode 100644 index 0000000..7790cad --- /dev/null +++ b/src/js/new_images/world.js @@ -0,0 +1,10575 @@ +import React from "react"; + +export const World = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/sass/home.scss b/src/sass/home.scss index fc295d1..a1b8ec2 100644 --- a/src/sass/home.scss +++ b/src/sass/home.scss @@ -14,7 +14,8 @@ height: 100vh; width: 100vw; min-height: calc(500px + 45vh); - padding-top: 20vh; + padding-top: 10vh; + background: $dark-mode; } @media screen and (max-width: 450px) { margin: $large-space 0; @@ -38,6 +39,89 @@ } } + #circleLogo { + padding: 100px; + padding-top: 150px; + } + + #gradient_text { + background: linear-gradient(0deg, #10b981 20.11%, #0ea5e9 150.71%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-weight: 600; + background-clip: text; + font-family: "Poppins", sans-serif; + text-fill-color: transparent; + } + + #stanford-text { + font-family: "Poppins"; + font-style: normal; + font-weight: 600; + + background: linear-gradient(180deg, #ff0025 50%, #d8d8d8 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-fill-color: transparent; + } + + #animate1 { + background-color: red; + } + + #hacker-text { + background: linear-gradient(180deg, #347cea 37.63%, #e4e3ff 86.73%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-weight: 600; + text-fill-color: transparent; + } + + #year-text { + background: linear-gradient( + 180deg, + #ffffff 0%, + rgba(255, 255, 255, 0.47) 100% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-fill-color: transparent; + } + + #floatingIcons { + width: 100%; + display: flex; + height: 100%; + flex-direction: row; + } + + #in-person_text { + font-weight: 600; + background: radial-gradient(50% 50% at 50% 50%, #faff00 0%, #ff9900 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-fill-color: transparent; + } + #world-text { + background: linear-gradient(180deg, #05ff00 37.63%, #e4e3ff 86.73%); + -webkit-background-clip: text; + font-weight: 600; + -webkit-text-fill-color: transparent; + background-clip: text; + text-fill-color: transparent; + } + #next-text { + background: linear-gradient(180deg, #5200ff 0%, #dc87fa 100%); + font-weight: 600; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-fill-color: transparent; + } #arm { height: 14vh; @media screen and (max-width: 450px) { @@ -81,25 +165,77 @@ padding-bottom: 1vh; text-align: center; font-size: xx-large; - // align at bottom - + // align at bottom } - .rowC{ + .rowC { @include flex(row wrap, center, flex-start); } - + .applylaptop { position: relative; &:hover { transform: scale(1.05); } - - } - + } } -@-webkit-keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}} -@-webkit-keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}} -.scale-in-center{ object-fit: contain; -webkit-animation:scale-in-center .5s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-center .5s cubic-bezier(.25,.46,.45,.94) both} -.slide-in-left{-webkit-animation:slide-in-left .5s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-left .5s cubic-bezier(.25,.46,.45,.94) both} +@-webkit-keyframes scale-in-center { + 0% { + -webkit-transform: scale(0); + transform: scale(0); + opacity: 1; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@keyframes scale-in-center { + 0% { + -webkit-transform: scale(0); + transform: scale(0); + opacity: 1; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@-webkit-keyframes slide-in-left { + 0% { + -webkit-transform: translateX(-1000px); + transform: translateX(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } +} +@keyframes slide-in-left { + 0% { + -webkit-transform: translateX(-1000px); + transform: translateX(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } +} +.scale-in-center { + object-fit: contain; + -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) + both; + animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; +} +.slide-in-left { + -webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) + both; + animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; +}