├── Personal Portfolio 3D V2 ├── build │ ├── case.html │ ├── css │ │ ├── app.css │ │ └── app.css.map │ ├── img │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon.png │ │ ├── arrow-up-right.svg │ │ ├── ava-1.jpg │ │ ├── bg-discover.jpg │ │ ├── bg-footer.png │ │ ├── bg-header-mobile.png │ │ ├── bg-header.png │ │ ├── bg-main.jpg │ │ ├── cases-pic-1.jpg │ │ ├── cases-pic-2.jpg │ │ ├── cases-pic-3.jpg │ │ ├── cases-pic-4.jpg │ │ ├── cases-pic-5.jpg │ │ ├── cases-pic-6.jpg │ │ ├── cases-pic-7.jpg │ │ ├── color-picker.png │ │ ├── cursor.png │ │ ├── desc-pic-1.jpg │ │ ├── desc-pic-2.jpg │ │ ├── desc-pic-3.jpg │ │ ├── desc-pic-4.jpg │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── fb-og-image.jpg │ │ ├── figure-1.png │ │ ├── figure-2.png │ │ ├── figure-3.png │ │ ├── figures-1.png │ │ ├── figures-2.png │ │ ├── figures-3.png │ │ ├── figures-4.png │ │ ├── figures-5.png │ │ ├── figures-6.png │ │ ├── footer-cube-1.png │ │ ├── footer-cube-2.png │ │ ├── hand.png │ │ ├── logo-empty.svg │ │ ├── logo-white.svg │ │ ├── logo.svg │ │ ├── main-pic-1.png │ │ ├── main-pic-2.png │ │ ├── main-pic-3.png │ │ ├── main-pic-4.png │ │ ├── main-pic-5.png │ │ ├── main-pic-6.png │ │ ├── main-pic-7.png │ │ ├── mstile-150x150.png │ │ ├── product-pic-1.jpg │ │ ├── product-pic-2.jpg │ │ ├── review-cube.png │ │ ├── safari-pinned-tab.svg │ │ ├── scroll.svg │ │ ├── sprite.svg │ │ ├── twitter-card.jpg │ │ ├── work-cube-1.png │ │ ├── work-cube-2.png │ │ ├── work-cube-3.png │ │ ├── work-cube-4.png │ │ ├── work-cube-5.png │ │ ├── work-cube-6.png │ │ ├── work-cube-7.png │ │ └── work-cube.png │ ├── index.html │ └── js │ │ ├── app.js │ │ ├── common.js │ │ └── lib │ │ ├── aos.js │ │ ├── jquery.fancybox.min.js │ │ ├── jquery.min.js │ │ ├── owl.carousel.min.js │ │ ├── simpleParallax.min.js │ │ └── svg4everybody.min.js ├── gulp │ ├── config.js │ ├── tasks │ │ ├── build.js │ │ ├── clean.js │ │ ├── copy.js │ │ ├── default.js │ │ ├── index-page │ │ │ ├── __index.html │ │ │ └── index-page.js │ │ ├── js.js │ │ ├── pug.js │ │ ├── sass.js │ │ ├── server.js │ │ ├── sprite-svg │ │ │ ├── _sprite-svg.scss │ │ │ └── sprite-svg.js │ │ ├── svgo.js │ │ └── watch.js │ └── util │ │ └── handle-errors.js └── src │ ├── icons │ ├── arrow-left.svg │ ├── arrow-next.svg │ ├── arrow-prev.svg │ ├── arrow-right.svg │ ├── arrows.svg │ ├── dribbble.svg │ ├── email.svg │ ├── instagram.svg │ ├── message.svg │ ├── phone.svg │ ├── place.svg │ ├── profile.svg │ └── send.svg │ ├── img │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── arrow-up-right.svg │ ├── ava-1.jpg │ ├── bg-discover.jpg │ ├── bg-footer.png │ ├── bg-header-mobile.png │ ├── bg-header.png │ ├── bg-main.jpg │ ├── browserconfig.xml │ ├── cases-pic-1.jpg │ ├── cases-pic-2.jpg │ ├── cases-pic-3.jpg │ ├── cases-pic-4.jpg │ ├── cases-pic-5.jpg │ ├── cases-pic-6.jpg │ ├── cases-pic-7.jpg │ ├── color-picker.png │ ├── cursor.png │ ├── desc-pic-1.jpg │ ├── desc-pic-2.jpg │ ├── desc-pic-3.jpg │ ├── desc-pic-4.jpg │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── fb-og-image.jpg │ ├── figure-1.png │ ├── figure-2.png │ ├── figure-3.png │ ├── figures-1.png │ ├── figures-2.png │ ├── figures-3.png │ ├── figures-4.png │ ├── figures-5.png │ ├── figures-6.png │ ├── footer-cube-1.png │ ├── footer-cube-2.png │ ├── hand.png │ ├── logo-empty.svg │ ├── logo-white.svg │ ├── logo.svg │ ├── main-pic-1.png │ ├── main-pic-2.png │ ├── main-pic-3.png │ ├── main-pic-4.png │ ├── main-pic-5.png │ ├── main-pic-6.png │ ├── main-pic-7.png │ ├── mstile-150x150.png │ ├── product-pic-1.jpg │ ├── product-pic-2.jpg │ ├── review-cube.png │ ├── safari-pinned-tab.svg │ ├── scroll.svg │ ├── site.webmanifest │ ├── twitter-card.jpg │ ├── work-cube-1.png │ ├── work-cube-2.png │ ├── work-cube-3.png │ ├── work-cube-4.png │ ├── work-cube-5.png │ ├── work-cube-6.png │ ├── work-cube-7.png │ └── work-cube.png │ ├── js │ ├── app.js │ ├── common.js │ └── lib │ │ ├── aos.js │ │ ├── jquery.fancybox.min.js │ │ ├── jquery.min.js │ │ ├── owl.carousel.min.js │ │ ├── simpleParallax.min.js │ │ └── svg4everybody.min.js │ ├── sass │ ├── _common.sass │ ├── app.sass │ ├── generated │ │ └── _sprite-svg.scss │ ├── helpers │ │ ├── _all.sass │ │ ├── _helpers.sass │ │ ├── _mixins.sass │ │ └── _reset.sass │ └── lib │ │ ├── aos.css │ │ ├── jquery.fancybox.min.css │ │ └── owl.carousel.css │ └── templates │ ├── case.pug │ ├── index.pug │ └── layouts │ ├── _head.pug │ ├── _layout.pug │ ├── _media-tags.pug │ └── _mixins.pug ├── Personal Portfolio V1 └── Personal Portfolio V1 │ ├── LICENSE │ ├── README.md │ ├── assets │ ├── css │ │ └── style.css │ ├── images │ │ ├── Blog.svg │ │ ├── Thumbs.db │ │ ├── blob.svg │ │ ├── hero-banner.jpg │ │ ├── hero-shape.svg │ │ ├── icon-1.svg │ │ ├── icon-2.svg │ │ ├── icon-3.svg │ │ ├── icon-4.svg │ │ ├── icon-5.svg │ │ ├── logo-dark.svg │ │ ├── logo-light.svg │ │ ├── project-1.png │ │ ├── project-2.png │ │ ├── project-3.png │ │ └── project-4.png │ └── js │ │ └── script.js │ ├── favicon.svg │ ├── index.html │ ├── index.txt │ ├── readme-images │ └── desktop.png │ └── style-guide.md └── README.md /Personal Portfolio 3D V2/build/img/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/android-chrome-192x192.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/android-chrome-512x512.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/apple-touch-icon.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/arrow-up-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/ava-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/ava-1.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/bg-discover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/bg-discover.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/bg-footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/bg-footer.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/bg-header-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/bg-header-mobile.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/bg-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/bg-header.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/bg-main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/bg-main.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/cases-pic-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/cases-pic-1.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/cases-pic-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/cases-pic-2.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/cases-pic-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/cases-pic-3.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/cases-pic-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/cases-pic-4.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/cases-pic-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/cases-pic-5.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/cases-pic-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/cases-pic-6.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/cases-pic-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/cases-pic-7.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/color-picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/color-picker.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/cursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/cursor.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/desc-pic-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/desc-pic-1.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/desc-pic-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/desc-pic-2.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/desc-pic-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/desc-pic-3.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/desc-pic-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/desc-pic-4.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/favicon-16x16.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/favicon-32x32.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/fb-og-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/fb-og-image.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/figure-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/figure-1.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/figure-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/figure-2.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/figure-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/figure-3.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/figures-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/figures-1.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/figures-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/figures-2.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/figures-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/figures-3.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/figures-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/figures-4.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/figures-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/figures-5.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/figures-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/figures-6.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/footer-cube-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/footer-cube-1.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/footer-cube-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/footer-cube-2.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/hand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/hand.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/logo-empty.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/logo-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/main-pic-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/main-pic-1.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/main-pic-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/main-pic-2.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/main-pic-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/main-pic-3.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/main-pic-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/main-pic-4.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/main-pic-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/main-pic-5.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/main-pic-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/main-pic-6.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/main-pic-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/main-pic-7.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/mstile-150x150.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/product-pic-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/product-pic-1.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/product-pic-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/product-pic-2.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/review-cube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/review-cube.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/scroll.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/sprite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/twitter-card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/twitter-card.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/work-cube-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/work-cube-1.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/work-cube-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/work-cube-2.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/work-cube-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/work-cube-3.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/work-cube-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/work-cube-4.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/work-cube-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/work-cube-5.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/work-cube-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/work-cube-6.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/work-cube-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/work-cube-7.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/img/work-cube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/build/img/work-cube.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/js/common.js: -------------------------------------------------------------------------------- 1 | // svg icons support ie11 2 | (function () { 3 | svg4everybody(); 4 | })(); 5 | 6 | // check if touch device 7 | function isTouchDevice() { 8 | var prefixes = ' -webkit- -moz- -o- -ms- '.split(' '); 9 | var mq = function mq(query) { 10 | return window.matchMedia(query).matches; 11 | }; 12 | if ('ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch) { 13 | return true; 14 | } 15 | var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join(''); 16 | return mq(query); 17 | } 18 | 19 | if (isTouchDevice()) { 20 | $('body').addClass('touch-device'); 21 | } 22 | 23 | // header 24 | (function () { 25 | var header = $('.js-header'), 26 | burger = header.find('.js-header-burger'), 27 | wrapper = header.find('.js-header-wrapper'), 28 | html = $('html'), 29 | body = $('body'); 30 | burger.on('click', function () { 31 | burger.toggleClass('active'); 32 | wrapper.toggleClass('visible'); 33 | html.toggleClass('no-scroll'); 34 | body.toggleClass('no-scroll'); 35 | }); 36 | })(); 37 | 38 | // carousel arrows 39 | var navArrows = ['\n \n \n ', '\n \n ']; 40 | 41 | // owl carousel 42 | $(document).ready(function () { 43 | var slider = $('.js-slider-details'); 44 | 45 | slider.owlCarousel({ 46 | items: 3, 47 | nav: true, 48 | navElement: 'button', 49 | navText: navArrows, 50 | dots: false, 51 | loop: true, 52 | smartSpeed: 700, 53 | responsive: { 54 | 320: { 55 | items: 1 56 | }, 57 | 768: { 58 | items: 2 59 | }, 60 | 1024: { 61 | items: 3 62 | } 63 | } 64 | }); 65 | 66 | // slider.on('changed.owl.carousel', function(event) { 67 | // const items = slider.find('.owl-item'); 68 | // items.removeClass('left'); 69 | // items.eq(event.item.index).prevAll().addClass('left'); 70 | 71 | // }); 72 | 73 | // $(document).on('click', '.owl-item', function(){ 74 | // itemsIndex = $(this).index(); 75 | // slider.trigger('to.owl.carousel', itemsIndex); 76 | // }); 77 | 78 | $('.js-slider-review').owlCarousel({ 79 | items: 1, 80 | nav: true, 81 | navElement: 'button', 82 | navText: navArrows, 83 | dots: false, 84 | loop: true, 85 | smartSpeed: 700, 86 | autoplay: true, 87 | autoplayTimeout: 5000, 88 | responsive: { 89 | 320: { 90 | nav: false, 91 | dots: true 92 | }, 93 | 768: { 94 | nav: true, 95 | dots: false 96 | } 97 | } 98 | }); 99 | 100 | $('.js-slider-cases').owlCarousel({ 101 | items: 2, 102 | nav: true, 103 | navElement: 'button', 104 | navText: navArrows, 105 | dots: false, 106 | loop: true, 107 | smartSpeed: 700, 108 | responsive: { 109 | 320: { 110 | nav: false, 111 | dots: true, 112 | items: 1 113 | }, 114 | 768: { 115 | nav: true, 116 | dots: false, 117 | items: 2 118 | } 119 | } 120 | }); 121 | }); 122 | 123 | // owl carousel 124 | (function () { 125 | var slider = $('.js-owl'); 126 | if (slider.length) { 127 | slider.each(function () { 128 | var _this = $(this), 129 | itemsMobileAlbum = _this.data('items-mobile-album'), 130 | itemsMobilePortrait = _this.data('items-mobile-portrait'); 131 | console.log(itemsMobileAlbum); 132 | if (itemsMobileAlbum && itemsMobilePortrait) { 133 | owlMobileAlbum(_this, itemsMobileAlbum, itemsMobilePortrait); 134 | $(window).resize(function () { 135 | owlMobileAlbum(_this, itemsMobileAlbum, itemsMobilePortrait); 136 | }); 137 | } 138 | if (!itemsMobileAlbum && itemsMobilePortrait) { 139 | owlMobilePortrait(_this, itemsMobilePortrait); 140 | $(window).resize(function () { 141 | owlMobilePortrait(_this, itemsMobilePortrait); 142 | }); 143 | } 144 | }); 145 | } 146 | 147 | // mobile album 148 | function owlMobileAlbum(obj, itemsMobileAlbum, itemsMobilePortrait) { 149 | var optionLoop = true; 150 | if (obj.is('[data-no-loop]')) { 151 | optionLoop = false; 152 | } 153 | var optionAutoHeight = false; 154 | if (obj.is('[data-autoheight]')) { 155 | optionAutoHeight = true; 156 | } 157 | var fullWidth = window.innerWidth; 158 | if (navigator.platform.indexOf('Win') > -1) { 159 | var mobilePoint = 766; // windows 160 | } else { 161 | var mobilePoint = 767; // mac os 162 | } 163 | // console.log(mobilePoint); 164 | if (fullWidth <= mobilePoint) { 165 | if (!obj.hasClass('owl-carousel')) { 166 | obj.addClass('owl-carousel'); 167 | obj.owlCarousel({ 168 | items: itemsMobileAlbum, 169 | nav: false, 170 | dots: true, 171 | loop: optionLoop, 172 | smartSpeed: 600, 173 | autoHeight: optionAutoHeight, 174 | responsive: { 175 | 0: { 176 | items: itemsMobilePortrait 177 | }, 178 | 480: { 179 | items: itemsMobileAlbum 180 | } 181 | } 182 | }); 183 | } 184 | } else { 185 | obj.removeClass('owl-carousel'); 186 | obj.trigger('destroy.owl.carousel'); 187 | } 188 | } 189 | 190 | // mobile portrait 191 | function owlMobilePortrait(obj, itemsMobilePortrait) { 192 | var optionLoop = true; 193 | if (obj.is('[data-no-loop]')) { 194 | optionLoop = false; 195 | } 196 | var optionAutoHeight = false; 197 | if (obj.is('[data-autoheight]')) { 198 | optionAutoHeight = true; 199 | } 200 | var windowWidth = $(window).width(); 201 | if (windowWidth <= 479) { 202 | if (!obj.hasClass('owl-carousel')) { 203 | obj.addClass('owl-carousel'); 204 | obj.owlCarousel({ 205 | items: itemsMobilePortrait, 206 | nav: false, 207 | dots: true, 208 | smartSpeed: 600, 209 | loop: optionLoop, 210 | autoHeight: optionAutoHeight 211 | }); 212 | } 213 | } else { 214 | obj.removeClass('owl-carousel'); 215 | obj.trigger('destroy.owl.carousel'); 216 | } 217 | } 218 | })(); 219 | 220 | // aos animation 221 | AOS.init(); 222 | 223 | // parallax effect 224 | (function () { 225 | var parallax = $('.js-parallax'); 226 | if (parallax.length) { 227 | parallax.each(function () { 228 | var _this = $(this), 229 | scale = _this.data('scale'), 230 | orientation = _this.data('orientation'); 231 | 232 | new simpleParallax(_this[0], { 233 | scale: scale, 234 | orientation: orientation, 235 | delay: .5, 236 | overflow: true, 237 | transition: 'cubic-bezier(0,0,0,1)' 238 | }); 239 | }); 240 | } 241 | })(); 242 | 243 | // scroll to section 244 | (function () { 245 | var btn = $('.js-scroll'); 246 | btn.click(function () { 247 | $("html, body").animate({ 248 | scrollTop: $($(this).attr("href")).offset().top + "px" 249 | }, { 250 | duration: 1000 251 | }); 252 | return false; 253 | }); 254 | })(); 255 | 256 | // set the starting position of the cursor outside of the screen 257 | var clientX = -100; 258 | var clientY = -100; 259 | var innerCursor = document.querySelector(".cursor"); 260 | 261 | var initCursor = function initCursor() { 262 | // add listener to track the current mouse position 263 | document.addEventListener("mousemove", function (e) { 264 | clientX = e.clientX; 265 | clientY = e.clientY; 266 | }); 267 | 268 | // transform the innerCursor to the current mouse position 269 | // use requestAnimationFrame() for smooth performance 270 | var render = function render() { 271 | innerCursor.style.transform = 'translate(' + clientX + 'px, ' + clientY + 'px)'; 272 | // if you are already using TweenMax in your project, you might as well 273 | // use TweenMax.set() instead 274 | // TweenMax.set(innerCursor, { 275 | // x: clientX, 276 | // y: clientY 277 | // }); 278 | 279 | requestAnimationFrame(render); 280 | }; 281 | requestAnimationFrame(render); 282 | }; 283 | 284 | initCursor(); -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/build/js/lib/svg4everybody.min.js: -------------------------------------------------------------------------------- 1 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 2 | 3 | !function (a, b) { 4 | "function" == typeof define && define.amd ? define([], function () { 5 | return a.svg4everybody = b(); 6 | }) : "object" == (typeof module === "undefined" ? "undefined" : _typeof(module)) && module.exports ? module.exports = b() : a.svg4everybody = b(); 7 | }(this, function () { 8 | function a(a, b, c) { 9 | if (c) { 10 | var d = document.createDocumentFragment(), 11 | e = !b.hasAttribute("viewBox") && c.getAttribute("viewBox");e && b.setAttribute("viewBox", e);for (var f = c.cloneNode(!0); f.childNodes.length;) { 12 | d.appendChild(f.firstChild); 13 | }a.appendChild(d); 14 | } 15 | }function b(b) { 16 | b.onreadystatechange = function () { 17 | if (4 === b.readyState) { 18 | var c = b._cachedDocument;c || (c = b._cachedDocument = document.implementation.createHTMLDocument(""), c.body.innerHTML = b.responseText, b._cachedTarget = {}), b._embeds.splice(0).map(function (d) { 19 | var e = b._cachedTarget[d.id];e || (e = b._cachedTarget[d.id] = c.getElementById(d.id)), a(d.parent, d.svg, e); 20 | }); 21 | } 22 | }, b.onreadystatechange(); 23 | }function c(c) { 24 | function e() { 25 | for (var c = 0; c < o.length;) { 26 | var h = o[c], 27 | i = h.parentNode, 28 | j = d(i), 29 | k = h.getAttribute("xlink:href") || h.getAttribute("href");if (!k && g.attributeName && (k = h.getAttribute(g.attributeName)), j && k) { 30 | if (f) if (!g.validate || g.validate(k, j, h)) { 31 | i.removeChild(h);var l = k.split("#"), 32 | q = l.shift(), 33 | r = l.join("#");if (q.length) { 34 | var s = m[q];s || (s = m[q] = new XMLHttpRequest(), s.open("GET", q), s.send(), s._embeds = []), s._embeds.push({ parent: i, svg: j, id: r }), b(s); 35 | } else a(i, j, document.getElementById(r)); 36 | } else ++c, ++p; 37 | } else ++c; 38 | }(!o.length || o.length - p > 0) && n(e, 67); 39 | }var f, 40 | g = Object(c), 41 | h = /\bTrident\/[567]\b|\bMSIE (?:9|10)\.0\b/, 42 | i = /\bAppleWebKit\/(\d+)\b/, 43 | j = /\bEdge\/12\.(\d+)\b/, 44 | k = /\bEdge\/.(\d+)\b/, 45 | l = window.top !== window.self;f = "polyfill" in g ? g.polyfill : h.test(navigator.userAgent) || (navigator.userAgent.match(j) || [])[1] < 10547 || (navigator.userAgent.match(i) || [])[1] < 537 || k.test(navigator.userAgent) && l;var m = {}, 46 | n = window.requestAnimationFrame || setTimeout, 47 | o = document.getElementsByTagName("use"), 48 | p = 0;f && e(); 49 | }function d(a) { 50 | for (var b = a; "svg" !== b.nodeName.toLowerCase() && (b = b.parentNode);) {}return b; 51 | }return c; 52 | }); -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/config.js: -------------------------------------------------------------------------------- 1 | var util = require('gulp-util'); 2 | 3 | var production = util.env.production || util.env.prod || false; 4 | var destPath = 'build'; 5 | 6 | var config = { 7 | env : 'development', 8 | production: production, 9 | 10 | src: { 11 | root : 'src', 12 | templates : 'src/templates', 13 | templatesData: 'src/templates/data', 14 | sass : 'src/sass', 15 | // path for sass files that will be generated automatically via some of tasks 16 | sassGen : 'src/sass/generated', 17 | js : 'src/js', 18 | img : 'src/img', 19 | svg : 'src/img/svg', 20 | icons : 'src/icons', 21 | // path to png sources for sprite:png task 22 | iconsPng : 'src/icons', 23 | // path to svg sources for sprite:svg task 24 | iconsSvg : 'src/icons', 25 | // path to svg sources for iconfont task 26 | iconsFont : 'src/icons', 27 | fonts : 'src/fonts', 28 | lib : 'src/lib' 29 | }, 30 | dest: { 31 | root : destPath, 32 | html : destPath, 33 | css : destPath + '/css', 34 | js : destPath + '/js', 35 | img : destPath + '/img', 36 | fonts: destPath + '/css/fonts', 37 | lib : destPath + '/lib' 38 | }, 39 | 40 | setEnv: function(env) { 41 | if (typeof env !== 'string') return; 42 | this.env = env; 43 | this.production = env === 'production'; 44 | process.env.NODE_ENV = env; 45 | }, 46 | 47 | logEnv: function() { 48 | util.log( 49 | 'Environment:', 50 | util.colors.white.bgRed(' ' + process.env.NODE_ENV + ' ') 51 | ); 52 | }, 53 | 54 | errorHandler: require('./util/handle-errors') 55 | }; 56 | 57 | config.setEnv(production ? 'production' : 'development'); 58 | 59 | module.exports = config; 60 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/tasks/build.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var runSequence = require('run-sequence'); 3 | var config = require('../config'); 4 | 5 | function build(cb) { 6 | runSequence( 7 | 'clean', 8 | 'sprite:svg', 9 | 'svgo', 10 | 'sass', 11 | 'pug', 12 | 'js', 13 | 'copy', 14 | cb 15 | ); 16 | } 17 | 18 | gulp.task('build', function(cb) { 19 | config.setEnv('production'); 20 | config.logEnv(); 21 | build(cb); 22 | }); 23 | 24 | gulp.task('build:dev', function(cb) { 25 | config.setEnv('development'); 26 | config.logEnv(); 27 | build(cb); 28 | }); 29 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/tasks/clean.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var del = require('del'); 3 | var util = require('gulp-util'); 4 | var config = require('../config'); 5 | 6 | gulp.task('clean', function(cb) { 7 | return del([ 8 | config.dest.root 9 | ]).then(function(paths) { 10 | util.log('Deleted:', util.colors.magenta(paths.join('\n'))); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/tasks/copy.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var config = require('../config.js'); 3 | 4 | gulp.task('copy:fonts', function() { 5 | return gulp 6 | .src(config.src.fonts + '/*.{ttf,eot,woff,woff2}') 7 | .pipe(gulp.dest(config.dest.fonts)); 8 | }); 9 | 10 | gulp.task('copy:lib', function() { 11 | return gulp 12 | .src(config.src.lib + '/**/*.*') 13 | .pipe(gulp.dest(config.dest.lib)); 14 | }); 15 | 16 | gulp.task('copy:rootfiles', function() { 17 | return gulp 18 | .src(config.src.root + '/*.*') 19 | .pipe(gulp.dest(config.dest.root)); 20 | }); 21 | 22 | gulp.task('copy:img', function() { 23 | return gulp 24 | .src([ 25 | config.src.img + '/**/*.{jpg,png,jpeg,svg,gif}', 26 | '!' + config.src.img + '/svgo/**/*.*' 27 | ]) 28 | .pipe(gulp.dest(config.dest.img)); 29 | }); 30 | 31 | gulp.task('copy', [ 32 | 'copy:img', 33 | // 'copy:rootfiles', 34 | // 'copy:lib', 35 | 'copy:fonts' 36 | ]); 37 | gulp.task('copy:watch', function() { 38 | gulp.watch(config.src.img+'/*', ['copy']); 39 | }); 40 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/tasks/default.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var runSequence = require('run-sequence'); 3 | var config = require('../config'); 4 | 5 | gulp.task('default', function(cb) { 6 | runSequence( 7 | 'build:dev', 8 | 'watch', 9 | 'server', 10 | cb 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/tasks/index-page/__index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | INDEX 5 | 26 | 27 | 28 |

