diff --git a/css/index.css b/css/index.css deleted file mode 100644 index 112e104..0000000 --- a/css/index.css +++ /dev/null @@ -1,133 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Lora&family=Poppins:wght@400700&display=swap"); -@font-face { - font-family: "Poppins"; - src: url("fonts/Poppins/Poppins-Regular.ttf"); -} -@font-face { - font-family: "Open Sans"; - src: url("fonts/Open_Sans/OpenSans-Regular.ttf"); -} -@font-face { - font-family: "Astro"; - src: url("fonts/astro.ttf"); -} -* { - margin: 0px; - padding: 0px; - box-sizing: border-box; - overflow-x: hidden; - background-color: #131313; -} - -.nav-wrapper { - position: fixed; - width: 100%; - top: 0; - z-index: 999; -} - -nav { - display: flex; - justify-content: space-around; - align-items: center; - min-height: 8vh; - background-color: #131313; - font-family: "Poppins", sans-serif; -} -nav .logo { - color: #d4d4d4; - text-transform: uppercase; - letter-spacing: 3px; - font-size: 1.75em; -} -nav .logo span { - padding-left: 20px; -} -nav ul { - display: flex; - justify-content: space-around; - width: 30%; -} -nav ul li { - list-style: none; -} -nav ul a { - font-family: "Open Sans", sans-serif; - color: #d4d4d4; - text-decoration: none; - font-weight: bold; - font-size: 1.1em; -} -nav ul a:hover { - color: white; -} - -.hero { - color: #d4d4d4; - position: relative; - width: 100%; - height: 100%; -} - -#hero { - position: absolute; - left: 10%; - top: 20%; - background-color: transparent; - z-index: 1; -} -#hero h1 { - font-family: "Astro", sans-serif; - text-align: left; - font-size: 8em; - padding: 0.5em; - background: -webkit-linear-gradient(#eee 70%, #333 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} -#hero h3 { - font-family: "Open Sans", serif; - text-align: left; - font-size: 2em; - background-color: transparent; -} -#hero canvas { - z-index: 999; -} - -#about { - color: #d4d4d4; - position: absolute; - overflow: hidden; - height: 100%; - background-color: transparent; - text-align: center; -} -#about h1 { - font-size: 4em; - font-family: "Open Sans", sans-serif; -} -#about h4 { - font-size: 1em; - font-family: "Open Sans", sans-serif; - margin-left: 20%; - width: 60%; -} -#about button { - padding: 10px 20px; - border: 3px solid #d4d4d4; - text-transform: uppercase; - margin-top: 30px; - border-radius: 20px; - font-family: "Astro", sans-serif; -} -#about button a { - color: #d4d4d4; - text-decoration: none; -} -#about div canvas { - margin-top: -20%; - z-index: -1; -} - -/*# sourceMappingURL=index.css.map */ diff --git a/css/index.sass b/css/index.sass deleted file mode 100644 index e4192e2..0000000 --- a/css/index.sass +++ /dev/null @@ -1,138 +0,0 @@ -// colors - -$dark: #131313 -$light: #d4d4d4 - -// fonts - -@import url('https://fonts.googleapis.com/css2?family=Lora&family=Poppins:wght@400700&display=swap') - -@font-face - font-family: 'Poppins' - src: url('fonts/Poppins/Poppins-Regular.ttf') - -@font-face - font-family: 'Open Sans' - src: url('fonts/Open_Sans/OpenSans-Regular.ttf') - -@font-face - font-family: 'Astro' - src: url('fonts/astro.ttf') - -$hero-stack: 'Astro', sans-serif -$title-stack: 'Poppins', sans-serif -$subtitle-stack: 'Open Sans', sans-serif -$body-stack: 'Poppins', sans-serif - -* - margin: 0px - padding: 0px - box-sizing: border-box - overflow-x: hidden - background-color: $dark - -.nav-wrapper - position: fixed - width: 100% - top: 0 - z-index: 999 - -nav - display: flex - justify-content: space-around - align-items: center - min-height: 8vh - background-color: $dark - font-family: $title-stack - - .logo - color: $light - text-transform: uppercase - letter-spacing: 3px - font-size: 1.75em - - span - padding-left: 20px - - ul - display: flex - justify-content: space-around - width: 30% - - li - list-style: none - - a - font-family: $subtitle-stack - color: $light - text-decoration: none - font-weight: bold - font-size: 1.1em - - &:hover - color: white - -.hero - color: $light - position: relative - width: 100% - height: 100% - -#hero - position: absolute - left: 10% - top: 20% - background-color: transparent - z-index: 1 - - h1 - font-family: $hero-stack - text-align: left - font-size: 8em - padding: 0.5em - background: -webkit-linear-gradient(#eee 70%, #333 100%) - -webkit-background-clip: text - -webkit-text-fill-color: transparent - - h3 - font-family: "Open Sans", serif - text-align: left - font-size: 2em - background-color: transparent - - canvas - z-index: 999 - -#about - color: $light - position: absolute - overflow: hidden - height: 100% - background-color: transparent - text-align: center - - h1 - font-size: 4em - font-family: $subtitle-stack - - h4 - font-size: 1em - font-family: $subtitle-stack - margin-left: 20% - width: 60% - - button - padding: 10px 20px - border: 3px solid $light - text-transform: uppercase - margin-top: 30px - border-radius: 20px - font-family: $hero-stack - - a - color: $light - text-decoration: none - - div canvas - margin-top: -20% - z-index: -1 \ No newline at end of file diff --git a/index.html b/index.html index 9f26e55..7baf03f 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ NeuroSecure - +
@@ -41,7 +41,6 @@
-

