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 = `
+ `;
+
+ 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