diff --git a/index.html b/index.html
index b95c91a..8efe41d 100644
--- a/index.html
+++ b/index.html
@@ -1,28 +1,49 @@
-
-
+
+
+
Lukas Eisenhauer
-
-
- Lukas Eisenhauer
-
-
- Willkommen auf meiner Website
-
-
- Ich habe eine website und du liest gerade diese Website.
-
-
- Siehst du die Navbar ganz oben? Hier kannst du meine verschiedenen Services ausprobieren. Keine versteckten Kosten!
-
-
+ Home
+ Projects
+ Impressum
+
+
+ Lukas Eisenhauer
+ Developer
+
+
+
+
+
+ Projects
+ Minosoft
+
+ Currently, I am developing the rendering engine for an open source, minecraft compatible third party multiplayer client called Minosoft.
+
+ Websites
+
+ Yeah, this website was fully developed by me. Furthermore, I made the website for Frank Eisenhauer .
+ If you are interested in a Website as well, send me an email.
+
+
+
+ Impressum
+ This website is hosted and maintained by Lukas Eisenhauer.
+ Address: Kohlröschenstraße 53 80995 München, Deutschland
+ You can reach me at:
+
+
+
+
diff --git a/index.html b/index.html
index b95c91a..8efe41d 100644
--- a/index.html
+++ b/index.html
@@ -1,28 +1,49 @@
-
-
+
+
+
Lukas Eisenhauer
-
-
- Lukas Eisenhauer
-
-
- Willkommen auf meiner Website
-
-
- Ich habe eine website und du liest gerade diese Website.
-
-
- Siehst du die Navbar ganz oben? Hier kannst du meine verschiedenen Services ausprobieren. Keine versteckten Kosten!
-
-
+ Home
+ Projects
+ Impressum
+
+
+ Lukas Eisenhauer
+ Developer
+
+
+
+
+
+ Projects
+ Minosoft
+
+ Currently, I am developing the rendering engine for an open source, minecraft compatible third party multiplayer client called Minosoft.
+
+ Websites
+
+ Yeah, this website was fully developed by me. Furthermore, I made the website for Frank Eisenhauer .
+ If you are interested in a Website as well, send me an email.
+
+
+
+ Impressum
+ This website is hosted and maintained by Lukas Eisenhauer.
+ Address: Kohlröschenstraße 53 80995 München, Deutschland
+ You can reach me at:
+
+
+
+
diff --git a/navbar.html b/navbar.html
deleted file mode 100644
index c89129f..0000000
--- a/navbar.html
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
- Lukas WEB
-
-
-
diff --git a/index.html b/index.html
index b95c91a..8efe41d 100644
--- a/index.html
+++ b/index.html
@@ -1,28 +1,49 @@
-
-
+
+
+
Lukas Eisenhauer
-
-
- Lukas Eisenhauer
-
-
- Willkommen auf meiner Website
-
-
- Ich habe eine website und du liest gerade diese Website.
-
-
- Siehst du die Navbar ganz oben? Hier kannst du meine verschiedenen Services ausprobieren. Keine versteckten Kosten!
-
-
+ Home
+ Projects
+ Impressum
+
+
+ Lukas Eisenhauer
+ Developer
+
+
+
+
+
+ Projects
+ Minosoft
+
+ Currently, I am developing the rendering engine for an open source, minecraft compatible third party multiplayer client called Minosoft.
+
+ Websites
+
+ Yeah, this website was fully developed by me. Furthermore, I made the website for Frank Eisenhauer .
+ If you are interested in a Website as well, send me an email.
+
+
+
+ Impressum
+ This website is hosted and maintained by Lukas Eisenhauer.
+ Address: Kohlröschenstraße 53 80995 München, Deutschland
+ You can reach me at:
+
+
+
+
diff --git a/navbar.html b/navbar.html
deleted file mode 100644
index c89129f..0000000
--- a/navbar.html
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
- Lukas WEB
-
-
-
diff --git a/navbar.js b/navbar.js
deleted file mode 100644
index 196b244..0000000
--- a/navbar.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const navbar = `
-
- Lukas WEB
-
-
-`;
-
-function importNavbar() {
- var element = document.getElementById("navbar");
- element.innerHTML = navbar;
-}
diff --git a/index.html b/index.html
index b95c91a..8efe41d 100644
--- a/index.html
+++ b/index.html
@@ -1,28 +1,49 @@
-
-
+
+
+
Lukas Eisenhauer
-
-
- Lukas Eisenhauer
-
-
- Willkommen auf meiner Website
-
-
- Ich habe eine website und du liest gerade diese Website.
-
-
- Siehst du die Navbar ganz oben? Hier kannst du meine verschiedenen Services ausprobieren. Keine versteckten Kosten!
-
-
+ Home
+ Projects
+ Impressum
+
+
+ Lukas Eisenhauer
+ Developer
+
+
+
+
+
+ Projects
+ Minosoft
+
+ Currently, I am developing the rendering engine for an open source, minecraft compatible third party multiplayer client called Minosoft.
+
+ Websites
+
+ Yeah, this website was fully developed by me. Furthermore, I made the website for Frank Eisenhauer .
+ If you are interested in a Website as well, send me an email.
+
+
+
+ Impressum
+ This website is hosted and maintained by Lukas Eisenhauer.
+ Address: Kohlröschenstraße 53 80995 München, Deutschland
+ You can reach me at:
+
+
+
+
diff --git a/navbar.html b/navbar.html
deleted file mode 100644
index c89129f..0000000
--- a/navbar.html
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
- Lukas WEB
-
-
-
diff --git a/navbar.js b/navbar.js
deleted file mode 100644
index 196b244..0000000
--- a/navbar.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const navbar = `
-
- Lukas WEB
-
-
-`;
-
-function importNavbar() {
- var element = document.getElementById("navbar");
- element.innerHTML = navbar;
-}
diff --git a/scripts.js b/scripts.js
new file mode 100644
index 0000000..73aaa19
--- /dev/null
+++ b/scripts.js
@@ -0,0 +1,56 @@
+var responsive = false;
+var topOffset;
+
+function navbarAdjust() {
+ responsive = window.innerWidth < 600;
+ topOffset = $("#nav").height();
+ var navbar = document.getElementById("nav");
+ var body = document.getElementById("body");
+ if (responsive) {
+ navbar.className = "responsive";
+ body.className = "responsive";
+ } else {
+ navbar.className = "";
+ body.className = "";
+ }
+}
+
+function onLinkClick() {
+ window.scrollBy(0, -topOffset);
+}
+
+function onScroll() {
+ var currentPos = $(window).scrollTop() + topOffset + 5;
+ console.log(topOffset);
+ $('nav a').each(function() {
+ var sectionLink = $(this);
+ var section = $(sectionLink.attr('href'));
+ if (section.position().top <= currentPos && section.position().top + section.height() >= currentPos) {
+ sectionLink.addClass('active');
+ }
+ else {
+ sectionLink.removeClass('active');
+ }
+ });
+}
+
+function onLoad() {
+ navbarAdjust();
+ onScroll();
+}
+
+$("nav a").click(function () {
+ var speed = 500;
+ var easing = 'swing';
+
+ var sectionLink = $(this);
+ var section = $(sectionLink.attr('href'));
+
+ var target = section.position().top - $('nav').height();
+ $("html, body").animate({scrollTop: target, speed, easing});
+ return false;
+});
+
+$(window).on("scroll", onScroll);
+
+onLoad();
\ No newline at end of file
diff --git a/index.html b/index.html
index b95c91a..8efe41d 100644
--- a/index.html
+++ b/index.html
@@ -1,28 +1,49 @@
-
-
+
+
+
Lukas Eisenhauer
-
-
- Lukas Eisenhauer
-
-
- Willkommen auf meiner Website
-
-
- Ich habe eine website und du liest gerade diese Website.
-
-
- Siehst du die Navbar ganz oben? Hier kannst du meine verschiedenen Services ausprobieren. Keine versteckten Kosten!
-
-
+ Home
+ Projects
+ Impressum
+
+
+ Lukas Eisenhauer
+ Developer
+
+
+
+
+
+ Projects
+ Minosoft
+
+ Currently, I am developing the rendering engine for an open source, minecraft compatible third party multiplayer client called Minosoft.
+
+ Websites
+
+ Yeah, this website was fully developed by me. Furthermore, I made the website for Frank Eisenhauer .
+ If you are interested in a Website as well, send me an email.
+
+
+
+ Impressum
+ This website is hosted and maintained by Lukas Eisenhauer.
+ Address: Kohlröschenstraße 53 80995 München, Deutschland
+ You can reach me at:
+
+
+
+
diff --git a/navbar.html b/navbar.html
deleted file mode 100644
index c89129f..0000000
--- a/navbar.html
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
- Lukas WEB
-
-
-
diff --git a/navbar.js b/navbar.js
deleted file mode 100644
index 196b244..0000000
--- a/navbar.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const navbar = `
-
- Lukas WEB
-
-
-`;
-
-function importNavbar() {
- var element = document.getElementById("navbar");
- element.innerHTML = navbar;
-}
diff --git a/scripts.js b/scripts.js
new file mode 100644
index 0000000..73aaa19
--- /dev/null
+++ b/scripts.js
@@ -0,0 +1,56 @@
+var responsive = false;
+var topOffset;
+
+function navbarAdjust() {
+ responsive = window.innerWidth < 600;
+ topOffset = $("#nav").height();
+ var navbar = document.getElementById("nav");
+ var body = document.getElementById("body");
+ if (responsive) {
+ navbar.className = "responsive";
+ body.className = "responsive";
+ } else {
+ navbar.className = "";
+ body.className = "";
+ }
+}
+
+function onLinkClick() {
+ window.scrollBy(0, -topOffset);
+}
+
+function onScroll() {
+ var currentPos = $(window).scrollTop() + topOffset + 5;
+ console.log(topOffset);
+ $('nav a').each(function() {
+ var sectionLink = $(this);
+ var section = $(sectionLink.attr('href'));
+ if (section.position().top <= currentPos && section.position().top + section.height() >= currentPos) {
+ sectionLink.addClass('active');
+ }
+ else {
+ sectionLink.removeClass('active');
+ }
+ });
+}
+
+function onLoad() {
+ navbarAdjust();
+ onScroll();
+}
+
+$("nav a").click(function () {
+ var speed = 500;
+ var easing = 'swing';
+
+ var sectionLink = $(this);
+ var section = $(sectionLink.attr('href'));
+
+ var target = section.position().top - $('nav').height();
+ $("html, body").animate({scrollTop: target, speed, easing});
+ return false;
+});
+
+$(window).on("scroll", onScroll);
+
+onLoad();
\ No newline at end of file
diff --git a/styles.css b/styles.css
index ef4b9d1..ab53a1e 100644
--- a/styles.css
+++ b/styles.css
@@ -1,22 +1,6 @@
:root {
- --main_A: #002000;
- --main_B: #004000;
- --main_C: #006000;
- --main_D: #008000;
- --main_E: #00A000;
- --main_F: #00C000;
- --main_G: #00E000;
-
--white: #ffffff;
-
- --accent_A: #202000;
- --accent_B: #404000;
- --accent_C: #606000;
- --accent_D: #808000;
- --accent_E: #A0A000;
- --accent_F: #C0C000;
- --accent_G: #E0E000;
-
+
--gray_A: #202020;
--gray_B: #404040;
--gray_C: #606060;
@@ -24,92 +8,170 @@
--gray_E: #A0A0A0;
--gray_F: #C0C0C0;
--gray_G: #E0E0E0;
+
+ --black: #000000;
+
+ --background1: #164A41;
+ --background2: #4D774E;
+ --navbar: #303040;
+ --text: #F0F3F5;
+ --heading: #F1B24A;
+ --subheading: #557A5;
+ --link: #4a8af1;
+ --link-hover: #4a8af1;
}
html {
- box-sizing: border-box;
+ scroll-behavior: smooth;
}
*, *::before, *::after {
- box-sizing: inherit;
margin: 0;
- padding: 0px 0px 0px 0px;
+ padding: 0;
+}
+a {
+ text-decoration: none;
+}
+
+ul {
+ list-style-type: none;
}
body {
- background-color: var(--white);
- font-family: Helvetica;
- padding: 0px 0px 0px 0px;
+ background: linear-gradient(90deg, var(--background1) 0%, var(--background2) 100%);
+ font-family: Helvetica;
+}
+
+body#body.responsive {
+ margin-top: 230px;
+}
+
+body#body:not(.responsive) {
+ margin-top: 50px;
+}
+
+p {
+ color: var(--text);
+ padding: 10px;
+}
+
+li {
+ margin: 10px 10px 10px 10px;
+ color: var(--gray_F);
+}
+
+img.align-self {
+ align-self: center;
+ position: sticky;
+ top: 0;
+ align-self: flex-start;
+}
+
+.img {
+ margin: 10px 10px 10px 10px;
}
nav {
- width: 100%;
- background-color: var(--main_D);
- padding-left: 30px;
- padding-right: 20px;
- display: flex;
- justify-content: space-between;
- align-items: center;
+ background: linear-gradient(90deg, var(--background1) 0%, var(--background2) 100%);
+ position: fixed;
+ top: 0;
+ width: 100%;
+ font-size: 20px;
+ display: flex;
+ justify-content: left;
+ align-items: center;
+}
+
+nav:not(.responsive) {
+ flex-direction: row;
+}
+
+nav.responsive {
+ flex-direction: column;
+}
+
+nav.responsive a {
+ width: 90%;
}
nav a {
- padding-top: 5px;
- text-transform: uppercase;
- color: var(--gray_G);
- font-size: 20px;
- display: inline-block;
- text-decoration: none;
- transition: color 0.5s;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ padding-left: 10px;
+ padding-right: 10px;
+ text-decoration: none;
+ color: var(--white);
+ border-top: solid transparent 3px;
+ transition: border-top 0.5s;
}
nav a:hover {
- color: var(--white);
+ border-top: solid var(--heading);
+ color: var(--white);
}
-.navbar_links {
- list-style: none;
- display: flex;
+nav a.active {
+ border-top: solid var(--heading);
}
-.navbar_links a {
- padding-left: 16px;
- padding-right: 16px;
- padding-top: 8px;
- padding-bottom: 8px;
- text-decoration: none;
- font-size: 15px;
- color: var(--gray_F);
- display: block;
- transition: background-color 0.5s, color 0.5s;
+nav .icon {
+ display: none;
}
-.navbar_links a:hover {
- background-color: var(--main_F);
- color: var(--gray_B);
+h1 {
+ color: var(--heading);
+ margin-left: 10px;
+ font-size: 50px;
+ margin-right: 10px;
}
-.body {
+h2 {
+ color: var(--heading);
+ margin-left: 10px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ margin-right: 10px;
}
-.body h1 {
- margin-top: 5%;
- text-align: center;
- text-transform: uppercase;
- color: var(--gray_B);
+h3 {
+ color: var(--heading);
+ margin-left: 10px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ margin-right: 10px;
}
-.body h2 {
- margin-top: 5%;
- text-align: center;
- color: var(--gray_C);
+h4 {
+ color: var(--white);
+ margin-left: 10px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ margin-right: 10px;
}
-.body p {
- text-align: center;
- margin-left: 20px;
- margin-right: 20px;
- margin-top: 5px;
- margin-bottom: 5px;
- color: var(--gray_D);
+a {
+ color: var(--link);
+ transition: color 0.5s;
}
+a:hover {
+ color: var(--link-hover);
+}
+
+.flex {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+}
+
+.fixed-bg {
+ min-height: 300px;
+ background-attachment: fixed;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+footer {
+ background-color: #404040;
+}
\ No newline at end of file