The future of authentication.

@@ -49,6 +48,47 @@ A cloud based authentication platform that will allow users to login with their minds. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique ex, nihil ullam dolores nisi, porro tenetur tempore facilis delectus optio, alias nemo ipsum error laudantium quia soluta! Atque, soluta consequatur? +
+
+
+
@@ -67,6 +107,6 @@ gl_FragColor = vec4( color, 1.0 ); } - - + + diff --git a/package.json b/package.json index 5ff9599..c5af979 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "serve": "vite preview" }, "devDependencies": { + "sass": "^1.38.2", "vite": "^2.4.4" }, "dependencies": { diff --git a/particles.html b/particles.html index 7360a04..be0b964 100644 --- a/particles.html +++ b/particles.html @@ -5,8 +5,18 @@ Document<title> + <style lang="sass" src="/css/index.sass"></style> </head> <body> - <script src="js/particles.js" type="module"></script> + <section class="hero"> + <div id="hero"> + <h1> + Neuro<br />Secure + </h1> + <h3> + A product to revolutionize the field of cybersecurity. + </h3> + </div> + </section> </body> </html> \ No newline at end of file diff --git a/css/fonts/Open_Sans/LICENSE.txt b/public/css/fonts/Open_Sans/LICENSE.txt similarity index 100% rename from css/fonts/Open_Sans/LICENSE.txt rename to public/css/fonts/Open_Sans/LICENSE.txt diff --git a/css/fonts/Open_Sans/OpenSans-Bold.ttf b/public/css/fonts/Open_Sans/OpenSans-Bold.ttf similarity index 100% rename from css/fonts/Open_Sans/OpenSans-Bold.ttf rename to public/css/fonts/Open_Sans/OpenSans-Bold.ttf diff --git a/css/fonts/Open_Sans/OpenSans-BoldItalic.ttf b/public/css/fonts/Open_Sans/OpenSans-BoldItalic.ttf similarity index 100% rename from css/fonts/Open_Sans/OpenSans-BoldItalic.ttf rename to public/css/fonts/Open_Sans/OpenSans-BoldItalic.ttf diff --git a/css/fonts/Open_Sans/OpenSans-ExtraBold.ttf b/public/css/fonts/Open_Sans/OpenSans-ExtraBold.ttf similarity index 100% rename from css/fonts/Open_Sans/OpenSans-ExtraBold.ttf rename to public/css/fonts/Open_Sans/OpenSans-ExtraBold.ttf diff --git a/css/fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf b/public/css/fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf similarity index 100% rename from css/fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf rename to public/css/fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf diff --git a/css/fonts/Open_Sans/OpenSans-Italic.ttf b/public/css/fonts/Open_Sans/OpenSans-Italic.ttf similarity index 100% rename from css/fonts/Open_Sans/OpenSans-Italic.ttf rename to public/css/fonts/Open_Sans/OpenSans-Italic.ttf diff --git a/css/fonts/Open_Sans/OpenSans-Light.ttf b/public/css/fonts/Open_Sans/OpenSans-Light.ttf similarity index 100% rename from css/fonts/Open_Sans/OpenSans-Light.ttf rename to public/css/fonts/Open_Sans/OpenSans-Light.ttf diff --git a/css/fonts/Open_Sans/OpenSans-LightItalic.ttf b/public/css/fonts/Open_Sans/OpenSans-LightItalic.ttf similarity index 100% rename from css/fonts/Open_Sans/OpenSans-LightItalic.ttf rename to public/css/fonts/Open_Sans/OpenSans-LightItalic.ttf diff --git a/css/fonts/Open_Sans/OpenSans-Regular.ttf b/public/css/fonts/Open_Sans/OpenSans-Regular.ttf similarity index 100% rename from css/fonts/Open_Sans/OpenSans-Regular.ttf rename to public/css/fonts/Open_Sans/OpenSans-Regular.ttf diff --git a/css/fonts/Open_Sans/OpenSans-SemiBold.ttf b/public/css/fonts/Open_Sans/OpenSans-SemiBold.ttf similarity index 100% rename from css/fonts/Open_Sans/OpenSans-SemiBold.ttf rename to public/css/fonts/Open_Sans/OpenSans-SemiBold.ttf diff --git a/css/fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf b/public/css/fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf similarity index 100% rename from css/fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf rename to public/css/fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf diff --git a/css/fonts/Poppins/OFL.txt b/public/css/fonts/Poppins/OFL.txt similarity index 100% rename from css/fonts/Poppins/OFL.txt rename to public/css/fonts/Poppins/OFL.txt diff --git a/css/fonts/Poppins/Poppins-Black.ttf b/public/css/fonts/Poppins/Poppins-Black.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-Black.ttf rename to public/css/fonts/Poppins/Poppins-Black.ttf diff --git a/css/fonts/Poppins/Poppins-BlackItalic.ttf b/public/css/fonts/Poppins/Poppins-BlackItalic.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-BlackItalic.ttf rename to public/css/fonts/Poppins/Poppins-BlackItalic.ttf diff --git a/css/fonts/Poppins/Poppins-Bold.ttf b/public/css/fonts/Poppins/Poppins-Bold.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-Bold.ttf rename to public/css/fonts/Poppins/Poppins-Bold.ttf diff --git a/css/fonts/Poppins/Poppins-BoldItalic.ttf b/public/css/fonts/Poppins/Poppins-BoldItalic.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-BoldItalic.ttf rename to public/css/fonts/Poppins/Poppins-BoldItalic.ttf diff --git a/css/fonts/Poppins/Poppins-ExtraBold.ttf b/public/css/fonts/Poppins/Poppins-ExtraBold.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-ExtraBold.ttf rename to public/css/fonts/Poppins/Poppins-ExtraBold.ttf diff --git a/css/fonts/Poppins/Poppins-ExtraBoldItalic.ttf b/public/css/fonts/Poppins/Poppins-ExtraBoldItalic.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-ExtraBoldItalic.ttf rename to public/css/fonts/Poppins/Poppins-ExtraBoldItalic.ttf diff --git a/css/fonts/Poppins/Poppins-ExtraLight.ttf b/public/css/fonts/Poppins/Poppins-ExtraLight.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-ExtraLight.ttf rename to public/css/fonts/Poppins/Poppins-ExtraLight.ttf diff --git a/css/fonts/Poppins/Poppins-ExtraLightItalic.ttf b/public/css/fonts/Poppins/Poppins-ExtraLightItalic.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-ExtraLightItalic.ttf rename to public/css/fonts/Poppins/Poppins-ExtraLightItalic.ttf diff --git a/css/fonts/Poppins/Poppins-Italic.ttf b/public/css/fonts/Poppins/Poppins-Italic.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-Italic.ttf rename to public/css/fonts/Poppins/Poppins-Italic.ttf diff --git a/css/fonts/Poppins/Poppins-Light.ttf b/public/css/fonts/Poppins/Poppins-Light.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-Light.ttf rename to public/css/fonts/Poppins/Poppins-Light.ttf diff --git a/css/fonts/Poppins/Poppins-LightItalic.ttf b/public/css/fonts/Poppins/Poppins-LightItalic.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-LightItalic.ttf rename to public/css/fonts/Poppins/Poppins-LightItalic.ttf diff --git a/css/fonts/Poppins/Poppins-Medium.ttf b/public/css/fonts/Poppins/Poppins-Medium.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-Medium.ttf rename to public/css/fonts/Poppins/Poppins-Medium.ttf diff --git a/css/fonts/Poppins/Poppins-MediumItalic.ttf b/public/css/fonts/Poppins/Poppins-MediumItalic.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-MediumItalic.ttf rename to public/css/fonts/Poppins/Poppins-MediumItalic.ttf diff --git a/css/fonts/Poppins/Poppins-Regular.ttf b/public/css/fonts/Poppins/Poppins-Regular.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-Regular.ttf rename to public/css/fonts/Poppins/Poppins-Regular.ttf diff --git a/css/fonts/Poppins/Poppins-SemiBold.ttf b/public/css/fonts/Poppins/Poppins-SemiBold.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-SemiBold.ttf rename to public/css/fonts/Poppins/Poppins-SemiBold.ttf diff --git a/css/fonts/Poppins/Poppins-SemiBoldItalic.ttf b/public/css/fonts/Poppins/Poppins-SemiBoldItalic.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-SemiBoldItalic.ttf rename to public/css/fonts/Poppins/Poppins-SemiBoldItalic.ttf diff --git a/css/fonts/Poppins/Poppins-Thin.ttf b/public/css/fonts/Poppins/Poppins-Thin.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-Thin.ttf rename to public/css/fonts/Poppins/Poppins-Thin.ttf diff --git a/css/fonts/Poppins/Poppins-ThinItalic.ttf b/public/css/fonts/Poppins/Poppins-ThinItalic.ttf similarity index 100% rename from css/fonts/Poppins/Poppins-ThinItalic.ttf rename to public/css/fonts/Poppins/Poppins-ThinItalic.ttf diff --git a/css/fonts/astro.ttf b/public/css/fonts/astro.ttf similarity index 100% rename from css/fonts/astro.ttf rename to public/css/fonts/astro.ttf diff --git a/public/css/index.css b/public/css/index.css new file mode 100644 index 0000000..ff11a1d --- /dev/null +++ b/public/css/index.css @@ -0,0 +1,274 @@ +@font-face { + font-family: 'Poppins'; + src: url("fonts/Poppins/Poppins-Regular.ttf"); +} + +@font-face { + font-family: 'Open Sans'; + src: url("fonts/Open_Sans/OpenSans-Regular.ttf"); +} + +@font-face { + font-family: 'Astro'; + src: url("fonts/astro.ttf"); +} + +* { + margin: 0px; + padding: 0px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + overflow-x: hidden; + background-color: #131313; +} + +.nav-wrapper { + position: fixed; + width: 100%; + top: 0; + z-index: 999; +} + +nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: distribute; + justify-content: space-around; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 8vh; + background-color: #131313; + font-family: "Poppins", sans-serif; +} + +nav .logo { + color: #d4d4d4; + text-transform: uppercase; + letter-spacing: 3px; + font-size: 1.75em; +} + +nav .logo span { + padding-left: 20px; +} + +nav ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: distribute; + justify-content: space-around; + width: 30%; +} + +nav ul li { + list-style: none; +} + +nav ul a { + font-family: "Open Sans", sans-serif; + color: #d4d4d4; + text-decoration: none; + font-weight: bold; + font-size: 1.1em; +} + +nav ul a:hover { + color: white; +} + +.hero { + color: #d4d4d4; + position: relative; + width: 100%; + height: 100%; +} + +#hero { + position: absolute; + left: 10%; + top: 20%; + background-color: transparent; + z-index: 1; +} + +#hero h1 { + font-family: "Astro", sans-serif; + text-align: left; + font-size: 8em; + padding: 0.5em; + background: -webkit-linear-gradient(#eee 70%, #333 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +#hero h3 { + font-family: "Open Sans", serif; + text-align: left; + font-size: 2em; + background-color: transparent; +} + +#hero canvas { + z-index: 999; +} + +.about { + position: relative; + color: #d4d4d4; + overflow: hidden; + background-color: transparent; + text-align: center; +} + +.about h1 { + font-size: 4em; + font-family: "Open Sans", sans-serif; +} + +.about h4 { + font-size: 1em; + font-family: "Open Sans", sans-serif; + margin-left: 20%; + width: 60%; +} + +.about button { + padding: 10px 20px; + border: 3px solid #d4d4d4; + text-transform: uppercase; + margin-top: 30px; + border-radius: 20px; + font-family: "Astro", sans-serif; +} + +.about button a { + color: #d4d4d4; + text-decoration: none; +} + +.about div canvas { + margin-top: -20%; + z-index: -1; +} + +.timeline { + position: flex; + color: #d4d4d4; + width: 100%; + height: 100vh; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.container { + width: 80%; + height: auto; + max-width: 800px; + margin: 0 auto; + position: relative; +} + +.container ul { + list-style: none; +} + +.container ul li { + padding: 20px; + background-color: #1e1f22; + color: white; + border-radius: 10px; + margin-bottom: 20px; +} + +.container ul li:last-child { + margin-bottom: 0; +} + +.content h1 { + font-weight: 500; + font-size: 25px; + line-height: 30px; + margin-bottom: 10px; +} + +.content p { + font-size: 16px; + line-height: 30px; + font-weight: 300; +} + +.content .date { + font-size: 12px; + font-weight: 300; + margin-bottom: 10px; + letter-spacing: 2px; +} + +@media only screen and (min-width: 768px) { + .container:before { + content: ""; + position: absolute; + top: 0; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + width: 2px; + height: 100%; + background-color: #747474; + } + .container ul li { + width: 50%; + position: relative; + margin-bottom: 50px; + } + .container ul li:nth-child(odd) { + float: left; + clear: right; + -webkit-transform: translateX(-30px); + transform: translateX(-30px); + border-radius: 20px 0px 20px 20px; + } + .container ul li:nth-child(even) { + float: right; + clear: left; + -webkit-transform: translateX(30px); + transform: translateX(30px); + border-radius: 0px 20px 20px 20px; + } + .container ul li::before { + content: ""; + position: absolute; + height: 20px; + width: 20px; + border-radius: 50%; + background-color: pink !important; + color: pink !important; + z-index: 999; + top: 0px; + } + .container ul li:nth-child(odd)::before { + -webkit-transform: translate(50%, -50%); + transform: translate(50%, -50%); + right: -30px; + } + .container ul li:nth-child(even)::before { + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + left: -30px; + } + .content .date { + position: absolute; + top: -30px; + } + .container ul li:hover::before { + background-color: aqua; + } +} +/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/public/css/index.sass b/public/css/index.sass new file mode 100644 index 0000000..d19ffd3 --- /dev/null +++ b/public/css/index.sass @@ -0,0 +1,338 @@ +// colors + +$dark: #131313 +$gray: #747474 +$light: #d4d4d4 + +// fonts + + +@font-face + font-family: 'Poppins' + src: url('fonts/Poppins/Poppins-Regular.ttf') + +@font-face + font-family: 'Open Sans' + src: url('fonts/Open_Sans/OpenSans-Regular.ttf') + +@font-face + font-family: 'Astro' + src: url('fonts/astro.ttf') + +$hero-stack: 'Astro', sans-serif +$title-stack: 'Poppins', sans-serif +$subtitle-stack: 'Open Sans', sans-serif +$body-stack: 'Poppins', sans-serif + +// mobile +$mobile-width: 768px + +@mixin mobile + @media (max-width: #{$mobile-width}) + @content + +@mixin desktop + @media (min-width: #{$mobile-width}) + @content + +* + margin: 0px + padding: 0px + box-sizing: border-box + overflow-x: hidden + background-color: $dark + +.nav-wrapper + position: fixed + width: 100% + top: 0 + z-index: 999 + +nav + display: flex + justify-content: space-around + align-items: center + min-height: 8vh + background-color: $dark + font-family: $title-stack + + .logo + color: $light + text-transform: uppercase + letter-spacing: 3px + font-size: 1.75em + + span + padding-left: 20px + + ul + display: flex + justify-content: space-around + width: 30% + + li + list-style: none + + a + font-family: $subtitle-stack + color: $light + text-decoration: none + font-weight: bold + font-size: 1.1em + + &:hover + color: white + +.hero + color: $light + position: relative + width: 100% + height: 100% + +#hero + position: absolute + left: 10% + top: 20% + background-color: transparent + z-index: 1 + + h1 + font-family: $hero-stack + text-align: left + font-size: 8em + padding: 0.5em + background: -webkit-linear-gradient(#eee 70%, #333 100%) + -webkit-background-clip: text + -webkit-text-fill-color: transparent + + h3 + font-family: "Open Sans", serif + text-align: left + font-size: 2em + background-color: transparent + + canvas + z-index: 999 + +.about + position: relative + color: $light + overflow: hidden + background-color: transparent + text-align: center + + h1 + font-size: 4em + font-family: $subtitle-stack + + h4 + font-size: 1em + font-family: $subtitle-stack + margin-left: 20% + width: 60% + + button + padding: 10px 20px + border: 3px solid $light + text-transform: uppercase + margin-top: 30px + border-radius: 20px + font-family: $hero-stack + + a + color: $light + text-decoration: none + + div canvas + margin-top: -20% + z-index: -1 + +.timeline + position: flex + color: $light + width: 100% + height: 100vh + align-items: center + justify-content: center + +// .container +// width: 80% +// height: auto +// max-width: 800px +// margin: 0 auto +// position: relative +// overflow-x: visible + +// ul +// list-style: none + +// li +// padding: 20px +// background-color: $gray +// color: white +// border-radius: 10px +// margin-bottom: 20px + +// &:last-child +// margin-bottom: 0 + +// .content +// h1 +// font-weight: bold +// font-size: 25px +// line-height: 30px +// margin-bottom: 10px + +// p +// font-weight: normal +// font-size: 16px +// line-height: 30px + +// .date +// font-weight: normal +// font-size: 12px +// margin-bottom: 10px +// letter-spacing: 2px + +// @include desktop +// &:before +// content: "" +// position: absolute +// top: 0 +// left: 50% +// transform: translateX(-50%) +// width: 2px +// height: 100% +// background-color: $gray + +// ul li +// width: 50% +// position: relative +// margin-bottom: 50px + +// &:nth-child(odd) +// float: left +// clear: right +// transform: translateX(-30%) +// border-radius: 20px 0 20px 20px + +// &::before +// transform: translate(50%, -50%) +// right: -30px + +// &:nth-child(even) +// float: right +// clear: left +// transform: translateX(30%) +// border-radius: 0 20px 20px 20px + +// &::before +// transform: translate(-50%, -50%) +// right: -30px + +// &::before +// content: "" +// position: absolute +// height: 20px +// width: 20px +// border-radius: 50% +// background-color: $gray +// top: 0px + +// .date +// position: absolute +// top: -30px + +.container + width: 80% + height: auto + max-width: 800px + margin: 0 auto + position: relative + + +.container ul + list-style: none + +.container ul li + padding: 20px + background-color: #1e1f22 + color: white + border-radius: 10px + margin-bottom: 20px + +.container ul li:last-child + margin-bottom: 0 + +.content h1 + font-weight: 500 + font-size: 25px + line-height: 30px + margin-bottom: 10px + +.content p + font-size: 16px + line-height: 30px + font-weight: 300 + +.content .date + font-size: 12px + font-weight: 300 + margin-bottom: 10px + letter-spacing: 2px + +@media only screen and (min-width: 768px) + .container:before + content: "" + position: absolute + top: 0 + left: 50% + transform: translateX(-50%) + width: 2px + height: 100% + background-color: $gray + + .container ul li + width: 50% + position: relative + margin-bottom: 50px + + .container ul li:nth-child(odd) + float: left + clear: right + transform: translateX(-30px) + border-radius: 20px 0px 20px 20px + + .container ul li:nth-child(even) + float: right + clear: left + transform: translateX(30px) + border-radius: 0px 20px 20px 20px + + .container ul li::before + content: "" + position: absolute + height: 20px + width: 20px + border-radius: 50% + background-color: pink !important + color: pink !important + z-index: 999 + top: 0px + + .container ul li:nth-child(odd)::before + transform: translate(50%, -50%) + right: -30px + + .container ul li:nth-child(even)::before + transform: translate(-50%, -50%) + left: -30px + + .content .date + position: absolute + top: -30px + + .container ul li:hover::before + background-color: aqua + + diff --git a/css/res/brain.svg b/public/css/res/brain.svg similarity index 100% rename from css/res/brain.svg rename to public/css/res/brain.svg diff --git a/js/app.js b/public/js/app.js similarity index 87% rename from js/app.js rename to public/js/app.js index 0de8ec7..ae759d3 100644 --- a/js/app.js +++ b/public/js/app.js @@ -1,4 +1,4 @@ -import * as THREE from "three"; +import * as THREE from "../node_modules/three/build/three.module.js"; import { APP } from "./landing.js"; window.THREE = THREE; // Used by APP Scripts. diff --git a/js/landing.js b/public/js/landing.js similarity index 98% rename from js/landing.js rename to public/js/landing.js index 32b58f4..6a5581e 100644 --- a/js/landing.js +++ b/public/js/landing.js @@ -1,4 +1,4 @@ -import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; +import { OrbitControls } from "../node_modules/three/examples/jsm/controls/OrbitControls.js"; var APP = { Player: function () { diff --git a/js/particles.js b/public/js/particles.js similarity index 86% rename from js/particles.js rename to public/js/particles.js index 52c9eae..bf9fefc 100644 --- a/js/particles.js +++ b/public/js/particles.js @@ -1,5 +1,4 @@ -import * as THREE from "three"; - +import * as THREE from "../node_modules/three/build/three.module.js"; const SEPARATION = 100, AMOUNTX = 50, @@ -11,16 +10,15 @@ let camera, scene, renderer; let particles, count = 0; - let windowHalfX = window.innerWidth / 2; -let windowHalfY = window.innerHeight / 4; +let windowHalfY = window.innerHeight / 2; init(); animate(); function init() { container = document.createElement("div"); - const about = document.getElementById("about"); + const about = document.getElementsByClassName("about")[0]; about.appendChild(container); camera = new THREE.PerspectiveCamera( @@ -79,14 +77,21 @@ function init() { renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight/2); + renderer.setSize(window.innerWidth, window.innerHeight / 2); container.appendChild(renderer.domElement); - container.style.touchAction = "none"; // + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; + + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + + renderer.setSize(window.innerWidth, window.innerHeight); + window.addEventListener("resize", onWindowResize); } @@ -104,7 +109,6 @@ function onWindowResize() { function onPointerMove(event) { if (event.isPrimary === false) return; - } // diff --git a/js/scenes/brain.json b/public/js/scenes/brain.json similarity index 100% rename from js/scenes/brain.json rename to public/js/scenes/brain.json diff --git a/js/three.module.js b/public/js/three.module.js similarity index 100% rename from js/three.module.js rename to public/js/three.module.js diff --git a/yarn.lock b/yarn.lock index a7a7fb4..a65b0c4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,41 @@ # yarn lockfile v1 +anymatch@~3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716" + integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg== + dependencies: + normalize-path "^3.0.0" + picomatch "^2.0.4" + +binary-extensions@^2.0.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" + integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== + +braces@~3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" + integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== + dependencies: + fill-range "^7.0.1" + +"chokidar@>=3.0.0 <4.0.0": + version "3.5.2" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75" + integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ== + dependencies: + anymatch "~3.1.2" + braces "~3.0.2" + glob-parent "~5.1.2" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.6.0" + optionalDependencies: + fsevents "~2.3.2" + colorette@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94" @@ -12,6 +47,13 @@ esbuild@^0.12.8: resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.19.tgz#ab849766705a5093df5acd8ec2f6ba2159a38a6c" integrity sha512-5NuT1G6THW7l3fsSCDkcPepn24R0XtyPjKoqKHD8LfhqMXzCdz0mrS9HgO6hIhzVT7zt0T+JGbzCqF5AH8hS9w== +fill-range@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40" + integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== + dependencies: + to-regex-range "^5.0.1" + fsevents@~2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" @@ -22,6 +64,13 @@ function-bind@^1.1.1: resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== +glob-parent@~5.1.2: + version "5.1.2" + resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" + integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== + dependencies: + is-glob "^4.0.1" + has@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796" @@ -29,6 +78,13 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +is-binary-path@~2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" + integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== + dependencies: + binary-extensions "^2.0.0" + is-core-module@^2.2.0: version "2.5.0" resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.5.0.tgz#f754843617c70bfd29b7bd87327400cda5c18491" @@ -36,16 +92,43 @@ is-core-module@^2.2.0: dependencies: has "^1.0.3" +is-extglob@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2" + integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI= + +is-glob@^4.0.1, is-glob@~4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc" + integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg== + dependencies: + is-extglob "^2.1.1" + +is-number@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b" + integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== + nanoid@^3.1.23: version "3.1.23" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81" integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw== +normalize-path@^3.0.0, normalize-path@~3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" + integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== + path-parse@^1.0.6: version "1.0.7" resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== +picomatch@^2.0.4, picomatch@^2.2.1: + version "2.3.0" + resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972" + integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw== + postcss@^8.3.6: version "8.3.6" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.6.tgz#2730dd76a97969f37f53b9a6096197be311cc4ea" @@ -55,6 +138,13 @@ postcss@^8.3.6: nanoid "^3.1.23" source-map-js "^0.6.2" +readdirp@~3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" + integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== + dependencies: + picomatch "^2.2.1" + resolve@^1.20.0: version "1.20.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975" @@ -70,6 +160,13 @@ rollup@^2.38.5: optionalDependencies: fsevents "~2.3.2" +sass@^1.38.2: + version "1.38.2" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.38.2.tgz#970045d9966180002a8c8f3820fc114cddb42822" + integrity sha512-Bz1fG6qiyF0FX6m/I+VxtdVKz1Dfmg/e9kfDy2PhWOkq3T384q2KxwIfP0fXpeI+EyyETdOauH+cRHQDFASllA== + dependencies: + chokidar ">=3.0.0 <4.0.0" + source-map-js@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" @@ -80,6 +177,13 @@ three@^0.131.3: resolved "https://registry.yarnpkg.com/three/-/three-0.131.3.tgz#406fd210c603ca9154937ae3582996fbfd3cb716" integrity sha512-VkZAv8ZTJqiE/fyEmoWLxcNHImpVcjqW7RO0GzMu3tRpwO0KUvK9pjTmJzJcAbc51BOeB2G38zh80yjHTbP8gQ== +to-regex-range@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4" + integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ== + dependencies: + is-number "^7.0.0" + vite@^2.4.4: version "2.4.4" resolved "https://registry.yarnpkg.com/vite/-/vite-2.4.4.tgz#8c402a07ad45f168f6eb5428bead38f3e4363e47"