Compare commits
3 Commits
main
...
feature-jo
| Author | SHA1 | Date | |
|---|---|---|---|
|
40e09a2e8b | ||
|
|
2671658b31 | ||
|
|
5734532edb |
148
joel-jonischus.css
Normal file
148
joel-jonischus.css
Normal file
@ -0,0 +1,148 @@
|
||||
/* Grundeinstellungen */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
color: #1d1d1f;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 20px;
|
||||
}
|
||||
|
||||
/* Navigation - Apple Glass Look */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
z-index: 1000;
|
||||
border-bottom: 0.5px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.nav-links a, .logo {
|
||||
text-decoration: none;
|
||||
color: #1d1d1f;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background-color: #fbfbfd;
|
||||
}
|
||||
|
||||
.hero-text h1 {
|
||||
font-size: 56px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.015em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hero-text p {
|
||||
font-size: 24px;
|
||||
color: #86868b;
|
||||
}
|
||||
|
||||
/* About Section */
|
||||
.about-section {
|
||||
text-align: center;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.about-section h2 {
|
||||
font-size: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.about-section p {
|
||||
font-size: 21px;
|
||||
color: #515154;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Gallery - Bento Grid Style */
|
||||
.gallery-section {
|
||||
background-color: #fbfbfd;
|
||||
}
|
||||
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
grid-auto-rows: 200px;
|
||||
gap: 20px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 500;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.grid-item:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.wide { grid-column: span 2; }
|
||||
.tall { grid-row: span 2; }
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #86868b;
|
||||
}
|
||||
|
||||
/* Mobile Optimierung */
|
||||
@media (max-width: 768px) {
|
||||
.hero-text h1 { font-size: 40px; }
|
||||
.wide { grid-column: span 1; }
|
||||
}
|
||||
53
joel-jonischus.html
Normal file
53
joel-jonischus.html
Normal file
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Joel Jonischus | Portfolio</title>
|
||||
<link rel="stylesheet" href="joel-jonischus.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar">
|
||||
<div class="nav-content">
|
||||
<a href="#home" class="logo">Joel</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#home">Home</a></li>
|
||||
<li><a href="#about">About me</a></li>
|
||||
<li><a href="#gallery">Gallery</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section id="home" class="hero">
|
||||
<div class="hero-text">
|
||||
<h1>Design. Innovation. Joel.</h1>
|
||||
<p>Einfachheit ist die höchste Stufe der Vollendung.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="about-section">
|
||||
<div class="container">
|
||||
<h2>Über mich</h2>
|
||||
<p>Ich bin ein kreativer Kopf mit einer Leidenschaft für digitale Ästhetik. Mein Ziel ist es, Technologie nicht nur funktional, sondern emotional erlebbar zu machen. Wenn ich nicht gerade an neuen Interfaces feile, finde ich Inspiration in der Architektur und der Stille der Natur.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="gallery" class="gallery-section">
|
||||
<div class="container">
|
||||
<h2>Gallery</h2>
|
||||
<div class="bento-grid">
|
||||
<div class="grid-item tall" style="background-color: #f2f2f2;"><span>Konzept 01</span></div>
|
||||
<div class="grid-item" style="background-color: #e5e5e5;"><span>Minimalismus</span></div>
|
||||
<div class="grid-item" style="background-color: #d1d1d1;"><span>Struktur</span></div>
|
||||
<div class="grid-item wide" style="background-color: #000; color: #fff;"><span>Night Mode</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 Joel Jonischus. Designed with precision.</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1
joel-jonischus.txt
Normal file
1
joel-jonischus.txt
Normal file
@ -0,0 +1 @@
|
||||
Das ist meine Datei!
|
||||
Loading…
x
Reference in New Issue
Block a user