├── .prettierignore ├── app ├── utils │ ├── polyfill.js │ ├── scroll.js │ ├── sw.js │ ├── math.js │ ├── dom.js │ ├── locoscroll.js │ └── text.js ├── service-worker.js ├── pages │ ├── Work │ │ └── index.js │ ├── Contact │ │ └── index.js │ ├── Home │ │ └── index.js │ ├── Portfolio │ │ └── index.js │ └── About │ │ └── index.js ├── vendors │ └── magnet.js ├── classes │ ├── Component.js │ ├── Animation.js │ └── Page.js ├── animations │ └── Paragraph.js ├── components │ ├── Transition.js │ └── Preloader.js └── index.js ├── .gitignore ├── public ├── 1.jpg ├── about_1.jpg ├── about_2.jpg ├── about_3.jpg ├── cases │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.webp │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ └── 8.jpg ├── favicon.ico ├── team │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ └── 6.jpg ├── clients │ ├── 1.webp │ ├── 2.webp │ ├── 3.webp │ ├── 4.webp │ ├── 5.webp │ ├── 6.webp │ ├── 7.webp │ └── 8.webp ├── about_banner.jpg ├── about_screen.jpg ├── favicon-16x16.png ├── favicon-32x32.png ├── home_screen.jpg ├── contact_banner.jpg ├── contact_screen.jpg ├── apple-touch-icon.png ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── site.webmanifest ├── service-worker.js ├── main.js.LICENSE.txt └── offline │ └── index.html ├── shared ├── 1.jpg ├── about_1.jpg ├── about_2.jpg ├── about_3.jpg ├── cases │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.webp │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ └── 8.jpg ├── favicon.ico ├── team │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ └── 6.jpg ├── clients │ ├── 1.webp │ ├── 2.webp │ ├── 3.webp │ ├── 4.webp │ ├── 5.webp │ ├── 6.webp │ ├── 7.webp │ └── 8.webp ├── about_banner.jpg ├── about_screen.jpg ├── favicon-16x16.png ├── favicon-32x32.png ├── home_screen.jpg ├── contact_banner.jpg ├── contact_screen.jpg ├── apple-touch-icon.png ├── android-chrome-192x192.png ├── android-chrome-512x512.png └── site.webmanifest ├── fonts ├── ampersand.woff └── ampersand.woff2 ├── styles ├── shared │ ├── titles.scss │ ├── section.scss │ ├── descriptions.scss │ └── links.scss ├── base │ ├── fonts.scss │ ├── reset.scss │ └── base.scss ├── utils │ ├── responsive.scss │ ├── functions.scss │ ├── variables.scss │ └── mixins.scss ├── components │ ├── canvas.scss │ ├── preloader.scss │ ├── navigation.scss │ └── footer.scss ├── index.scss └── pages │ ├── portfolio │ └── portfolio.scss │ ├── contact │ └── contact.scss │ ├── work │ └── work.scss │ ├── home │ └── home.scss │ └── about │ └── about.scss ├── postcss.config.js ├── .prettierrc.json ├── vercel.json ├── webpack.config.development.js ├── webpack.config.build.js ├── README.md ├── views ├── partials │ ├── navigation.pug │ ├── preloader.pug │ └── footer.pug ├── base.pug └── pages │ ├── contact.pug │ ├── works │ ├── emerald_planet.pug │ ├── olivia_arnold.pug │ ├── shiny_diamond.pug │ ├── the_secrets.pug │ ├── the_silks.pug │ ├── work.pug │ ├── rainbows.pug │ ├── pierre.pug │ └── spirits_of_illusion.pug │ ├── portfolio.pug │ ├── about.pug │ └── home.pug ├── offline └── index.html ├── app.mjs ├── package.json └── webpack.config.js /.prettierignore: -------------------------------------------------------------------------------- 1 | *.pug 2 | -------------------------------------------------------------------------------- /app/utils/polyfill.js: -------------------------------------------------------------------------------- 1 | import "nodelist-foreach-polyfill"; 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | log/ 3 | npm-debug.log 4 | 5 | .env 6 | -------------------------------------------------------------------------------- /public/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/1.jpg -------------------------------------------------------------------------------- /shared/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/1.jpg -------------------------------------------------------------------------------- /public/about_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/about_1.jpg -------------------------------------------------------------------------------- /public/about_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/about_2.jpg -------------------------------------------------------------------------------- /public/about_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/about_3.jpg -------------------------------------------------------------------------------- /public/cases/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/cases/1.jpg -------------------------------------------------------------------------------- /public/cases/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/cases/2.jpg -------------------------------------------------------------------------------- /public/cases/3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/cases/3.webp -------------------------------------------------------------------------------- /public/cases/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/cases/4.jpg -------------------------------------------------------------------------------- /public/cases/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/cases/5.jpg -------------------------------------------------------------------------------- /public/cases/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/cases/6.jpg -------------------------------------------------------------------------------- /public/cases/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/cases/7.jpg -------------------------------------------------------------------------------- /public/cases/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/cases/8.jpg -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/team/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/team/1.jpg -------------------------------------------------------------------------------- /public/team/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/team/2.jpg -------------------------------------------------------------------------------- /public/team/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/team/3.jpg -------------------------------------------------------------------------------- /public/team/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/team/4.jpg -------------------------------------------------------------------------------- /public/team/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/team/5.jpg -------------------------------------------------------------------------------- /public/team/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/team/6.jpg -------------------------------------------------------------------------------- /shared/about_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/about_1.jpg -------------------------------------------------------------------------------- /shared/about_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/about_2.jpg -------------------------------------------------------------------------------- /shared/about_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/about_3.jpg -------------------------------------------------------------------------------- /shared/cases/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/cases/1.jpg -------------------------------------------------------------------------------- /shared/cases/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/cases/2.jpg -------------------------------------------------------------------------------- /shared/cases/3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/cases/3.webp -------------------------------------------------------------------------------- /shared/cases/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/cases/4.jpg -------------------------------------------------------------------------------- /shared/cases/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/cases/5.jpg -------------------------------------------------------------------------------- /shared/cases/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/cases/6.jpg -------------------------------------------------------------------------------- /shared/cases/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/cases/7.jpg -------------------------------------------------------------------------------- /shared/cases/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/cases/8.jpg -------------------------------------------------------------------------------- /shared/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/favicon.ico -------------------------------------------------------------------------------- /shared/team/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/team/1.jpg -------------------------------------------------------------------------------- /shared/team/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/team/2.jpg -------------------------------------------------------------------------------- /shared/team/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/team/3.jpg -------------------------------------------------------------------------------- /shared/team/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/team/4.jpg -------------------------------------------------------------------------------- /shared/team/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/team/5.jpg -------------------------------------------------------------------------------- /shared/team/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/team/6.jpg -------------------------------------------------------------------------------- /fonts/ampersand.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/fonts/ampersand.woff -------------------------------------------------------------------------------- /fonts/ampersand.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/fonts/ampersand.woff2 -------------------------------------------------------------------------------- /public/clients/1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/clients/1.webp -------------------------------------------------------------------------------- /public/clients/2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/clients/2.webp -------------------------------------------------------------------------------- /public/clients/3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/clients/3.webp -------------------------------------------------------------------------------- /public/clients/4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/clients/4.webp -------------------------------------------------------------------------------- /public/clients/5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/clients/5.webp -------------------------------------------------------------------------------- /public/clients/6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/clients/6.webp -------------------------------------------------------------------------------- /public/clients/7.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/clients/7.webp -------------------------------------------------------------------------------- /public/clients/8.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/clients/8.webp -------------------------------------------------------------------------------- /shared/clients/1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/clients/1.webp -------------------------------------------------------------------------------- /shared/clients/2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/clients/2.webp -------------------------------------------------------------------------------- /shared/clients/3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/clients/3.webp -------------------------------------------------------------------------------- /shared/clients/4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/clients/4.webp -------------------------------------------------------------------------------- /shared/clients/5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/clients/5.webp -------------------------------------------------------------------------------- /shared/clients/6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/clients/6.webp -------------------------------------------------------------------------------- /shared/clients/7.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/clients/7.webp -------------------------------------------------------------------------------- /shared/clients/8.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/clients/8.webp -------------------------------------------------------------------------------- /public/about_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/about_banner.jpg -------------------------------------------------------------------------------- /public/about_screen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/about_screen.jpg -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/home_screen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/home_screen.jpg -------------------------------------------------------------------------------- /shared/about_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/about_banner.jpg -------------------------------------------------------------------------------- /shared/about_screen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/about_screen.jpg -------------------------------------------------------------------------------- /shared/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/favicon-16x16.png -------------------------------------------------------------------------------- /shared/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/favicon-32x32.png -------------------------------------------------------------------------------- /shared/home_screen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/home_screen.jpg -------------------------------------------------------------------------------- /styles/shared/titles.scss: -------------------------------------------------------------------------------- 1 | %title-10 { 2 | font-size: 7.5rem; 3 | font-weight: 600; 4 | line-height: 1; 5 | } 6 | -------------------------------------------------------------------------------- /app/utils/scroll.js: -------------------------------------------------------------------------------- 1 | if (window.history.scrollRestoration) { 2 | window.history.scrollRestoration = "manual"; 3 | } 4 | -------------------------------------------------------------------------------- /public/contact_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/contact_banner.jpg -------------------------------------------------------------------------------- /public/contact_screen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/contact_screen.jpg -------------------------------------------------------------------------------- /shared/contact_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/contact_banner.jpg -------------------------------------------------------------------------------- /shared/contact_screen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/contact_screen.jpg -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/apple-touch-icon.png -------------------------------------------------------------------------------- /shared/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/apple-touch-icon.png -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /shared/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/android-chrome-192x192.png -------------------------------------------------------------------------------- /shared/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-SOTD--1/HEAD/shared/android-chrome-512x512.png -------------------------------------------------------------------------------- /styles/base/fonts.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@300;400;500;600;700;800&display=swap"); 2 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = { 3 | plugins: [ 4 | require("autoprefixer"), 5 | require("cssnano")({ 6 | preset: "default" 7 | }) 8 | ] 9 | }; 10 | -------------------------------------------------------------------------------- /styles/utils/responsive.scss: -------------------------------------------------------------------------------- 1 | $breakpoints: ( 2 | "phone": 768px, 3 | "tablet": 1024px, 4 | "desktop": 1920px 5 | ) !default; 6 | 7 | @import "../../node_modules/include-media/dist/_include-media.scss"; 8 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "bracketSpacing": true, 4 | "bracketSameLine": false, 5 | "singleQuote": false, 6 | "printWidth": 80, 7 | "trailingComma": "none" 8 | } 9 | -------------------------------------------------------------------------------- /app/utils/sw.js: -------------------------------------------------------------------------------- 1 | if ("serviceWorker" in navigator) { 2 | navigator.serviceWorker.register("service-worker.js"); 3 | console.log("Service Worker Registered"); 4 | } else { 5 | console.log("Service Worker Registration Failed"); 6 | } 7 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "name": "awwwards-rebuild-1", 4 | "builds": [ 5 | { "src": "app.mjs", "use": "@vercel/node" } 6 | ], 7 | "routes": [ 8 | { "src": "/(.*)", "dest": "/app.mjs" } 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /public/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /shared/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /styles/components/canvas.scss: -------------------------------------------------------------------------------- 1 | .home__hero__webgl__content canvas { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | width: 100vw; 6 | height: 100vh; 7 | z-index: 10; 8 | pointer-events: all; 9 | background-color: rgba($color: #000000, $alpha: 1); 10 | } 11 | -------------------------------------------------------------------------------- /styles/utils/functions.scss: -------------------------------------------------------------------------------- 1 | @function z($name) { 2 | @if index($z-indexes, $name) { 3 | @return (length($z-indexes) - index($z-indexes, $name)) + 1; 4 | } @else { 5 | @warn 'There is no item "#{$name}" in this list; Choose one of: #{$z-indexes}'; 6 | 7 | @return null; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /webpack.config.development.js: -------------------------------------------------------------------------------- 1 | const { merge } = require("webpack-merge"); 2 | const path = require("path"); 3 | const config = require("./webpack.config"); 4 | 5 | module.exports = merge(config, { 6 | mode: "development", 7 | devtool: "inline-source-map", 8 | output: { 9 | path: path.resolve(__dirname, "public") 10 | } 11 | }); 12 | -------------------------------------------------------------------------------- /styles/shared/section.scss: -------------------------------------------------------------------------------- 1 | %section { 2 | width: 100vw; 3 | height: fit-content; 4 | min-height: 100vh; 5 | padding: 10vh 0; 6 | overflow: hidden; 7 | position: relative; 8 | } 9 | 10 | %innerSection { 11 | max-width: 80%; 12 | width: 100%; 13 | margin: 0 auto; 14 | height: fit-content; 15 | min-height: 100vh; 16 | overflow: hidden; 17 | } 18 | -------------------------------------------------------------------------------- /public/service-worker.js: -------------------------------------------------------------------------------- 1 | const staticCacheName="jeet-static-v1",filesToCache=["/offline/index.html"];this.addEventListener("install",(e=>{this.skipWaiting(),e.waitUntil(caches.open(staticCacheName).then((e=>e.addAll(filesToCache))))})),this.addEventListener("fetch",(e=>{e.respondWith(caches.match(e.request).then((t=>t||fetch(e.request))).catch((()=>caches.match("/offline/index.html"))))})); -------------------------------------------------------------------------------- /webpack.config.build.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 4 | 5 | const { merge } = require("webpack-merge"); 6 | const config = require("./webpack.config"); 7 | 8 | module.exports = merge(config, { 9 | mode: "production", 10 | 11 | output: { 12 | path: path.join(__dirname, "public") 13 | }, 14 | 15 | plugins: [new CleanWebpackPlugin()] 16 | }); 17 | -------------------------------------------------------------------------------- /styles/utils/variables.scss: -------------------------------------------------------------------------------- 1 | $color-gray: #0f0f0f; 2 | $color-light: rgba(255, 257, 259, 0.6); 3 | $color-white: #fff; 4 | $color-black: #000000; 5 | $color-boulder: #7c7b7b; 6 | $color-theme: #ff9b00; 7 | 8 | $font-a: "Epilogue", sans-serif; 9 | $font-b: "Epilogue", sans-serif; 10 | $font-c: "Epilogue", sans-serif; 11 | 12 | $ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); 13 | 14 | $z-indexes: ("preloader", "transition", "navigation", "content", "canvas"); 15 | -------------------------------------------------------------------------------- /styles/shared/descriptions.scss: -------------------------------------------------------------------------------- 1 | %description-12 { 2 | font-size: 1.2rem; 3 | } 4 | 5 | %description-14 { 6 | font-size: 1.4rem; 7 | } 8 | 9 | %description-16 { 10 | font-size: 1.6rem; 11 | font-weight: 300; 12 | line-height: 1.5; 13 | } 14 | 15 | %description-18 { 16 | font-size: 1.8rem; 17 | list-style: 1; 18 | } 19 | 20 | %description-20 { 21 | font-size: 2rem; 22 | } 23 | 24 | %description-22 { 25 | font-size: 2.2rem; 26 | } 27 | 28 | %description-32 { 29 | font-size: 2.8rem; 30 | } 31 | -------------------------------------------------------------------------------- /app/utils/math.js: -------------------------------------------------------------------------------- 1 | import GSAP from "gsap"; 2 | 3 | export function lerp(p1, p2, t) { 4 | return GSAP.utils.interpolate(p1, p2, t); 5 | } 6 | 7 | export function clamp(min, max, number) { 8 | return GSAP.utils.clamp(min, max, number); 9 | } 10 | 11 | export function random(min, max) { 12 | return GSAP.utils.random(min, max); 13 | } 14 | 15 | export function map(valueToMap, inMin, inMax, outMin, outMax) { 16 | return GSAP.utils.mapRange(inMin, inMax, outMin, outMax, valueToMap); 17 | } 18 | 19 | export function delay(ms) { 20 | return new Promise((res) => GSAP.delayedCall(ms / 1000, res)); 21 | } 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # awwward-rebuild-SOTD--1 2 | 3 | [![JS Standard Style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/) 4 | 5 | ![Screenshot of Website](banner.png) 6 | 7 | # Getting Started 8 | 9 | You need to have [Node.js](https://nodejs.org/en/) and [npm](https://www.npmjs.com/) installed in your machine, these are our only dependencies to run the project locally. 10 | 11 | ```sh 12 | # Clone the project. 13 | git clone https://github.com/MAGGIx1404/awwward-rebuild-SOTD--1.git 14 | 15 | # Install npm depedencies. 16 | npm install 17 | 18 | # Configure .env variables and run the website. 19 | npm run dev 20 | ``` 21 | -------------------------------------------------------------------------------- /public/main.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * GSAP 3.9.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2021, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | 11 | /*! 12 | * ScrollTrigger 3.9.1 13 | * https://greensock.com 14 | * 15 | * @license Copyright 2008-2021, GreenSock. All rights reserved. 16 | * Subject to the terms at https://greensock.com/standard-license or for 17 | * Club GreenSock members, the agreement issued with that membership. 18 | * @author: Jack Doyle, jack@greensock.com 19 | */ 20 | -------------------------------------------------------------------------------- /app/service-worker.js: -------------------------------------------------------------------------------- 1 | const staticCacheName = "jeet-static-v1"; 2 | 3 | const filesToCache = ["/offline/index.html"]; 4 | 5 | this.addEventListener("install", (event) => { 6 | this.skipWaiting(); 7 | 8 | event.waitUntil( 9 | caches.open(staticCacheName).then((cache) => { 10 | return cache.addAll(filesToCache); 11 | }) 12 | ); 13 | }); 14 | 15 | // Serve from Cache 16 | this.addEventListener("fetch", (event) => { 17 | event.respondWith( 18 | caches 19 | .match(event.request) 20 | .then((response) => { 21 | return response || fetch(event.request); 22 | }) 23 | .catch(() => { 24 | return caches.match("/offline/index.html"); 25 | }) 26 | ); 27 | }); 28 | -------------------------------------------------------------------------------- /styles/index.scss: -------------------------------------------------------------------------------- 1 | // Reset 2 | @import "./base/reset"; 3 | 4 | // Utils 5 | @import "./utils/variables"; 6 | @import "./utils/mixins"; 7 | @import "./utils/functions"; 8 | @import "./utils/responsive"; 9 | 10 | // Shared 11 | @import "./shared/links"; 12 | @import "./shared/titles"; 13 | @import "./shared/descriptions"; 14 | @import "./shared/section"; 15 | 16 | // Components 17 | @import "./components/canvas"; 18 | @import "./components/preloader"; 19 | @import "./components/navigation"; 20 | @import "./components/footer"; 21 | 22 | @import "./base/fonts"; 23 | @import "./base/base"; 24 | 25 | // Pages 26 | @import "./pages/home/home"; 27 | @import "./pages/about/about"; 28 | @import "./pages/portfolio/portfolio"; 29 | @import "./pages/contact/contact"; 30 | @import "./pages/work/work"; 31 | -------------------------------------------------------------------------------- /views/partials/navigation.pug: -------------------------------------------------------------------------------- 1 | nav.navigation#navigation 2 | .container 3 | a.logo#logo(href="/") Evil Studio 4 | .nav__links 5 | .magnet 6 | a.nav__btn.active(href="/") Home 7 | .magnet 8 | a.nav__btn(href="/about") About 9 | .magnet 10 | a.nav__btn(href="/portfolio") Portfolio 11 | .magnet 12 | a.nav__btn(href="/contact") Contact 13 | button.hamb__btn 14 | .dot 15 | .dot 16 | .dot 17 | 18 | .hamb__menu 19 | .hamb__menu__inner 20 | a.hamb__menu__link.splitter(href="/") Home 21 | a.hamb__menu__link.splitter(href="/about") About Us 22 | a.hamb__menu__link.splitter(href="/portfolio") Portfolio 23 | a.hamb__menu__link.splitter(href="/contact") Contact 24 | -------------------------------------------------------------------------------- /app/pages/Work/index.js: -------------------------------------------------------------------------------- 1 | import Page from "classes/Page"; 2 | import Ukiyo from "ukiyojs"; 3 | 4 | export default class Work extends Page { 5 | constructor() { 6 | super({ 7 | classes: { 8 | active: "work--active" 9 | }, 10 | id: "work", 11 | element: ".work", 12 | elements: { 13 | wrapper: ".work__wrapper", // scroller 14 | home_pics: ".parallax__image" 15 | } 16 | }); 17 | } 18 | 19 | create() { 20 | super.create(); 21 | this.parallax(); 22 | } 23 | 24 | parallax() { 25 | this.imgOne = [...this.elements.home_pics]; 26 | 27 | this.imgOne.forEach((ele) => { 28 | this.parallaxEffect = new Ukiyo(ele, { 29 | speed: 1.5, 30 | scale: 1.5 31 | }); 32 | }); 33 | } 34 | 35 | onResize() { 36 | super.onResize(); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /app/pages/Contact/index.js: -------------------------------------------------------------------------------- 1 | import Page from "classes/Page"; 2 | import Ukiyo from "ukiyojs"; 3 | 4 | export default class Contact extends Page { 5 | constructor() { 6 | super({ 7 | classes: { 8 | active: "contact--active" 9 | }, 10 | id: "contact", 11 | element: ".contact", 12 | elements: { 13 | wrapper: ".contact__wrapper", // scroller 14 | contact_pics: ".parallax__image" 15 | } 16 | }); 17 | } 18 | 19 | create() { 20 | super.create(); 21 | this.parallax(); 22 | } 23 | 24 | parallax() { 25 | this.imgOne = [...this.elements.contact_pics]; 26 | this.imgOne.forEach((el) => { 27 | this.parallaxEffect = new Ukiyo(el, { 28 | speed: 2.5, 29 | scale: 1.25 30 | }); 31 | }); 32 | } 33 | 34 | onResize() { 35 | super.onResize(); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /app/pages/Home/index.js: -------------------------------------------------------------------------------- 1 | import Page from "classes/Page"; 2 | import Ukiyo from "ukiyojs"; 3 | 4 | export default class Home extends Page { 5 | constructor() { 6 | super({ 7 | classes: { 8 | active: "home--active" 9 | }, 10 | id: "home", 11 | element: ".home", 12 | elements: { 13 | wrapper: ".home__wrapper", // scroller 14 | links_wrapper: ".home__title__link", 15 | home_pics: ".parallax__image" 16 | } 17 | }); 18 | } 19 | 20 | create() { 21 | super.create(); 22 | this.parallax(); 23 | } 24 | 25 | parallax() { 26 | this.imgOne = [...this.elements.home_pics]; 27 | 28 | this.imgOne.forEach((ele) => { 29 | this.parallaxEffect = new Ukiyo(ele, { 30 | speed: 2.5, 31 | scale: 1.25 32 | }); 33 | }); 34 | } 35 | 36 | onResize() { 37 | super.onResize(); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /app/utils/dom.js: -------------------------------------------------------------------------------- 1 | import map from "lodash/map"; 2 | 3 | export const findAncestor = (element, selector) => { 4 | while ( 5 | (element = element.parentElement) && 6 | !(element.matches || element.matchesSelector).call(element, selector) 7 | ) { 8 | return element; 9 | } 10 | }; 11 | 12 | export const getOffset = (element, scroll = 0) => { 13 | const box = element.getBoundingClientRect(); 14 | 15 | return { 16 | bottom: box.bottom, 17 | height: box.height, 18 | left: box.left, 19 | top: box.top + scroll, 20 | width: box.width 21 | }; 22 | }; 23 | 24 | export function getIndex(node) { 25 | let index = 0; 26 | 27 | while ((node = node.previousElementSibling)) { 28 | index++; 29 | } 30 | 31 | return index; 32 | } 33 | 34 | export function mapEach(element, callback) { 35 | if (element instanceof window.HTMLElement) { 36 | return [callback(element)]; 37 | } 38 | 39 | return map(element, callback); 40 | } 41 | 42 | export const easing = `cubic-bezier(0.19, 1, 0.22, 1)`; 43 | -------------------------------------------------------------------------------- /offline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Node Template 7 | 33 | 34 | 35 | 36 |
37 |

38 | This experience is only available with internet connection. 39 |

40 |
41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/offline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Node Template 7 | 33 | 34 | 35 | 36 |
37 |

38 | This experience is only available with internet connection. 39 |

40 |
41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /styles/utils/mixins.scss: -------------------------------------------------------------------------------- 1 | %cover { 2 | height: 100%; 3 | left: 0; 4 | position: absolute; 5 | top: 0; 6 | width: 100%; 7 | } 8 | 9 | %center { 10 | align-items: center; 11 | display: flex; 12 | justify-content: center; 13 | } 14 | 15 | %flex { 16 | display: flex; 17 | } 18 | 19 | %flex-row-space { 20 | display: flex; 21 | align-items: center; 22 | justify-content: space-between; 23 | } 24 | 25 | %flex-row-center { 26 | @extend %flex; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | %flex-column-center { 32 | @extend %flex; 33 | flex-direction: column; 34 | align-items: center; 35 | justify-content: center; 36 | } 37 | 38 | %flex-y-center { 39 | @extend %flex; 40 | align-items: center; 41 | } 42 | 43 | %flex-x-center { 44 | @extend %flex; 45 | justify-content: center; 46 | } 47 | 48 | %p-center { 49 | position: absolute; 50 | top: 50%; 51 | left: 50%; 52 | transform: translate(-50%, -50%); 53 | } 54 | 55 | @mixin ratio($height, $width) { 56 | font-size: 0; 57 | overflow: hidden; 58 | position: relative; 59 | 60 | &:after { 61 | content: ""; 62 | display: inline-block; 63 | padding-top: $width / $height * 100%; 64 | width: 100%; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /app/vendors/magnet.js: -------------------------------------------------------------------------------- 1 | import gsap from "gsap"; 2 | import { TweenMax, Power4 } from "gsap/gsap-core"; 3 | 4 | var magnets = document.querySelectorAll(".magnet"); 5 | var strength = 50; 6 | 7 | export default function magnetBtn() { 8 | magnets.forEach((magnet) => { 9 | magnet.addEventListener("mousemove", moveMagnet); 10 | magnet.addEventListener("mouseout", function (event) { 11 | TweenMax.to(event.currentTarget, 1, { x: 0, y: 0, ease: Power4.easeOut }); 12 | }); 13 | }); 14 | 15 | function moveMagnet(event) { 16 | var magnetButton = event.currentTarget; 17 | var bounding = magnetButton.getBoundingClientRect(); 18 | 19 | //console.log(magnetButton, bounding) 20 | 21 | TweenMax.to(magnetButton, 1, { 22 | x: 23 | ((event.clientX - bounding.left) / magnetButton.offsetWidth - 0.5) * 24 | strength, 25 | y: 26 | ((event.clientY - bounding.top) / magnetButton.offsetHeight - 0.5) * 27 | strength, 28 | ease: Power4.easeOut 29 | }); 30 | 31 | //magnetButton.style.transform = 'translate(' + (((( event.clientX - bounding.left)/(magnetButton.offsetWidth))) - 0.5) * strength + 'px,'+ (((( event.clientY - bounding.top)/(magnetButton.offsetHeight))) - 0.5) * strength + 'px)'; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /styles/shared/links.scss: -------------------------------------------------------------------------------- 1 | %link__wrapper { 2 | display: inline-block; 3 | overflow: hidden; 4 | position: relative; 5 | vertical-align: top; 6 | } 7 | 8 | %link__line { 9 | background: currentColor; 10 | bottom: 0; 11 | content: ""; 12 | height: 1px; 13 | left: 0; 14 | position: absolute; 15 | transition: transform 0.7s $ease-in-out; 16 | width: 100%; 17 | } 18 | 19 | %link__line--visible { 20 | transform: scaleX(1); 21 | transform-origin: left center; 22 | } 23 | 24 | %link__line--hidden { 25 | transform: scaleX(0); 26 | transform-origin: right center; 27 | } 28 | 29 | %link { 30 | @extend %link__wrapper; 31 | 32 | display: inline-block; 33 | line-height: 1.05; 34 | padding: 0.4rem 0; 35 | 36 | &:after { 37 | @extend %link__line; 38 | @extend %link__line--hidden; 39 | } 40 | 41 | &:hover, 42 | &:focus { 43 | &:after { 44 | @extend %link__line--visible; 45 | } 46 | } 47 | } 48 | 49 | %link--hidden { 50 | @extend %link__wrapper; 51 | 52 | display: inline-block; 53 | line-height: 1.05; 54 | 55 | &:after { 56 | @extend %link__line; 57 | @extend %link__line--hidden; 58 | } 59 | 60 | &:hover, 61 | &:focus { 62 | &:after { 63 | @extend %link__line--visible; 64 | } 65 | } 66 | } 67 | 68 | .hover__btn { 69 | @extend %link; 70 | } 71 | -------------------------------------------------------------------------------- /app/utils/locoscroll.js: -------------------------------------------------------------------------------- 1 | import LocomotiveScroll from "locomotive-scroll"; 2 | import ScrollTrigger from "gsap/ScrollTrigger"; 3 | import gsap from "gsap"; 4 | gsap.registerPlugin(ScrollTrigger); 5 | 6 | export default function initLocoScroll(wrapper) { 7 | const locoScroll = new LocomotiveScroll({ 8 | el: wrapper, 9 | smooth: true, 10 | smoothMobile: true, 11 | lerp: 0.03, 12 | // reloadOncontextChange: true, 13 | getDirection: true, 14 | // repeat: true, 15 | mobile: { 16 | smooth: true, 17 | inertia: 0.8, 18 | breakpoint: 0, 19 | getDirection: true 20 | }, 21 | tablet: { 22 | smooth: true, 23 | inertia: 0.8, 24 | breakpoint: 0, 25 | getDirection: true 26 | } 27 | }); 28 | 29 | locoScroll.on("scroll", () => ScrollTrigger.update()); 30 | ScrollTrigger.scrollerProxy(wrapper, { 31 | scrollTop(value) { 32 | return arguments.length 33 | ? locoScroll.scrollTo(value, 0, 0) 34 | : locoScroll.scroll.instance.scroll.y; 35 | }, 36 | getBoundingClientRect() { 37 | return { 38 | top: 0, 39 | left: 0, 40 | width: window.innerWidth, 41 | height: window.innerHeight 42 | }; 43 | }, 44 | pinType: wrapper.style.transform ? "transform" : "fixed" 45 | }); 46 | 47 | return locoScroll; 48 | } 49 | -------------------------------------------------------------------------------- /app/classes/Component.js: -------------------------------------------------------------------------------- 1 | import each from "lodash/each"; 2 | import EventEmitter from "events"; 3 | 4 | export default class Component extends EventEmitter { 5 | constructor({ element, elements }) { 6 | super(); 7 | this.selector = element; 8 | this.selectorChildrens = { ...elements }; 9 | this.element = null; 10 | this.elements = {}; 11 | 12 | this.create(); 13 | this.addEventListeners(); 14 | } 15 | 16 | create() { 17 | if (this.selector instanceof window.HTMLElement) { 18 | this.element = this.selector; 19 | } else { 20 | this.element = document.querySelector(this.selector); 21 | } 22 | 23 | this.elements = {}; 24 | 25 | each(this.selectorChildrens, (entry, key) => { 26 | if ( 27 | entry instanceof window.HTMLElement || 28 | entry instanceof window.NodeList || 29 | Array.isArray(entry) 30 | ) { 31 | this.elements[key] = entry; 32 | } else { 33 | this.elements[key] = this.element.querySelectorAll(entry); 34 | if (this.elements[key].length === 0) { 35 | this.elements[key] = null; 36 | } else if (this.elements[key].length === 1) { 37 | this.elements[key] = this.elements[key][0]; 38 | } 39 | } 40 | }); 41 | } 42 | 43 | addEventListeners() {} 44 | 45 | removeEventListeners() {} 46 | } 47 | -------------------------------------------------------------------------------- /app/classes/Animation.js: -------------------------------------------------------------------------------- 1 | import AutoBind from "auto-bind"; 2 | import Prefix from "prefix"; 3 | 4 | export default class Animation { 5 | constructor({ element, elements }) { 6 | AutoBind(this); 7 | 8 | const { animationDelay, animationTarget } = element.dataset; 9 | 10 | this.delay = animationDelay; 11 | this.element = element; 12 | this.elements = elements; 13 | 14 | this.target = animationTarget ? element.closest(animationTarget) : element; 15 | this.transformPrefix = Prefix("transform"); 16 | 17 | this.isVisible = false; 18 | 19 | if ("IntersectionObserver" in window) { 20 | this.createObserver(); 21 | 22 | this.animateOut(); 23 | } else { 24 | this.animateIn(); 25 | } 26 | } 27 | 28 | createObserver() { 29 | this.observer = new window.IntersectionObserver( 30 | (entries, observer) => { 31 | entries.forEach((entry) => { 32 | if (!this.isVisible && entry.isIntersecting) { 33 | this.animateIn(); 34 | observer.unobserve(entry.target); 35 | } else { 36 | this.animateOut(); 37 | } 38 | }); 39 | }, 40 | { 41 | threshold: 0 42 | } 43 | ).observe(this.target); 44 | } 45 | 46 | animateIn() { 47 | this.isVisible = true; 48 | } 49 | 50 | animateOut() { 51 | this.isVisible = false; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /views/partials/preloader.pug: -------------------------------------------------------------------------------- 1 | .preloader 2 | .preloader__wrapper 3 | .preloader__line 4 | p.preloader__text 5 | span.preloader__text__span E 6 | .preloader__line 7 | p.preloader__text 8 | span.preloader__text__span V 9 | .preloader__line 10 | p.preloader__text 11 | span.preloader__text__span I 12 | .preloader__line 13 | p.preloader__text 14 | span.preloader__text__span L 15 | .preloader__line 16 | p.preloader__text 17 | span.preloader__text__span S 18 | .preloader__line 19 | p.preloader__text 20 | span.preloader__text__span T 21 | .preloader__line 22 | p.preloader__text 23 | span.preloader__text__span U 24 | .preloader__line 25 | p.preloader__text 26 | span.preloader__text__span D 27 | .preloader__line 28 | p.preloader__text 29 | span.preloader__text__span I 30 | .preloader__line 31 | p.preloader__text 32 | span.preloader__text__span O 33 | .preloader__number 34 | .preloader__number__text 0% 35 | 36 | .overlay 37 | .overlay__line 38 | .overlay__line 39 | .overlay__line 40 | .overlay__line 41 | .overlay__line 42 | .overlay__line 43 | .overlay__line 44 | .overlay__line 45 | .overlay__line 46 | .overlay__line 47 | -------------------------------------------------------------------------------- /views/base.pug: -------------------------------------------------------------------------------- 1 | block variables 2 | doctype html 3 | html(lang="en") 4 | head 5 | meta(charset="UTF-8") 6 | meta(http-equiv="X-UA-Compatible", content="IE=edge") 7 | meta(name="viewport", content="width=device-width, initial-scale=1.0") 8 | meta(name="msapplication-TileColor" content="#fbf7ec") 9 | meta(name="theme-color" content="#fbf7ec") 10 | meta(property="og:type" content="website") 11 | base(href="/") 12 | title Evil-Studio 13 | 14 | meta(name="description", content="Hello, we are Pethemes. A Creative & digital agency from NY.") 15 | 16 | 17 | 18 | 19 | meta(name="msapplication-TileColor" content="#ffffff") 20 | meta(name="theme-color" content="#ff9b00") 21 | 22 | 23 | meta(property="og:url" content="/evil-studio/") 24 | meta(property="og:title" content="Evil-Studio") 25 | meta(property="og:description" content="Hello, we are Pethemes. A Creative & digital agency from NY.") 26 | 27 | link(href="main.css" rel="stylesheet") 28 | body 29 | include ./partials/preloader 30 | include ./partials/navigation 31 | 32 | .content#content(data-template=template) 33 | block body 34 | 35 | script(src="main.js") 36 | -------------------------------------------------------------------------------- /app.mjs: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import methodOverride from "method-override"; 3 | import compression from "compression"; 4 | import errorHandler from "errorhandler"; 5 | import path from "path"; 6 | import morgan from "morgan"; 7 | 8 | const __dirname = path.resolve(); 9 | const port = process.env.PORT || 9000; 10 | const app = express(); 11 | 12 | // Express configs 13 | app.set("views", path.join(__dirname, "views")); 14 | app.set("view engine", "pug"); 15 | 16 | // Middlewares 17 | app.use( 18 | compression({ 19 | level: 9 20 | }) 21 | ); 22 | app.use(methodOverride()); 23 | app.use(errorHandler()); 24 | app.use(express.static(path.join(__dirname, "public"))); 25 | app.use(morgan("dev")); 26 | 27 | // Home page 28 | app.get("/", (req, res) => { 29 | res.render("pages/home", { 30 | title: "Home" 31 | }); 32 | }); 33 | 34 | // About page 35 | app.get("/about", (req, res) => { 36 | res.render("pages/about", { 37 | title: "About" 38 | }); 39 | }); 40 | 41 | // Portfolio page 42 | app.get("/portfolio", (req, res) => { 43 | return res.render("pages/portfolio", { 44 | title: "Portfolio" 45 | }); 46 | }); 47 | 48 | // Contact page 49 | app.get("/contact", (req, res) => { 50 | return res.render("pages/contact", { 51 | title: "Contact" 52 | }); 53 | }); 54 | 55 | // works page 56 | app.get("/works/:name", (req, res) => { 57 | const name = req.params.name; 58 | res.render(`pages/works/${name}`, { 59 | title: `${name}` 60 | }); 61 | }); 62 | 63 | app.listen(port, () => { 64 | console.log(`Server started at ${port}`); 65 | }); 66 | -------------------------------------------------------------------------------- /app/animations/Paragraph.js: -------------------------------------------------------------------------------- 1 | import each from "lodash/each"; 2 | import Animation from "classes/Animation"; 3 | import { calculate, split } from "utils/text"; 4 | 5 | export default class extends Animation { 6 | constructor({ element }) { 7 | const lines = []; 8 | const paragraphs = element.querySelectorAll("h1, h2, p"); 9 | 10 | if (paragraphs.length !== 0) { 11 | each(paragraphs, (element) => { 12 | split({ element }); 13 | split({ element }); 14 | 15 | lines.push(...element.querySelectorAll("span span")); 16 | }); 17 | } else { 18 | split({ element }); 19 | split({ element }); 20 | 21 | lines.push(...element.querySelectorAll("span span")); 22 | } 23 | 24 | super({ 25 | element, 26 | elements: { 27 | lines 28 | } 29 | }); 30 | 31 | this.onResize(); 32 | 33 | if ("IntersectionObserver" in window) { 34 | this.animateOut(); 35 | } 36 | } 37 | 38 | animateIn() { 39 | super.animateIn(); 40 | 41 | each(this.lines, (line, lineIndex) => { 42 | each(line, (word) => { 43 | word.style.transition = `transform 1.45s ${ 44 | lineIndex * 0.1 45 | }s cubic-bezier(0.77, 0, 0.175, 1)`; 46 | word.style[this.transformPrefix] = "translateY(0)"; 47 | }); 48 | }); 49 | } 50 | 51 | animateOut() { 52 | super.animateOut(); 53 | 54 | each(this.lines, (line) => { 55 | each(line, (word) => { 56 | word.style[this.transformPrefix] = "translateY(150%)"; 57 | }); 58 | }); 59 | } 60 | 61 | onResize() { 62 | this.lines = calculate(this.elements.lines); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /styles/base/reset.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | div, 4 | span, 5 | applet, 6 | object, 7 | iframe, 8 | h1, 9 | h2, 10 | h3, 11 | h4, 12 | h5, 13 | h6, 14 | p, 15 | blockquote, 16 | pre, 17 | a, 18 | abbr, 19 | acronym, 20 | address, 21 | big, 22 | cite, 23 | code, 24 | del, 25 | dfn, 26 | em, 27 | img, 28 | ins, 29 | kbd, 30 | q, 31 | s, 32 | samp, 33 | small, 34 | strike, 35 | strong, 36 | sub, 37 | sup, 38 | tt, 39 | var, 40 | b, 41 | u, 42 | i, 43 | center, 44 | dl, 45 | dt, 46 | dd, 47 | ol, 48 | ul, 49 | li, 50 | fieldset, 51 | form, 52 | label, 53 | legend, 54 | table, 55 | caption, 56 | tbody, 57 | tfoot, 58 | thead, 59 | tr, 60 | th, 61 | td, 62 | article, 63 | aside, 64 | canvas, 65 | details, 66 | embed, 67 | figure, 68 | figcaption, 69 | footer, 70 | header, 71 | hgroup, 72 | menu, 73 | nav, 74 | output, 75 | ruby, 76 | section, 77 | summary, 78 | time, 79 | mark, 80 | audio, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | 90 | article, 91 | aside, 92 | details, 93 | figcaption, 94 | figure, 95 | footer, 96 | header, 97 | hgroup, 98 | menu, 99 | nav, 100 | section { 101 | display: block; 102 | } 103 | 104 | body { 105 | line-height: 1; 106 | } 107 | 108 | ol, 109 | ul { 110 | list-style: none; 111 | } 112 | 113 | blockquote, 114 | q { 115 | quotes: none; 116 | } 117 | 118 | blockquote:before, 119 | blockquote:after, 120 | q:before, 121 | q:after { 122 | content: ""; 123 | content: none; 124 | } 125 | 126 | table { 127 | border-collapse: collapse; 128 | border-spacing: 0; 129 | } 130 | 131 | ::-webkit-scrollbar { 132 | display: none; 133 | } 134 | -------------------------------------------------------------------------------- /views/partials/footer.pug: -------------------------------------------------------------------------------- 1 | footer.footer__wrapper 2 | a.footer__content__tail__wrapper(href="/") 3 | p.footer__content__tail Contact Us 4 | .footer__content__wrapper 5 | .footer__content__inner__wrapper 6 | .footer__content__left__side 7 | a.footer__content__logo__btn(href="/" data-animation="paragraph") EVIL-STUDIO 8 | p.footer__content__logo__copyright(data-animation="paragraph") ©2022 9 | .footer__content__right__side 10 | ul.footer__link__list 11 | li.footer__link__list__item 12 | a.footer__link(href="/" data-animation="paragraph") Facebook 13 | li.footer__link__list__item 14 | a.footer__link(href="/" data-animation="paragraph") Instagram 15 | li.footer__link__list__item 16 | a.footer__link(href="/" data-animation="paragraph") Twitter 17 | li.footer__link__list__item 18 | a.footer__link(href="/" data-animation="paragraph") Linkdin 19 | li.footer__link__list__item 20 | a.footer__link(href="/" data-animation="paragraph") Behance 21 | ul.footer__list 22 | li.footer__list__item 23 | p.footer__list__paragraph(data-animation="paragraph") #15–7015 Tranmere Dr 24 | p.footer__list__paragraph(data-animation="paragraph") Mississauga, ON L5S 1T7 25 | p.footer__list__paragraph(data-animation="paragraph") +1 985 256 98 98 26 | 27 | .footer__content__cr 28 | p.footer__content__cr__text ©Copyright 2019-2026 Reserved by Evil-Studio 29 | p.footer__content__cr__text Design & Code by : #[a.footer__content__cr__link(href="https://github.com/MAGGIx1404" target="_blank") @Maggi] 30 | -------------------------------------------------------------------------------- /app/components/Transition.js: -------------------------------------------------------------------------------- 1 | import GSAP from "gsap"; 2 | 3 | export default class { 4 | constructor() { 5 | this.element = document.createElement("canvas"); 6 | this.element.className = "transition"; 7 | this.element.height = window.innerHeight * window.devicePixelRatio; 8 | this.element.width = window.innerWidth * window.devicePixelRatio; 9 | 10 | this.context = this.element.getContext("2d"); 11 | 12 | this.progress = 0; 13 | 14 | document.body.appendChild(this.element); 15 | } 16 | 17 | show({ color }) { 18 | this.color = color; 19 | 20 | return new Promise((resolve) => { 21 | GSAP.set(this.element, { rotation: 0 }); 22 | 23 | GSAP.to(this, { 24 | duration: 1.5, 25 | ease: "expo.inOut", 26 | onComplete: resolve, 27 | onUpdate: this.onUpdate.bind(this), 28 | progress: 1 29 | }); 30 | }); 31 | } 32 | 33 | hide() { 34 | return new Promise((resolve) => { 35 | GSAP.set(this.element, { rotation: 180 }); 36 | 37 | GSAP.to(this, { 38 | duration: 1.5, 39 | ease: "expo.inOut", 40 | onComplete: resolve, 41 | onUpdate: this.onUpdate.bind(this), 42 | progress: 0 43 | }); 44 | }); 45 | } 46 | 47 | onUpdate() { 48 | this.context.clearRect(0, 0, this.element.width, this.element.height); 49 | this.context.save(); 50 | this.context.beginPath(); 51 | 52 | this.widthSegments = Math.ceil(this.element.width / 40); 53 | this.context.moveTo(this.element.width, this.element.height); 54 | this.context.lineTo(0, this.element.height); 55 | 56 | const t = (1 - this.progress) * this.element.height; 57 | const amplitude = 250 * Math.sin(this.progress * Math.PI); 58 | 59 | this.context.lineTo(0, t); 60 | 61 | for (let index = 0; index <= this.widthSegments; index++) { 62 | const n = 40 * index; 63 | const r = t - Math.sin((n / this.element.width) * Math.PI) * amplitude; 64 | 65 | this.context.lineTo(n, r); 66 | } 67 | 68 | this.context.fillStyle = this.color; 69 | this.context.fill(); 70 | this.context.restore(); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "work-1", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "concurrently --kill-others \"npm run backend:development\" \"npm run frontend:development\"", 8 | "backend:build": "node app.mjs", 9 | "start": "npm run backend:build", 10 | "backend:development": "nodemon app.mjs", 11 | "frontend:build": "webpack --progress --config webpack.config.build.js", 12 | "frontend:development": "cross-env NODE_ENV=dev webpack --progress --config webpack.config.development.js --watch", 13 | "test": "node -c *.js", 14 | "postinstall": "npm run frontend:build" 15 | }, 16 | "engines": { 17 | "node": "14.17.1", 18 | "npm": "6.14.13" 19 | }, 20 | "author": "", 21 | "license": "ISC", 22 | "dependencies": { 23 | "body-parser": "^1.19.2", 24 | "errorhandler": "^1.5.1", 25 | "express": "^4.17.3", 26 | "lodash": "^4.17.21", 27 | "method-override": "^3.0.0", 28 | "morgan": "^1.10.0", 29 | "nodemon": "^2.0.15", 30 | "pug": "^3.0.2", 31 | "ukiyojs": "^3.0.0" 32 | }, 33 | "devDependencies": { 34 | "@babel/core": "^7.17.7", 35 | "auto-bind": "^5.0.1", 36 | "autoprefix": "^1.0.1", 37 | "autoprefixer": "^10.4.3", 38 | "babel-loader": "^8.2.3", 39 | "browser-detect": "^0.2.28", 40 | "browser-sync": "^2.27.9", 41 | "browser-sync-webpack-plugin": "^2.3.0", 42 | "clean-webpack-plugin": "^4.0.0", 43 | "cname-webpack-plugin": "^3.0.0", 44 | "concurrently": "^7.0.0", 45 | "copy-webpack-plugin": "^10.2.4", 46 | "css-loader": "^6.7.1", 47 | "file-loader": "^6.2.0", 48 | "gsap": "^3.9.1", 49 | "html-webpack-plugin": "^5.5.0", 50 | "include-media": "^1.4.10", 51 | "locomotive-scroll": "^4.1.4", 52 | "mini-css-extract-plugin": "^2.6.0", 53 | "node-sass": "^7.0.1", 54 | "nodelist-foreach-polyfill": "^1.2.0", 55 | "postcss": "^8.4.11", 56 | "postcss-loader": "^6.2.1", 57 | "prefix": "^1.0.0", 58 | "pug-loader": "^2.4.0", 59 | "sass-loader": "^12.6.0", 60 | "splitting": "^1.0.6", 61 | "webpack": "^5.70.0", 62 | "webpack-cli": "^4.9.2", 63 | "webpack-dev-server": "^4.7.4", 64 | "webpack-merge": "^5.8.0", 65 | "whatwg-fetch": "^3.6.2" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /views/pages/contact.pug: -------------------------------------------------------------------------------- 1 | extends ../base.pug 2 | 3 | block variables 4 | - var template = 'contact' 5 | 6 | block body 7 | .contact(data-background="" data-color="") 8 | canvas.webgl-container 9 | //- Scroll wrapper 10 | .contact__wrapper 11 | .contact__banner__wrapper 12 | .contact__banner__picture__wrapper__2 13 | .contact__banner__picture__wrapper__2__inner 14 | figure.banner__picture__wrapper__inner 15 | img.banner__picture.parallax__image(data-src="/contact_banner.jpg", alt="error") 16 | .contact__banner__wrapper__inner 17 | .contact__banner__title__wrapper 18 | h1.contact__banner__title.splitter Get in touch! 19 | .contact__banner__main__wrapper 20 | .contact__banner__main__wrapper__inner 21 | .contact__banner__form__wrapper 22 | h4.contact__form__title Hi. Tell us about your project. #[br] Fill the form below; 23 | form.contact__form(action="/") 24 | input.contact__form__company__name(type="text" placeholder="Company Name" name="company" required) 25 | input.contact__form__name(type="text" placeholder="Your Name" name="name" required) 26 | input.contact__form__number(type="text" placeholder="Phone Number" name="number" required) 27 | input.contact__form__email(type="text" placeholder="E-mail" name="mail" required) 28 | input.contact__form__subject(type="text" placeholder="Subject" name="subject" required) 29 | textarea#contact__form__content__wrapper.contact__form__content__wrapper(name="form_content" placeholder="Your Message" , cols="30", rows="10") 30 | input#submit__btn(type="submit", value="SUBMIT") 31 | .contact__banner__picture__wrapper 32 | figure.contact__banner__picture__wrapper__inner 33 | img.contact__banner__picture.parallax__image(data-src="/contact_screen.jpg", alt="Contact Picture") 34 | 35 | include ../partials/footer 36 | -------------------------------------------------------------------------------- /styles/components/preloader.scss: -------------------------------------------------------------------------------- 1 | .preloader { 2 | @extend %cover; 3 | @extend %center; 4 | background-color: $color-black; 5 | color: $color-white; 6 | text-align: center; 7 | z-index: 201; 8 | will-change: transform; 9 | display: flex; 10 | align-items: flex-end; 11 | justify-content: flex-start; 12 | padding: 5vw; 13 | position: relative; 14 | 15 | .preloader__wrapper { 16 | position: absolute; 17 | width: 100vw; 18 | height: 100vh; 19 | overflow: hidden; 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | top: 0; 24 | left: 0; 25 | 26 | .preloader__line { 27 | flex: 0 0 10%; 28 | max-width: 10%; 29 | width: 100%; 30 | height: 100vh; 31 | background: $color-theme; 32 | display: flex; 33 | align-items: center; 34 | justify-content: center; 35 | 36 | p { 37 | overflow: hidden; 38 | position: relative; 39 | width: 100%; 40 | height: 35rem; 41 | display: flex; 42 | align-items: center; 43 | justify-content: center; 44 | 45 | @include media(" { 26 | element.src = element.getAttribute("data-src"); 27 | element.onload = () => { 28 | element.classList.add("loaded"); 29 | this.onAssetLoaded(); 30 | }; 31 | }); 32 | } 33 | 34 | onAssetLoaded() { 35 | this.length += 1; 36 | const percent = this.length / this.elements.images.length; 37 | 38 | this.elements.numberText.innerHTML = `${Math.round(percent * 100)}%`; 39 | 40 | if (percent === 1) { 41 | this.onLoaded(); 42 | } 43 | } 44 | 45 | onLoaded() { 46 | return new Promise((resolve) => { 47 | this.animateOut = gsap.timeline({ 48 | delay: 1 49 | }); 50 | this.animateOut.to(this.elements.numberText, { 51 | y: "100%", 52 | stagger: "0.1", 53 | duration: 1.5, 54 | ease: "expo.out" 55 | }); 56 | this.animateOut.to( 57 | this.elements.preloader_span, 58 | 1, 59 | { 60 | y: "0", 61 | stagger: 0.1, 62 | ease: "Power2.easeIn" 63 | }, 64 | "-=1.5" 65 | ); 66 | this.animateOut.to(this.elements.preloader_span, 1, { 67 | x: "200%", 68 | stagger: 0.1, 69 | ease: "Power2.easeIn" 70 | }); 71 | this.animateOut.to( 72 | this.elements.preloader_line, 73 | 1, 74 | { 75 | y: "100%", 76 | opacity: 1, 77 | stagger: 0.1, 78 | ease: "Power2.easeIn" 79 | }, 80 | "-=1" 81 | ); 82 | this.animateOut.to(this.element, { 83 | opacity: 0, 84 | duration: 1, 85 | ease: "expo.out" 86 | }); 87 | 88 | this.animateOut.call(() => { 89 | this.emit("completed"); 90 | }); 91 | }); 92 | } 93 | 94 | destroy() { 95 | this.element.parentNode.removeChild(this.element); 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /views/pages/works/emerald_planet.pug: -------------------------------------------------------------------------------- 1 | extends ../../base.pug 2 | include ./work.pug 3 | 4 | block variables 5 | - var template = 'work' 6 | 7 | block body 8 | +template({ 9 | id: "emerald_planet", 10 | banner: { 11 | pic: "https://images.prismic.io/alioth/c43380d2-cabf-4971-895f-4c90a252c8f5_3.webp?auto=compress,format", 12 | title: "Emerald Planet", 13 | role: "Photography", 14 | }, 15 | info: { 16 | date: "Last Penya - 2017", 17 | text: "At the edge of forever hydrogen atoms tendrils of gossamer clouds rich in mystery circumnavigated Orion's sword. Dream of the mind's eye paroxysm of global death Sea of Tranquility the sky calls to us Sea of Tranquility another world. Vastness is bearable only through love invent the universe not a sunrise but a galaxyrise star stuff harvesting." 18 | }, 19 | picsOne: { 20 | 1: "https://images.prismic.io/alioth/7f71f546-c345-498c-9be8-f53b79d6280f_emerald_1.jpg?auto=compress,format", 21 | 2: "https://images.prismic.io/alioth/acd1ee30-60bf-46b5-a534-a333e79b5fbc_emerald_2.jpg?auto=compress,format", 22 | }, 23 | work: { 24 | text_one: "Great turbulent clouds cosmic ocean cosmos globular star cluster hydrogen atoms gathered by gravity. How far away as a patch of light how far away made in the interiors of collapsing stars extraplanetary a very small stage in a vast cosmic arena. Concept of the number one billions upon billions encyclopaedia galactica encyclopaedia galactic are creatures of the cosmos rich in heavy atoms.", 25 | text_two: "Patch of Light", 26 | text_three: "Encyclopaedia galactica cosmic fugue corpus callosum the ash of stellar alchemy tingling of the spine explorations. Euclid white dwarf the sky calls to us hydrogen atoms emerged into consciousness extraordinary claims require extraordinary evidence? Paroxysm of global death citizens of distant epochs Sea of Tranquility a very small stage in a vast cosmic arena emerged into consciousness a still more glorious dawn awaits." 27 | }, 28 | extra: "https://images.prismic.io/alioth/cef44e60-31ce-44c6-95d5-2d08414e5bb1_emerald_3.jpg?auto=compress,format", 29 | picsTwo: { 30 | 1: "https://images.prismic.io/alioth/a14a55f8-d748-437a-9e20-95759f2c69a0_emerald_4.jpg?auto=compress,format", 31 | 2: "https://images.prismic.io/alioth/e508f27b-071a-4584-845d-ad11f89aca8e_emerald_5.jpg?auto=compress,format", 32 | }, 33 | next: { 34 | pic: "https://images.prismic.io/alioth/50624eb8-7e3e-4975-bc7b-91c926f96795_2.jpg?auto=compress,format", 35 | title: "The Secrets", 36 | id: "the_secrets" 37 | } 38 | }) 39 | -------------------------------------------------------------------------------- /views/pages/works/olivia_arnold.pug: -------------------------------------------------------------------------------- 1 | extends ../../base.pug 2 | include ./work.pug 3 | 4 | block variables 5 | - var template = 'work' 6 | 7 | block body 8 | +template({ 9 | id: "olivia_arnold", 10 | banner: { 11 | pic: "https://images.prismic.io/alioth/6031400f-2683-47d6-85b9-526fdadf6797_5.jpg?auto=compress,format", 12 | title: "Olivia Arnold", 13 | role: "Photography" 14 | }, 15 | info: { 16 | date: "Zeina - 2020", 17 | text: "Gathered by gravity take root and flourish of brilliant syntheses billions upon billions white dwarf billions upon billions? Stirred by starlight Hypatia emerged into consciousness as a patch of light stirred by starlight the carbon in our apple pies? Rich in heavy atoms preserve and cherish that pale blue dot permanence of the stars realm of the galaxies." 18 | }, 19 | picsOne: { 20 | 1: "https://images.prismic.io/alioth/d4aeeffc-30bf-48c7-b117-429e3374b930_olivia_1.jpg?auto=compress,format", 21 | 2: "https://images.prismic.io/alioth/517c511b-4f62-4161-8fbf-2e7844b27124_olivia_2.jpg?auto=compress,format", 22 | }, 23 | work: { 24 | text_one: "Great turbulent clouds cosmic ocean cosmos globular star cluster hydrogen atoms gathered by gravity. How far away as a patch of light how far away made in the interiors of collapsing stars extraplanetary a very small stage in a vast cosmic arena. Concept of the number one billions upon billions encyclopaedia galactica encyclopaedia galactica are creatures of the cosmos rich in heavy atoms.", 25 | text_two: "The Interiors", 26 | text_three: "Permanence of the stars great turbulent clouds Flatland Cambrian explosion paroxysm of global death Vangelis. Colonies realm of the galaxies vastness is bearable only through love emerged into consciousness intelligent beings shores of the cosmic ocean. Hearts of the stars the carbon in our apple pies vastness is bearable only through love muse about something incredible is waiting to be known encyclopaedia galactica? Emerged into consciousness the ash of stellar alchemy a still more glorious dawn awaits a still more glorious dawn awaits courage of our questions star stuff harvesting star light?" 27 | }, 28 | extra: "https://images.prismic.io/alioth/497560a9-6fec-41ba-9e79-2c0086fdbf15_olivia_3.jpg?auto=compress,format", 29 | picsTwo: { 30 | 1: "https://images.prismic.io/alioth/2bddd481-62c9-4aa2-9116-1bd91c2a0873_olivia_4.jpg?auto=compress,format", 31 | 2: "https://images.prismic.io/alioth/05905351-535a-41aa-8e7c-715c69277df3_olivia_5.jpg?auto=compress,format" 32 | }, 33 | next: { 34 | pic: "https://images.prismic.io/alioth/2a71a6bc-0230-49c7-9cf7-948fd733b354_4.jpg?auto=compress,format", 35 | title: "The Silks", 36 | id: "the_silks" 37 | } 38 | }) 39 | -------------------------------------------------------------------------------- /views/pages/works/shiny_diamond.pug: -------------------------------------------------------------------------------- 1 | extends ../../base.pug 2 | include ./work.pug 3 | 4 | block variables 5 | - var template = 'work' 6 | 7 | block body 8 | +template({ 9 | id: "shiny_diamond", 10 | banner: { 11 | pic: "https://images.prismic.io/alioth/705958c2-7081-40b0-ac32-0421d8b986ab_7.jpg?auto=compress,format&rect=1,0,1917,1279&w=1920&h=1281", 12 | title: "Shiny Diamond", 13 | role: "Video Production" 14 | }, 15 | info: { 16 | date: "Beat - 2014", 17 | text: "From which we spring not a sunrise but a galaxyrise across the centuries Tunguska event Euclid descended from astronomers? Muse about emerged into consciousness vanquish the impossible the sky calls to us Orion's sword venture. Astonishment rings of Uranus stirred by starlight venture two ghostly white figures in coveralls and helmets." 18 | }, 19 | picsOne: { 20 | 1: "https://images.prismic.io/alioth/fd30665c-baf3-4cb2-b15f-54fc0a0ab823_shiny_1.jpg?auto=compress,format", 21 | 2: "https://images.prismic.io/alioth/c34ebfe7-292e-4434-b85b-33b5707d727e_shiny_2.jpg?auto=compress,format", 22 | 3: "https://images.prismic.io/alioth/f062e844-d71a-4873-9c74-699d3404b7a9_shiny_3.jpg?auto=compress,format&rect=1,0,1917,1279&w=1920&h=1281", 23 | }, 24 | work: { 25 | text_one: "Great turbulent clouds cosmic ocean cosmos globular star cluster hydrogen atoms gathered by gravity. How far away as a patch of light how far away made in the interiors of collapsing stars extraplanetary a very small stage in a vast cosmic arena. Concept of the number one billions upon billions encyclopaedia galactica encyclopaedia galactic are creatures of the cosmos rich in heavy atoms.", 26 | text_two: "Production", 27 | text_three: "Culture colonies explorations emerged into consciousness across the centuries venture. Dream of the mind's eye Jean-François Champollion something incredible is waiting to be known circumnavigated stirred by starlight how far away. Finite but unbounded great turbulent clouds two ghostly white figures in coveralls and helmets are softly dancing how far away gathered by gravity courage of our questions." 28 | }, 29 | extra: "https://images.prismic.io/alioth/6f5d1a89-1a2a-444a-9bc0-accac9833a4a_shiny_4.jpg?auto=compress,format", 30 | picsTwo: { 31 | 1: "https://images.prismic.io/alioth/0c62ca12-58e1-4b70-b5db-9a0f9b95e52a_shiny_5.jpg?auto=compress,format&rect=1,0,1917,1279&w=1920&h=1281", 32 | 2: "https://images.prismic.io/alioth/d72231f3-1d17-4d86-8aac-fb39c3a26f28_shiny_6.jpg?auto=compress,format&rect=1,0,1917,1279&w=1920&h=1281" 33 | }, 34 | next: { 35 | pic: "https://images.prismic.io/alioth/3ff548be-b1e0-4549-aca0-3c2df8d3424f_6.jpg?auto=compress,format", 36 | title: "Olivia Arnold", 37 | id: "olivia_arnold" 38 | } 39 | }) 40 | -------------------------------------------------------------------------------- /views/pages/works/the_secrets.pug: -------------------------------------------------------------------------------- 1 | extends ../../base.pug 2 | include ./work.pug 3 | 4 | block variables 5 | - var template = 'work' 6 | 7 | block body 8 | +template({ 9 | id: "the_secrets", 10 | banner: { 11 | pic: "https://images.prismic.io/alioth/50624eb8-7e3e-4975-bc7b-91c926f96795_2.jpg?auto=compress,format", 12 | title: "The Secrets", 13 | role: "Art Direction", 14 | }, 15 | info: { 16 | date: "Route NY - 2019", 17 | text: "Made in the interiors of collapsing stars muse about encyclopaedia galactica emerged into consciousness ship of the imagination as a patch of light. From which we spring hearts of the stars the only home we've ever known concept of the number one vastness is bearable only through love rings of Uranus? Great turbulent clouds not a sunrise." 18 | }, 19 | picsOne: { 20 | 1: "https://images.prismic.io/alioth/3d419701-0bc0-4d62-882b-487379e7f4d0_secret_1.jpg?auto=compress,format", 21 | 2: "https://images.prismic.io/alioth/afc57af0-75ef-46d0-924f-5c597311bb90_secret_2.jpg?auto=compress,format", 22 | 3: "https://images.prismic.io/alioth/481d14d4-0179-49e5-9926-07c5a1ab6fb9_secret_3.jpg?auto=compress,format", 23 | 4: "https://images.prismic.io/alioth/7cde891e-378c-4ea5-9b48-7d6e92e888d8_secret_4.jpg?auto=compress,format" 24 | }, 25 | work: { 26 | text_one: "Great turbulent clouds cosmic ocean cosmos globular star cluster hydrogen atoms gathered by gravity. How far away as a patch of light how far away made in the interiors of collapsing stars extraplanetary a very small stage in a vast cosmic arena. Concept of the number one billions upon billions encyclopaedia galactica encyclopaedia galactic are creatures of the cosmos rich in heavy atoms.", 27 | text_two: "Secrets", 28 | text_three: "Encyclopaedia galactica cosmic fugue corpus callosum the ash of stellar alchemy tingling of the spine explorations. Euclid white dwarf the sky calls to us hydrogen atoms emerged into consciousness extraordinary claims require extraordinary evidence? Paroxysm of global death citizens of distant epochs Sea of Tranquility a very small stage in a vast cosmic arena emerged into consciousness a still more glorious dawn awaits." 29 | }, 30 | extra: "https://images.prismic.io/alioth/757452f5-745d-4260-8328-cb14d581ea4e_secret_5.jpg?auto=compress,format", 31 | picsTwo: { 32 | 1: "https://images.prismic.io/alioth/56fb8056-eecd-4af1-9e06-e3727293dfe2_secret_6.jpg?auto=compress,format", 33 | 2: "https://images.prismic.io/alioth/dde33549-9579-49fd-966f-b955cd0defb3_secret_7.jpg?auto=compress,format", 34 | }, 35 | next: { 36 | pic: "https://images.prismic.io/alioth/ac17c5b5-4c5f-42d2-9472-235acdad2acf_1.jpg?auto=compress,format", 37 | title: "Spirits of illusion", 38 | id: "spirits_of_illusion" 39 | } 40 | }) 41 | -------------------------------------------------------------------------------- /views/pages/works/the_silks.pug: -------------------------------------------------------------------------------- 1 | extends ../../base.pug 2 | include ./work.pug 3 | 4 | block variables 5 | - var template = 'work' 6 | 7 | block body 8 | +template({ 9 | id: "the_silks", 10 | banner: { 11 | pic: "https://images.prismic.io/alioth/9e503936-1f7d-4d78-bd91-ff35108f0121_silk_banner.jpg?auto=compress,format", 12 | title: "The Silks", 13 | role: "Branding", 14 | }, 15 | info: { 16 | date: "Naila - 2017", 17 | text: "From which we spring not a sunrise but a galaxyrise across the centuries Tunguska event Euclid descended from astronomers? Muse about emerged into consciousness vanquish the impossible the sky calls to us Orion's sword venture. Astonishment rings of Uranus stirred by starlight venture two ghostly white figures in coveralls and helmets." 18 | }, 19 | picsOne: { 20 | 1: "https://images.prismic.io/alioth/43b30cb5-51fd-46be-a580-51d7e8b3d242_silk_1.jpg?auto=compress,format", 21 | 2: "https://images.prismic.io/alioth/df832f28-b809-4d3e-a98c-0fbb31adb1da_silk_2.jpg?auto=compress,format", 22 | 3: "https://images.prismic.io/alioth/4c739159-da16-46c1-a4c0-0cac665d9685_silk_4.webp?auto=compress,format", 23 | 4: "https://images.prismic.io/alioth/ccf40333-264e-4ee9-950e-3bc1f55a3801_rainbow_4.webp?auto=compress,format" 24 | }, 25 | work: { 26 | text_one: "Citizens of distant epochs stirred by starlight white dwarf Sea of Tranquility a still more glorious dawn awaits tendrils of gossamer clouds? Extraordinary claims require extraordinary evidence something incredible is waiting to be known prime number prime number at the edge of forever two ghostly white figures in coveralls and helmets are softly dancing. Two ghostly white figures in coveralls and helmets are softly dancing great turbulent clouds muse about with pretty stories for which there's little good evidence take root and flourish a mote of dust suspended in a sunbeam.", 27 | text_two: "Patch of Light", 28 | text_three: "Culture colonies explorations emerged into consciousness across the centuries venture. Dream of the mind's eye Jean-François Champollion something incredible is waiting to be known circumnavigated stirred by starlight how far away. Finite but unbounded great turbulent clouds two ghostly white figures in coveralls and helmets are softly dancing how far away gathered by gravity courage of our questions." 29 | }, 30 | extra: "https://images.prismic.io/alioth/e15fe41c-0bb2-4505-8fbd-f385d0f287b7_silk_5.jpg?auto=compress,format", 31 | picsTwo: { 32 | 1: "https://images.prismic.io/alioth/9f23e107-385b-45b6-afb2-8189eef15d6c_silk_6.jpg?auto=compress,format", 33 | 2: "https://images.prismic.io/alioth/ed9db9ef-74cd-436c-ac57-3e1022c395f6_silk_7.jpg?auto=compress,format" 34 | }, 35 | next: { 36 | pic: "https://images.prismic.io/alioth/6031400f-2683-47d6-85b9-526fdadf6797_5.jpg?auto=compress,format", 37 | title: "Rainbows", 38 | id: "rainbows" 39 | } 40 | }) 41 | -------------------------------------------------------------------------------- /views/pages/works/work.pug: -------------------------------------------------------------------------------- 1 | mixin template({id, banner, info, picsOne, work, extra, picsTwo, next}) 2 | .work(data-background="" data-color="") 3 | canvas.webgl-container 4 | //- Scroll wrapper 5 | .work__wrapper 6 | .work__banner 7 | .work__banner__bg__wrapper 8 | figure.work__banner__picture__wrapper 9 | img.work__banner__picture.parallax__image(data-src=`${banner.pic}`, alt="IMAGE" crossorigin="anonymous") 10 | .work__banner__titles__wrapper 11 | h1.work__banner__title.splitter=banner.title 12 | h4.work__banner__role.splitter=banner.role 13 | //- info 14 | .work__info__wrapper 15 | .work__info__wrapper__inner 16 | .work__info__left 17 | p.work__info__text(data-animation="paragraph")= info.date 18 | .work__info__right 19 | p.work__info__text(data-animation="paragraph")= info.text 20 | //- Main Pictures 21 | .work__pictures__wrapper 22 | .work__pictures__wrapper__inner 23 | //- from server 24 | each link in picsOne 25 | figure.work__picture__wrapper 26 | img.work__picture.parallax__image(data-src=`${link}`, alt="IMAGE" crossorigin="anonymous") 27 | //- Content 28 | .work__content__wrapper 29 | .work__content__wrapper__inner 30 | p.work__content__text(data-animation="paragraph")= work.text_one 31 | //- work screen 32 | .work__screen__wrapper 33 | figure.work__screen__wrapper__inner 34 | img.work__screen__picture.parallax__image(data-src=`${extra}`, alt="Image") 35 | 36 | //- info-2 37 | .work__info__wrapper 38 | .work__info__wrapper__inner 39 | .work__info__left 40 | p.work__info__text(data-animation="paragraph")= work.text_two 41 | .work__info__right 42 | p.work__info__text(data-animation="paragraph")= work.text_three 43 | 44 | //- Main Pictures 2 45 | .work__pictures__wrapper 46 | .work__pictures__wrapper__inner 47 | each link in picsTwo 48 | figure.work__picture__wrapper 49 | img.work__picture.parallax__image(data-src=`${link}`, alt="IMAGE" crossorigin="anonymous") 50 | 51 | //- next section 52 | .work__next__wrapper 53 | figure.work__next__bg__wrapper 54 | img.work__next__bg__picture.parallax__image(data-src=`${next.pic}`, alt="IMAGE") 55 | .work__next__wrapper__inner 56 | h6.work__next__title(data-animation="paragraph") Next Project 57 | a.work__next__btn(href=`/works/${next.id}` data-animation="paragraph")= next.title 58 | 59 | include ../../partials/footer 60 | -------------------------------------------------------------------------------- /views/pages/works/rainbows.pug: -------------------------------------------------------------------------------- 1 | extends ../../base.pug 2 | include ./work.pug 3 | 4 | block variables 5 | - var template = 'work' 6 | 7 | block body 8 | +template({ 9 | id: "rainbows", 10 | banner: { 11 | pic: "https://images.prismic.io/alioth/6031400f-2683-47d6-85b9-526fdadf6797_5.jpg?auto=compress,format", 12 | title: "Rainbows", 13 | role: "Photography" 14 | }, 15 | info: { 16 | date: "Strawbery - 2015", 17 | text: "From which we spring not a sunrise but a galaxyrise across the centuries Tunguska event Euclid descended from astronomers? Muse about emerged into consciousness vanquish the impossible the sky calls to us Orion's sword venture. Astonishment rings of Uranus stirred by starlight venture two ghostly white figures in coveralls and helmets." 18 | }, 19 | picsOne: { 20 | 1: "https://images.prismic.io/alioth/1a4d2390-be5e-41ee-8d32-421485658e88_rainbow_1.webp?auto=compress,format", 21 | 2: "https://images.prismic.io/alioth/2a04ae8f-1429-42aa-9b5a-e35679b6855e_rainbow_2.webp?auto=compress,format", 22 | 3: "https://images.prismic.io/alioth/dd4491be-753c-4967-a1eb-5db1c72dafde_rainbow_3.webp?auto=compress,format", 23 | 4: "https://images.prismic.io/alioth/ccf40333-264e-4ee9-950e-3bc1f55a3801_rainbow_4.webp?auto=compress,format" 24 | }, 25 | work: { 26 | text_one: "Citizens of distant epochs stirred by starlight white dwarf Sea of Tranquility a still more glorious dawn awaits tendrils of gossamer clouds? Extraordinary claims require extraordinary evidence something incredible is waiting to be known prime number prime number at the edge of forever two ghostly white figures in coveralls and helmets are softly dancing. Two ghostly white figures in coveralls and helmets are softly dancing great turbulent clouds muse about with pretty stories for which there's little good evidence take root and flourish a mote of dust suspended in a sunbeam.", 27 | text_two: "Patch of Light", 28 | text_three: "Culture colonies explorations emerged into consciousness across the centuries venture. Dream of the mind's eye Jean-François Champollion something incredible is waiting to be known circumnavigated stirred by starlight how far away. Finite but unbounded great turbulent clouds two ghostly white figures in coveralls and helmets are softly dancing how far away gathered by gravity courage of our questions." 29 | }, 30 | extra: "https://images.prismic.io/alioth/6031400f-2683-47d6-85b9-526fdadf6797_5.jpg?auto=compress,format", 31 | picsTwo: { 32 | 1: "https://images.prismic.io/alioth/7a7cb2f1-a20b-47d9-8513-cd1e37ded86f_rainbow_5.webp?auto=compress,format", 33 | 2: "https://images.prismic.io/alioth/952b2343-c742-423e-97ab-08f83b9c3c2d_rainbow_6.webp?auto=compress,format" 34 | }, 35 | next: { 36 | pic: "https://images.prismic.io/alioth/c43380d2-cabf-4971-895f-4c90a252c8f5_3.webp?auto=compress,format", 37 | title: "Emerald Planet", 38 | id: "emerald_planet" 39 | } 40 | }) 41 | -------------------------------------------------------------------------------- /views/pages/portfolio.pug: -------------------------------------------------------------------------------- 1 | extends ../base.pug 2 | 3 | block variables 4 | - var template = 'portfolio' 5 | 6 | block body 7 | .portfolio(data-background="" data-color="") 8 | canvas.webgl-container 9 | img(data-src="/1.jpg", alt="") 10 | //- Scroll wrapper 11 | .portfolio__wrapper 12 | .portfolio__banner 13 | .portfolio__menu 14 | ul.portfolio__menu__wrapper 15 | li.portfolio__menu__item 16 | a.portfolio__menu__item__link.splitter(href="/works/spirits_of_illusion") Spirits of Illusion 17 | figure.portfolio__menu__item__image__wrapper 18 | img.portfolio__menu__item__image(data-src="/cases/1.jpg", alt="error") 19 | li.portfolio__menu__item 20 | a.portfolio__menu__item__link.splitter(href="/works/the_secrets") The Secrets 21 | figure.portfolio__menu__item__image__wrapper 22 | img.portfolio__menu__item__image(data-src="/cases/2.jpg", alt="error") 23 | li.portfolio__menu__item 24 | a.portfolio__menu__item__link.splitter(href="/works/emerald_planet") Emerald Planet 25 | figure.portfolio__menu__item__image__wrapper 26 | img.portfolio__menu__item__image(data-src="/cases/3.webp", alt="error") 27 | li.portfolio__menu__item 28 | a.portfolio__menu__item__link.splitter(href="/works/rainbows") Rainbows 29 | figure.portfolio__menu__item__image__wrapper 30 | img.portfolio__menu__item__image(data-src="/cases/5.jpg", alt="error") 31 | li.portfolio__menu__item 32 | a.portfolio__menu__item__link.splitter(href="/works/the_silks") The Silks 33 | figure.portfolio__menu__item__image__wrapper 34 | img.portfolio__menu__item__image(data-src="/cases/4.jpg", alt="error") 35 | li.portfolio__menu__item 36 | a.portfolio__menu__item__link.splitter(href="/works/olivia_arnold") Olivia Arnold 37 | figure.portfolio__menu__item__image__wrapper 38 | img.portfolio__menu__item__image(data-src="/cases/6.jpg", alt="error") 39 | li.portfolio__menu__item 40 | a.portfolio__menu__item__link.splitter(href="/works/shiny_diamond") Shiny Diamond 41 | figure.portfolio__menu__item__image__wrapper 42 | img.portfolio__menu__item__image(data-src="/cases/7.jpg", alt="error") 43 | li.portfolio__menu__item 44 | a.portfolio__menu__item__link.splitter(href="/works/pierre") Pierre 45 | figure.portfolio__menu__item__image__wrapper 46 | img.portfolio__menu__item__image(data-src="/cases/8.jpg", alt="error") 47 | -------------------------------------------------------------------------------- /views/pages/works/pierre.pug: -------------------------------------------------------------------------------- 1 | extends ../../base.pug 2 | include ./work.pug 3 | 4 | block variables 5 | - var template = 'work' 6 | 7 | block body 8 | +template({ 9 | id: "pierre", 10 | banner: { 11 | pic: "https://images.prismic.io/alioth/c7cbf9eb-2fa7-4820-a924-0a6203e12426_8.jpg?auto=compress,format", 12 | title: "Pierre", 13 | role: "UI/UX Design" 14 | }, 15 | info: { 16 | date: "Beat - 2014", 17 | text: "From which we spring not a sunrise but a galaxyrise across the centuries Tunguska event Euclid descended from astronomers? Muse about emerged into consciousness vanquish the impossible the sky calls to us Orion's sword venture. Astonishment rings of Uranus stirred by starlight venture two ghostly white figures in coveralls and helmets." 18 | }, 19 | picsOne: { 20 | 1: "https://images.prismic.io/alioth/4d948a07-723f-4a0c-b002-98fd2f138578_pierre_1.jpg?auto=compress,format", 21 | 2: "https://images.prismic.io/alioth/c641defa-33ea-4f1f-a192-8db45b6f2a19_pierre_2.jpg?auto=compress,format", 22 | 3: "https://images.prismic.io/alioth/ff04c6a8-368a-44d7-9212-606678053418_pierre_3.jpg?auto=compress,format&rect=0,1,1918,1115&w=1920&h=1116", 23 | 4: "https://images.prismic.io/alioth/4dd3d341-eee0-4c39-aa29-5cde14db82da_pierre_4.jpg?auto=compress,format" 24 | }, 25 | work: { 26 | text_one: "Citizens of distant epochs stirred by starlight white dwarf Sea of Tranquility a still more glorious dawn awaits tendrils of gossamer clouds? Extraordinary claims require extraordinary evidence something incredible is waiting to be known prime number prime number at the edge of forever two ghostly white figures in coveralls and helmets are softly dancing. Two ghostly white figures in coveralls and helmets are softly dancing great turbulent clouds muse about with pretty stories for which there's little good evidence take root and flourish a mote of dust suspended in a sunbeam.", 27 | text_two: "Patch of Light", 28 | text_three: "Culture colonies explorations emerged into consciousness across the centuries venture. Dream of the mind's eye Jean-François Champollion something incredible is waiting to be known circumnavigated stirred by starlight how far away. Finite but unbounded great turbulent clouds two ghostly white figures in coveralls and helmets are softly dancing how far away gathered by gravity courage of our questions." 29 | }, 30 | extra: "https://images.prismic.io/alioth/253aa385-278e-422d-b502-7f54b2a483b8_pierre_5.jpg?auto=compress,format", 31 | picsTwo: { 32 | 1: "https://images.prismic.io/alioth/a0506b3b-592a-43e4-b37d-ee4c659933f0_pierre_6.jpg?auto=compress,format", 33 | 2: "https://images.prismic.io/alioth/26fa7a19-f212-4699-8121-4fddc1abae9c_pierre_7.jpg?auto=compress,format", 34 | 3: "https://images.prismic.io/alioth/2f9196ad-6dd0-4b10-b020-d17dc597f084_pierre_8.jpg?auto=compress,format" 35 | }, 36 | next: { 37 | pic: "https://images.prismic.io/alioth/705958c2-7081-40b0-ac32-0421d8b986ab_7.jpg?auto=compress,format&rect=1,0,1917,1279&w=1920&h=1281", 38 | title: "Shiny Diamond", 39 | id: "shiny_diamond" 40 | } 41 | }) 42 | -------------------------------------------------------------------------------- /app/utils/text.js: -------------------------------------------------------------------------------- 1 | import each from "lodash/each"; 2 | 3 | export function split({ element, expression = " ", append = true }) { 4 | const words = splitText(element.innerHTML.toString().trim(), expression); 5 | 6 | let innerHTML = ""; 7 | 8 | each(words, (line) => { 9 | if (line.indexOf("
") > -1) { 10 | const lines = line.split("
"); 11 | 12 | each(lines, (line, index) => { 13 | innerHTML += index > 0 ? "
" + parseLine(line) : parseLine(line); 14 | }); 15 | } else { 16 | innerHTML += parseLine(line); 17 | } 18 | }); 19 | 20 | element.innerHTML = innerHTML; 21 | 22 | const spans = element.querySelectorAll("span"); 23 | 24 | if (append) { 25 | each(spans, (span) => { 26 | const isSingleLetter = span.textContent.length === 1; 27 | const isNotEmpty = span.innerHTML.trim() !== ""; 28 | const isNotAndCharacter = span.textContent !== "&"; 29 | const isNotDashCharacter = span.textContent !== "-"; 30 | 31 | if ( 32 | isSingleLetter && 33 | isNotEmpty && 34 | isNotAndCharacter && 35 | isNotDashCharacter 36 | ) { 37 | span.innerHTML = `${span.textContent} `; 38 | } 39 | }); 40 | } 41 | 42 | return spans; 43 | } 44 | 45 | export function calculate(spans) { 46 | const lines = []; 47 | let words = []; 48 | 49 | let position = spans[0].offsetTop; 50 | 51 | each(spans, (span, index) => { 52 | if (span.offsetTop === position) { 53 | words.push(span); 54 | } 55 | 56 | if (span.offsetTop !== position) { 57 | lines.push(words); 58 | 59 | words = []; 60 | words.push(span); 61 | 62 | position = span.offsetTop; 63 | } 64 | 65 | if (index + 1 === spans.length) { 66 | lines.push(words); 67 | } 68 | }); 69 | 70 | return lines; 71 | } 72 | 73 | function splitText(text, expression) { 74 | const splits = text.split("
"); 75 | 76 | let words = []; 77 | 78 | each(splits, (item, index) => { 79 | if (index > 0) { 80 | words.push("
"); 81 | } 82 | 83 | words = words.concat(item.split(expression)); 84 | 85 | let isLink = false; 86 | let link = ""; 87 | 88 | const innerHTML = []; 89 | 90 | each(words, (word) => { 91 | if (!isLink && (word.includes("") || word.includes("/strong>"))) { 102 | innerHTML.push(link); 103 | 104 | link = ""; 105 | } 106 | 107 | if (!isLink && link === "") { 108 | innerHTML.push(word); 109 | } 110 | 111 | if (isLink && (word.includes("/a>") || word.includes("/strong>"))) { 112 | isLink = false; 113 | } 114 | }); 115 | 116 | words = innerHTML; 117 | }); 118 | 119 | return words; 120 | } 121 | 122 | function parseLine(line) { 123 | if (line === "") { 124 | return line; 125 | } else if (line === " ") { 126 | return " "; 127 | } else { 128 | line = line.trim(); 129 | 130 | return line === "
" 131 | ? "
" 132 | : `${line}` + (line.length > 1 ? " " : ""); 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /styles/components/navigation.scss: -------------------------------------------------------------------------------- 1 | .navigation { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100vw; 6 | height: 100vh; 7 | z-index: 100; 8 | pointer-events: none; 9 | mix-blend-mode: difference; 10 | 11 | & .container { 12 | max-width: 90%; 13 | height: fit-content; 14 | width: 100%; 15 | margin: 0 auto; 16 | @extend %flex-row-space; 17 | padding: 2rem 0; 18 | } 19 | 20 | & a { 21 | pointer-events: all !important; 22 | cursor: pointer; 23 | color: $color-white; 24 | display: inline-block; 25 | } 26 | 27 | & .logo { 28 | @extend %description-32; 29 | font-weight: 700; 30 | font-family: $font-b; 31 | transition: color 0.2s; 32 | 33 | &:hover { 34 | color: $color-theme; 35 | } 36 | } 37 | } 38 | 39 | .nav__links { 40 | flex: 0 0 20%; 41 | max-width: 20%; 42 | width: 100%; 43 | height: fit-content; 44 | @extend %flex-row-space; 45 | 46 | @include media(" { 37 | return v0 * (1 - t) + v1 * t; 38 | }; 39 | 40 | const dispose = (scroll) => { 41 | gsap.set(this.elements.items, { 42 | y: (i) => { 43 | return i * itemHeight + scroll; 44 | }, 45 | modifiers: { 46 | y: (y) => { 47 | const s = gsap.utils.wrap( 48 | -itemHeight, 49 | wrapHeight - itemHeight, 50 | parseInt(y) 51 | ); 52 | return `${s}px`; 53 | } 54 | } 55 | }); 56 | }; 57 | dispose(0); 58 | 59 | const handleMouseWheel = (e) => { 60 | scrollY -= e.deltaY * 3; 61 | }; 62 | 63 | let touchStart = 0; 64 | let touchY = 0; 65 | let isDragging = false; 66 | const handleTouchStart = (e) => { 67 | touchStart = e.clientY || e.touches[0].clientY; 68 | isDragging = true; 69 | this.elements.menu.classList.add("is-dragging"); 70 | }; 71 | const handleTouchMove = (e) => { 72 | if (!isDragging) return; 73 | touchY = e.clientY || e.touches[0].clientY; 74 | scrollY += (touchY - touchStart) * 10; 75 | touchStart = touchY; 76 | }; 77 | const handleTouchEnd = () => { 78 | isDragging = false; 79 | this.elements.menu.classList.remove("is-dragging"); 80 | }; 81 | 82 | this.elements.menu.addEventListener("mousewheel", handleMouseWheel); 83 | 84 | this.elements.menu.addEventListener("touchstart", handleTouchStart); 85 | this.elements.menu.addEventListener("touchmove", handleTouchMove); 86 | this.elements.menu.addEventListener("touchend", handleTouchEnd); 87 | 88 | this.elements.menu.addEventListener("mousedown", handleTouchStart); 89 | this.elements.menu.addEventListener("mousemove", handleTouchMove); 90 | this.elements.menu.addEventListener("mouseleave", handleTouchEnd); 91 | this.elements.menu.addEventListener("mouseup", handleTouchEnd); 92 | 93 | this.elements.menu.addEventListener("selectstart", () => { 94 | return false; 95 | }); 96 | 97 | window.addEventListener("resize", () => { 98 | menuHeight = this.elements.menu.clientHeight; 99 | itemHeight = this.elements.items[0].clientHeight; 100 | wrapHeight = this.elements.items.length * itemHeight; 101 | }); 102 | 103 | const render = () => { 104 | requestAnimationFrame(render); 105 | y = lerp(y, scrollY, 0.04); 106 | dispose(y); 107 | 108 | scrollSpeed = y - oldScrollY; 109 | oldScrollY = y; 110 | 111 | gsap.to(this.elements.items, { 112 | skewX: -scrollSpeed * 0.2 113 | }); 114 | }; 115 | render(); 116 | } 117 | 118 | onResize() { 119 | super.onResize(); 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /app/pages/About/index.js: -------------------------------------------------------------------------------- 1 | import Page from "classes/Page"; 2 | import gsap from "gsap"; 3 | import Ukiyo from "ukiyojs"; 4 | 5 | export default class About extends Page { 6 | constructor() { 7 | super({ 8 | classes: { 9 | active: "about--active" 10 | }, 11 | id: "about", 12 | element: ".about", 13 | elements: { 14 | wrapper: ".about__wrapper", // scroller 15 | about_pics: ".parallax__image", 16 | // sliders 17 | menu: ".about__team__menu", 18 | items: ".menu__item", 19 | images: ".menu__item__pic" 20 | } 21 | }); 22 | } 23 | 24 | create() { 25 | super.create(); 26 | this.parallax(); 27 | this.slider(); 28 | } 29 | 30 | parallax() { 31 | this.imgOne = [...this.elements.about_pics]; 32 | this.imgOne.forEach((ele) => { 33 | this.parallaxEffect = new Ukiyo(ele, { 34 | speed: 2, 35 | scale: 1.4 36 | }); 37 | }); 38 | } 39 | 40 | onResize() { 41 | super.onResize(); 42 | } 43 | 44 | // team slider 45 | slider() { 46 | let menuWidth = this.elements.menu.clientWidth; 47 | let itemWidth = this.elements.items[0].clientWidth; 48 | let wrapWidth = this.elements.items.length * itemWidth; 49 | 50 | let scrollSpeed = 0; 51 | let oldScrollY = 0; 52 | let scrollY = 0; 53 | let y = 0; 54 | 55 | const lerp = (v0, v1, t) => { 56 | return v0 * (1 - t) + v1 * t; 57 | }; 58 | 59 | const dispose = (scroll) => { 60 | gsap.set(this.elements.items, { 61 | x: (i) => { 62 | return i * itemWidth + scroll; 63 | }, 64 | modifiers: { 65 | x: (x, target) => { 66 | const s = gsap.utils.wrap( 67 | -itemWidth, 68 | wrapWidth - itemWidth, 69 | parseInt(x) 70 | ); 71 | return `${s}px`; 72 | } 73 | } 74 | }); 75 | }; 76 | dispose(0); 77 | 78 | const handleMouseWheel = (e) => { 79 | scrollY -= e.deltaY * 0.9; 80 | }; 81 | 82 | let touchStart = 0; 83 | let touchX = 0; 84 | let isDragging = false; 85 | const handleTouchStart = (e) => { 86 | touchStart = e.clientX || e.touches[0].clientX; 87 | isDragging = true; 88 | this.elements.menu.classList.add("is-dragging"); 89 | }; 90 | const handleTouchMove = (e) => { 91 | if (!isDragging) return; 92 | touchX = e.clientX || e.touches[0].clientX; 93 | scrollY += (touchX - touchStart) * 2.5; 94 | touchStart = touchX; 95 | }; 96 | const handleTouchEnd = () => { 97 | isDragging = false; 98 | this.elements.menu.classList.remove("is-dragging"); 99 | }; 100 | 101 | this.elements.menu.addEventListener("mousewheel", handleMouseWheel); 102 | 103 | this.elements.menu.addEventListener("touchstart", handleTouchStart); 104 | this.elements.menu.addEventListener("touchmove", handleTouchMove); 105 | this.elements.menu.addEventListener("touchend", handleTouchEnd); 106 | 107 | this.elements.menu.addEventListener("mousedown", handleTouchStart); 108 | this.elements.menu.addEventListener("mousemove", handleTouchMove); 109 | this.elements.menu.addEventListener("mouseleave", handleTouchEnd); 110 | this.elements.menu.addEventListener("mouseup", handleTouchEnd); 111 | 112 | this.elements.menu.addEventListener("selectstart", () => { 113 | return false; 114 | }); 115 | 116 | window.addEventListener("resize", () => { 117 | menuWidth = this.elements.menu.clientWidth; 118 | itemWidth = this.elements.items[0].clientWidth; 119 | wrapWidth = this.elements.items.length * itemWidth; 120 | }); 121 | 122 | const render = () => { 123 | requestAnimationFrame(render); 124 | y = lerp(y, scrollY, 0.1); 125 | dispose(y); 126 | 127 | scrollSpeed = y - oldScrollY; 128 | oldScrollY = y; 129 | 130 | gsap.to(this.elements.items, { 131 | skewX: -scrollSpeed * 0.2, 132 | rotate: scrollSpeed * 0.01 133 | // scale: 1 - Math.min(100, Math.abs(scrollSpeed)) * 0.003 134 | }); 135 | }; 136 | render(); 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /styles/pages/portfolio/portfolio.scss: -------------------------------------------------------------------------------- 1 | .portfolio { 2 | background-color: $color-gray; 3 | opacity: 0; 4 | position: fixed; 5 | width: 100%; 6 | height: 100%; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | bottom: 0; 11 | overflow: hidden; 12 | transition: opacity 0.3s ease; 13 | will-change: opacity; 14 | 15 | &--active { 16 | opacity: 1; 17 | 18 | .portfolio__menu__item__link { 19 | .word { 20 | .char { 21 | transform: translateY(0) !important; 22 | } 23 | } 24 | } 25 | 26 | .portfolio__menu__item { 27 | figure { 28 | opacity: 1 !important; 29 | } 30 | } 31 | } 32 | 33 | canvas { 34 | position: fixed; 35 | top: 0; 36 | left: 0; 37 | width: 100%; 38 | height: 100%; 39 | z-index: 2; 40 | pointer-events: none; 41 | } 42 | } 43 | 44 | .portfolio__wrapper { 45 | position: absolute; 46 | width: 100%; 47 | height: 100vh; 48 | min-height: 100vh; 49 | max-height: 100vh; 50 | overflow: hidden; 51 | will-change: transform; 52 | } 53 | 54 | .portfolio__banner { 55 | width: 100%; 56 | height: 100vh; 57 | } 58 | 59 | .portfolio__menu { 60 | width: 100%; 61 | height: 100vh; 62 | overflow: hidden; 63 | 64 | ul { 65 | width: 100%; 66 | height: 100vh; 67 | 68 | @include media(" this.onPreloaded()); 52 | } 53 | 54 | /** 55 | * Create Transition 56 | */ 57 | createTransition() { 58 | // this.transition = new Transition(); 59 | } 60 | 61 | /** 62 | * Mount Page 63 | */ 64 | createPages() { 65 | this.pages = { 66 | home: new Home(), 67 | about: new About(), 68 | portfolio: new Portfolio(), 69 | contact: new Contact(), 70 | work: new Work() 71 | }; 72 | 73 | this.page = this.pages[this.template]; 74 | this.page.create(); 75 | } 76 | 77 | /** 78 | * Request Animation frame 79 | */ 80 | 81 | update() { 82 | if (this.page && this.page.update) { 83 | this.page.update(); 84 | } 85 | 86 | this.frame = window.requestAnimationFrame(this.handleUpdate); 87 | } 88 | 89 | /** 90 | * Event Handlers 91 | */ 92 | 93 | onPreloaded() { 94 | this.preloader.destroy(); 95 | this.onResize(); 96 | this.page.show(true); 97 | } 98 | 99 | onResize() { 100 | if (this.page && this.page.onResize) { 101 | this.page.onResize(); 102 | } 103 | } 104 | 105 | async onChange({ url, push = true }) { 106 | if (url === window.location.href) return; 107 | 108 | await this.page.hide(); 109 | const res = await window.fetch(url); 110 | if (res.status === 200) { 111 | const html = await res.text(); 112 | const fakeDiv = document.createElement("div"); 113 | 114 | if (push) { 115 | window.history.pushState({}, "", url); 116 | } 117 | 118 | fakeDiv.innerHTML = html; 119 | 120 | const divContent = fakeDiv.querySelector(".content"); 121 | this.template = divContent.getAttribute("data-template"); 122 | this.content.setAttribute( 123 | "data-template", 124 | divContent.getAttribute("data-template") 125 | ); 126 | this.content.innerHTML = divContent.innerHTML; 127 | this.page = this.pages[this.template]; 128 | 129 | this.preloadingOnPageTransition(); 130 | } 131 | } 132 | 133 | preloadingOnPageTransition() { 134 | const imgs = this.content.querySelectorAll("img"); 135 | let percent = 0, 136 | loadedImgs = 0; 137 | imgs.forEach((img) => { 138 | img.src = img.getAttribute("data-src"); 139 | img.onload = () => { 140 | loadedImgs++; 141 | img.classList.add("loaded"); 142 | percent = loadedImgs / imgs.length; 143 | 144 | if (percent === 1) { 145 | this.page.create(); 146 | this.onResize(); 147 | this.addLinkListeners(); 148 | this.page.show(); 149 | } 150 | }; 151 | }); 152 | } 153 | 154 | handleOnPopState() { 155 | this.onChange({ 156 | url: window.location.pathname, 157 | push: false 158 | }); 159 | } 160 | 161 | /** 162 | * Add page transition on each "a" element 163 | */ 164 | addLinkListeners() { 165 | const links = document.querySelectorAll( 166 | "a:not(.footer__content__cr__link)" 167 | ); 168 | each(links, (link) => { 169 | link.onclick = (e) => { 170 | e.preventDefault(); 171 | const { href } = link; 172 | this.onChange({ url: href }); 173 | }; 174 | }); 175 | } 176 | 177 | /** 178 | * Add Event Listeners 179 | */ 180 | addEventListeners() { 181 | window.addEventListener("resize", this.handleOnResize); 182 | window.addEventListener("popstate", this.handleOnPopState); 183 | } 184 | 185 | // hamb menu 186 | 187 | hambMenu() { 188 | let hamb__btn = document.querySelector(".hamb__btn"); 189 | let hamb__menu = document.querySelector(".hamb__menu"); 190 | let hamb__links = [...document.querySelectorAll(".hamb__menu__link")]; 191 | 192 | hamb__btn.addEventListener("click", function () { 193 | hamb__menu.classList.toggle("active"); 194 | }); 195 | 196 | hamb__links.forEach((el) => { 197 | el.addEventListener("click", function () { 198 | hamb__menu.classList.remove("active"); 199 | }); 200 | }); 201 | } 202 | } 203 | 204 | const app = new App(); 205 | -------------------------------------------------------------------------------- /app/classes/Page.js: -------------------------------------------------------------------------------- 1 | import "splitting/dist/splitting.css"; 2 | import "splitting/dist/splitting-cells.css"; 3 | import Splitting from "splitting"; 4 | import each from "lodash/each"; 5 | import Prefix from "prefix"; 6 | import gsap from "gsap"; 7 | import { mapEach } from "utils/dom"; 8 | import Paragraph from "animations/Paragraph"; 9 | import locoScroll from "utils/locoscroll"; 10 | 11 | export default class Page { 12 | constructor({ classes, id, element, elements }) { 13 | this.classes = { 14 | ...classes 15 | }; 16 | this.id = id; 17 | this.selector = element; 18 | this.selectorChildren = { 19 | animationsParagraphs: '[data-animation="paragraph"]', 20 | imagePreloaders: "[data-src]", 21 | overlayLines: ".overlay__line", 22 | 23 | ...elements 24 | }; 25 | this.element = element; 26 | this.elements = {}; 27 | this.transformPrefix = Prefix("transform"); 28 | this.animations = []; 29 | this.preloadersForImg = []; 30 | } 31 | 32 | /** 33 | * Select Elements from DOM and init necessery things 34 | */ 35 | create() { 36 | this.element = document.querySelector(this.selector); 37 | this.elements = {}; 38 | 39 | each(this.selectorChildren, (entry, key) => { 40 | if ( 41 | entry instanceof window.HTMLElement || 42 | entry instanceof window.NodeList || 43 | Array.isArray(entry) 44 | ) { 45 | this.elements[key] = entry; 46 | } else { 47 | this.elements[key] = this.element.querySelectorAll(entry); 48 | if (this.elements[key].length === 0) { 49 | this.elements[key] = null; 50 | } else if (this.elements[key].length === 1) { 51 | this.elements[key] = this.elements[key][0]; 52 | } 53 | } 54 | }); 55 | 56 | this.createAnimations(); 57 | this.initLocoScroll(); 58 | this.locoScroll.update(); 59 | this.text(); 60 | } 61 | 62 | text() { 63 | const target = document.querySelectorAll(".splitter"); 64 | const result = Splitting({ 65 | target: target 66 | }); 67 | } 68 | 69 | /** 70 | * Common Animation on all pages 71 | */ 72 | createAnimations() { 73 | /** 74 | * Paragraphs. 75 | */ 76 | this.animationsParagraphs = mapEach( 77 | this.elements.animationsParagraphs, 78 | (element) => { 79 | return new Paragraph({ element }); 80 | } 81 | ); 82 | 83 | this.animations.push(...this.animationsParagraphs); 84 | } 85 | 86 | /** 87 | * Init Locomotive scroll 88 | */ 89 | initLocoScroll() { 90 | this.locoScroll = locoScroll(this.elements.wrapper); 91 | } 92 | 93 | /** 94 | * Page Show Transition 95 | */ 96 | async show(onPreloaded = false) { 97 | if (onPreloaded) { 98 | return new Promise((resolve) => { 99 | this.animationIn = gsap.timeline(); 100 | this.animationIn.set(this.selectorChildren.overlayLines, { 101 | scaleX: 0, 102 | opacity: 0 103 | }); 104 | this.animationIn.call(() => { 105 | this.element.classList.add(this.classes.active); 106 | this.addEventListeners(); 107 | resolve(); 108 | }); 109 | }); 110 | } else { 111 | return new Promise((resolve) => { 112 | this.animationIn = gsap.timeline(); 113 | this.animationIn.set(this.selectorChildren.overlayLines, { 114 | transformOrigin: "right" 115 | }); 116 | this.animationIn.to(this.selectorChildren.overlayLines, 0.4, { 117 | scaleX: 0, 118 | opacity: 1, 119 | stagger: 0.1, 120 | ease: "Power2.easeIn" 121 | }); 122 | this.animationIn.call(() => { 123 | this.element.classList.add(this.classes.active); 124 | this.addEventListeners(); 125 | this.onResize(); 126 | resolve(); 127 | }); 128 | }); 129 | } 130 | } 131 | 132 | /** 133 | * Page Hide Transition 134 | */ 135 | async hide() { 136 | return new Promise((resolve) => { 137 | each(this.animations, (animation) => { 138 | animation.animateOut(); 139 | }); 140 | this.element.classList.remove(this.classes.active); 141 | 142 | this.destroy(); 143 | window.ASSETS = []; 144 | this.animateOut = gsap.timeline(); 145 | this.animateOut.set(this.selectorChildren.overlayLines, { 146 | transformOrigin: "left", 147 | scaleX: 0, 148 | opacity: 1 149 | }); 150 | this.animateOut.to(this.selectorChildren.overlayLines, 0.4, { 151 | scaleX: 1, 152 | opacity: 1, 153 | stagger: 0.1, 154 | ease: "Power2.easeOut" 155 | }); 156 | this.animateOut.call(() => { 157 | resolve(); 158 | }); 159 | }); 160 | } 161 | 162 | /** 163 | * Update function for request animation frame 164 | */ 165 | update() {} 166 | 167 | /** 168 | * On Resize event Handler 169 | */ 170 | onResize() { 171 | if (this.elements.wrapper) { 172 | this.locoScroll.update(); 173 | } 174 | 175 | this.animations.forEach((animation) => { 176 | animation.onResize(); 177 | }); 178 | } 179 | 180 | /** 181 | * Create and Register common event listeners 182 | */ 183 | addEventListeners() {} 184 | 185 | /** 186 | * Remove event listeners. Call on Page Hide 187 | */ 188 | removeEventListeners() {} 189 | 190 | /** 191 | * Alias of removeEventListener 192 | */ 193 | destroy() { 194 | this.removeEventListeners(); 195 | if (this.elements.wrapper) { 196 | this.locoScroll.destroy(); 197 | } 198 | } 199 | } 200 | -------------------------------------------------------------------------------- /styles/pages/contact/contact.scss: -------------------------------------------------------------------------------- 1 | .contact { 2 | background-color: $color-gray; 3 | opacity: 0; 4 | position: fixed; 5 | width: 100%; 6 | height: 100%; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | bottom: 0; 11 | overflow: hidden; 12 | transition: opacity 0.5s ease; 13 | will-change: opacity; 14 | 15 | &--active { 16 | opacity: 1; 17 | 18 | .contact__banner__picture__wrapper__2 { 19 | figure { 20 | &::after { 21 | transform: scaleY(0) !important; 22 | } 23 | } 24 | } 25 | 26 | .contact__banner__title__wrapper { 27 | h1 { 28 | .word { 29 | .char { 30 | transform: translateY(0) !important; 31 | } 32 | } 33 | } 34 | } 35 | } 36 | 37 | canvas { 38 | position: fixed; 39 | top: 0; 40 | left: 0; 41 | width: 100%; 42 | height: 100%; 43 | z-index: 2; 44 | pointer-events: none; 45 | } 46 | } 47 | 48 | .contact__wrapper { 49 | position: absolute; 50 | width: 100%; 51 | height: fit-content; 52 | min-height: 100vh; 53 | overflow: hidden; 54 | will-change: transform; 55 | } 56 | 57 | .contact__banner__wrapper { 58 | @extend %section; 59 | padding: 0 !important; 60 | position: relative; 61 | 62 | .contact__banner__picture__wrapper__2 { 63 | width: 100vw; 64 | height: 100vh; 65 | position: absolute; 66 | top: 0; 67 | z-index: -1; 68 | overflow: hidden; 69 | 70 | &__inner { 71 | width: 50vw; 72 | height: 100vh; 73 | position: absolute; 74 | top: 0; 75 | right: 0; 76 | 77 | @include media(" 64 | .about__awards__wrapper__list 65 | .about__awards__title__wrapper 66 | h4.about__awards__title(data-animation="paragraph") Our Awards 67 | ul.about__awards__list 68 | li.about__pride__list__item(data-scroll data-scroll-offset="50%") 69 | p.about__list__item__content(data-animation="paragraph") Site Of the Day 70 | p.about__list__item__content(data-animation="paragraph") Awwwards 71 | p.about__list__item__content(data-animation="paragraph") x28 72 | li.about__pride__list__item(data-scroll data-scroll-offset="50%") 73 | p.about__list__item__content(data-animation="paragraph") Site Of the Month 74 | p.about__list__item__content(data-animation="paragraph") Awwwards 75 | p.about__list__item__content(data-animation="paragraph") x13 76 | li.about__pride__list__item(data-scroll data-scroll-offset="50%") 77 | p.about__list__item__content(data-animation="paragraph") Site Of the Year 78 | p.about__list__item__content(data-animation="paragraph") Awwwards 79 | p.about__list__item__content(data-animation="paragraph") x4 80 | li.about__pride__list__item(data-scroll data-scroll-offset="50%") 81 | p.about__list__item__content(data-animation="paragraph") UX Design Of the Month 82 | p.about__list__item__content(data-animation="paragraph") CSSDA 83 | p.about__list__item__content(data-animation="paragraph") x6 84 | li.about__pride__list__item(data-scroll data-scroll-offset="50%") 85 | p.about__list__item__content(data-animation="paragraph") Studio Of the Year 86 | p.about__list__item__content(data-animation="paragraph") CSSDA 87 | p.about__list__item__content(data-animation="paragraph") x2 88 | li.about__pride__list__item(data-scroll data-scroll-offset="50%") 89 | p.about__list__item__content(data-animation="paragraph") Agency Of the Year 90 | p.about__list__item__content(data-animation="paragraph") Golden Apple 91 | p.about__list__item__content(data-animation="paragraph") x1 92 | li.about__pride__list__item(data-scroll data-scroll-offset="50%") 93 | p.about__list__item__content(data-animation="paragraph") Website Of the Day 94 | p.about__list__item__content(data-animation="paragraph") Cyristal Studios 95 | p.about__list__item__content(data-animation="paragraph") x9 96 | 97 | .about__pictures__wrapper 98 | figure.about__pic__wrapper(data-scroll data-scroll-speed="3") 99 | img.about__pic(data-src="/about_1.jpg", alt="error") 100 | figure.about__pic__wrapper(data-scroll data-scroll-speed="4") 101 | img.about__pic(data-src="/about_3.jpg", alt="error") 102 | figure.about__pic__wrapper(data-scroll data-scroll-speed="2") 103 | img.about__pic(data-src="/about_2.jpg", alt="error") 104 | 105 | .about__team__wrapper 106 | .about__team__wrapper__inner 107 | .about__team__title__wrapper 108 | h1.about__team__title__wrapper(data-animation="paragraph") The Squad 109 | .about__team__list 110 | .about__team__list__title__wrapper 111 | h4.about__team__list__title(data-animation="paragraph") Our Team 112 | .about__team__list__content__wrapper 113 | p.about__team__list__text(data-animation="paragraph") Billions upon billions a still more glorious dawn awaits Sea of Tranquility citizens of distant epochs trillion intelligent beings. A very small stage in a vast cosmic arena hundreds of thousands made in the interiors of collapsing stars hundreds of thousands not a sunrise but a galaxyrise muse about? Made in the interiors of collapsing stars the sky calls. 114 | //- slider 115 | .about__team__menu 116 | .about__team__menu__wrapper 117 | .menu__item 118 | figure.menu__item__pic__wrapper(data-name="Humera Landry" data-role="CEO") 119 | img.menu__item__pic(data-src="/team/1.jpg", alt="team pic") 120 | .menu__item 121 | figure.menu__item__pic__wrapper(data-name="Jane Braithwave" data-role="Graphic Designer") 122 | img.menu__item__pic(data-src="/team/2.jpg", alt="team pic") 123 | .menu__item 124 | figure.menu__item__pic__wrapper(data-name="Kirsty Ball" data-role="UI / UX Designer") 125 | img.menu__item__pic(data-src="/team/3.jpg", alt="team pic") 126 | .menu__item 127 | figure.menu__item__pic__wrapper(data-name="Darnell Irving" data-role="CTO") 128 | img.menu__item__pic(data-src="/team/4.jpg", alt="team pic") 129 | .menu__item 130 | figure.menu__item__pic__wrapper(data-name="Erika Moses" data-role="Art Director") 131 | img.menu__item__pic(data-src="/team/5.jpg", alt="team pic") 132 | .menu__item 133 | figure.menu__item__pic__wrapper(data-name="Willa Porter" data-role="Graphic Designer") 134 | img.menu__item__pic(data-src="/team/6.jpg", alt="team pic") 135 | 136 | .about__client__wrapper 137 | .about__client__wrapper__inner 138 | p.about__client__wrapper__paragraph(data-animation="paragraph") How far away a mote of dust suspended in a sunbeam rich in heavy atoms stirred by starlight Flatland tesseract. Realm of the galaxies colonies realm of the galaxies Sea of Tranquility star stuff harvesting star light the carbon in our apple pies. Citizens of distant. 139 | .about__partner__lists 140 | .about__partner__list(data-scroll data-scroll-speed="4" data-scroll-direction="horizontal") 141 | figure.about__partner__box 142 | img.about__partner__img(data-src="/clients/1.webp", alt="error") 143 | figure.about__partner__box 144 | img.about__partner__img(data-src="/clients/2.webp", alt="error") 145 | figure.about__partner__box 146 | img.about__partner__img(data-src="/clients/3.webp", alt="error") 147 | figure.about__partner__box 148 | img.about__partner__img(data-src="/clients/4.webp", alt="error") 149 | figure.about__partner__box 150 | img.about__partner__img(data-src="/clients/5.webp", alt="error") 151 | .about__partner__list(data-scroll data-scroll-speed="-4" data-scroll-direction="horizontal") 152 | figure.about__partner__box 153 | img.about__partner__img(data-src="/clients/5.webp", alt="error") 154 | figure.about__partner__box 155 | img.about__partner__img(data-src="/clients/6.webp", alt="error") 156 | figure.about__partner__box 157 | img.about__partner__img(data-src="/clients/7.webp", alt="error") 158 | figure.about__partner__box 159 | img.about__partner__img(data-src="/clients/8.webp", alt="error") 160 | figure.about__partner__box 161 | img.about__partner__img(data-src="/clients/1.webp", alt="error") 162 | 163 | //- footer 164 | include ../partials/footer 165 | -------------------------------------------------------------------------------- /views/pages/home.pug: -------------------------------------------------------------------------------- 1 | extends ../base.pug 2 | 3 | block variables 4 | - var template = 'home' 5 | 6 | block body 7 | .home(data-background="" data-color="") 8 | canvas.webgl-container 9 | //- Scroll wrapper 10 | .home__wrapper 11 | .home__banner 12 | .home__banner__inner 13 | h1.home__title.splitter Hello, 14 | h1.home__title.splitter we are an 15 | h1.home__title.splitter independent 16 | h1.home__title.splitter 17 | a.home__title__link(href="/") creative agency 18 | h1.home__title.splitter 19 | a.home__title__link(href="/") in the Istanbul 20 | h1.home__title.splitter who connect 21 | h1.home__title.splitter 22 | a.home__title__link(href="/") brands with 23 | h1.home__title.splitter 24 | a.home__title__link(href="/") their audiences 25 | h1.home__title.splitter using design, 26 | h1.home__title.splitter 27 | a.home__title__link(href="/") technology 28 | h1.home__title.splitter and insights. 29 | 30 | .home__screen 31 | figure.home__inner__screen 32 | img.home__screen__img.parallax__image(data-src="/home_screen.jpg", alt="Home Screen Picture") 33 | 34 | .home__screen__content 35 | .home__screen__content__inner 36 | p.home__screen__content__paragraph(data-animation="paragraph") Something incredible is waiting to be known hydrogen atoms billions upon billions birth Tunguska event Sea of Tranquility? A still more glorious dawn awaits invent the universe at the edge of forever bits of moving fluff preserve and cherish that pale blue dot another world. 37 | //- lists 38 | .lists__wrapper(data-scroll data-scroll-offset="50%") 39 | //- LIST ONE 40 | ul.service__list 41 | li.service__list__item 42 | p.service__list__item__content(data-animation="paragraph") Product strategy 43 | li.service__list__item 44 | p.service__list__item__content(data-animation="paragraph") UX and UI design 45 | li.service__list__item 46 | p.service__list__item__content(data-animation="paragraph") Front-end development 47 | li.service__list__item 48 | p.service__list__item__content(data-animation="paragraph") Back-end development 49 | li.service__list__item 50 | p.service__list__item__content(data-animation="paragraph") QA 51 | li.service__list__item 52 | p.service__list__item__content(data-animation="paragraph") Support 53 | //- LIST TWO 54 | ul.service__list 55 | li.service__list__item 56 | p.service__list__item__content(data-animation="paragraph") Strategy 57 | li.service__list__item 58 | p.service__list__item__content(data-animation="paragraph") Brand identity design 59 | li.service__list__item 60 | p.service__list__item__content(data-animation="paragraph") Creative web design 61 | li.service__list__item 62 | p.service__list__item__content(data-animation="paragraph") Graphic design and CGI 63 | li.service__list__item 64 | p.service__list__item__content(data-animation="paragraph") Content development 65 | li.service__list__item 66 | p.service__list__item__content(data-animation="paragraph") Creative front-end 67 | //- LIST THREE 68 | ul.service__list 69 | li.service__list__item 70 | p.service__list__item__content(data-animation="paragraph") Back-end development 71 | li.service__list__item 72 | p.service__list__item__content(data-animation="paragraph") Mobile Development 73 | li.service__list__item 74 | p.service__list__item__content(data-animation="paragraph") Photograpy 75 | li.service__list__item 76 | p.service__list__item__content(data-animation="paragraph") Video Production 77 | //- link 78 | .magnet.home__screen__link__wrapper 79 | a.home__screen__content__link.splitter(href="/about") See All Service -> 80 | 81 | .home__work__wrapper 82 | .home__work__inner__wrapper 83 | .home__work__title__wrapper 84 | h1.home__work__title(data-animation="paragraph") Recent Works 85 | //- works 86 | .home__work__list 87 | .home__work__inner__list 88 | //- work box 89 | .home__work__box 90 | figure.home__work__pic__wrapper 91 | img.home__work__pic.parallax__image(data-src="/cases/1.jpg", alt="work image") 92 | a.home__work__title.splitter(href="/work/spirits_of_illusion") Spirit of illusion 93 | //- work box 94 | .home__work__box 95 | figure.home__work__pic__wrapper 96 | img.home__work__pic.parallax__image(data-src="/cases/2.jpg", alt="work image") 97 | a.home__work__title.splitter(href="/work/the_secrets") The Secrets 98 | //- work box 99 | .home__work__box 100 | figure.home__work__pic__wrapper 101 | img.home__work__pic.parallax__image(data-src="/cases/3.webp", alt="work image") 102 | a.home__work__title.splitter(href="/work/emerald_planet") Emerald Planet 103 | //- work box 104 | .home__work__box 105 | figure.home__work__pic__wrapper 106 | img.home__work__pic.parallax__image(data-src="/cases/5.jpg", alt="work image") 107 | a.home__work__title.splitter(href="/work/rainbows") Rainbows 108 | //- work box 109 | .home__work__box 110 | figure.home__work__pic__wrapper 111 | img.home__work__pic.parallax__image(data-src="/cases/4.jpg", alt="work image") 112 | a.home__work__title.splitter(href="/work/the_silks") The Silks 113 | //- work box 114 | .home__work__box 115 | figure.home__work__pic__wrapper 116 | img.home__work__pic.parallax__image(data-src="/cases/6.jpg", alt="work image") 117 | a.home__work__title.splitter(href="/work/olivia_arnold") Olivia Arnold 118 | 119 | .magnet.home__work__link__wrapper 120 | a.home__work__link.splitter(href="/portfolio") See All Projects -> 121 | 122 | .home__partner__wrapper 123 | .home__partner__inner__wrapper 124 | .home__partner__title__wrapper 125 | h1.home__partner__title(data-animation="paragraph") Trustful Partners. 126 | .home__partner__content__wrapper 127 | p.home__partner__paragraph(data-animation="paragraph") Brain is the seed of intelligence a still more glorious dawn awaits the ash of stellar alchemy two ghostly white figures in coveralls and helmets are softly dancing not a sunrise but a galaxyrise bits of moving fluff. Culture citizens of distant epochs the only home we've ever known with pretty stories for which there's little good evidence descended from astronomers take root and flourish. 128 | .home__partner__lists 129 | .home__partner__list(data-scroll data-scroll-speed="4" data-scroll-direction="horizontal") 130 | figure.home__partner__box 131 | img.home__partner__img(data-src="/clients/1.webp", alt="error") 132 | figure.home__partner__box 133 | img.home__partner__img(data-src="/clients/2.webp", alt="error") 134 | figure.home__partner__box 135 | img.home__partner__img(data-src="/clients/3.webp", alt="error") 136 | figure.home__partner__box 137 | img.home__partner__img(data-src="/clients/4.webp", alt="error") 138 | figure.home__partner__box 139 | img.home__partner__img(data-src="/clients/5.webp", alt="error") 140 | .home__partner__list(data-scroll data-scroll-speed="-4" data-scroll-direction="horizontal") 141 | figure.home__partner__box 142 | img.home__partner__img(data-src="/clients/5.webp", alt="error") 143 | figure.home__partner__box 144 | img.home__partner__img(data-src="/clients/6.webp", alt="error") 145 | figure.home__partner__box 146 | img.home__partner__img(data-src="/clients/7.webp", alt="error") 147 | figure.home__partner__box 148 | img.home__partner__img(data-src="/clients/8.webp", alt="error") 149 | figure.home__partner__box 150 | img.home__partner__img(data-src="/clients/1.webp", alt="error") 151 | .home__pride 152 | .home__pride__wrapper 153 | .home__pride__content 154 | .home__pride__title__wrapper 155 | h1.home__pride__title(data-animation="paragraph") Source #[br] of #[br] pride. 156 | .home__pride__paragraph__wrapper 157 | p.home__pride__paragraph(data-animation="paragraph") A mote of dust suspended in a sunbeam ship of the imagination kindling the energy hidden in matter Cambrian explosion star stuff harvesting star light Tunguska event. From which we spring the only home we've ever known vanquish the impossible encyclopaedia galactica rich in heavy atoms globular star cluster. 158 | ul.home__pride__list 159 | li.home__pride__list__item(data-scroll data-scroll-offset="50%") 160 | p.home__pride__list__item__content(data-animation="paragraph") Site Of the Day 161 | p.home__pride__list__item__content(data-animation="paragraph") Awwwards 162 | p.home__pride__list__item__content(data-animation="paragraph") x28 163 | li.home__pride__list__item(data-scroll data-scroll-offset="50%") 164 | p.home__pride__list__item__content(data-animation="paragraph") Site Of the Month 165 | p.home__pride__list__item__content(data-animation="paragraph") Awwwards 166 | p.home__pride__list__item__content(data-animation="paragraph") x13 167 | li.home__pride__list__item(data-scroll data-scroll-offset="50%") 168 | p.home__pride__list__item__content(data-animation="paragraph") Site Of the Year 169 | p.home__pride__list__item__content(data-animation="paragraph") Awwwards 170 | p.home__pride__list__item__content(data-animation="paragraph") x4 171 | li.home__pride__list__item(data-scroll data-scroll-offset="50%") 172 | p.home__pride__list__item__content(data-animation="paragraph") UX Design Of the Month 173 | p.home__pride__list__item__content(data-animation="paragraph") CSSDA 174 | p.home__pride__list__item__content(data-animation="paragraph") x6 175 | li.home__pride__list__item(data-scroll data-scroll-offset="50%") 176 | p.home__pride__list__item__content(data-animation="paragraph") Studio Of the Year 177 | p.home__pride__list__item__content(data-animation="paragraph") CSSDA 178 | p.home__pride__list__item__content(data-animation="paragraph") x2 179 | li.home__pride__list__item(data-scroll data-scroll-offset="50%") 180 | p.home__pride__list__item__content(data-animation="paragraph") Agency Of the Year 181 | p.home__pride__list__item__content(data-animation="paragraph") Golden Apple 182 | p.home__pride__list__item__content(data-animation="paragraph") x1 183 | li.home__pride__list__item(data-scroll data-scroll-offset="50%") 184 | p.home__pride__list__item__content(data-animation="paragraph") Website Of the Day 185 | p.home__pride__list__item__content(data-animation="paragraph") Cyristal Studios 186 | p.home__pride__list__item__content(data-animation="paragraph") x9 187 | 188 | include ../partials/footer 189 | -------------------------------------------------------------------------------- /styles/pages/home/home.scss: -------------------------------------------------------------------------------- 1 | .home { 2 | background-color: $color-gray; 3 | opacity: 0; 4 | position: fixed; 5 | width: 100%; 6 | height: 100%; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | bottom: 0; 11 | overflow: hidden; 12 | transition: opacity 0.3s ease; 13 | will-change: opacity; 14 | 15 | &--active { 16 | opacity: 1; 17 | 18 | .home__title { 19 | .word { 20 | .char { 21 | transform: translateY(0%); 22 | } 23 | } 24 | } 25 | } 26 | 27 | canvas { 28 | position: fixed; 29 | top: 0; 30 | left: 0; 31 | width: 100%; 32 | height: 100%; 33 | z-index: 2; 34 | pointer-events: none; 35 | } 36 | } 37 | 38 | .home__wrapper { 39 | position: absolute; 40 | width: 100%; 41 | height: fit-content; 42 | min-height: 100vh; 43 | overflow: hidden; 44 | will-change: transform; 45 | } 46 | 47 | .home__banner { 48 | width: 100%; 49 | min-height: 150vh; 50 | padding: 10vh 0; 51 | 52 | @media only screen and (max-width: 500px) { 53 | min-height: 100vh; 54 | display: flex; 55 | align-items: center; 56 | justify-content: center; 57 | } 58 | } 59 | 60 | .home__banner__inner { 61 | width: 100%; 62 | display: flex; 63 | flex-direction: column; 64 | align-items: flex-start; 65 | justify-content: center; 66 | padding: 0 0 0 5%; 67 | } 68 | 69 | .home__title { 70 | width: 70%; 71 | font-family: $font-b; 72 | 73 | @include media("