From 839c474841fe958712ac9b3f1fc035bcdd889fc4 Mon Sep 17 00:00:00 2001
From: Simon Dahl <simda545@student.liu.se>
Date: Wed, 13 Nov 2024 12:29:48 +0100
Subject: [PATCH] =?UTF-8?q?Koden=20f=C3=B6r=20min=20hemsida?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
Hemsida/hem3.html | 54 ++++++++++
Hemsida/script.js | 43 ++++++++
Hemsida/style2.css | 251 +++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 348 insertions(+)
create mode 100644 Hemsida/hem3.html
create mode 100644 Hemsida/script.js
create mode 100644 Hemsida/style2.css
diff --git a/Hemsida/hem3.html b/Hemsida/hem3.html
new file mode 100644
index 0000000..288e382
--- /dev/null
+++ b/Hemsida/hem3.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Simon Dahl</title>
+ <link rel="stylesheet" href="style2.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+</head>
+
+<body>
+ <header>
+ <nav class="social-nav">
+ <a href="https://github.com" target="_blank" class="social-icon github"><i class="fab fa-github"></i></a>
+ <a href="https://www.linkedin.com/in/simon-dahl-1993572a1" target="_blank" class="social-icon linkedin"><i class="fab fa-linkedin"></i></a>
+ </nav>
+ </header>
+
+ <div class="spacer2"></div>
+
+ <main>
+ <section class="intro">
+ <p class="greeting">Hej, jag heter</p>
+ <h1 class="name">Simon Dahl.</h1>
+ <h2 class="tagline">Student i Linköping</h2>
+ <p class="description">Awkdjawjidankdawd bla bla bla biografi kanske?</p>
+ <a href="mailto:simda545@student.liu.se" class="contact-btn">Ta kontakt </a>
+ <div class="scroll-down-indicator">
+ <i class="fas fa-chevron-down"></i>
+ </div>
+ </section>
+
+ <!-- Ny sektion för bilder -->
+ <div class="spacer"></div>
+
+ <section class="gallery">
+ <h2>Mina Projekt</h2>
+ <div class="images">
+ <img src="wip.png" alt="Image 1">
+ <img src="wip.png" alt="Image 2">
+ <img src="wip.png" alt="Image 3">
+ <!-- Lägg till fler bilder här -->
+ </div>
+ <div class="spacer2"></div>
+ </section>
+ </main>
+
+ <footer>
+ <div class="email">simda545@student.liu.se</div>
+ </footer>
+
+ <script src="script.js"></script>
+</body>
+</html>
diff --git a/Hemsida/script.js b/Hemsida/script.js
new file mode 100644
index 0000000..f240c74
--- /dev/null
+++ b/Hemsida/script.js
@@ -0,0 +1,43 @@
+const button = document.querySelector(".contact-btn");
+let mouseX = 0, mouseY = 0;
+let buttonX = window.innerWidth / 2, buttonY = window.innerHeight / 2;
+const speed = 0.007;
+
+document.addEventListener("mousemove", (e) => {
+ mouseX = e.pageX;
+ mouseY = e.pageY;
+});
+
+function animateButton() {
+ buttonX += (mouseX - buttonX) * speed;
+ buttonY += (mouseY - buttonY) * speed;
+ button.style.left = `${buttonX}px`;
+ button.style.top = `${buttonY}px`;
+ requestAnimationFrame(animateButton);
+}
+animateButton();
+
+/* Stjärnor-funktion */
+const dropletContainer = document.querySelector('.droplet-container');
+
+function createStar() {
+ const star = document.createElement('div');
+ star.classList.add('droplet');
+
+ // Slumpmässig horisontell position
+ star.style.left = `${Math.random() * 100}vw`;
+
+ // Slumpmässig fallhastighet och fördröjning för variation
+ star.style.animationDuration = `${Math.random() * 3 + 2}s`; // 2-5 sekunder
+ star.style.animationDelay = `${Math.random() * 2}s`; // 0-2 sekunders fördröjning
+
+ dropletContainer.appendChild(star);
+
+ // Ta bort stjärnan efter animationen är klar
+ star.addEventListener('animationend', () => {
+ star.remove();
+ });
+}
+
+// Skapa nya stjärnor med intervall
+setInterval(createStar, 300); // En ny stjärna var 300 ms
diff --git a/Hemsida/style2.css b/Hemsida/style2.css
new file mode 100644
index 0000000..eed351c
--- /dev/null
+++ b/Hemsida/style2.css
@@ -0,0 +1,251 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+/* Social Media Links */
+.social-nav {
+ position: fixed;
+ width: 100%; /* Se till att ikonerna täcker hela bredden */
+ height: 100%; /* Se till att ikonerna täcker hela höjden */
+ top: 0;
+ left: 0;
+ pointer-events: none; /* Låt bara ikonerna vara klickbara */
+}
+
+/* Gemensam stil för båda ikonerna */
+.social-icon {
+ width: 80px; /* Storlek på ikonerna */
+ height: 80px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: #EEE2DC; /* Ikonfärg */
+ font-size: 2rem;
+ text-decoration: none;
+ background-color: #AC3B61; /* Mörkrosa bakgrund */
+ pointer-events: auto; /* Gör ikonerna klickbara */
+ transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+/* GitHub-ikonen i övre vänstra hörnet */
+.github {
+ position: absolute;
+ top: 0;
+ left: 0;
+ clip-path: polygon(0 0, 100% 0, 100% 80%, 20% 100%, 0 100%); /* "Notched corner" i övre vänstra hörnet */
+}
+
+/* LinkedIn-ikonen i övre högra hörnet med speglad form */
+.linkedin {
+ position: absolute;
+ top: 0;
+ right: 0;
+ clip-path: polygon(100% 0, 100% 100%, 80% 100%, 0 80%, 0 0); /* Speglad "notched corner" i övre högra hörnet */
+}
+
+/* Hover-effekt */
+.social-icon:hover {
+ background-color: #123C69; /* Mörkblå vid hovring */
+ transform: scale(1.1); /* Lätt förstoring vid hovring */
+}
+
+
+
+
+
+.greeting {
+ color: #AC3B61; /* Mörkrosa för hälsningstext */
+ font-size: 1rem;
+}
+
+.name {
+ font-size: 3rem;
+ color: #123C69; /* Mörkblå för namn */
+}
+
+.tagline {
+ font-size: 1.8rem;
+ color: #AC3B61; /* Mörkrosa för tagline */
+}
+
+.description {
+ margin: 20px 0;
+ font-size: 1rem;
+ color: #123C69; /* Mörkblå för beskrivningstext */
+}
+
+/* Pratbubbla-knapp */
+/* Ta Kontakt-knapp som en cirkel */
+.contact-btn {
+ display: inline-block;
+ padding: 15px; /* Öka padding för att göra knappen mer cirkulär */
+ color: #EEE2DC; /* Textfärg (mycket ljus beige) */
+ background-color: #123C69; /* Bakgrundsfärg (grålila) */
+ border: 1px solid #EDC7B7; /* Ljusbeige ram */
+ border-radius: 50%; /* Gör knappen cirkulär */
+ position: fixed;
+ z-index: 1;
+ opacity: 0.95; /* Mindre genomskinlighet */
+ text-align: center;
+ transition: opacity 0.3s ease;
+ box-shadow: 0px 0px 10px rgba(172, 59, 97, 0.3); /* Rosa skugga */
+ font-size: 0.9rem; /* Minska textstorleken för att passa cirkeln */
+}
+
+/* Undertext för Ta Kontakt-knappen (dölj undertexten i cirkeln för att undvika platsbrist) */
+.contact-btn .subtext {
+ display: none; /* Dölj undertexten */
+}
+
+/* Hover-effekt */
+.contact-btn:hover {
+ opacity: 1; /* Full opacitet vid hovring */
+}
+
+
+/* Stjärncontainer */
+.droplet-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ overflow: hidden;
+ pointer-events: none;
+ z-index: 10000; /* Högre z-index för att säkerställa att stjärnorna syns */
+}
+
+/* Stjärnor som faller */
+.droplet {
+ position: absolute;
+ top: -5px;
+ width: 4px;
+ height: 4px;
+ background-color: #ff0062; /* Använd en färg som syns mot bakgrunden */
+ border-radius: 50%;
+ opacity: 1; /* Sätt opacity till 1 för att säkerställa synlighet */
+ animation: fall linear infinite;
+}
+
+@keyframes fall {
+ 0% {
+ transform: translateY(0) translateX(0);
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(100vh) translateX(10vw); /* Diagonal rörelse */
+ opacity: 0; /* Gradvis försvinnande */
+ }
+}
+
+/* Footer Email */
+footer {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+}
+
+.email {
+ writing-mode: vertical-rl;
+ color: #123C69; /* Mörkblå för e-postadress */
+}
+
+/* Tillåt scrollning */
+body {
+ font-family: Arial, sans-serif;
+ background-color: #EEE2DC;
+ color: #123C69;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ padding: 20px;
+ overflow-y: auto; /* Tillåt vertikal scrollning */
+ scroll-behavior: smooth;
+}
+
+/* Main Content */
+main {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh; /* Gör så att main tar upp hela skärmhöjden */
+ justify-content: center; /* Vertikal centrering för .intro */
+}
+
+/* Intro-sektion */
+.intro {
+ max-width: 600px;
+ text-align: left;
+ margin-bottom: 0; /* Ta bort extra marginaler som kan skjuta upp texten */
+ width: 100%;
+}
+
+
+/* Galleri-sektion */
+.gallery {
+ width: 100%;
+ text-align: center;
+ margin-top: 0; /* Ingen extra margin behövs, avståndet skapas av .spacer */
+}
+
+.gallery h2 {
+ font-size: 2rem;
+ color: #AC3B61;
+ margin-bottom: 20px;
+}
+
+
+/* Bilder i galleriet */
+.images {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 15px;
+ justify-content: center;
+}
+
+.images img {
+ width: 300px;
+ height: 200px;
+ object-fit: cover;
+ border-radius: 10px;
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+ transition: transform 0.3s all ease-in-out;
+}
+
+/* Hover-effekt på bilder */
+.images img:hover {
+ transform: scale(1.5); /* Lätt förstoring vid hovring */
+}
+/* Dummy-element för att skapa avstånd */
+.spacer {
+ height: 400px; /* Skapar avståndet mellan intro och galleri */
+ width: 100%;
+}
+
+.spacer2 {
+ height: 36vh; /* Skapar avståndet mellan intro och galleri */
+ width: 100%;
+}
+
+/* Skrolla-ner-pil */
+.scroll-down-indicator {
+ text-align: center;
+ font-size: 2.5rem;
+ color: #AC3B61; /* Mörkrosa färg för pilen */
+ position: absolute;
+ bottom: 10vh;
+ left: 50%;
+ transform: translateX(-50%);
+ animation: bounce 2s infinite;
+}
+
+/* Enkel studs-animation för pilen */
+@keyframes bounce {
+ 0%, 100% {
+ transform: translateX(-50%) translateY(0);
+ }
+ 50% {
+ transform: translateX(-50%) translateY(10px);
+ }
+}
--
GitLab