Pages:

29 |
    <% _.each(pages, function(page) { %> 30 |
  1. 31 | <%= _.split(page, '.', 1) %> 32 |
    2. 33 | <% }) %>
34 | 35 | 36 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/tasks/index-page/index-page.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var consolidate = require('gulp-consolidate'); 3 | var fs = require('fs'); 4 | var path = require('path'); 5 | var config = require('../../config'); 6 | var allowExt = ['.html', '.pug']; 7 | 8 | gulp.task('index-page', function() { 9 | var fullList = fs.readdirSync(config.src.templates); 10 | var pages = fullList.reduce(function(acc, val) { 11 | var parsed = path.parse(val); 12 | var name = parsed.name; 13 | var ext = parsed.ext; 14 | if (~allowExt.indexOf(ext)) { 15 | return acc.concat(name + '.html'); 16 | } 17 | return acc; 18 | }, []); 19 | 20 | return gulp 21 | .src(__dirname + '/__index.html') 22 | .pipe(consolidate('lodash', { 23 | pages: pages 24 | })) 25 | .pipe(gulp.dest(config.src.root)); 26 | }); 27 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/tasks/js.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var include = require("gulp-include"); 3 | // var uglify = require('gulp-uglify'); 4 | var config = require('../config'); 5 | var browserSync = require('browser-sync'); 6 | var babel = require('gulp-babel'); 7 | reload = browserSync.reload; 8 | 9 | 10 | gulp.task('js', function () { 11 | gulp.src(config.src.js+'/**/*.js') 12 | .pipe(include()) 13 | // .on('error', function(){notify("Javascript include error");}) 14 | //.pipe(uglify()) 15 | .pipe(babel()) 16 | .pipe(gulp.dest(config.dest.js+'/')) 17 | .pipe(reload({stream: true})); 18 | }); 19 | 20 | gulp.task('js:watch', function() { 21 | gulp.watch(config.src.js+'/*', ['js']); 22 | }); -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/tasks/pug.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var pug = require('gulp-pug'); 3 | var plumber = require('gulp-plumber'); 4 | var changed = require('gulp-changed'); 5 | var gulpif = require('gulp-if'); 6 | var frontMatter = require('gulp-front-matter'); 7 | var prettify = require('gulp-prettify'); 8 | var config = require('../config'); 9 | 10 | function renderHtml(onlyChanged) { 11 | return gulp 12 | .src([config.src.templates + '/[^_]*.pug']) 13 | .pipe(plumber({ errorHandler: config.errorHandler })) 14 | .pipe(gulpif(onlyChanged, changed(config.dest.html, { extension: '.html' }))) 15 | .pipe(frontMatter({ property: 'data' })) 16 | .pipe(pug()) 17 | .pipe(prettify({ 18 | indent_size: 2, 19 | wrap_attributes: 'auto', // 'force' 20 | preserve_newlines: true, 21 | // unformatted: [], 22 | end_with_newline: true 23 | })) 24 | .pipe(gulp.dest(config.dest.html)); 25 | } 26 | 27 | gulp.task('pug', function() { 28 | return renderHtml(); 29 | }); 30 | 31 | gulp.task('pug:changed', function() { 32 | return renderHtml(true); 33 | }); 34 | 35 | gulp.task('pug:watch', function() { 36 | gulp.watch([config.src.templates + '/**/_*.pug'], ['pug']); 37 | gulp.watch([config.src.templates + '/**/[^_]*.pug'], ['pug:changed']); 38 | }); 39 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/tasks/sass.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var sass = require('gulp-sass'); 3 | var sourcemaps = require('gulp-sourcemaps'); 4 | var postcss = require('gulp-postcss'); 5 | var autoprefixer = require('autoprefixer'); 6 | var mqpacker = require('css-mqpacker'); 7 | var config = require('../config'); 8 | 9 | var processors = [ 10 | autoprefixer({ 11 | browsers: ['last 4 versions'], 12 | cascade: false 13 | }), 14 | mqpacker({ 15 | sort: sortMediaQueries 16 | }) 17 | ]; 18 | 19 | gulp.task('sass', function() { 20 | return gulp 21 | .src(config.src.sass + '/*.{sass,scss}') 22 | .pipe(sourcemaps.init()) 23 | .pipe(sass({ 24 | outputStyle: config.production ? 'compact' : 'expanded', // nested, expanded, compact, compressed 25 | precision: 5 26 | })) 27 | .on('error', config.errorHandler) 28 | .pipe(postcss(processors)) 29 | .pipe(sourcemaps.write('./')) 30 | .pipe(gulp.dest(config.dest.css)); 31 | }); 32 | 33 | gulp.task('sass:watch', function() { 34 | gulp.watch(config.src.sass + '/**/*.{sass,scss}', ['sass']); 35 | }); 36 | 37 | function isMax(mq) { 38 | return /max-width/.test(mq); 39 | } 40 | 41 | function isMin(mq) { 42 | return /min-width/.test(mq); 43 | } 44 | 45 | function sortMediaQueries(a, b) { 46 | A = a.replace(/\D/g, ''); 47 | B = b.replace(/\D/g, ''); 48 | 49 | if (isMax(a) && isMax(b)) { 50 | return B - A; 51 | } else if (isMin(a) && isMin(b)) { 52 | return A - B; 53 | } else if (isMax(a) && isMin(b)) { 54 | return 1; 55 | } else if (isMin(a) && isMax(b)) { 56 | return -1; 57 | } 58 | 59 | return 1; 60 | } 61 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/tasks/server.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var server = require('browser-sync').create(); 3 | var util = require('gulp-util'); 4 | var config = require('../config'); 5 | 6 | // in CL 'gulp server --open' to open current project in browser 7 | // in CL 'gulp server --tunnel siteName' to make project available over http://siteName.localtunnel.me 8 | 9 | gulp.task('server', function() { 10 | server.init({ 11 | server: { 12 | baseDir: !config.production ? [config.dest.root, config.src.root] : config.dest.root, 13 | directory: false, 14 | serveStaticOptions: { 15 | extensions: ['html'] 16 | } 17 | }, 18 | files: [ 19 | config.dest.html + '/*.html', 20 | config.dest.css + '/*.css', 21 | config.dest.img + '/**/*' 22 | ], 23 | port: util.env.port || 3000, 24 | logLevel: 'info', // 'debug', 'info', 'silent', 'warn' 25 | logConnections: false, 26 | logFileChanges: true, 27 | open: true, 28 | notify: false, 29 | ghostMode: false, 30 | online: true, 31 | tunnel: util.env.tunnel || null 32 | }); 33 | }); 34 | 35 | module.exports = server; 36 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/tasks/sprite-svg/_sprite-svg.scss: -------------------------------------------------------------------------------- 1 | <% _.each(symbols, function(symbol) { %>.<%= symbol.name %> { 2 | width: <%= symbol.ratio %>em; 3 | height: 1em; 4 | fill: <%= symbol.fill %>; 5 | } 6 | <% }); %> 7 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/tasks/sprite-svg/sprite-svg.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var plumber = require('gulp-plumber'); 3 | var svgmin = require('gulp-svgmin'); 4 | var svgStore = require('gulp-svgstore'); 5 | var rename = require('gulp-rename'); 6 | var cheerio = require('gulp-cheerio'); 7 | var through2 = require('through2'); 8 | var consolidate = require('gulp-consolidate'); 9 | var config = require('../../config'); 10 | 11 | gulp.task('sprite:svg', function() { 12 | return gulp 13 | .src(config.src.iconsSvg + '/*.svg') 14 | .pipe(plumber({ 15 | errorHandler: config.errorHandler 16 | })) 17 | .pipe(svgmin({ 18 | js2svg: { 19 | pretty: true 20 | }, 21 | plugins: [{ 22 | removeDesc: true 23 | }, { 24 | cleanupIDs: true 25 | }, { 26 | mergePaths: false 27 | }] 28 | })) 29 | .pipe(rename({ prefix: 'icon-' })) 30 | .pipe(svgStore({ inlineSvg: false })) 31 | .pipe(through2.obj(function(file, encoding, cb) { 32 | var $ = file.cheerio; 33 | var data = $('svg > symbol').map(function() { 34 | var $this = $(this); 35 | var size = $this.attr('viewBox').split(' ').splice(2); 36 | var name = $this.attr('id'); 37 | var ratio = size[0] / size[1]; // symbol width / symbol height 38 | var fill = $this.find('[fill]:not([fill="currentColor"])').attr('fill'); 39 | var stroke = $this.find('[stroke]').attr('stroke'); 40 | return { 41 | name: name, 42 | ratio: +ratio.toFixed(2), 43 | fill: fill || 'initial', 44 | stroke: stroke || 'initial' 45 | }; 46 | }).get(); 47 | this.push(file); 48 | gulp.src(__dirname + '/_sprite-svg.scss') 49 | .pipe(consolidate('lodash', { 50 | symbols: data 51 | })) 52 | .pipe(gulp.dest(config.src.sassGen)); 53 | gulp.src(__dirname + '/sprite.html') 54 | .pipe(consolidate('lodash', { 55 | symbols: data 56 | })) 57 | .pipe(gulp.dest(config.src.root)); 58 | cb(); 59 | })) 60 | .pipe(cheerio({ 61 | run: function($, file) { 62 | $('[fill]:not([fill="currentColor"])').removeAttr('fill'); 63 | $('[stroke]').removeAttr('stroke'); 64 | }, 65 | parserOptions: { xmlMode: true } 66 | })) 67 | .pipe(rename({ basename: 'sprite' })) 68 | .pipe(gulp.dest(config.dest.img)); 69 | }); 70 | 71 | gulp.task('sprite:svg:watch', function() { 72 | gulp.watch(config.src.iconsSvg + '/*.svg', ['sprite:svg']); 73 | }); 74 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/tasks/svgo.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var svgmin = require('gulp-svgmin'); 3 | var changed = require('gulp-changed'); 4 | var plumber = require('gulp-plumber'); 5 | var config = require('../config'); 6 | 7 | gulp.task('svgo', function() { 8 | return gulp 9 | .src(config.src.img + '/svgo/**/*.svg') 10 | .pipe(plumber({ 11 | errorHandler: config.errorHandler 12 | })) 13 | .pipe(changed(config.dest.img)) 14 | .pipe(svgmin({ 15 | js2svg: { 16 | pretty: true 17 | }, 18 | plugins: [{ 19 | removeDesc: true 20 | }, { 21 | cleanupIDs: true 22 | }, { 23 | mergePaths: false 24 | }] 25 | })) 26 | .pipe(gulp.dest(config.dest.img)); 27 | }); 28 | 29 | gulp.task('svgo:watch', function() { 30 | gulp.watch(config.src.img + '/svgo/**/*.svg', ['svgo']); 31 | }); 32 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/tasks/watch.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var config = require('../config'); 3 | 4 | gulp.task('watch', 5 | ['copy:watch', 6 | 'pug:watch', 7 | 'sprite:svg:watch', 8 | 'svgo:watch', 9 | 'js:watch', 10 | 'sass:watch' 11 | ]); 12 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/gulp/util/handle-errors.js: -------------------------------------------------------------------------------- 1 | var notify = require('gulp-notify'); 2 | 3 | module.exports = function() { 4 | var args = Array.prototype.slice.call(arguments); 5 | notify.onError({ 6 | title: 'Compile Error', 7 | message: '<%= error.message %>', 8 | sound: 'Submarine' 9 | }).apply(this, args); 10 | this.emit('end'); 11 | }; 12 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/icons/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/icons/arrow-next.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/icons/arrow-prev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/icons/arrows.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/icons/dribbble.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/icons/email.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/icons/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/icons/message.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/icons/phone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/icons/place.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/icons/profile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/icons/send.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/android-chrome-192x192.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/android-chrome-512x512.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/apple-touch-icon.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/arrow-up-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/ava-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/ava-1.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/bg-discover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/bg-discover.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/bg-footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/bg-footer.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/bg-header-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/bg-header-mobile.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/bg-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/bg-header.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/bg-main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/bg-main.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/cases-pic-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/cases-pic-1.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/cases-pic-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/cases-pic-2.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/cases-pic-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/cases-pic-3.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/cases-pic-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/cases-pic-4.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/cases-pic-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/cases-pic-5.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/cases-pic-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/cases-pic-6.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/cases-pic-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/cases-pic-7.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/color-picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/color-picker.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/cursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/cursor.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/desc-pic-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/desc-pic-1.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/desc-pic-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/desc-pic-2.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/desc-pic-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/desc-pic-3.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/desc-pic-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/desc-pic-4.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/favicon-16x16.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/favicon-32x32.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/favicon.ico -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/fb-og-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/fb-og-image.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/figure-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/figure-1.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/figure-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/figure-2.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/figure-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/figure-3.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/figures-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/figures-1.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/figures-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/figures-2.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/figures-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/figures-3.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/figures-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/figures-4.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/figures-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/figures-5.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/figures-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/figures-6.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/footer-cube-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/footer-cube-1.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/footer-cube-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/footer-cube-2.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/hand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/hand.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/logo-empty.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/logo-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/main-pic-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/main-pic-1.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/main-pic-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/main-pic-2.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/main-pic-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/main-pic-3.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/main-pic-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/main-pic-4.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/main-pic-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/main-pic-5.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/main-pic-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/main-pic-6.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/main-pic-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/main-pic-7.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/mstile-150x150.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/product-pic-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/product-pic-1.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/product-pic-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/product-pic-2.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/review-cube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/review-cube.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/scroll.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/twitter-card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/twitter-card.jpg -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/work-cube-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/work-cube-1.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/work-cube-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/work-cube-2.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/work-cube-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/work-cube-3.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/work-cube-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/work-cube-4.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/work-cube-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/work-cube-5.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/work-cube-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/work-cube-6.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/work-cube-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/work-cube-7.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/img/work-cube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio 3D V2/src/img/work-cube.png -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/js/app.js: -------------------------------------------------------------------------------- 1 | // example of simple includes for js 2 | //=include lib/jquery.min.js 3 | //=include lib/owl.carousel.min.js 4 | //=include lib/svg4everybody.min.js 5 | //=include lib/aos.js 6 | //=include lib/simpleParallax.min.js 7 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/js/common.js: -------------------------------------------------------------------------------- 1 | // svg icons support ie11 2 | (function(){ 3 | svg4everybody(); 4 | }()); 5 | 6 | // check if touch device 7 | function isTouchDevice(){ 8 | var prefixes = ' -webkit- -moz- -o- -ms- '.split(' '); 9 | var mq = function(query) { 10 | return window.matchMedia(query).matches; 11 | } 12 | if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) { 13 | return true; 14 | } 15 | var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join(''); 16 | return mq(query); 17 | } 18 | 19 | if (isTouchDevice()) { 20 | $('body').addClass('touch-device'); 21 | } 22 | 23 | // header 24 | (function () { 25 | const header = $('.js-header'), 26 | burger = header.find('.js-header-burger'), 27 | wrapper = header.find('.js-header-wrapper'), 28 | html = $('html'), 29 | body = $('body'); 30 | burger.on('click', function(){ 31 | burger.toggleClass('active'); 32 | wrapper.toggleClass('visible'); 33 | html.toggleClass('no-scroll'); 34 | body.toggleClass('no-scroll'); 35 | }) 36 | }()); 37 | 38 | // carousel arrows 39 | const navArrows = [` 40 | 41 | 42 | `, 43 | ` 44 | 45 | `]; 46 | 47 | // owl carousel 48 | $(document).ready(function(){ 49 | const slider = $('.js-slider-details'); 50 | 51 | slider.owlCarousel({ 52 | items: 3, 53 | nav: true, 54 | navElement: 'button', 55 | navText: navArrows, 56 | dots: false, 57 | loop: true, 58 | smartSpeed: 700, 59 | responsive: { 60 | 320: { 61 | items: 1 62 | }, 63 | 768: { 64 | items: 2 65 | }, 66 | 1024: { 67 | items: 3 68 | } 69 | } 70 | }); 71 | 72 | // slider.on('changed.owl.carousel', function(event) { 73 | // const items = slider.find('.owl-item'); 74 | // items.removeClass('left'); 75 | // items.eq(event.item.index).prevAll().addClass('left'); 76 | 77 | // }); 78 | 79 | // $(document).on('click', '.owl-item', function(){ 80 | // itemsIndex = $(this).index(); 81 | // slider.trigger('to.owl.carousel', itemsIndex); 82 | // }); 83 | 84 | $('.js-slider-review').owlCarousel({ 85 | items: 1, 86 | nav: true, 87 | navElement: 'button', 88 | navText: navArrows, 89 | dots: false, 90 | loop: true, 91 | smartSpeed: 700, 92 | autoplay: true, 93 | autoplayTimeout: 5000, 94 | responsive: { 95 | 320: { 96 | nav: false, 97 | dots: true 98 | }, 99 | 768: { 100 | nav: true, 101 | dots: false 102 | } 103 | } 104 | }); 105 | 106 | $('.js-slider-cases').owlCarousel({ 107 | items: 2, 108 | nav: true, 109 | navElement: 'button', 110 | navText: navArrows, 111 | dots: false, 112 | loop: true, 113 | smartSpeed: 700, 114 | responsive: { 115 | 320: { 116 | nav: false, 117 | dots: true, 118 | items: 1 119 | }, 120 | 768: { 121 | nav: true, 122 | dots: false, 123 | items: 2 124 | } 125 | } 126 | }); 127 | 128 | }); 129 | 130 | // owl carousel 131 | (function(){ 132 | const slider = $('.js-owl'); 133 | if (slider.length) { 134 | slider.each(function () { 135 | const _this = $(this), 136 | itemsMobileAlbum = _this.data('items-mobile-album'), 137 | itemsMobilePortrait = _this.data('items-mobile-portrait'); 138 | console.log(itemsMobileAlbum); 139 | if (itemsMobileAlbum && itemsMobilePortrait) { 140 | owlMobileAlbum(_this, itemsMobileAlbum, itemsMobilePortrait); 141 | $(window).resize(function () { 142 | owlMobileAlbum(_this, itemsMobileAlbum, itemsMobilePortrait); 143 | }); 144 | } 145 | if (!itemsMobileAlbum && itemsMobilePortrait) { 146 | owlMobilePortrait(_this, itemsMobilePortrait); 147 | $(window).resize(function () { 148 | owlMobilePortrait(_this, itemsMobilePortrait); 149 | }); 150 | } 151 | }); 152 | } 153 | 154 | // mobile album 155 | function owlMobileAlbum (obj, itemsMobileAlbum, itemsMobilePortrait) { 156 | let optionLoop = true; 157 | if (obj.is('[data-no-loop]')) { 158 | optionLoop = false; 159 | } 160 | let optionAutoHeight = false; 161 | if (obj.is('[data-autoheight]')) { 162 | optionAutoHeight = true; 163 | } 164 | var fullWidth = window.innerWidth; 165 | if (navigator.platform.indexOf('Win') > -1) { 166 | var mobilePoint = 766; // windows 167 | } else { 168 | var mobilePoint = 767; // mac os 169 | } 170 | // console.log(mobilePoint); 171 | if (fullWidth <= mobilePoint) { 172 | if (!obj.hasClass('owl-carousel')) { 173 | obj.addClass('owl-carousel'); 174 | obj.owlCarousel({ 175 | items: itemsMobileAlbum, 176 | nav: false, 177 | dots: true, 178 | loop: optionLoop, 179 | smartSpeed: 600, 180 | autoHeight: optionAutoHeight, 181 | responsive: { 182 | 0: { 183 | items: itemsMobilePortrait 184 | }, 185 | 480: { 186 | items: itemsMobileAlbum 187 | } 188 | } 189 | }); 190 | } 191 | }else{ 192 | obj.removeClass('owl-carousel'); 193 | obj.trigger('destroy.owl.carousel'); 194 | } 195 | } 196 | 197 | // mobile portrait 198 | function owlMobilePortrait(obj, itemsMobilePortrait) { 199 | let optionLoop = true; 200 | if (obj.is('[data-no-loop]')) { 201 | optionLoop = false; 202 | } 203 | let optionAutoHeight = false; 204 | if (obj.is('[data-autoheight]')) { 205 | optionAutoHeight = true; 206 | } 207 | const windowWidth = $(window).width(); 208 | if (windowWidth <= 479) { 209 | if (!obj.hasClass('owl-carousel')) { 210 | obj.addClass('owl-carousel'); 211 | obj.owlCarousel({ 212 | items: itemsMobilePortrait, 213 | nav: false, 214 | dots: true, 215 | smartSpeed: 600, 216 | loop: optionLoop, 217 | autoHeight: optionAutoHeight 218 | }); 219 | } 220 | }else{ 221 | obj.removeClass('owl-carousel'); 222 | obj.trigger('destroy.owl.carousel'); 223 | } 224 | } 225 | }()); 226 | 227 | // aos animation 228 | AOS.init(); 229 | 230 | // parallax effect 231 | (function () { 232 | const parallax = $('.js-parallax'); 233 | if (parallax.length) { 234 | parallax.each(function(){ 235 | const _this = $(this), 236 | scale = _this.data('scale'), 237 | orientation = _this.data('orientation'); 238 | 239 | new simpleParallax(_this[0], { 240 | scale: scale, 241 | orientation: orientation, 242 | delay: .5, 243 | overflow: true, 244 | transition: 'cubic-bezier(0,0,0,1)' 245 | }); 246 | }); 247 | } 248 | }()); 249 | 250 | // scroll to section 251 | (function(){ 252 | const btn = $('.js-scroll'); 253 | btn.click(function() { 254 | $("html, body").animate({ 255 | scrollTop: $($(this).attr("href")).offset().top + "px" 256 | }, { 257 | duration: 1000 258 | }); 259 | return false; 260 | }); 261 | }()); 262 | 263 | // set the starting position of the cursor outside of the screen 264 | let clientX = -100; 265 | let clientY = -100; 266 | const innerCursor = document.querySelector(".cursor"); 267 | 268 | const initCursor = () => { 269 | // add listener to track the current mouse position 270 | document.addEventListener("mousemove", e => { 271 | clientX = e.clientX; 272 | clientY = e.clientY; 273 | }); 274 | 275 | // transform the innerCursor to the current mouse position 276 | // use requestAnimationFrame() for smooth performance 277 | const render = () => { 278 | innerCursor.style.transform = `translate(${clientX}px, ${clientY}px)`; 279 | // if you are already using TweenMax in your project, you might as well 280 | // use TweenMax.set() instead 281 | // TweenMax.set(innerCursor, { 282 | // x: clientX, 283 | // y: clientY 284 | // }); 285 | 286 | requestAnimationFrame(render); 287 | }; 288 | requestAnimationFrame(render); 289 | }; 290 | 291 | initCursor(); 292 | 293 | 294 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/js/lib/simpleParallax.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * simpleParallax.min - simpleParallax is a simple JavaScript library that gives your website parallax animations on any images or videos, 3 | * @date: 21-06-2020 13:22:47, 4 | * @version: 5.5.1, 5 | * @link: https://simpleparallax.com/ 6 | */ 7 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("simpleParallax",[],e):"object"==typeof exports?exports.simpleParallax=e():t.simpleParallax=e()}(window,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return x}));var i=function(){return Element.prototype.closest&&"IntersectionObserver"in window};function o(t,e){for(var n=0;nt.length)&&(e=t.length);for(var n=0,i=new Array(e);n0&&setTimeout((function(){e.setTransitionCSS()}),10),this.isInit=!0))}},{key:"wrapElement",value:function(){var t=this.element.closest("picture")||this.element,e=this.customWrapper||document.createElement("div");e.classList.add("simpleParallax"),e.style.overflow="hidden",this.customWrapper||(t.parentNode.insertBefore(e,t),e.appendChild(t)),this.elementContainer=e}},{key:"unWrapElement",value:function(){var t=this.elementContainer;this.customWrapper?(t.classList.remove("simpleParallax"),t.style.overflow=""):t.replaceWith.apply(t,u(t.childNodes))}},{key:"setTransformCSS",value:function(){!1===this.settings.overflow&&(this.element.style[a]="scale(".concat(this.settings.scale,")")),this.element.style.willChange="transform"}},{key:"setTransitionCSS",value:function(){this.element.style.transition="transform ".concat(this.settings.delay,"s ").concat(this.settings.transition)}},{key:"unSetStyle",value:function(){this.element.style.willChange="",this.element.style[a]="",this.element.style.transition=""}},{key:"getElementOffset",value:function(){var t=this.elementContainer.getBoundingClientRect();if(this.elementHeight=t.height,this.elementTop=t.top+r.positions.top,this.settings.customContainer){var e=this.settings.customContainer.getBoundingClientRect();this.elementTop=t.top-e.top+r.positions.top}this.elementBottom=this.elementHeight+this.elementTop}},{key:"buildThresholdList",value:function(){for(var t=[],e=1;e<=this.elementHeight;e++){var n=e/this.elementHeight;t.push(n)}return t}},{key:"intersectionObserver",value:function(){var t={root:null,threshold:this.buildThresholdList()};this.observer=new IntersectionObserver(this.intersectionObserverCallback.bind(this),t),this.observer.observe(this.element)}},{key:"intersectionObserverCallback",value:function(t){var e=this;t.forEach((function(t){t.isIntersecting?e.isVisible=!0:e.isVisible=!1}))}},{key:"checkIfVisible",value:function(){return this.elementBottom>r.positions.top&&this.elementTopthis.settings.maxTransition&&(t=this.settings.maxTransition),this.oldPercentage!==t&&(this.rangeMax||this.getRangeMax(),this.translateValue=(t/100*this.rangeMax-this.rangeMax/2).toFixed(0),this.oldTranslateValue!==this.translateValue&&(this.oldPercentage=t,this.oldTranslateValue=this.translateValue,!0))}},{key:"animate",value:function(){var t,e=0,n=0;(this.settings.orientation.includes("left")||this.settings.orientation.includes("right"))&&(n="".concat(this.settings.orientation.includes("left")?-1*this.translateValue:this.translateValue,"px")),(this.settings.orientation.includes("up")||this.settings.orientation.includes("down"))&&(e="".concat(this.settings.orientation.includes("up")?-1*this.translateValue:this.translateValue,"px")),t=!1===this.settings.overflow?"translate3d(".concat(n,", ").concat(e,", 0) scale(").concat(this.settings.scale,")"):"translate3d(".concat(n,", ").concat(e,", 0)"),this.element.style[a]=t}}])&&h(e.prototype,n),i&&h(e,i),t}();function m(t){return function(t){if(Array.isArray(t))return y(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||d(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(t)))return;var n=[],i=!0,o=!1,r=void 0;try{for(var s,a=t[Symbol.iterator]();!(i=(s=a.next()).done)&&(n.push(s.value),!e||n.length!==e);i=!0);}catch(t){o=!0,r=t}finally{try{i||null==a.return||a.return()}finally{if(o)throw r}}return n}(t,e)||d(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(t,e){if(t){if("string"==typeof t)return y(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?y(t,e):void 0}}function y(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n0)&&n(e,67)}var f,g=Object(c),h=/\bTrident\/[567]\b|\bMSIE (?:9|10)\.0\b/,i=/\bAppleWebKit\/(\d+)\b/,j=/\bEdge\/12\.(\d+)\b/,k=/\bEdge\/.(\d+)\b/,l=window.top!==window.self;f="polyfill"in g?g.polyfill:h.test(navigator.userAgent)||(navigator.userAgent.match(j)||[])[1]<10547||(navigator.userAgent.match(i)||[])[1]<537||k.test(navigator.userAgent)&&l;var m={},n=window.requestAnimationFrame||setTimeout,o=document.getElementsByTagName("use"),p=0;f&&e()}function d(a){for(var b=a;"svg"!==b.nodeName.toLowerCase()&&(b=b.parentNode););return b}return c}); -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/sass/app.sass: -------------------------------------------------------------------------------- 1 | @import helpers/all 2 | @import generated/sprite-svg 3 | @import lib/owl.carousel 4 | @import lib/aos 5 | @import common 6 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/sass/generated/_sprite-svg.scss: -------------------------------------------------------------------------------- 1 | .icon-arrow-left { 2 | width: 1.38em; 3 | height: 1em; 4 | fill: #FFF; 5 | } 6 | .icon-arrow-next { 7 | width: 0.57em; 8 | height: 1em; 9 | fill: #9F9FA9; 10 | } 11 | .icon-arrow-prev { 12 | width: 0.57em; 13 | height: 1em; 14 | fill: #9F9FA9; 15 | } 16 | .icon-arrow-right { 17 | width: 1.38em; 18 | height: 1em; 19 | fill: #fff; 20 | } 21 | .icon-arrows { 22 | width: 0.67em; 23 | height: 1em; 24 | fill: #111029; 25 | } 26 | .icon-dribbble { 27 | width: 1em; 28 | height: 1em; 29 | fill: #111029; 30 | } 31 | .icon-email { 32 | width: 1.2em; 33 | height: 1em; 34 | fill: #4C40F7; 35 | } 36 | .icon-instagram { 37 | width: 1em; 38 | height: 1em; 39 | fill: #9F9FA9; 40 | } 41 | .icon-message { 42 | width: 1em; 43 | height: 1em; 44 | fill: #111029; 45 | } 46 | .icon-phone { 47 | width: 0.94em; 48 | height: 1em; 49 | fill: #4C40F7; 50 | } 51 | .icon-place { 52 | width: 1em; 53 | height: 1em; 54 | fill: #4C40F7; 55 | } 56 | .icon-profile { 57 | width: 0.94em; 58 | height: 1em; 59 | fill: #111029; 60 | } 61 | .icon-send { 62 | width: 1em; 63 | height: 1em; 64 | fill: #4C40F7; 65 | } 66 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/sass/helpers/_all.sass: -------------------------------------------------------------------------------- 1 | @import mixins 2 | @import helpers 3 | @import reset 4 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/sass/helpers/_helpers.sass: -------------------------------------------------------------------------------- 1 | @function em($size, $context: 16) 2 | @return ($size/$context) * 1em 3 | 4 | @function img-url($image) 5 | @return url('../img/#{$image}') 6 | 7 | =image($image) 8 | background-image: img-url($image) 9 | 10 | =trans($what: all, $dur: 0.2s, $easing: ease) 11 | transition: $what $dur $easing 12 | 13 | =smooth-scroll 14 | -webkit-overflow-scrolling: touch 15 | 16 | =smooth-font 17 | -webkit-font-smoothing: antialiased 18 | -moz-osx-font-smoothing: grayscale 19 | 20 | =gpu 21 | transform: translate3d(0,0,0) 22 | 23 | =md 24 | +r(1023) 25 | @content 26 | 27 | =sm 28 | +r(767) 29 | @content 30 | 31 | =xs 32 | +r(599) 33 | @content 34 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/sass/helpers/_mixins.sass: -------------------------------------------------------------------------------- 1 | // selectors 2 | =nl 3 | &:not(:last-child) 4 | @content 5 | =nf 6 | &:not(:first-child) 7 | @content 8 | 9 | // width 10 | =r($width) 11 | @media only screen and (max-width: $width+ "px") 12 | @content 13 | 14 | =rmin($width) 15 | @media only screen and (min-width: $width+ "px") 16 | @content 17 | 18 | // height 19 | =rh($height) 20 | @media only screen and (max-height: $height + "px") 21 | @content 22 | 23 | =rhmin($height) 24 | @media only screen and (min-height: $height + "px") 25 | @content 26 | 27 | =fs($sizeValue: 16) 28 | font-size: $sizeValue + px 29 | font-size: $sizeValue / 10 + rem 30 | 31 | =text-overflow 32 | overflow: hidden 33 | text-overflow: ellipsis 34 | white-space: nowrap 35 | 36 | =hover 37 | .no-touch &:hover 38 | @content 39 | 40 | %pseudo 41 | position: relative 42 | &:before,&:after 43 | content: ' ' 44 | position: absolute 45 | top: 0 46 | left: 0 47 | =pseudo 48 | @extend %pseudo 49 | 50 | =coverdiv 51 | position: absolute 52 | top: 0 53 | left: 0 54 | width: 100% 55 | height: 100% 56 | 57 | =cover 58 | background-repeat: no-repeat 59 | background-size: cover 60 | background-position: 50% 50% 61 | 62 | =bg-size($width: 100%, $height: 100%) 63 | background-size: $width $height 64 | 65 | // retina, also available as +hdpi 66 | =retina 67 | @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) 68 | @content 69 | 70 | =box 71 | +box-sizing(border-box) 72 | // vertical-align at center 73 | =vcenter 74 | position: absolute 75 | top: 50% 76 | left: 50% 77 | transform: translate(-50%,-50%) 78 | 79 | //simple gradient 80 | =g($color1, $color2) 81 | background-image: linear-gradient($color1, $color2) 82 | 83 | =gh($color1, $color2) 84 | background-image: linear-gradient(left, $color1, $color2) 85 | 86 | // font-family 87 | =font($alias, $name) 88 | @font-face 89 | font-family: $alias 90 | src: url("fonts/" + $name + ".woff2") format("woff2"), url("fonts/" + $name + ".woff") format("woff") 91 | font-weight: normal 92 | font-style: normal 93 | // to use: 94 | //+font(black, cytiapro-black-webfont) 95 | 96 | // ROTATE 97 | =rotate($deg: 0, $m11: 0, $m12: 0, $m21: 0, $m22: 0) 98 | transform: rotate($deg + deg) 99 | filter: progid:DXImageTransform.Microsoft.Matrix(M11=$m11, M12=$m12,M21=$m21, M22=$m22, sizingMethod='auto expand') 100 | zoom: 1 101 | 102 | // TRANSITION 103 | 104 | =tr($what) 105 | transition: $what 106 | 107 | =hide-text 108 | font: 0/0 a 109 | text-shadow: none 110 | color: transparent 111 | 112 | =hidetext 113 | +hide-text 114 | 115 | =justify 116 | text-align: justify 117 | line-height: 0 118 | font-size: 0 119 | text-justify: newspaper 120 | zoom: 1 121 | text-align-last: justify 122 | &:after 123 | content: "" 124 | display: inline-block 125 | width: 100% 126 | height: 0px 127 | visibility: hidden 128 | overflow: hidden 129 | =vertical 130 | text-align: center 131 | font-size: 0 132 | &:before 133 | content: "" 134 | display: inline-block 135 | vertical-align: middle 136 | width: 0 137 | height: 100% 138 | 139 | =clr 140 | &:after 141 | content: " " 142 | display: table 143 | clear: both 144 | *zoom: 1 145 | 146 | =placeholder-color($color) 147 | &::placeholder 148 | color: $color 149 | 150 | =placeholder 151 | &::placeholder 152 | @content 153 | 154 | =gray 155 | filter: url("data:image/svg+xml;utf8,#grayscale") 156 | // Firefox 10+ 157 | filter: gray 158 | // IE6-9 159 | -webkit-filter: grayscale(100%) 160 | // Chrome 19+ & Safari 6+ 161 | filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1) 162 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)" 163 | 164 | =gray-half 165 | filter: url("data:image/svg+xml;utf8,#grayscale") 166 | // Firefox 10+ 167 | filter: gray alpha(opacity = 50) 168 | // IE6-9 169 | -webkit-filter: grayscale(50%) 170 | // Chrome 19+ & Safari 6+ 171 | 172 | =gray-zero 173 | filter: url("data:image/svg+xml;utf8,#grayscale") 174 | -webkit-filter: grayscale(0%) 175 | 176 | =unselectable 177 | user-select: none 178 | 179 | =nosel 180 | +unselectable 181 | 182 | =prevent-text 183 | word-break: break-all 184 | word-break: break-word 185 | hyphens: auto 186 | 187 | =font-smoothing($val: antialiased) 188 | font-smoothing: $val 189 | 190 | =selection 191 | & ::selection 192 | @content 193 | =sel 194 | +selection 195 | 196 | =gpu 197 | transform: translate3d(0, 0, 0) 198 | 199 | =scrollbar 200 | &::-webkit-scrollbar 201 | @content 202 | 203 | =scrollbar-track 204 | &::-webkit-scrollbar-track 205 | @content 206 | 207 | =scrollbar-thumb 208 | &::-webkit-scrollbar-thumb 209 | @content 210 | 211 | =scrollbar-track-piece 212 | &::-webkit-scrollbar-track-piece 213 | @content 214 | 215 | //triangle 216 | =arr($width, $height, $bg, $direction) 217 | width: 0px 218 | height: 0px 219 | border-style: solid 220 | @if $direction == t 221 | border-width: 0 $width / 2 + px $height + px $width / 2 + px 222 | border-color: transparent transparent $bg transparent 223 | @if $direction == r 224 | border-width: $height / 2 + px 0 $height / 2 + px $width + px 225 | border-color: transparent transparent transparent $bg 226 | @if $direction == b 227 | border-width: $height + px $width / 2 + px 0 $width / 2 + px 228 | border-color: $bg transparent transparent transparent 229 | @if $direction == l 230 | border-width: $height / 2 + px $width + px $height / 2 + px 0 231 | border-color: transparent $bg transparent transparent 232 | @if $direction == tl 233 | border-width: $height + px $width + px 0 0 234 | border-color: $bg transparent transparent transparent 235 | @if $direction == tr 236 | border-width: 0 $width + px $height + px 0 237 | border-color: transparent $bg transparent transparent 238 | @if $direction == br 239 | border-width: 0 0 $height + px $width + px 240 | border-color: transparent transparent $bg transparent 241 | @if $direction == bl 242 | border-width: $width + px 0 0 $height + px 243 | border-color: transparent transparent transparent $bg 244 | // example 245 | // +arr(500,50, #000, l) 246 | // +arr(500,50, #000, bl) 247 | 248 | =rotate($var) 249 | transform: rotate($var+deg) 250 | 251 | =blur($var) 252 | filter: blur($var) 253 | =scale($var) 254 | transform: scale($var) 255 | 256 | =counter($var, $sep) 257 | counter-reset: list + $var 258 | > li 259 | &:before 260 | content: counter(list + $var) $sep 261 | counter-increment: list + $var 262 | 263 | =f($name, $font-size: null, $letter-spacing: null) 264 | $font-family: null 265 | @if $name == "l" 266 | $font-family: "light" 267 | font-family: $font-family 268 | font-weight: normal 269 | @if $font-size != null 270 | font-size: $font-size + px 271 | @if $letter-spacing != null 272 | letter-spacing: ($letter-spacing / 1000) + em 273 | 274 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/sass/helpers/_reset.sass: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, 2 | h6, p, blockquote, pre,a, abbr, acronym, address, big, 3 | cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, 4 | strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, 5 | dd, ol, ul, li,fieldset, form, label, legend,table, caption, 6 | tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, 7 | embed, figure, figcaption, footer, header, hgroup, menu, nav, 8 | output, ruby, section, summary,time, mark, audio, video 9 | margin: 0 10 | padding: 0 11 | border: 0 12 | vertical-align: baseline 13 | html 14 | -ms-text-size-adjust: 100% 15 | -webkit-text-size-adjust: 100% 16 | img,fieldset, a img 17 | border: none 18 | input[type="text"], 19 | input[type="email"], 20 | input[type="tel"], 21 | textarea 22 | -webkit-appearance: none 23 | input[type="submit"], 24 | button 25 | cursor: pointer 26 | background: none 27 | &::-moz-focus-inner 28 | padding: 0 29 | border: 0 30 | textarea 31 | overflow: auto 32 | input 33 | appearance: none 34 | input, button 35 | margin: 0 36 | padding: 0 37 | border: 0 38 | div, input, textarea, select,button, 39 | h1,h2,h3,h4,h5,h6,a,span,a:focus 40 | outline: none 41 | select 42 | &:-moz-focusring 43 | color: transparent 44 | text-shadow: 0 0 0 #000 45 | ul,ol 46 | list-style-type: none 47 | table 48 | border-spacing: 0 49 | border-collapse: collapse 50 | width: 100% 51 | html 52 | box-sizing: border-box 53 | *, *:before, *:after 54 | box-sizing: inherit 55 | a 56 | text-decoration: none 57 | a, 58 | button 59 | -webkit-tap-highlight-color: rgba(0,0,0,0) -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/sass/lib/owl.carousel.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | /* 7 | * Owl Carousel - Core 8 | */ 9 | .owl-carousel { 10 | display: none; 11 | width: 100%; 12 | -webkit-tap-highlight-color: transparent; 13 | /* position relative and z-index fix webkit rendering fonts issue */ 14 | position: relative; 15 | z-index: 1; } 16 | .owl-carousel .owl-stage { 17 | position: relative; 18 | -ms-touch-action: pan-Y; 19 | touch-action: manipulation; 20 | -moz-backface-visibility: hidden; 21 | /* fix firefox animation glitch */ } 22 | .owl-carousel .owl-stage:after { 23 | content: "."; 24 | display: block; 25 | clear: both; 26 | visibility: hidden; 27 | line-height: 0; 28 | height: 0; } 29 | .owl-carousel .owl-stage-outer { 30 | position: relative; 31 | overflow: hidden; 32 | /* fix for flashing background */ 33 | -webkit-transform: translate3d(0px, 0px, 0px); } 34 | .owl-carousel .owl-wrapper, 35 | .owl-carousel .owl-item { 36 | -webkit-backface-visibility: hidden; 37 | -moz-backface-visibility: hidden; 38 | -ms-backface-visibility: hidden; 39 | -webkit-transform: translate3d(0, 0, 0); 40 | -moz-transform: translate3d(0, 0, 0); 41 | -ms-transform: translate3d(0, 0, 0); } 42 | .owl-carousel .owl-item { 43 | position: relative; 44 | min-height: 1px; 45 | float: left; 46 | -webkit-backface-visibility: hidden; 47 | -webkit-tap-highlight-color: transparent; 48 | -webkit-touch-callout: none; } 49 | .owl-carousel .owl-item img { 50 | display: block; 51 | width: 100%; } 52 | .owl-carousel .owl-nav.disabled, 53 | .owl-carousel .owl-dots.disabled { 54 | display: none; } 55 | .owl-carousel .owl-nav .owl-prev, 56 | .owl-carousel .owl-nav .owl-next, 57 | .owl-carousel .owl-dot { 58 | cursor: pointer; 59 | -webkit-user-select: none; 60 | -khtml-user-select: none; 61 | -moz-user-select: none; 62 | -ms-user-select: none; 63 | user-select: none; } 64 | .owl-carousel .owl-nav button.owl-prev, 65 | .owl-carousel .owl-nav button.owl-next, 66 | .owl-carousel button.owl-dot { 67 | background: none; 68 | color: inherit; 69 | border: none; 70 | padding: 0 !important; 71 | font: inherit; } 72 | .owl-carousel.owl-loaded { 73 | display: block; } 74 | .owl-carousel.owl-loading { 75 | opacity: 0; 76 | display: block; } 77 | .owl-carousel.owl-hidden { 78 | opacity: 0; } 79 | .owl-carousel.owl-refresh .owl-item { 80 | visibility: hidden; } 81 | .owl-carousel.owl-drag .owl-item { 82 | -ms-touch-action: pan-y; 83 | touch-action: pan-y; 84 | -webkit-user-select: none; 85 | -moz-user-select: none; 86 | -ms-user-select: none; 87 | user-select: none; } 88 | .owl-carousel.owl-grab { 89 | cursor: move; 90 | cursor: grab; } 91 | .owl-carousel.owl-rtl { 92 | direction: rtl; } 93 | .owl-carousel.owl-rtl .owl-item { 94 | float: right; } 95 | 96 | /* No Js */ 97 | .no-js .owl-carousel { 98 | display: block; } 99 | 100 | /* 101 | * Owl Carousel - Animate Plugin 102 | */ 103 | .owl-carousel .animated { 104 | animation-duration: 1000ms; 105 | animation-fill-mode: both; } 106 | 107 | .owl-carousel .owl-animated-in { 108 | z-index: 0; } 109 | 110 | .owl-carousel .owl-animated-out { 111 | z-index: 1; } 112 | 113 | .owl-carousel .fadeOut { 114 | animation-name: fadeOut; } 115 | 116 | @keyframes fadeOut { 117 | 0% { 118 | opacity: 1; } 119 | 100% { 120 | opacity: 0; } } 121 | 122 | /* 123 | * Owl Carousel - Auto Height Plugin 124 | */ 125 | .owl-height { 126 | transition: height 500ms ease-in-out; } 127 | 128 | /* 129 | * Owl Carousel - Lazy Load Plugin 130 | */ 131 | .owl-carousel .owl-item { 132 | /** 133 | This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong 134 | calculation of the height of the owl-item that breaks page layouts 135 | */ } 136 | .owl-carousel .owl-item .owl-lazy { 137 | opacity: 0; 138 | transition: opacity 400ms ease; } 139 | .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) { 140 | max-height: 0; } 141 | .owl-carousel .owl-item img.owl-lazy { 142 | transform-style: preserve-3d; } 143 | 144 | /* 145 | * Owl Carousel - Video Plugin 146 | */ 147 | .owl-carousel .owl-video-wrapper { 148 | position: relative; 149 | height: 100%; 150 | background: #000; } 151 | 152 | .owl-carousel .owl-video-play-icon { 153 | position: absolute; 154 | height: 80px; 155 | width: 80px; 156 | left: 50%; 157 | top: 50%; 158 | margin-left: -40px; 159 | margin-top: -40px; 160 | background: url("owl.video.play.png") no-repeat; 161 | cursor: pointer; 162 | z-index: 1; 163 | -webkit-backface-visibility: hidden; 164 | transition: transform 100ms ease; } 165 | 166 | .owl-carousel .owl-video-play-icon:hover { 167 | -ms-transform: scale(1.3, 1.3); 168 | transform: scale(1.3, 1.3); } 169 | 170 | .owl-carousel .owl-video-playing .owl-video-tn, 171 | .owl-carousel .owl-video-playing .owl-video-play-icon { 172 | display: none; } 173 | 174 | .owl-carousel .owl-video-tn { 175 | opacity: 0; 176 | height: 100%; 177 | background-position: center center; 178 | background-repeat: no-repeat; 179 | background-size: contain; 180 | transition: opacity 400ms ease; } 181 | 182 | .owl-carousel .owl-video-frame { 183 | position: relative; 184 | z-index: 1; 185 | height: 100%; 186 | width: 100%; } 187 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/templates/case.pug: -------------------------------------------------------------------------------- 1 | --- 2 | title: Case study 3 | --- 4 | extends layouts/_layout 5 | block content 6 | +header('', 'header__burger_dark') 7 | .product 8 | .product__head 9 | .product__center.center 10 | .product__wrap 11 | .product__stage.stage(data-aos="animation-scale-y") Featured Work 12 | h1.product__title.title.h1(data-aos="animation-scale-y" data-aos-delay="150") Collab Landing Page UI Kit. 13 | .product__info.h5(data-aos="animation-scale-y" data-aos-delay="300") Epic landing page template for design startups 14 | .product__box.product__box_show(data-aos="animation-translate-y") 15 | .product__category Services Provided 16 | ul.product__list 17 | li Discovery & Strategy 18 | li Branding 19 | li Communication 20 | li User Interface 21 | .product__bg(style="background-image: url('img/product-pic-1.jpg')") 22 | .product__body 23 | .product__center.center 24 | .product__box.product__box_hide(data-aos="animation-scale-y") 25 | .product__category Services Provided 26 | ul.product__list 27 | li Discovery & Strategy 28 | li Branding 29 | li Communication 30 | li User Interface 31 | .product__row 32 | .product__overview.h4(data-aos="animation-scale-y") Overview 33 | .product__content.content(data-aos="animation-scale-y" data-aos-delay="200") 34 | p Meet Collab, a fully-featured landing page kit including code, design files, and beautiful 3D illustrations editable in Figma. 35 | p This package includes a responsive and fully animated landing page template with 24 sections. We've intentionally added a lot of different content to maximize the number of layout options. Drag, drop and mix different parts to quickly build your landing page in a matter of minutes. 36 | .product__preview 37 | img.product__pic.js-parallax(data-scale="1.6" data-orientation="right" src="img/product-pic-2.jpg" alt="") 38 | .product__review 39 | .product__author(data-aos="animation-scale-y") 40 | .product__ava 41 | img.product__pic(src="img/ava-1.jpg" alt="") 42 | .product__details 43 | .product__man.h5 Dash 44 | .product__company UI8 45 | .product__text(data-aos="animation-scale-y" data-aos-delay="200") “Be sure to check out the live preview and let us know your thoughts in the comments section below.” 46 | .discover 47 | .discover__center.center 48 | h2.discover__title.h1(data-aos="animation-scale-y") Discover. 49 | .discover__row 50 | .discover__item(data-aos="animation-scale-y") 51 | .discover__category.h5 Highlights. 52 | ul.discover__list 53 | li Fully Responsive (Valid HTML5 & CSS3) 54 | li 1 Long Scrolling Page (24 Sections) 55 | li Editable 3D Icons + Illustrations (In Figma) 56 | .discover__item(data-aos="animation-scale-y" data-aos-delay="200") 57 | .discover__category.h5 Features. 58 | ul.discover__list 59 | li Parallax + Micro-Interactions 60 | li Figma Files Included 61 | li Documentation + Support 62 | .discover__circles 63 | +figures 64 | .desc 65 | .desc__center.center 66 | .desc__head 67 | .desc__title.h4(data-aos="animation-scale-y") Approach 68 | .desc__content.content(data-aos="animation-scale-y" data-aos-delay="200") 69 | p Meet Collab, a fully-featured landing page kit including code, design files, and beautiful 3D illustrations editable in Figma. 70 | p This package includes a responsive and fully animated landing page template with 24 sections. We've intentionally added a lot of different content to maximize the number of layout options. Drag, drop and mix different parts to quickly build your landing page in a matter of minutes. 71 | p This product includes design + code. You should have some basic coding experience if you plan on modifying and or implementing the template. 72 | .desc__list 73 | mixin descPreview(src, delay) 74 | a.desc__preview(href="#" data-aos="animation-translate-y" data-aos-delay=delay) 75 | img.desc__pic(src=src alt="") 76 | .desc__zoom 77 | img.desc__pic(src="img/arrow-up-right.svg" alt="") 78 | +descPreview('img/desc-pic-1.jpg', '') 79 | +descPreview('img/desc-pic-2.jpg', '200') 80 | +descPreview('img/desc-pic-3.jpg', '') 81 | +descPreview('img/desc-pic-4.jpg', '200') 82 | .desc__btns(data-aos="animation-scale-y") 83 | button.desc__btn.btn.btn_dark 84 | +i('arrow-left') 85 | span.btn__text Prev 86 | button.desc__btn.btn.btn_purple 87 | span.btn__text Next 88 | +i('arrow-right') 89 | .wrapper.wrapper_gradient 90 | .cases.cases_other 91 | .cases__center.center 92 | .cases__stage.stage(data-aos="animation-scale-y") You may also like 93 | h2.cases__title.h1(data-aos="animation-scale-y" data-aos-delay="200") Look at My
Products. 94 | .cases__container 95 | .cases__slider.owl-carousel.js-slider-cases 96 | mixin casesItem(src, delay) 97 | a.cases__item(href="#" data-aos="animation-translate-y" data-aos-delay=delay) 98 | .cases__preview 99 | img.cases__pic(src=src alt="") 100 | .cases__box Case
Study 101 | .cases__body 102 | h4.cases__info.h4 Collab Landing Page 103 | .cases__text UI Kit, Coded Template 104 | +casesItem('img/cases-pic-1.jpg', '') 105 | +casesItem('img/cases-pic-7.jpg', '200') 106 | +casesItem('img/cases-pic-3.jpg') 107 | +casesItem('img/cases-pic-4.jpg') 108 | +casesItem('img/cases-pic-5.jpg') 109 | +casesItem('img/cases-pic-6.jpg') 110 | .cases__figures 111 | .cases__figure 112 | img.cases__pic.js-parallax(data-scale="1.6" data-orientation="up" src="img/figure-2.png" alt="") 113 | .cases__figure 114 | img.cases__pic.js-parallax(data-scale="1.4" data-orientation="down" src="img/figure-3.png" alt="") 115 | +wrapperDark 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/templates/index.pug: -------------------------------------------------------------------------------- 1 | --- 2 | title: Folio 3 | --- 4 | extends layouts/_layout 5 | block content 6 | .main 7 | +header 8 | .main__bg 9 | img.main__pic(src="img/bg-main.jpg" alt="") 10 | .main__center.center 11 | .main__wrap 12 | .main__stage.stage(data-aos="transform") Jack Gross 13 | h1.main__title.title.h1 14 | span(data-aos="transform" data-aos-delay="150") Hello, my 15 | span(data-aos="transform" data-aos-delay="300") name's Jack. 16 | span(data-aos="transform" data-aos-delay="450") I'm a Visual 17 | span(data-aos="transform" data-aos-delay="600") Designer. 18 | a.scroll.js-scroll(href="#details" data-aos="transform") 19 | .scroll__icon 20 | img.scroll__pic(src="img/scroll.svg" alt="") 21 | .scroll__text Scroll down 22 | .main__view(data-aos) 23 | .main__preview 24 | img.main__pic(src="img/main-pic-6.png" alt="") 25 | .main__preview 26 | img.main__pic.js-parallax(data-scale="2.5" data-orientation="up" src="img/main-pic-1.png" alt="") 27 | .main__preview 28 | img.main__pic.js-parallax(data-scale="1.5" data-orientation="up" src="img/main-pic-2.png" alt="") 29 | .main__preview 30 | img.main__pic(src="img/main-pic-3.png" alt="") 31 | .main__preview 32 | img.main__pic(src="img/main-pic-4.png" alt="") 33 | .main__preview 34 | img.main__pic.js-parallax(data-scale="4.5" data-orientation="up" src="img/main-pic-5.png" alt="") 35 | .main__preview 36 | img.main__pic.js-parallax(data-scale="1.5" data-orientation="down" src="img/main-pic-7.png" alt="") 37 | .main__figures 38 | .main__figure(data-aos="animation-translate-y") 39 | img.main__pic.js-parallax(data-scale="2.2" data-orientation="down" src="img/figure-1.png" alt="") 40 | .main__figure(data-aos="animation-translate-y" data-aos-delay="200") 41 | img.main__pic.js-parallax(data-scale="2.2" data-orientation="up" src="img/figure-2.png" alt="") 42 | .main__figure(data-aos="animation-translate-y" data-aos-delay="400") 43 | img.main__pic(src="img/figure-3.png" alt="") 44 | .details#details 45 | .details__center.center 46 | .details__head(data-aos="animation-scale-y") 47 | .details__stage.stage What I Do 48 | h3.details__info.h3 I enjoy creating delightful,

human-centered digital experiences. 49 | h2.details__title(data-aos="animation-scale-y") Think. Make.
Solve. 50 | .details__btn(data-aos="animation-translate-y") 51 | button.btn.btn_purple 52 | span.btn__text Contact Me 53 | +i('arrow-right') 54 | .details__container 55 | .details__slider.owl-carousel.js-slider-details 56 | .details__item 57 | .details__preview.details__preview_cursor(data-aos="animation-scale") 58 | .details__img 59 | img.details__pic(src="img/cursor.png" alt="") 60 | h5.details__category.h5(data-aos="animation-scale-y") User Interface 61 | .details__text(data-aos="animation-scale-y") We have got quite a few already made templates for better project management that you can use now. 62 | .details__btn(data-aos="animation-scale-y") 63 | button.btn.btn_dark Find out more 64 | .details__item 65 | .details__preview.details__preview_hand(data-aos="animation-scale" data-aos-delay="150") 66 | .details__img 67 | img.details__pic(src="img/hand.png" alt="") 68 | h5.details__category.h5(data-aos="animation-scale-y" data-aos-delay="150") User Experience 69 | .details__text(data-aos="animation-scale-y" data-aos-delay="150") We have got quite a few already made templates for better project management that you can use now. 70 | .details__btn(data-aos="animation-scale-y" data-aos-delay="150") 71 | button.btn.btn_dark Find out more 72 | .details__item 73 | .details__preview.details__preview_color(data-aos="animation-scale" data-aos-delay="300") 74 | .details__img 75 | img.details__pic(src="img/color-picker.png" alt="") 76 | h5.details__category.h5(data-aos="animation-scale-y" data-aos-delay="300") UI Design Kit 77 | .details__text(data-aos="animation-scale-y" data-aos-delay="300") We have got quite a few already made templates for better project management that you can use now. 78 | .details__btn(data-aos="animation-scale-y" data-aos-delay="300") 79 | button.btn.btn_dark Find out more 80 | .details__item 81 | .details__preview.details__preview_cursor 82 | .details__img 83 | img.details__pic(src="img/cursor.png" alt="") 84 | h5.details__category.h5 User Interface 85 | .details__text We have got quite a few already made templates for better project management that you can use now. 86 | button.details__btn.btn.btn_dark Find out more 87 | .details__item 88 | .details__preview.details__preview_hand 89 | .details__img 90 | img.details__pic(src="img/hand.png" alt="") 91 | h5.details__category.h5 User Experience 92 | .details__text We have got quite a few already made templates for better project management that you can use now. 93 | button.details__btn.btn.btn_dark Find out more 94 | .details__item 95 | .details__preview.details__preview_color 96 | .details__img 97 | img.details__pic(src="img/color-picker.png" alt="") 98 | h5.details__category.h5 UI Design Kit 99 | .details__text We have got quite a few already made templates for better project management that you can use now. 100 | button.details__btn.btn.btn_dark Find out more 101 | .details__figures 102 | .details__figure 103 | img.details__pic.js-parallax(data-scale="2" data-orientation="down" src="img/figure-1.png" alt="") 104 | .details__figure 105 | img.details__pic.js-parallax(data-scale="2" data-orientation="up" src="img/figure-2.png" alt="") 106 | .details__figure 107 | img.details__pic.js-parallax(data-scale="1.2" data-orientation="up" src="img/figure-3.png" alt="") 108 | a.details__contact(href="#") Contact me 109 | .work 110 | .work__circles 111 | .work__center.center 112 | .work__wrap 113 | .work__stage.stage.stage_pink(data-aos="animation-scale-y") Who I Work With 114 | h2.work__title.title.h1(data-aos="animation-scale-y" data-aos-delay="150") Art Direction for Global Leading Brands. 115 | .work__text(data-aos="animation-scale-y" data-aos-delay="300") I research and create breakthrough - delightful ideas, leading visual designers. 116 | a.scroll.js-scroll(data-aos="animation-scale-y" href="#cases") 117 | .scroll__icon 118 | img.scroll__pic(src="img/scroll.svg" alt="") 119 | .scroll__text Scroll down 120 | .work__preview 121 | img.work__pic.js-parallax(data-scale="2" data-orientation="down" src="img/work-cube.png" alt="") 122 | .work__figures(data-aos) 123 | .work__figure 124 | img.work__pic.js-parallax(data-scale="1.3" data-orientation="up" src="img/work-cube-1.png" alt="") 125 | .work__figure 126 | img.work__pic.js-parallax(data-scale="1.5" data-orientation="up left" src="img/work-cube-2.png" alt="") 127 | .work__figure 128 | img.work__pic.js-parallax(data-scale="1.3" data-orientation="up right" src="img/work-cube-3.png" alt="") 129 | .work__figure 130 | img.work__pic(src="img/work-cube-4.png" alt="") 131 | .work__figure 132 | img.work__pic.js-parallax(data-scale="1.1" data-orientation="left" src="img/work-cube-5.png" alt="") 133 | .work__figure 134 | img.work__pic.js-parallax(data-scale="1.2" data-orientation="right" src="img/work-cube-6.png" alt="") 135 | .work__figure 136 | img.work__pic.js-parallax(data-scale="1.2" data-orientation="down" src="img/work-cube-7.png" alt="") 137 | .wrapper.wrapper_gradient 138 | .cases.cases_main#cases 139 | .cases__center.center 140 | .cases__stage.stage(data-aos="animation-scale-y") Portfolio 141 | h2.cases__title.h1(data-aos="animation-scale-y" data-aos-delay="150") Look at My
Products. 142 | .cases__nav(data-aos="animation-scale-y" data-aos-delay="300") 143 | a.cases__link.active(href="#") Website 144 | a.cases__link(href="#") Illustration 145 | a.cases__link(href="#") Mobile 146 | .cases__list.js-owl(data-items-mobile-portrait="1" data-items-mobile-album="1" data-autoheight) 147 | mixin casesItem(src, delay) 148 | a.cases__item(data-aos="animation-translate-y" data-aos-delay=delay href="case.html") 149 | .cases__preview 150 | img.cases__pic(src=src alt="") 151 | .cases__box Case
Study 152 | .cases__body 153 | h4.cases__info.h4 Collab Landing Page 154 | .cases__text UI Kit, Coded Template 155 | +casesItem('img/cases-pic-1.jpg', '') 156 | +casesItem('img/cases-pic-2.jpg', '200') 157 | +casesItem('img/cases-pic-3.jpg', '') 158 | +casesItem('img/cases-pic-4.jpg', '200') 159 | +casesItem('img/cases-pic-5.jpg', '') 160 | +casesItem('img/cases-pic-6.jpg', '200') 161 | .cases__figures 162 | .cases__figure 163 | img.cases__pic.js-parallax(data-scale="2" data-orientation="down" src="img/figure-2.png" alt="") 164 | .cases__figure 165 | img.cases__pic.js-parallax(data-scale="1.8" data-orientation="down" src="img/figure-3.png" alt="") 166 | .review 167 | .review__center.center 168 | .review__stage.stage(data-aos="animation-scale-y") What People Say 169 | h2.review__title.title.h1(data-aos="animation-scale-y" data-aos-delay="200") Trusted by
Clients. 170 | .review__container(data-aos="animation-translate-y" data-aos-delay="400") 171 | .review__slider.owl-carousel.js-slider-review 172 | .review__item 173 | .review__text “ Folio Designer is a clean and creative landing page that matches with any freelancer or designer, you can easily to build the page in Sketch or Figma.” 174 | .review__author 175 | .review__ava 176 | img.review__pic(src="img/ava-1.jpg" alt="") 177 | .review__details 178 | .review__man.h5 Dash 179 | .review__company UI8 180 | .review__item 181 | .review__text “ Folio Designer is a clean and creative landing page that matches with any freelancer or designer, you can easily to build the page in Sketch or Figma.” 182 | .review__author 183 | .review__ava 184 | img.review__pic(src="img/ava-1.jpg" alt="") 185 | .review__details 186 | .review__man.h5 Dash 187 | .review__company UI8 188 | .review__item 189 | .review__text “ Folio Designer is a clean and creative landing page that matches with any freelancer or designer, you can easily to build the page in Sketch or Figma.” 190 | .review__author 191 | .review__ava 192 | img.review__pic(src="img/ava-1.jpg" alt="") 193 | .review__details 194 | .review__man.h5 Dash 195 | .review__company UI8 196 | .review__item 197 | .review__text “ Folio Designer is a clean and creative landing page that matches with any freelancer or designer, you can easily to build the page in Sketch or Figma.” 198 | .review__author 199 | .review__ava 200 | img.review__pic(src="img/ava-1.jpg" alt="") 201 | .review__details 202 | .review__man.h5 Dash 203 | .review__company UI8 204 | .review__bg 205 | .review__preview 206 | img.review__pic.js-parallax(data-scale="1.5" data-orientation="down" src="img/review-cube.png" alt="") 207 | .review__preview 208 | img.review__pic(src="img/review-cube.png" alt="") 209 | +wrapperDark 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/templates/layouts/_head.pug: -------------------------------------------------------------------------------- 1 | meta(charset="utf-8") 2 | title= title || 'Template' 3 | meta(http-equiv="X-UA-Compatible" content="IE=Edge") 4 | meta(name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no") 5 | meta(name="format-detection" content="telephone=no") 6 | 7 | link(rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png") 8 | link(rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png") 9 | link(rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png") 10 | link(rel="manifest" href="img/site.webmanifest") 11 | link(rel="mask-icon" href="img/safari-pinned-tab.svg" color="#5bbad5") 12 | meta(name="msapplication-TileColor" content="#da532c") 13 | meta(name="theme-color" content="#ffffff") 14 | include _media-tags 15 | link(rel="stylesheet" media="all" href="css/app.css") 16 | script. 17 | var viewportmeta = document.querySelector('meta[name="viewport"]'); 18 | if (viewportmeta) { 19 | if (screen.width < 375) { 20 | var newScale = screen.width / 375; 21 | viewportmeta.content = 'width=375, minimum-scale=' + newScale + ', maximum-scale=1.0, user-scalable=no, initial-scale=' + newScale + ''; 22 | } else { 23 | viewportmeta.content = 'width=device-width, maximum-scale=1.0, initial-scale=1.0'; 24 | } 25 | } -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/templates/layouts/_layout.pug: -------------------------------------------------------------------------------- 1 | include _mixins 2 | doctype html 3 | html(lang="en") 4 | head 5 | include _head 6 | 7 | body(class=bodyClass) 8 | .page(class=pageClass) 9 | block content 10 | .cursor 11 | block scripts 12 | script(src="js/app.js") 13 | script(src="js/common.js") 14 | -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/templates/layouts/_media-tags.pug: -------------------------------------------------------------------------------- 1 | //- Description no longer than 155 characters 2 | meta(name="description" content="Production-ready Portfolio and Case Study Template for Visual Designers") 3 | //- Twitter Card data 4 | meta(name="twitter:card" content="summary") 5 | meta(name="twitter:site" content="@ui8") 6 | meta(name="twitter:title" content="Folio Designer") 7 | meta(name="twitter:description" content="Production-ready Portfolio and Case Study Template for Visual Designers") 8 | meta(name="twitter:creator" content="@ui8") 9 | //- Twitter Summary card images must be at least 120x120px 10 | meta(name="twitter:image" content="https://ui8-folio.herokuapp.com/img/twitter-card.jpg") 11 | //- Open Graph data 12 | meta(property="og:title" content="Folio Designer") 13 | meta(property="og:type" content="Article") 14 | meta(property="og:url" content="https://ui8.net/ui8/products/folio-designer") 15 | meta(property="og:image" content="https://ui8-folio.herokuapp.com/img/fb-og-image.jpg") 16 | meta(property="og:description" content="Production-ready Portfolio and Case Study Template for Visual Designers" ) 17 | meta(property="og:site_name" content="Folio Designer") 18 | meta(property="fb:admins" content="132951670226590") -------------------------------------------------------------------------------- /Personal Portfolio 3D V2/src/templates/layouts/_mixins.pug: -------------------------------------------------------------------------------- 1 | mixin i(name) 2 | svg.icon(class='icon-' + name) 3 | use(xlink:href='img/sprite.svg#icon-' + name) 4 | 5 | mixin header(classHeader, classBurger) 6 | .header.js-header#header(class=classHeader) 7 | .header__center.center 8 | a.header__logo(href="index.html") 9 | img.header__pic(src="img/logo.svg" alt="") 10 | .header__social.header__social_main 11 | a.header__link(href="#") 12 | +i('dribbble') 13 | | Dribbble 14 | a.header__link(href="#") 15 | +i('instagram') 16 | | Instagram 17 | button.header__burger.js-header-burger(class=classBurger) 18 | .header__wrapper.js-header-wrapper 19 | .header__preview 20 | a.header__logo(href="index.html") 21 | img.header__pic(src="img/logo-white.svg" alt="") 22 | .header__img 23 | img.header__pic(src="img/bg-header.png" alt="") 24 | .header__center.center 25 | .header__contacts 26 | a.header__line(href="mailto:hello@ui8.net") 27 | .header__icon 28 | +i('email') 29 | .header__text hello@ui8.net 30 | .header__line 31 | .header__icon 32 | +i('place') 33 | .header__text 34 | p 4074 Ebert Summit Suite 375 35 | p Lake Leonardchester 36 | a.header__line(href="tel:+441236547890") 37 | .header__icon 38 | +i('phone') 39 | .header__text +44 123 654 7890 40 | nav.header__nav 41 | a.header__item(href="#") 42 | span About 43 | a.header__item(href="#") 44 | span Work 45 | a.header__item(href="#") 46 | span Services 47 | a.header__item(href="#") 48 | span Contact 49 | .header__social.header__social_inner 50 | a.header__link(href="#") 51 | +i('dribbble') 52 | | Dribbble 53 | a.header__link(href="#") 54 | +i('instagram') 55 | | Instagram 56 | mixin wrapperDark 57 | .wrapper.wrapper_dark 58 | +contacts 59 | +footer 60 | 61 | mixin figures 62 | .figures 63 | .figures__preview 64 | img.figures__pic(src="img/figures-1.png" alt="") 65 | .figures__preview 66 | img.figures__pic.js-parallax(data-scale="1.6" data-orientation="up" src="img/figures-2.png" alt="") 67 | .figures__preview 68 | img.figures__pic.js-parallax(data-scale="1.3" data-orientation="up" src="img/figures-3.png" alt="") 69 | .figures__preview 70 | img.figures__pic(src="img/figures-4.png" alt="") 71 | .figures__preview 72 | img.figures__pic.js-parallax(data-scale="2.3" data-orientation="down" src="img/figures-5.png" alt="") 73 | .figures__preview 74 | img.figures__pic.js-parallax(data-scale="2" data-orientation="up" src="img/figures-6.png" alt="") 75 | 76 | mixin contacts 77 | .contacts 78 | .contacts__center.center 79 | .contacts__container 80 | .contacts__wrap 81 | .contacts__stage.stage(data-aos="animation-scale-y") Say hello 👋 82 | h2.contacts__title.h1(data-aos="animation-scale-y" data-aos-delay="200") Let’s Work
Together. 83 | .contacts__info(data-aos="animation-scale-y" data-aos-delay="400") I’d love to meet up with you to discuss your venture, and potential collaborations. 84 | .contacts__row 85 | .contacts__details(data-aos="animation-translate-y") 86 | a.contacts__line(href="mailto:hello@ui8.net") 87 | .contacts__icon 88 | +i('email') 89 | .contacts__text hello@ui8.net 90 | .contacts__line 91 | .contacts__icon 92 | +i('place') 93 | .contacts__text 94 | p 4074 Ebert Summit Suite 375 95 | p Lake Leonardchester 96 | a.contacts__line(href="tel:+441236547890") 97 | .contacts__icon 98 | +i('phone') 99 | .contacts__text +44 123 654 7890 100 | form.contacts__form(data-aos="animation-translate-y" data-aos-delay="200") 101 | .contacts__field.field 102 | .field__wrap 103 | input.field__input(type="text" name="name" placeholder="Name") 104 | .field__icon 105 | +i('profile') 106 | .contacts__field.field 107 | .field__wrap 108 | input.field__input(type="email" name="email" placeholder="Email") 109 | .field__icon 110 | +i('send') 111 | .contacts__field.field 112 | .field__wrap 113 | select.field__select(name="question") 114 | option What are you working on? 115 | option What are you working on? 2 116 | .field__icon 117 | +i('arrows') 118 | .contacts__field.field.field_textarea 119 | .field__wrap 120 | textarea.field__textarea(name="message" placeholder="Message") 121 | .field__icon 122 | +i('message') 123 | .contacts__btn 124 | button.btn.btn_purple 125 | span.btn__text Let’s Talk 126 | +i('arrow-right') 127 | .contacts__category.h5 Let’s connect 128 | .contacts__social 129 | .contacts__box(data-aos="animation-translate-y") 130 | a.contacts__link(href="#") 131 | +i('instagram') 132 | .contacts__text Instagram 133 | .contacts__box(data-aos="animation-translate-y" data-aos-delay="150") 134 | a.contacts__link(href="#") 135 | +i('instagram') 136 | .contacts__text Instagram 137 | .contacts__box(data-aos="animation-translate-y" data-aos-delay="300") 138 | a.contacts__link(href="#") 139 | +i('instagram') 140 | .contacts__text Instagram 141 | .contacts__box(data-aos="animation-translate-y" data-aos-delay="450") 142 | a.contacts__link(href="#") 143 | +i('instagram') 144 | .contacts__text Instagram 145 | +figures 146 | 147 | mixin footer 148 | .footer 149 | .footer__center.center 150 | .footer__body 151 | a.footer__logo(href="index.html") 152 | img.footer__pic(src="img/logo-empty.svg" alt="") 153 | .footer__wrap 154 | .footer__title.h1 You only have one chance to make a first impression. 155 | .footer__info.h4 Let’s make it an amazing one. 156 | .footer__menu 157 | a.footer__link(href="#") About Me 158 | a.footer__link(href="#") Projects 159 | a.footer__link(href="#") Contact 160 | a.footer__link(href="#") Dribbble 161 | a.footer__link(href="#") Instagram 162 | .footer__bottom 163 | .footer__copyright © 2020, UI8 LLC. 164 | a.footer__scroll.js-scroll(href="#header") Back to top 165 | .footer__bg 166 | .footer__preview 167 | img.footer__pic.js-parallax(data-scale="1.5" data-orientation="down" src="img/footer-cube-1.png" alt="") 168 | .footer__preview 169 | img.footer__pic.js-parallax(data-scale="1.8" data-orientation="up" src="img/footer-cube-1.png" alt="") 170 | 171 | 172 | -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Sadee 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |

