summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.gitignore1
-rw-r--r--about.html35
-rw-r--r--blog.html26
-rw-r--r--blog/post-1.html32
-rw-r--r--footer.html1
-rw-r--r--img/cv.pngbin0 -> 1687 bytes
-rw-r--r--img/github.pngbin0 -> 4633 bytes
-rw-r--r--img/mail.pngbin0 -> 2010 bytes
-rw-r--r--index.html56
-rw-r--r--nav.html4
-rw-r--r--script.js38
-rw-r--r--style.css250
12 files changed, 285 insertions, 158 deletions
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..99ed0d4
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+notes.txt
diff --git a/about.html b/about.html
new file mode 100644
index 0000000..1fbc570
--- /dev/null
+++ b/about.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>About - Luhamus</title>
+ <link rel="stylesheet" href="/style.css" />
+</head>
+<body>
+ <div id="app">
+ <header class="banner">
+ <span>Luhamus</span>
+ </header>
+
+ <nav id="nav"></nav>
+
+ <main>
+ <h1>About</h1>
+ <p>I will at some point replace this paragraph here with a bit more information about
+ my background, interests work and so on.<br/>
+ </p>
+
+ <div class="contact-list">
+ <a href="mailto:rasmus.luha@gmail.com" target="_blank"><img class="contactImg" src="/img/mail.png"></a>
+ <a href="https://github.com/luhamus" target="_blank"><img class="contactImg" src="/img/github.png"></a>
+ <a href="/cv.pdf" target="_blank"><img class="contactImg" src="/img/cv.png"></a>
+ </div>
+ </main>
+ </div>
+
+ <footer id="footer"></footer>
+ <script src="/script.js"></script>
+
+</body>
+</html>
diff --git a/blog.html b/blog.html
new file mode 100644
index 0000000..39d04c7
--- /dev/null
+++ b/blog.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Blog - Luhamus</title>
+ <link rel="stylesheet" href="/style.css" />
+</head>
+<body>
+ <div id="app">
+ <nav id="nav"></nav>
+
+ <main>
+ <h1>Writing</h1>
+ <ul class="post-list">
+ <li>
+ <a href="/blog/post-1.html">My first post - TODO</a>
+ <span class="post-date">Jun 2026</span>
+ </li>
+ </ul>
+ </main>
+ </div>
+ <footer id="footer"></footer>
+ <script src="/script.js"></script>
+</body>
+</html>
diff --git a/blog/post-1.html b/blog/post-1.html
new file mode 100644
index 0000000..1a33b64
--- /dev/null
+++ b/blog/post-1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Your first post title — Your Name</title>
+ <link rel="stylesheet" href="/style.css" />
+</head>
+<body>
+ <div id="app">
+ <nav id="nav"></nav>
+
+ <main>
+ <article>
+ <h1>My first post title - TODO</h1>
+ <p class="post-meta">June 12, 2026</p>
+
+ <p>Here would be the post content.</p>
+
+ <h2>A subheading</h2>
+
+ <p>More content.</p>
+
+ <pre><code>A code block would look like this</code></pre>
+
+ <p><a href="/blog.html">← Back to blog</a></p>
+ </article>
+ </main>
+ </div>
+ <script src="/script.js"></script>
+</body>
+</html>
diff --git a/footer.html b/footer.html
new file mode 100644
index 0000000..c7a8972
--- /dev/null
+++ b/footer.html
@@ -0,0 +1 @@
+<footer id="footer"></footer>
diff --git a/img/cv.png b/img/cv.png
new file mode 100644
index 0000000..dc59ce3
--- /dev/null
+++ b/img/cv.png
Binary files differ
diff --git a/img/github.png b/img/github.png
new file mode 100644
index 0000000..efb774c
--- /dev/null
+++ b/img/github.png
Binary files differ
diff --git a/img/mail.png b/img/mail.png
new file mode 100644
index 0000000..697c6be
--- /dev/null
+++ b/img/mail.png
Binary files differ
diff --git a/index.html b/index.html
index 8f7d055..1873efc 100644
--- a/index.html
+++ b/index.html
@@ -4,55 +4,23 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Luhamus</title>
- <link rel="stylesheet" href="style.css" />
+ <link rel="stylesheet" href="/style.css" />
</head>
<body>
<div id="app">
- <nav>
- <a href="#/">Home</a>
- <a href="https://git.luhamus.com" target="_blank">Git server</a>
- <a href="#/blog">Blog</a>
- <a href="#/about">About</a>
- </nav>
+ <header class="banner">
+ <span>Luhamus</span>
+ </header>
-
- <section class="page" id="page-home">
- <h1>Hello and welcome!</h1>
- <p>My name is <strong>Rasmus Luha</strong>.<br> I am studying Computer Science with a focus on DevOps.</p>
- <p>
- You can reach me at
- <a href="mailto:you@example.com">TODO@TODO.com</a>.
- </p>
- </section>
-
-
- <section class="page" id="page-blog">
- <h1>Writing</h1>
- <ul class="post-list">
- <li>
- <a href="#/blog/post-1">Your first post title</a>
- <span class="post-date">Jun 2026</span>
- </li>
- <li>
- <a href="#/blog/post-2">Another post title</a>
- <span class="post-date">May 2026</span>
- </li>
- </ul>
- </section>
-
-
- <section class="page" id="page-about">
- <h1>About</h1>
- <p>A bit more about my background, interest, work.</p>
- </section>
+ <nav id="nav"></nav>
-
- <section class="page" id="page-404">
- <h1>Page not found</h1>
- <p><a href="#/">Go home</a></p>
- </section>
+ <main>
+ <h1>Hello and welcome!</h1>
+ <p>My name is <strong>Rasmus Luha</strong>.<br>I am (graduated but nevertheless still) studying Computer Science with a focus on DevOps.</p>
+ <!-- <p>You can reach me at <a href="mailto:you@example.com">you@example.com</a>.</p> -->
+ </main>
</div>
-
-<script src="script.js"></script>
+ <footer id="footer"></footer>
+ <script src="/script.js"></script>
</body>
</html>
diff --git a/nav.html b/nav.html
new file mode 100644
index 0000000..ae3a804
--- /dev/null
+++ b/nav.html
@@ -0,0 +1,4 @@
+<a href="/index.html">Home</a>
+<a href="/about.html">About</a>
+<a href="/blog.html">Blog</a>
+<a href="https://git.luhamus.com" target="_blank">Git server</a>
diff --git a/script.js b/script.js
index b37a235..7b52657 100644
--- a/script.js
+++ b/script.js
@@ -1,25 +1,17 @@
-const routes = {
- '/': 'page-home',
- '/blog': 'page-blog',
- '/about': 'page-about',
-};
+// Fetch navbar
+fetch('/nav.html')
+ .then(r => r.text())
+ .then(html => {
+ document.getElementById('nav').innerHTML = html;
-function navigate() {
- const hash = location.hash.replace('#', '') || '/';
+ // Mark the current page link as active
+ const current = window.location.pathname;
+ document.querySelectorAll('nav a').forEach(a => {
+ if (a.getAttribute('href') === current) {
+ a.classList.add('active');
+ }
+ })
+ })
- // Hide all pages
- document.querySelectorAll('.page').forEach(el => el.classList.remove('active'));
-
- // Update nav
- document.querySelectorAll('nav a').forEach(a => {
- const path = a.getAttribute('href').replace('#', '');
- a.classList.toggle('active', path === hash);
- });
-
- // Show matching page, fall back to 404
- const pageId = routes[hash] || 'page-404';
- document.getElementById(pageId).classList.add('active');
-}
-
-window.addEventListener('hashchange', navigate);
-navigate(); // run on load
+// Fetch footer
+document.getElementById('footer').innerHTML = '© 2026 Luhamus';
diff --git a/style.css b/style.css
index 9dee0b5..b77065c 100644
--- a/style.css
+++ b/style.css
@@ -1,91 +1,159 @@
- /* ── Reset & base ── */
- *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
- :root {
- --bg: #ffffff;
- --fg: #111111;
- --muted: #666666;
- --accent: #0057ff;
- --max-w: 640px;
- --gap: 1.5rem;
- }
-
- body {
- background: var(--bg);
- color: var(--fg);
- font-family: Georgia, 'Times New Roman', serif;
- font-size: 1.05rem;
- line-height: 1.7;
- padding: 3rem 1.25rem;
- }
-
- /* ── Layout ── */
- #app {
- max-width: var(--max-w);
- margin: 0 auto;
- }
-
- /* ── Nav ── */
- nav {
- margin-bottom: 3rem;
- display: flex;
- gap: 1.25rem;
- }
-
- nav a {
- color: var(--muted);
- text-decoration: none;
- font-family: system-ui, sans-serif;
- font-size: 0.9rem;
- letter-spacing: 0.03em;
- transition: color 0.15s;
- }
-
- nav a:hover,
- nav a.active { color: var(--fg); }
-
- /* ── Page sections ── */
- .page { display: none; }
- .page.active { display: block; }
-
- h1 {
- font-size: 1.6rem;
- font-weight: normal;
- margin-bottom: 1rem;
- }
-
- p { margin-bottom: var(--gap); }
-
- a { color: var(--accent); }
-
- /* ── Blog list ── */
- .post-list { list-style: none; }
-
- .post-list li {
- display: flex;
- justify-content: space-between;
- align-items: baseline;
- gap: 1rem;
- padding: 0.6rem 0;
- border-bottom: 1px solid #eee;
- }
-
- .post-list a {
- text-decoration: none;
- color: var(--fg);
- }
-
- .post-list a:hover { text-decoration: underline; }
-
- .post-date {
- color: var(--muted);
- font-family: system-ui, sans-serif;
- font-size: 0.85rem;
- white-space: nowrap;
- }
-
- /* ── Mobile ── */
- @media (max-width: 480px) {
- body { padding: 2rem 1rem; }
- .post-list li { flex-direction: column; gap: 0.15rem; }
- }
+/* Reset & base */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+ --bg: #f0f0eb;
+ --fg: #111111;
+ --muted: #666666;
+ --accent: #0057ff;
+}
+
+body {
+ background: var(--bg);
+ color: var(--fg);
+ font-family: Georgia, 'Times New Roman', serif;
+ font-size: 1.05rem;
+ line-height: 1.7;
+ padding: 3rem 1.25rem;
+}
+
+#app {
+ max-width: 640px;
+ margin: 0 auto;
+}
+
+/* Nav */
+nav {
+ margin-bottom: 3rem;
+ display: flex;
+ gap: 1.25rem;
+ font-weight: bold;
+}
+
+nav a {
+ color: var(--muted);
+ text-decoration: none;
+ font-family: system-ui, sans-serif;
+ font-size: 1.0rem;
+ letter-spacing: 0.03em;
+ transition: color 0.15s;
+}
+
+nav a:hover,
+nav a.active { color: var(--fg); }
+
+
+/* Footer */
+footer {
+ margin-top: 4rem;
+ padding-top: 1rem;
+ color: var(--muted);
+ font-family: system-ui, sans-serif;
+ font-size: 0.85rem;
+ text-align: center;
+ /* border-top: 1px solid #eee; */
+}
+
+
+
+/* Banner */
+.banner {
+ width: 100%;
+ height: 200px;
+ background: linear-gradient(135deg, #a8c5a0, #c8dfc4);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 2rem;
+ border-radius: 4px;
+}
+
+.banner span {
+ color: white;
+ font-size: 2.5rem;
+ font-family: system-ui, sans-serif;
+ font-weight: bold;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ border: 3px solid white;
+ padding: 0.4rem 1.2rem;
+}
+
+
+
+
+/* Base elemets */
+h1 {
+ font-size: 2rem;
+ font-weight: normal;
+ margin-bottom: 1rem;
+}
+
+h2 {
+ font-size: 1.4rem;
+ font-weight: normal;
+ margin: 2rem 0 0.5rem;
+}
+
+p { margin-bottom: 1.5rem; }
+
+a { color: var(--accent); }
+
+
+
+/* About page */
+
+.contact-list {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+}
+
+.contactImg {
+ width: 4rem;
+ height: auto;
+}
+
+
+/* Blog list */
+.post-list { list-style: none; }
+
+.post-list li {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ gap: 1rem;
+ padding: 0.6rem 0;
+ border-bottom: 1px solid #eee;
+}
+
+.post-list a {
+ text-decoration: none;
+ color: var(--fg);
+}
+
+.post-list a:hover { text-decoration: underline; }
+
+.post-date,
+.post-meta {
+ color: var(--muted);
+ font-family: system-ui, sans-serif;
+ font-size: 0.85rem;
+ white-space: nowrap;
+ margin-bottom: 2rem;
+}
+
+/*Code*/
+pre {
+ background: #f5f5f5;
+ padding: 1rem;
+ overflow-x: auto;
+ font-size: 0.9rem;
+ margin-bottom: 1.5rem;
+}
+
+/* Mobile─*/
+@media (max-width: 480px) {
+ body { padding: 2rem 1rem; }
+ .post-list li { flex-direction: column; gap: 0.15rem; }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-12 21:28:12 +0000