Skip to content
Snippets Groups Projects
Commit 839c4748 authored by Simon Dahl's avatar Simon Dahl
Browse files

Koden för min hemsida

parent 52d81230
No related branches found
No related tags found
No related merge requests found
<!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>
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
* {
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);
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment