From f98710f51de97f4ec633420cd9b0a98b4f4edd72 Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Mon, 26 Aug 2024 15:58:28 +0200 Subject: [PATCH] some component preparations --- .gitignore | 1 + README.md | 2 +- components/README.md | 3 ++ components/scroll/index.html | 32 +++++++++++ components/scroll/scroll.css | 73 +++++++++++++++++++++++++ components/scroll/scroll.js | 82 +++++++++++++++++++++++++++++ components/slider/index.html | 33 ++++++++++++ components/slider/js/slider.js | 0 components/slider/package-lock.json | 25 +++++++++ components/slider/package.json | 5 ++ components/slider/slider.css | 35 ++++++++++++ components/slider/ts/slider.ts | 0 components/slider/tsconfig.json | 9 ++++ site/index.html | 11 ++++ 14 files changed, 310 insertions(+), 1 deletion(-) create mode 100644 .gitignore create mode 100644 components/README.md create mode 100644 components/scroll/index.html create mode 100644 components/scroll/scroll.css create mode 100644 components/scroll/scroll.js create mode 100644 components/slider/index.html create mode 100644 components/slider/js/slider.js create mode 100644 components/slider/package-lock.json create mode 100644 components/slider/package.json create mode 100644 components/slider/slider.css create mode 100644 components/slider/ts/slider.ts create mode 100644 components/slider/tsconfig.json create mode 100644 site/index.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3ffe366 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +ndoe_modules \ No newline at end of file diff --git a/README.md b/README.md index 04c75d8..00b6e3d 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,6 @@

janishutz.com