Julia - Portfolio Website

5 | 6 | A fully responsive personal portfolio website,
Responsive for all devices, build using HTML, CSS, and JavaScript. 7 | 8 | ➥ Live Demo 9 | 10 |
11 | 12 |
13 | 14 | ### Demo Screeshots 15 | 16 | ![Julia Desktop Demo](./readme-images/desktop.png "Desktop Demo") 17 | -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/images/Blog.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/images/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio V1/Personal Portfolio V1/assets/images/Thumbs.db -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/images/blob.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/images/hero-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio V1/Personal Portfolio V1/assets/images/hero-banner.jpg -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/images/icon-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/images/icon-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/images/icon-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/images/icon-4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/images/icon-5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/images/logo-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/images/logo-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/images/project-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio V1/Personal Portfolio V1/assets/images/project-1.png -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/images/project-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio V1/Personal Portfolio V1/assets/images/project-2.png -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/images/project-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio V1/Personal Portfolio V1/assets/images/project-3.png -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/images/project-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio V1/Personal Portfolio V1/assets/images/project-4.png -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | 4 | 5 | /** 6 | * add event listener on multiple elements 7 | */ 8 | 9 | const addEventOnElements = function (elements, eventType, callback) { 10 | for (let i = 0, len = elements.length; i < len; i++) { 11 | elements[i].addEventListener(eventType, callback); 12 | } 13 | } 14 | 15 | 16 | 17 | /** 18 | * NAVBAR TOGGLE FOR MOBILE 19 | */ 20 | 21 | const navbar = document.querySelector("[data-navbar]"); 22 | const navTogglers = document.querySelectorAll("[data-nav-toggler]"); 23 | const overlay = document.querySelector("[data-overlay]"); 24 | 25 | const toggleNavbar = function () { 26 | navbar.classList.toggle("active"); 27 | overlay.classList.toggle("active"); 28 | document.body.classList.toggle("nav-active"); 29 | } 30 | 31 | addEventOnElements(navTogglers, "click", toggleNavbar); 32 | 33 | 34 | 35 | /** 36 | * HEADER 37 | * active header when window scroll down to 100px 38 | */ 39 | 40 | const header = document.querySelector("[data-header]"); 41 | 42 | window.addEventListener("scroll", function () { 43 | if (window.scrollY > 100) { 44 | header.classList.add("active"); 45 | } else { 46 | header.classList.remove("active"); 47 | } 48 | }); 49 | 50 | 51 | 52 | /** 53 | * SCROLL REVEAL 54 | */ 55 | 56 | const revealElements = document.querySelectorAll("[data-reveal]"); 57 | const revealDelayElements = document.querySelectorAll("[data-reveal-delay]"); 58 | 59 | const reveal = function () { 60 | for (let i = 0, len = revealElements.length; i < len; i++) { 61 | if (revealElements[i].getBoundingClientRect().top < window.innerHeight / 1.2) { 62 | revealElements[i].classList.add("revealed"); 63 | } 64 | } 65 | } 66 | 67 | for (let i = 0, len = revealDelayElements.length; i < len; i++) { 68 | revealDelayElements[i].style.transitionDelay = revealDelayElements[i].dataset.revealDelay; 69 | } 70 | 71 | window.addEventListener("scroll", reveal); 72 | window.addEventListener("load", reveal); -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/index.txt: -------------------------------------------------------------------------------- 1 | Julia - I'm User Interface Designer & Developer. 2 | 3 | This is a personal portfolio html template made by codewithsadee 4 | 5 | 6 | 7 | #---------- HEADER ----------# 8 | 9 | alt = Julia home 10 | 11 | aria-label = close menu 12 | 13 | 14 | Home 15 | About 16 | Projects 17 | Blog 18 | Contact 19 | 20 | info@email.com 21 | 00 (123) 456 78 90 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | aria-label = open menu 30 | 31 | 32 | 33 | 34 | #---------- HERO ----------# 35 | 36 | alt = Julia 37 | 38 | alt = 250+ Projects Done 39 | 40 | I'm User Interface Designer & Developer. 41 | 42 | Hello! I'm Julia, a freelance user interface designer & developer based in London. I’m very passionate about the work that I do. 43 | 44 | See My Works 45 | Contact Me 46 | 47 | 48 | 49 | #---------- ABOUT ----------# 50 | 51 | What I Do? 52 | 53 | Duis mollis est commodo luctus nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl. 54 | 55 | Web Design 56 | 100 % 57 | bg-color = #c7b1dd 58 | 59 | Mobile Design 60 | 80 % 61 | bg-color = #8caeec 62 | 63 | Development 64 | 85 % 65 | bg-color = #b0d4c1 66 | 67 | SEO 68 | 90 % 69 | bg-color = #e3a6b6 70 | 71 | alt = web design icon 72 | Web Design 73 | 74 | Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo cum sociis natoque magnis. 75 | 76 | alt = mobile design icon 77 | Mobile Design 78 | 79 | alt = web development icon 80 | Development 81 | 82 | alt = web seo icon 83 | SEO 84 | 85 | 86 | 87 | #---------- PROJECT ----------# 88 | 89 | Latest Projects 90 | 91 | Check out some of my latest projects with creative ideas. 92 | 93 | See All Projects 94 | 95 | bg-color - #f8f5fb 96 | color - #a07cc5 97 | Web Design 98 | Snowlake Theme 99 | 100 | Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus. 101 | 102 | See Project 103 | 104 | 105 | alt = Web Design 106 | 107 | bg-color - #f1f5fd 108 | color - #3f78e0 109 | Mobile Design 110 | Budget App 111 | 112 | alt = Mobile Design 113 | 114 | bg-color - #f5faf7 115 | color - #7cb798 116 | Web Design 117 | Missio Theme 118 | 119 | Maecenas faucibus mollis interdum sed posuere porta consectetur cursus porta lobortis. Scelerisque id ligula felis. 120 | 121 | alt = Web Design 122 | 123 | bg-color - #fcf4f6 124 | color - #d16b86 125 | Mobile Design 126 | Storage App 127 | 128 | Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. 129 | 130 | alt = Mobile Design 131 | 132 | 133 | 134 | 135 | #---------- CONTACT ----------# 136 | 137 | alt = envelop icon 138 | 139 | If you like what you see, let's work together. 140 | 141 | I bring rapid solutions to make the life of my clients easier. Have any questions? Reach out to me from this contact form and I will get back to you shortly. 142 | 143 | Name * 144 | 145 | Email * 146 | 147 | Message * 148 | 149 | Send message 150 | 151 | 152 | 153 | #---------- FOOTER ----------# 154 | 155 | © 2022 codewithsadee. All rights reserved. 156 | 157 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/Personal-Portfolios/53a205484ef60b54c2b4cff1b2395b5150c601bf/Personal Portfolio V1/Personal Portfolio V1/readme-images/desktop.png -------------------------------------------------------------------------------- /Personal Portfolio V1/Personal Portfolio V1/style-guide.md: -------------------------------------------------------------------------------- 1 | # Essential Stuff 2 | 3 | ## Html import links 4 | 5 | Google font 6 | 7 | ``` html 8 | 9 | 10 | 11 | ``` 12 | 13 | Ionicon 14 | 15 | ``` html 16 | 17 | 18 | ``` 19 | 20 | --- 21 | 22 | ## Colors 23 | 24 | ``` css 25 | --white: hsla(0, 0%, 100%, 1); 26 | --white_a8: hsla(0, 0%, 100%, 0.08); 27 | --white_a12: hsla(0, 0%, 100%, 0.12); 28 | --cultured: hsla(220, 20%, 97%, 1); 29 | --snow: hsla(345, 57%, 97%, 1); 30 | --manatee: hsla(219, 10%, 62%, 1); 31 | --black-coral: hsla(220, 12%, 43%, 1); 32 | --cadet-blue-crayola_a20: hsla(222, 23%, 71%, 0.2); 33 | --cinnamon-satin: hsla(344, 53%, 62%, 1); 34 | --raisin-black: hsla(216, 14%, 14%, 1); 35 | --raisin-black_a6: hsla(216, 14%, 14%, 0.06); 36 | --gunmetal: hsla(214, 15%, 21%, 1); 37 | --charcoal: hsla(219, 22%, 26%, 1); 38 | ``` 39 | 40 | ## Typography 41 | 42 | ``` css 43 | --ff-manrope: 'Manrope', sans-serif; 44 | 45 | --fs-1: calc(2.7rem + 1.38vw); 46 | --fs-2: calc(2.6rem + .66vw); 47 | --fs-3: calc(2.6rem + .24vw); 48 | --fs-4: 1.9rem; 49 | --fs-5: 1.8rem; 50 | --fs-6: 1.7rem; 51 | --fs-7: 1.5rem; 52 | --fs-8: 1.4rem; 53 | 54 | --fw-700: 700; 55 | ``` 56 | 57 | ## Spacing 58 | 59 | ``` css 60 | --section-padding: 90px; 61 | ``` 62 | 63 | ## Shadow 64 | 65 | ``` css 66 | --shadow-1: 0 0 20px hsla(216, 14%, 14%, 0.05); 67 | --shadow-2: 0 4px 28px hsla(216, 14%, 14%, 0.07); 68 | ``` 69 | 70 | ## Border Radius 71 | 72 | ``` css 73 | --radius-circle: 50%; 74 | --radius-pill: 100px; 75 | --radius-8: 8px; 76 | --radius-6: 6px; 77 | ``` 78 | 79 | ## Transition 80 | 81 | ``` css 82 | --transition-1: 0.25s ease; 83 | --transition-2: 0.5s ease; 84 | --transition-3: 0.3s ease-in-out; 85 | ``` 86 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # **Personal Portfolio V1 Preview** 2 | 3 | 4 | Instagram 5 | 6 | 7 | # **Personal Portfolio V2 Preview** 8 | 9 | 10 | Instagram 11 | 12 | --------------------------------------------------------------------------------