-This is the source code for my personal website. Check it out [here](https://janishutz.com) . +This is the source code for my personal website. Check it out [here](https://janishutz.com). As any custom website is, this one is also written entirely in HTML, CSS and JavaScript and only uses the jQuery library as an external library diff --git a/components/README.md b/components/README.md new file mode 100644 index 0000000..4dfdcae --- /dev/null +++ b/components/README.md @@ -0,0 +1,3 @@ +# Components + +This folder contains all kinds of templates for my websites. These are all (almost) ready to go components I can simply grab, slightly adapt and use directly without having to re-implement everything from scratch. You are allowed to use these components on your own website, but you are not allowed to claim them to be your own work, if you haven't adapted them, but simply added your own images or similar to them. \ No newline at end of file diff --git a/components/scroll/index.html b/components/scroll/index.html new file mode 100644 index 0000000..e69687a --- /dev/null +++ b/components/scroll/index.html @@ -0,0 +1,32 @@ + + + + + + Scroll + + + + + +
+ +
+

Scroll

+
+
+

Hello World

+
+ + + + + + \ No newline at end of file diff --git a/components/scroll/scroll.css b/components/scroll/scroll.css new file mode 100644 index 0000000..b6f99a6 --- /dev/null +++ b/components/scroll/scroll.css @@ -0,0 +1,73 @@ +/* +* ConductorCalc - scroll.css +* +* Created by Janis Hutz 01/17/2024, Licensed under a proprietary License +* https://janishutz.com, development@janishutz.com +* +* +*/ + +#scroll-indicator { + position: fixed; + right: 5%; + z-index: 7; + width: 90%; + bottom: 5%; + display: none; +} + +.content { + scroll-snap-type: y mandatory; +} + +.snap { + scroll-snap-align: top; +} + + +.scroll-wrapper { + color: rgb(221, 221, 221); + font-size: 80%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + user-select: none; +} + +.scroll-container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + cursor: pointer; + padding: 15px; + background-color: rgba( 0, 0, 0, 0.2 ); + border-radius: 30px; +} + +.scroll-symbol { + font-size: 180%; + animation: scroll-animation infinite 4s ease-in-out; +} + +@keyframes scroll-animation { + 0% { + opacity: 0; + transform: translateY(0); + } + 10% { + opacity: 1; + } + 65% { + opacity: 0.8; + } + 75% { + opacity: 0; + transform: translateY(25px); + } + 100% { + opacity: 0; + } +} \ No newline at end of file diff --git a/components/scroll/scroll.js b/components/scroll/scroll.js new file mode 100644 index 0000000..c391a2b --- /dev/null +++ b/components/scroll/scroll.js @@ -0,0 +1,82 @@ +window.scrollHint = ( maxScroll ) => { + $( () => { + let isShowing = false; + const el = document.getElementById( 'scroll-indicator' ); + if ( !el ) { + throw new Error( 'There is no element with ID "scroll-indicator" present on DOM' ); + } + el.innerHTML = ` +
+
+ Scroll to discover more + keyboard_double_arrow_down +
+
`; + + el.onclick = () => { + if ( window.scrollY === 0 ) { + window.scrollTo( { 'top': window.innerHeight, 'behavior': 'smooth' } ); + } else if ( window.scrollY % window.innerHeight === 0 ) { + window.scrollTo( { 'top': ( Math.ceil( window.scrollY / window.innerHeight ) + 1 ) * window.innerHeight, 'behavior': 'smooth' } ); + } else { + window.scrollTo( { 'top': Math.ceil( window.scrollY / window.innerHeight ) * window.innerHeight, 'behavior': 'smooth' } ); + } + $( '#scroll-indicator' ).fadeOut( 300 ); + try { + clearTimeout( scrollCorrectionTimeout ); + } catch ( _err ) {}; + isShowing = false; + timeout = setTimeout( () => { showHint() }, 2500 ); + } + + document.onscrollend = () => { + scrollCorrectionTimeout = setTimeout( () => { + scrollCorrection(); + }, 1000 ); + timeout = setTimeout( () => { + showHint(); + }, 2500 ); + } + document.onscroll = () => { + try { + clearTimeout( timeout ); + } catch ( _e ) {} + try { + clearTimeout( scrollCorrectionTimeout ); + } catch ( _err ) {}; + if ( isShowing ) { + isShowing = false; + $( '#scroll-indicator' ).fadeOut( 300 ); + } + }; + + window.onresize = () => { + scrollCorrection(); + showHint(); + } + + let timeout = setTimeout( () => { + showHint(); + }, 2500 ); + + let scrollCorrectionTimeout = 0; + + const showHint = () => { + if ( Math.round( window.scrollY / window.innerHeight ) < maxScroll && maxScroll > 0 ) { + $( '#scroll-indicator' ).fadeIn( 300 ); + isShowing = true; + } else { + $( '#scroll-indicator' ).fadeOut( 300 ); + isShowing = false; + } + } + + const scrollCorrection = () => { + if ( Math.round( window.scrollY / window.innerHeight ) <= maxScroll && maxScroll > 0 && Math.floor( window.scrollY / window.innerHeight ) < maxScroll ) { + window.scrollTo( { top: Math.round( window.scrollY / window.innerHeight ) * window.innerHeight, behavior: 'smooth' } ); + } + } + + scrollCorrection(); + } ); +} \ No newline at end of file diff --git a/components/slider/index.html b/components/slider/index.html new file mode 100644 index 0000000..df3199b --- /dev/null +++ b/components/slider/index.html @@ -0,0 +1,33 @@ + + + + + + Slider + + + + +

Sliders

+ +
+
+
+
+
+
+
⮜
+
⮞
+
+ + + + \ No newline at end of file diff --git a/components/slider/js/slider.js b/components/slider/js/slider.js new file mode 100644 index 0000000..e69de29 diff --git a/components/slider/package-lock.json b/components/slider/package-lock.json new file mode 100644 index 0000000..fc77102 --- /dev/null +++ b/components/slider/package-lock.json @@ -0,0 +1,25 @@ +{ + "name": "slider", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "typescript": "^5.5.4" + } + }, + "node_modules/typescript": { + "version": "5.5.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz", + "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==", + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + } + } +} diff --git a/components/slider/package.json b/components/slider/package.json new file mode 100644 index 0000000..51e7379 --- /dev/null +++ b/components/slider/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "typescript": "^5.5.4" + } +} diff --git a/components/slider/slider.css b/components/slider/slider.css new file mode 100644 index 0000000..a9b5c4e --- /dev/null +++ b/components/slider/slider.css @@ -0,0 +1,35 @@ +.slider { + overflow: hidden; + position: relative; +} + +.slider-container { + width: 100%; + height: 100%; + position: relative; +} + +.slider-controls { + position: absolute; + font-size: 3rem; + top: calc( 50% - 1.5rem ); + cursor: pointer; + user-select: none; +} + +.slider-control-left { + left: 10px; +} + +.slider-control-right { + right: 10px; +} + +.slider-element { + width: 100%; + height: 100%; + position: absolute; + top: 0; + background-size: cover; + background-position: center; +} \ No newline at end of file diff --git a/components/slider/ts/slider.ts b/components/slider/ts/slider.ts new file mode 100644 index 0000000..e69de29 diff --git a/components/slider/tsconfig.json b/components/slider/tsconfig.json new file mode 100644 index 0000000..7d62f1a --- /dev/null +++ b/components/slider/tsconfig.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "outDir": "./js", + "allowJs": true, + "target": "ES6", + "skipLibCheck": true, + }, + "include": [ "./ts/**/*" ], +} \ No newline at end of file diff --git a/site/index.html b/site/index.html new file mode 100644 index 0000000..b279fd4 --- /dev/null +++ b/site/index.html @@ -0,0 +1,11 @@ + + + + + + janishutz.com - Solving your software needs with passion + + + + + \ No newline at end of file