Last 10 Commits for anders.scroll.pub

commit 1924b748769eeb0c6a7375398f65e134e5bccc25 Author: root <root@hub.scroll.pub> Date: 2025-01-03 03:58:14 +0000 Subject: Initial commit diff --git a/.log.txt b/.log.txt new file mode 100644 index 0000000..fd841eb --- /dev/null +++ b/.log.txt @@ -0,0 +1,8 @@ +read anders.scroll.pub https://hub.scroll.pub/edit.html?folderName=anders.scroll.pub&command=showWelcomeMessageCommand 1735876674966 ::ffff:27.34.73.18 0.0 200 Chrome.131 WindowsNT.10.0 +read anders.scroll.pub https://hub.scroll.pub/ls.json?folderName=anders.scroll.pub 1735876676140 ::ffff:27.34.73.18 0.0 200 Chrome.131 WindowsNT.10.0 +read anders.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=anders.scroll.pub&filePath=anders.scroll.pub%2Findex.scroll 1735876676416 ::ffff:27.34.73.18 0.0 200 Chrome.131 WindowsNT.10.0 +read anders.scroll.pub http://anders.scroll.pub/index.html 1735876681797 ::ffff:27.34.73.18 0.0 200 Chrome.131 WindowsNT.10.0 +read anders.scroll.pub http://anders.scroll.pub/script.js 1735876682130 ::ffff:27.34.73.18 0.0 200 Chrome.131 WindowsNT.10.0 +read anders.scroll.pub http://anders.scroll.pub/style.css 1735876682132 ::ffff:27.34.73.18 0.0 200 Chrome.131 WindowsNT.10.0 +read anders.scroll.pub http://anders.scroll.pub/favicon.ico 1735876682575 ::ffff:27.34.73.18 0.0 200 Chrome.131 WindowsNT.10.0 +read anders.scroll.pub http://anders.scroll.pub/style.css 1735876689194 ::ffff:27.34.73.18 0.0 304 Chrome.131 WindowsNT.10.0 diff --git a/.stats.json b/.stats.json new file mode 100644 index 0000000..ec91f9a --- /dev/null +++ b/.stats.json @@ -0,0 +1,58 @@ +{ + "files": { + "body.html": { + "versioned": true, + "file": "body.html", + "size": 2901, + "mtime": "2025-01-03T03:57:53.787Z", + "ctime": "2025-01-03T03:57:53.787Z" + }, + "index.scroll": { + "versioned": true, + "file": "index.scroll", + "size": 148, + "mtime": "2025-01-03T03:57:53.787Z", + "ctime": "2025-01-03T03:57:53.787Z" + }, + "prompt.json": { + "versioned": true, + "file": "prompt.json", + "size": 8837, + "mtime": "2025-01-03T03:57:53.788Z", + "ctime": "2025-01-03T03:57:53.788Z" + }, + "readme.scroll": { + "versioned": true, + "file": "readme.scroll", + "size": 1938, + "mtime": "2025-01-03T03:57:53.788Z", + "ctime": "2025-01-03T03:57:53.788Z" + }, + "script.js": { + "versioned": true, + "file": "script.js", + "size": 1213, + "mtime": "2025-01-03T03:57:53.788Z", + "ctime": "2025-01-03T03:57:53.788Z" + }, + "style.css": { + "versioned": true, + "file": "style.css", + "size": 2815, + "mtime": "2025-01-03T03:57:53.787Z", + "ctime": "2025-01-03T03:57:53.787Z" + } + }, + "hasSslCert": false, + "scrollHubVersion": "0.72.0", + "stats": { + "folder": "anders.scroll.pub", + "folderLink": "http://anders.scroll.pub", + "created": "2025-01-03T03:57:53.000Z", + "revised": "2025-01-03T03:57:53.000Z", + "files": 6, + "mb": 1, + "revisions": 1, + "hash": "256b4cb629" + } +} \ No newline at end of file diff --git a/body.html b/body.html index 0ce7154..43fee63 100644 --- a/body.html +++ b/body.html @@ -1,6 +1,6 @@ <header class="site-header"> <nav class="main-nav"> - <a href="#" class="logo">AN</a> + <a href="#home" class="logo">AN</a> <button class="menu-toggle" aria-label="Toggle menu"> <span></span> </button> @@ -13,7 +13,7 @@ </header> <main> - <section class="hero"> + <section id="home" class="hero"> <div class="container"> <h1>Hi! I'm Anders Norén</h1> <p class="lead">A freelance designer & developer living in the Swedish mountains.</p> @@ -22,15 +22,14 @@ <section id="about" class="about"> <div class="container"> + <h2>About Me</h2> <div class="about-grid"> <div class="about-content"> - <h2>About Me</h2> <p>I've been a WordPress user since 2007, worked with it full-time since 2015, and been self-employed since 2019. These days, I mostly design and build things for Automattic, although I'm always open to talk about side projects.</p> <p>I've released more than 30 free WordPress themes that have been downloaded over 4 million times and are used on hundreds of thousands of websites. I also designed and helped build Twenty Twenty, the default theme in WordPress 5.3.</p> </div> <div class="about-personal"> - <h3>Life in the Mountains</h3> - <p>Me, my girlfriend Rebecka and our Shiba Inu Taki live in Härjedalen, Sweden's least populated province. We spend our time exploring the wilderness - skiing in winter and hiking in summer.</p> + <p>Me, my girlfriend Rebecka and our Shiba Inu Taki live in Härjedalen, which is the least populated province in Sweden with 10,000 people. We spend as much time as possible in the woods and mountains, on skis in winter and in hiking boots in summer.</p> </div> </div> </div> @@ -39,13 +38,12 @@ <section id="work" class="work"> <div class="container"> <h2>Selected Clients</h2> - <ul class="client-grid"> + <ul class="client-list"> <li>Automattic</li> <li>Absolut Company</li> + <li>Bonnier Magazines</li> <li>H&M Foundation</li> <li>Klarna</li> - <li>Svenska Spel</li> - <li>Bonnier Magazines</li> </ul> </div> </section> @@ -56,12 +54,12 @@ <div class="post-grid"> <article class="post-card"> <h3>A summer hike in Vålådalen</h3> - <time>December 18, 2024</time> + <time>Dec 18, 2024</time> <p>Our original hiking plan for this August was a one-week trip to Jotunheimen national park in Norway...</p> </article> <article class="post-card"> <h3>Four days in Femundsmarka National Park</h3> - <time>June 27, 2024</time> + <time>Jun 27, 2024</time> </article> <article class="post-card"> <h3>Introducing Pulitzer</h3> @@ -74,9 +72,6 @@ <footer class="site-footer"> <div class="container"> - <div class="footer-content"> - <p>Follow my adventures on <a href="https://instagram.com" rel="noopener">Instagram</a></p> - <p>This site is hosted on WordPress.com</p> - </div> + <p>Follow my adventures on <a href="https://instagram.com" target="_blank" rel="noopener">Instagram</a></p> </div> </footer> diff --git a/index.html b/index.html new file mode 100644 index 0000000..42e89ee --- /dev/null +++ b/index.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Anders Norén - Designer & Developer</title> + <script>/* This HTML was generated by 📜 Scroll v164.12.0. https://scroll.pub */</script> + <style>@media print {.doNotPrint {display: none !important;}}</style> + <link rel="canonical" href="https://anders.scroll.pub/index.html"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="description" content=""> + <meta name="generator" content="Scroll v164.12.0"> + <meta property="og:title" content="Anders Norén - Designer & Developer"> + <meta property="og:description" content=""> + <meta property="og:image" content=""> + + <link rel="source" type="application/git" title="Source Code Repository" href="index.scroll"> + + <meta name="twitter:card" content="summary_large_image"> +</head> +<body> +<style>.abstractIconButtonParser {position:absolute;top:0.25rem; }.abstractIconButtonParser svg {fill: rgba(204,204,204,.8);width:1.875rem;height:1.875rem; padding: 0 7px;} .abstractIconButtonParser:hover svg{fill: #333;}</style><a href="/edit.html" class="doNotPrint abstractIconButtonParser" style="right:2rem;"><svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z"/></svg></a> +<link rel="stylesheet" type="text/css" href="style.css"> +<header class="site-header"> + <nav class="main-nav"> + <a href="#" class="logo">AN</a> + <button class="menu-toggle" aria-label="Toggle menu"> + <span></span> + </button> + <ul class="nav-links"> + <li><a href="#about">About</a></li> + <li><a href="#work">Work</a></li> + <li><a href="#blog">Blog</a></li> + </ul> + </nav> +</header> + +<main> + <section class="hero"> + <div class="container"> + <h1>Hi! I'm Anders Norén</h1> + <p class="lead">A freelance designer & developer living in the Swedish mountains.</p> + </div> + </section> + + <section id="about" class="about"> + <div class="container"> + <div class="about-grid"> + <div class="about-content"> + <h2>About Me</h2> + <p>I've been a WordPress user since 2007, worked with it full-time since 2015, and been self-employed since 2019. These days, I mostly design and build things for Automattic, although I'm always open to talk about side projects.</p> + <p>I've released more than 30 free WordPress themes that have been downloaded over 4 million times and are used on hundreds of thousands of websites. I also designed and helped build Twenty Twenty, the default theme in WordPress 5.3.</p> + </div> + <div class="about-personal"> + <h3>Life in the Mountains</h3> + <p>Me, my girlfriend Rebecka and our Shiba Inu Taki live in Härjedalen, Sweden's least populated province. We spend our time exploring the wilderness - skiing in winter and hiking in summer.</p> + </div> + </div> + </div> + </section> + + <section id="work" class="work"> + <div class="container"> + <h2>Selected Clients</h2> + <ul class="client-grid"> + <li>Automattic</li> + <li>Absolut Company</li> + <li>H&M Foundation</li> + <li>Klarna</li> + <li>Svenska Spel</li> + <li>Bonnier Magazines</li> + </ul> + </div> + </section> + + <section id="blog" class="blog"> + <div class="container"> + <h2>Latest Posts</h2> + <div class="post-grid"> + <article class="post-card"> + <h3>A summer hike in Vålådalen</h3> + <time>December 18, 2024</time> + <p>Our original hiking plan for this August was a one-week trip to Jotunheimen national park in Norway...</p> + </article> + <article class="post-card"> + <h3>Four days in Femundsmarka National Park</h3> + <time>June 27, 2024</time> + </article> + <article class="post-card"> + <h3>Introducing Pulitzer</h3> + <time>May 7, 2024</time> + </article> + </div> + </div> + </section> +</main> + +<footer class="site-footer"> + <div class="container"> + <div class="footer-content"> + <p>Follow my adventures on <a href="https://instagram.com" rel="noopener">Instagram</a></p> + <p>This site is hosted on WordPress.com</p> + </div> + </div> +</footer> + +<script src="script.js"></script> +</body> +</html> \ No newline at end of file diff --git a/index.scroll b/index.scroll index dbc6291..90d016f 100644 --- a/index.scroll +++ b/index.scroll @@ -1,6 +1,10 @@ buildHtml baseUrl https://anders.scroll.pub metaTags + title Anders Norén - Designer & Developer + description Freelance designer and WordPress developer from the Swedish mountains + author Anders Norén + ogImage /images/profile.jpg editButton /edit.html title Anders Norén - Designer & Developer style.css diff --git a/prompt.json b/prompt.json index 973a612..a24e9e6 100644 --- a/prompt.json +++ b/prompt.json @@ -1,20 +1,20 @@ { - "id": "msg_01Y9psauqdaWhR38SnKHxRQ5", + "id": "msg_01DD6kDbgC2CMcGYzx8Vo12n", "type": "message", "role": "assistant", "model": "claude-3-5-sonnet-20241022", "content": [ { "type": "text", - "text": "I'll create a personal portfolio website for Anders Norén. For the domain, I suggest:\n\n---domain---\nanders.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://anders.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Anders Norén - Designer & Developer\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header class=\"site-header\">\n <nav class=\"main-nav\">\n <a href=\"#\" class=\"logo\">AN</a>\n <button class=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#work\">Work</a></li>\n <li><a href=\"#blog\">Blog</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"container\">\n <h1>Hi! I'm Anders Norén</h1>\n <p class=\"lead\">A freelance designer & developer living in the Swedish mountains.</p>\n </div>\n </section>\n\n <section id=\"about\" class=\"about\">\n <div class=\"container\">\n <div class=\"about-grid\">\n <div class=\"about-content\">\n <h2>About Me</h2>\n <p>I've been a WordPress user since 2007, worked with it full-time since 2015, and been self-employed since 2019. These days, I mostly design and build things for Automattic, although I'm always open to talk about side projects.</p>\n <p>I've released more than 30 free WordPress themes that have been downloaded over 4 million times and are used on hundreds of thousands of websites. I also designed and helped build Twenty Twenty, the default theme in WordPress 5.3.</p>\n </div>\n <div class=\"about-personal\">\n <h3>Life in the Mountains</h3>\n <p>Me, my girlfriend Rebecka and our Shiba Inu Taki live in Härjedalen, Sweden's least populated province. We spend our time exploring the wilderness - skiing in winter and hiking in summer.</p>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"work\" class=\"work\">\n <div class=\"container\">\n <h2>Selected Clients</h2>\n <ul class=\"client-grid\">\n <li>Automattic</li>\n <li>Absolut Company</li>\n <li>H&M Foundation</li>\n <li>Klarna</li>\n <li>Svenska Spel</li>\n <li>Bonnier Magazines</li>\n </ul>\n </div>\n </section>\n\n <section id=\"blog\" class=\"blog\">\n <div class=\"container\">\n <h2>Latest Posts</h2>\n <div class=\"post-grid\">\n <article class=\"post-card\">\n <h3>A summer hike in Vålådalen</h3>\n <time>December 18, 2024</time>\n <p>Our original hiking plan for this August was a one-week trip to Jotunheimen national park in Norway...</p>\n </article>\n <article class=\"post-card\">\n <h3>Four days in Femundsmarka National Park</h3>\n <time>June 27, 2024</time>\n </article>\n <article class=\"post-card\">\n <h3>Introducing Pulitzer</h3>\n <time>May 7, 2024</time>\n </article>\n </div>\n </div>\n </section>\n</main>\n\n<footer class=\"site-footer\">\n <div class=\"container\">\n <div class=\"footer-content\">\n <p>Follow my adventures on <a href=\"https://instagram.com\" rel=\"noopener\">Instagram</a></p>\n <p>This site is hosted on WordPress.com</p>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --color-primary: #2d3436;\n --color-secondary: #0984e3;\n --color-bg: #ffffff;\n --color-text: #2d3436;\n --font-sans: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n --container-width: 1200px;\n --spacing: 2rem;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: var(--font-sans);\n line-height: 1.6;\n color: var(--color-text);\n background: var(--color-bg);\n}\n\n.container {\n width: 90%;\n max-width: var(--container-width);\n margin: 0 auto;\n padding: 0 var(--spacing);\n}\n\n/* Header */\n.site-header {\n position: fixed;\n top: 0;\n width: 100%;\n background: rgba(255, 255, 255, 0.98);\n backdrop-filter: blur(10px);\n z-index: 100;\n box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);\n}\n\n.main-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem var(--spacing);\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: 700;\n text-decoration: none;\n color: var(--color-primary);\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n gap: 2rem;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--color-text);\n font-weight: 500;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--color-secondary);\n}\n\n/* Hero */\n.hero {\n height: 100vh;\n display: flex;\n align-items: center;\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n}\n\n.hero h1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n line-height: 1.2;\n}\n\n.lead {\n font-size: 1.5rem;\n color: #636e72;\n}\n\n/* Sections */\nsection {\n padding: var(--spacing) 0;\n}\n\n.about-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem;\n padding: 4rem 0;\n}\n\n.client-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n list-style: none;\n padding: 2rem 0;\n}\n\n.post-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 2rem 0;\n}\n\n.post-card {\n padding: 2rem;\n background: #f5f6fa;\n border-radius: 1rem;\n transition: transform 0.3s ease;\n}\n\n.post-card:hover {\n transform: translateY(-5px);\n}\n\n/* Footer */\n.site-footer {\n background: var(--color-primary);\n color: white;\n padding: 4rem 0;\n margin-top: 4rem;\n}\n\n.footer-content {\n text-align: center;\n}\n\n.footer-content a {\n color: white;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .hero h1 {\n font-size: 2.5rem;\n }\n \n .about-grid {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n \n .nav-links {\n display: none;\n }\n \n .menu-toggle {\n display: block;\n }\n}\n\n/* Animations */\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.hero h1,\n.hero p {\n animation: fadeIn 1s ease-out forwards;\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n \n if (menuToggle) {\n menuToggle.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n menuToggle.classList.toggle('active');\n });\n }\n\n // Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n\n // Intersection Observer for fade-in animations\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('section').forEach(section => {\n observer.observe(section);\n });\n});\n\n---end---\n\nThis implementation creates a modern, clean, and responsive personal portfolio website for Anders Norén. Key features include:\n\n1. Smooth scrolling navigation\n2. Responsive design with mobile menu\n3. Beautiful gradient backgrounds and subtle animations\n4. Card-based layout for blog posts\n5. Grid-based client showcase\n6. Accessibility features\n7. Modern CSS with variables\n8. Performant animations using IntersectionObserver\n9. Clean semantic HTML structure\n10. Subtle hover effects and transitions\n\nThe design emphasizes typography and whitespace while maintaining a professional appearance that reflects Anders' work as a designer and developer. The color scheme is minimal but effective, with careful attention to contrast and readability." + "text": "Based on the content, I'll suggest a clean and professional implementation.\n\n---domain---\nanders.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://anders.scroll.pub\nmetaTags\n title Anders Norén - Designer & Developer\n description Freelance designer and WordPress developer from the Swedish mountains\n author Anders Norén\n ogImage /images/profile.jpg\neditButton /edit.html\ntitle Anders Norén - Designer & Developer\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header class=\"site-header\">\n <nav class=\"main-nav\">\n <a href=\"#home\" class=\"logo\">AN</a>\n <button class=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#work\">Work</a></li>\n <li><a href=\"#blog\">Blog</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"home\" class=\"hero\">\n <div class=\"container\">\n <h1>Hi! I'm Anders Norén</h1>\n <p class=\"lead\">A freelance designer & developer living in the Swedish mountains.</p>\n </div>\n </section>\n\n <section id=\"about\" class=\"about\">\n <div class=\"container\">\n <h2>About Me</h2>\n <div class=\"about-grid\">\n <div class=\"about-content\">\n <p>I've been a WordPress user since 2007, worked with it full-time since 2015, and been self-employed since 2019. These days, I mostly design and build things for Automattic, although I'm always open to talk about side projects.</p>\n <p>I've released more than 30 free WordPress themes that have been downloaded over 4 million times and are used on hundreds of thousands of websites. I also designed and helped build Twenty Twenty, the default theme in WordPress 5.3.</p>\n </div>\n <div class=\"about-personal\">\n <p>Me, my girlfriend Rebecka and our Shiba Inu Taki live in Härjedalen, which is the least populated province in Sweden with 10,000 people. We spend as much time as possible in the woods and mountains, on skis in winter and in hiking boots in summer.</p>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"work\" class=\"work\">\n <div class=\"container\">\n <h2>Selected Clients</h2>\n <ul class=\"client-list\">\n <li>Automattic</li>\n <li>Absolut Company</li>\n <li>Bonnier Magazines</li>\n <li>H&M Foundation</li>\n <li>Klarna</li>\n </ul>\n </div>\n </section>\n\n <section id=\"blog\" class=\"blog\">\n <div class=\"container\">\n <h2>Latest Posts</h2>\n <div class=\"post-grid\">\n <article class=\"post-card\">\n <h3>A summer hike in Vålådalen</h3>\n <time>Dec 18, 2024</time>\n <p>Our original hiking plan for this August was a one-week trip to Jotunheimen national park in Norway...</p>\n </article>\n <article class=\"post-card\">\n <h3>Four days in Femundsmarka National Park</h3>\n <time>Jun 27, 2024</time>\n </article>\n <article class=\"post-card\">\n <h3>Introducing Pulitzer</h3>\n <time>May 7, 2024</time>\n </article>\n </div>\n </div>\n </section>\n</main>\n\n<footer class=\"site-footer\">\n <div class=\"container\">\n <p>Follow my adventures on <a href=\"https://instagram.com\" target=\"_blank\" rel=\"noopener\">Instagram</a></p>\n </div>\n</footer>\n\n---style.css---\n:root {\n --color-primary: #2d3436;\n --color-secondary: #636e72;\n --color-accent: #0984e3;\n --color-background: #ffffff;\n --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n --container-width: 1200px;\n --spacing-unit: 2rem;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: var(--font-sans);\n line-height: 1.6;\n color: var(--color-primary);\n background: var(--color-background);\n}\n\n.container {\n width: 90%;\n max-width: var(--container-width);\n margin: 0 auto;\n padding: 0 var(--spacing-unit);\n}\n\n/* Header */\n.site-header {\n position: fixed;\n top: 0;\n width: 100%;\n background: rgba(255, 255, 255, 0.98);\n box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);\n z-index: 100;\n}\n\n.main-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 80px;\n padding: 0 var(--spacing-unit);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n color: var(--color-primary);\n text-decoration: none;\n font-weight: 500;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--color-accent);\n}\n\n/* Hero Section */\n.hero {\n height: 100vh;\n display: flex;\n align-items: center;\n background: linear-gradient(45deg, #f6f6f6, #ffffff);\n}\n\n.hero h1 {\n font-size: 4rem;\n line-height: 1.2;\n margin-bottom: 1rem;\n}\n\n.lead {\n font-size: 1.5rem;\n color: var(--color-secondary);\n}\n\n/* Sections */\nsection {\n padding: var(--spacing-unit) 0;\n}\n\n/* Post Grid */\n.post-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.post-card {\n padding: 2rem;\n background: #f8f9fa;\n border-radius: 8px;\n transition: transform 0.3s ease;\n}\n\n.post-card:hover {\n transform: translateY(-5px);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .hero h1 {\n font-size: 2.5rem;\n }\n \n .nav-links {\n display: none;\n }\n \n .menu-toggle {\n display: block;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n \n menuToggle?.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n menuToggle.classList.toggle('active');\n });\n\n // Smooth scroll for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Header scroll effect\n let lastScroll = 0;\n const header = document.querySelector('.site-header');\n\n window.addEventListener('scroll', () => {\n const currentScroll = window.pageYOffset;\n\n if (currentScroll <= 0) {\n header.classList.remove('scroll-up');\n return;\n }\n \n if (currentScroll > lastScroll && !header.classList.contains('scroll-down')) {\n header.classList.remove('scroll-up');\n header.classList.add('scroll-down');\n } else if (currentScroll < lastScroll && header.classList.contains('scroll-down')) {\n header.classList.remove('scroll-down');\n header.classList.add('scroll-up');\n }\n lastScroll = currentScroll;\n });\n});\n\n---end---\n\nThis implementation provides a modern, clean, and responsive website that highlights Anders' work and personality. The design features:\n\n1. Smooth scrolling navigation\n2. Fixed header with scroll effects\n3. Responsive grid layouts\n4. Modern typography and spacing\n5. Subtle animations and transitions\n6. Mobile-first approach\n7. Semantic HTML structure\n8. Accessible navigation\n9. Performance-optimized CSS\n10. Clean JavaScript for enhanced interactions\n\nThe domain \"anders.scroll.pub\" is simple, memorable, and directly relates to the site owner's identity." } ], "stop_reason": "end_turn", "stop_sequence": null, "usage": { - "input_tokens": 766, + "input_tokens": 775, "cache_creation_input_tokens": 0, "cache_read_input_tokens": 0, - "output_tokens": 2758 + "output_tokens": 2409 } } \ No newline at end of file diff --git a/readme.scroll b/readme.scroll index 6882c9d..02b7273 100644 --- a/readme.scroll +++ b/readme.scroll @@ -1,2 +1,2 @@ # anders.scroll.pub -Website generated by Claude from prompt: Hi! I’m Anders Norén. I’m a freelance designer & developer living in the Swedish mountains. Anders Norén I’ve been a WordPress user since 2007, worked with it full-time since 2015, and been self-employed since 2019. These days, I mostly design and build things for Automattic, although I’m always open to talk about side projects. More I’ve released more than 30 free WordPress that have been downloaded over 4 million times and are used on hundreds of thousands of websites. I also designed and helped build Twenty Twenty, the default theme in WordPress 5.3. Me, my girlfriend Rebecka and our Shiba Inu Taki live in Härjedalen, which is the least populated province in Sweden with 10,000 people. We spend as much time as possible in the woods and mountains, on skis in winter and in hiking boots in summer. Preferably for days at a time, with everything we need on our backs. You can follow along on our adventures on my Instagram. I enjoy musicals, would die without coffee, spend too much time on video games, and watch an unreasonable amount of movies. This site and all of my theme demos are hosted on WordPress.com. I’ve worked with… Absolut Company Automattic Bonnier Magazines Bonniers Konsthall Conan Properties ForumCiv Hedengren Agency H&M Foundation Jung Relations Klarna Rehnberg & Swartz Spendrups Svenska Spel Zeta Latest posts All A summer hike in Vålådalen A summer hike in Vålådalen Dec 18, 2024 Our original hiking plan for this August was a one-week trip to Jotunheimen national park in Norway. With the start date only days away, me and my partner Rebecka decided to heed the weather warnings and change our plans. We’ve been looking forward to visiting Jotunheimen for years, and we didn’t want to do it… Four days in Femundsmarka National Park Jun 27, 2024 A new coat of paint May 12, 2024 Introducing Pulitzer May 7, \ No newline at end of file +Website generated by Claude from prompt: a blogger website with this content 'Hi! I’m Anders Norén. I’m a freelance designer & developer living in the Swedish mountains. Anders Norén I’ve been a WordPress user since 2007, worked with it full-time since 2015, and been self-employed since 2019. These days, I mostly design and build things for Automattic, although I’m always open to talk about side projects. More I’ve released more than 30 free WordPress that have been downloaded over 4 million times and are used on hundreds of thousands of websites. I also designed and helped build Twenty Twenty, the default theme in WordPress 5.3. Me, my girlfriend Rebecka and our Shiba Inu Taki live in Härjedalen, which is the least populated province in Sweden with 10,000 people. We spend as much time as possible in the woods and mountains, on skis in winter and in hiking boots in summer. Preferably for days at a time, with everything we need on our backs. You can follow along on our adventures on my Instagram. I enjoy musicals, would die without coffee, spend too much time on video games, and watch an unreasonable amount of movies. This site and all of my theme demos are hosted on WordPress.com. I’ve worked with… Absolut Company Automattic Bonnier Magazines Bonniers Konsthall Conan Properties ForumCiv Hedengren Agency H&M Foundation Jung Relations Klarna Rehnberg & Swartz Spendrups Svenska Spel Zeta Latest posts All A summer hike in Vålådalen A summer hike in Vålådalen Dec 18, 2024 Our original hiking plan for this August was a one-week trip to Jotunheimen national park in Norway. With the start date only days away, me and my partner Rebecka decided to heed the weather warnings and change our plans. We’ve been looking forward to visiting Jotunheimen for years, and we didn’t want to do it… Four days in Femundsmarka National Park Jun 27, 2024 A new coat of paint May 12, 2024 Introducing Pulitzer May 7,' \ No newline at end of file diff --git a/script.js b/script.js index 6aac673..ac5d35d 100644 --- a/script.js +++ b/script.js @@ -3,42 +3,40 @@ document.addEventListener('DOMContentLoaded', () => { const menuToggle = document.querySelector('.menu-toggle'); const navLinks = document.querySelector('.nav-links'); - if (menuToggle) { - menuToggle.addEventListener('click', () => { - navLinks.classList.toggle('active'); - menuToggle.classList.toggle('active'); - }); - } + menuToggle?.addEventListener('click', () => { + navLinks.classList.toggle('active'); + menuToggle.classList.toggle('active'); + }); - // Smooth scroll for anchor links + // Smooth scroll for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); - const target = document.querySelector(this.getAttribute('href')); - if (target) { - target.scrollIntoView({ - behavior: 'smooth', - block: 'start' - }); - } + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); }); }); - // Intersection Observer for fade-in animations - const observerOptions = { - threshold: 0.1, - rootMargin: '0px 0px -50px 0px' - }; + // Header scroll effect + let lastScroll = 0; + const header = document.querySelector('.site-header'); - const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - entry.target.classList.add('visible'); - } - }); - }, observerOptions); + window.addEventListener('scroll', () => { + const currentScroll = window.pageYOffset; - document.querySelectorAll('section').forEach(section => { - observer.observe(section); + if (currentScroll <= 0) { + header.classList.remove('scroll-up'); + return; + } + + if (currentScroll > lastScroll && !header.classList.contains('scroll-down')) { + header.classList.remove('scroll-up'); + header.classList.add('scroll-down'); + } else if (currentScroll < lastScroll && header.classList.contains('scroll-down')) { + header.classList.remove('scroll-down'); + header.classList.add('scroll-up'); + } + lastScroll = currentScroll; }); }); diff --git a/style.css b/style.css index 1f87951..8bf75a6 100644 --- a/style.css +++ b/style.css @@ -1,11 +1,11 @@ :root { --color-primary: #2d3436; - --color-secondary: #0984e3; - --color-bg: #ffffff; - --color-text: #2d3436; - --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + --color-secondary: #636e72; + --color-accent: #0984e3; + --color-background: #ffffff; + --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --container-width: 1200px; - --spacing: 2rem; + --spacing-unit: 2rem; } * { @@ -21,15 +21,15 @@ html { body { font-family: var(--font-sans); line-height: 1.6; - color: var(--color-text); - background: var(--color-bg); + color: var(--color-primary); + background: var(--color-background); } .container { width: 90%; max-width: var(--container-width); margin: 0 auto; - padding: 0 var(--spacing); + padding: 0 var(--spacing-unit); } /* Header */ @@ -38,92 +38,71 @@ body { top: 0; width: 100%; background: rgba(255, 255, 255, 0.98); - backdrop-filter: blur(10px); - z-index: 100; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); + z-index: 100; } .main-nav { display: flex; justify-content: space-between; align-items: center; - padding: 1rem var(--spacing); -} - -.logo { - font-size: 1.5rem; - font-weight: 700; - text-decoration: none; - color: var(--color-primary); + height: 80px; + padding: 0 var(--spacing-unit); } .nav-links { display: flex; - list-style: none; gap: 2rem; + list-style: none; } .nav-links a { + color: var(--color-primary); text-decoration: none; - color: var(--color-text); font-weight: 500; transition: color 0.3s ease; } .nav-links a:hover { - color: var(--color-secondary); + color: var(--color-accent); } -/* Hero */ +/* Hero Section */ .hero { height: 100vh; display: flex; align-items: center; - background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + background: linear-gradient(45deg, #f6f6f6, #ffffff); } .hero h1 { font-size: 4rem; - margin-bottom: 1rem; line-height: 1.2; + margin-bottom: 1rem; } .lead { font-size: 1.5rem; - color: #636e72; + color: var(--color-secondary); } /* Sections */ section { - padding: var(--spacing) 0; -} - -.about-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 4rem; - padding: 4rem 0; -} - -.client-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 2rem; - list-style: none; - padding: 2rem 0; + padding: var(--spacing-unit) 0; } +/* Post Grid */ .post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; - padding: 2rem 0; + margin-top: 2rem; } .post-card { padding: 2rem; - background: #f5f6fa; - border-radius: 1rem; + background: #f8f9fa; + border-radius: 8px; transition: transform 0.3s ease; } @@ -131,33 +110,12 @@ section { transform: translateY(-5px); } -/* Footer */ -.site-footer { - background: var(--color-primary); - color: white; - padding: 4rem 0; - margin-top: 4rem; -} - -.footer-content { - text-align: center; -} - -.footer-content a { - color: white; -} - -/* Responsive */ +/* Responsive Design */ @media (max-width: 768px) { .hero h1 { font-size: 2.5rem; } - .about-grid { - grid-template-columns: 1fr; - gap: 2rem; - } - .nav-links { display: none; } @@ -166,20 +124,3 @@ section { display: block; } } - -/* Animations */ -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.hero h1, -.hero p { - animation: fadeIn 1s ease-out forwards; -}

commit 256b4cb62962d4b43cbec67af22ca5e66511ff46 Author: root <root@hub.scroll.pub> Date: 2025-01-03 03:57:53 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..0ce7154 --- /dev/null +++ b/body.html @@ -0,0 +1,82 @@ +<header class="site-header"> + <nav class="main-nav"> + <a href="#" class="logo">AN</a> + <button class="menu-toggle" aria-label="Toggle menu"> + <span></span> + </button> + <ul class="nav-links"> + <li><a href="#about">About</a></li> + <li><a href="#work">Work</a></li> + <li><a href="#blog">Blog</a></li> + </ul> + </nav> +</header> + +<main> + <section class="hero"> + <div class="container"> + <h1>Hi! I'm Anders Norén</h1> + <p class="lead">A freelance designer & developer living in the Swedish mountains.</p> + </div> + </section> + + <section id="about" class="about"> + <div class="container"> + <div class="about-grid"> + <div class="about-content"> + <h2>About Me</h2> + <p>I've been a WordPress user since 2007, worked with it full-time since 2015, and been self-employed since 2019. These days, I mostly design and build things for Automattic, although I'm always open to talk about side projects.</p> + <p>I've released more than 30 free WordPress themes that have been downloaded over 4 million times and are used on hundreds of thousands of websites. I also designed and helped build Twenty Twenty, the default theme in WordPress 5.3.</p> + </div> + <div class="about-personal"> + <h3>Life in the Mountains</h3> + <p>Me, my girlfriend Rebecka and our Shiba Inu Taki live in Härjedalen, Sweden's least populated province. We spend our time exploring the wilderness - skiing in winter and hiking in summer.</p> + </div> + </div> + </div> + </section> + + <section id="work" class="work"> + <div class="container"> + <h2>Selected Clients</h2> + <ul class="client-grid"> + <li>Automattic</li> + <li>Absolut Company</li> + <li>H&M Foundation</li> + <li>Klarna</li> + <li>Svenska Spel</li> + <li>Bonnier Magazines</li> + </ul> + </div> + </section> + + <section id="blog" class="blog"> + <div class="container"> + <h2>Latest Posts</h2> + <div class="post-grid"> + <article class="post-card"> + <h3>A summer hike in Vålådalen</h3> + <time>December 18, 2024</time> + <p>Our original hiking plan for this August was a one-week trip to Jotunheimen national park in Norway...</p> + </article> + <article class="post-card"> + <h3>Four days in Femundsmarka National Park</h3> + <time>June 27, 2024</time> + </article> + <article class="post-card"> + <h3>Introducing Pulitzer</h3> + <time>May 7, 2024</time> + </article> + </div> + </div> + </section> +</main> + +<footer class="site-footer"> + <div class="container"> + <div class="footer-content"> + <p>Follow my adventures on <a href="https://instagram.com" rel="noopener">Instagram</a></p> + <p>This site is hosted on WordPress.com</p> + </div> + </div> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..dbc6291 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://anders.scroll.pub +metaTags +editButton /edit.html +title Anders Norén - Designer & Developer +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..973a612 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01Y9psauqdaWhR38SnKHxRQ5", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll create a personal portfolio website for Anders Norén. For the domain, I suggest:\n\n---domain---\nanders.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://anders.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Anders Norén - Designer & Developer\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header class=\"site-header\">\n <nav class=\"main-nav\">\n <a href=\"#\" class=\"logo\">AN</a>\n <button class=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#work\">Work</a></li>\n <li><a href=\"#blog\">Blog</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"container\">\n <h1>Hi! I'm Anders Norén</h1>\n <p class=\"lead\">A freelance designer & developer living in the Swedish mountains.</p>\n </div>\n </section>\n\n <section id=\"about\" class=\"about\">\n <div class=\"container\">\n <div class=\"about-grid\">\n <div class=\"about-content\">\n <h2>About Me</h2>\n <p>I've been a WordPress user since 2007, worked with it full-time since 2015, and been self-employed since 2019. These days, I mostly design and build things for Automattic, although I'm always open to talk about side projects.</p>\n <p>I've released more than 30 free WordPress themes that have been downloaded over 4 million times and are used on hundreds of thousands of websites. I also designed and helped build Twenty Twenty, the default theme in WordPress 5.3.</p>\n </div>\n <div class=\"about-personal\">\n <h3>Life in the Mountains</h3>\n <p>Me, my girlfriend Rebecka and our Shiba Inu Taki live in Härjedalen, Sweden's least populated province. We spend our time exploring the wilderness - skiing in winter and hiking in summer.</p>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"work\" class=\"work\">\n <div class=\"container\">\n <h2>Selected Clients</h2>\n <ul class=\"client-grid\">\n <li>Automattic</li>\n <li>Absolut Company</li>\n <li>H&M Foundation</li>\n <li>Klarna</li>\n <li>Svenska Spel</li>\n <li>Bonnier Magazines</li>\n </ul>\n </div>\n </section>\n\n <section id=\"blog\" class=\"blog\">\n <div class=\"container\">\n <h2>Latest Posts</h2>\n <div class=\"post-grid\">\n <article class=\"post-card\">\n <h3>A summer hike in Vålådalen</h3>\n <time>December 18, 2024</time>\n <p>Our original hiking plan for this August was a one-week trip to Jotunheimen national park in Norway...</p>\n </article>\n <article class=\"post-card\">\n <h3>Four days in Femundsmarka National Park</h3>\n <time>June 27, 2024</time>\n </article>\n <article class=\"post-card\">\n <h3>Introducing Pulitzer</h3>\n <time>May 7, 2024</time>\n </article>\n </div>\n </div>\n </section>\n</main>\n\n<footer class=\"site-footer\">\n <div class=\"container\">\n <div class=\"footer-content\">\n <p>Follow my adventures on <a href=\"https://instagram.com\" rel=\"noopener\">Instagram</a></p>\n <p>This site is hosted on WordPress.com</p>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --color-primary: #2d3436;\n --color-secondary: #0984e3;\n --color-bg: #ffffff;\n --color-text: #2d3436;\n --font-sans: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n --container-width: 1200px;\n --spacing: 2rem;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: var(--font-sans);\n line-height: 1.6;\n color: var(--color-text);\n background: var(--color-bg);\n}\n\n.container {\n width: 90%;\n max-width: var(--container-width);\n margin: 0 auto;\n padding: 0 var(--spacing);\n}\n\n/* Header */\n.site-header {\n position: fixed;\n top: 0;\n width: 100%;\n background: rgba(255, 255, 255, 0.98);\n backdrop-filter: blur(10px);\n z-index: 100;\n box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);\n}\n\n.main-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem var(--spacing);\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: 700;\n text-decoration: none;\n color: var(--color-primary);\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n gap: 2rem;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--color-text);\n font-weight: 500;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--color-secondary);\n}\n\n/* Hero */\n.hero {\n height: 100vh;\n display: flex;\n align-items: center;\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n}\n\n.hero h1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n line-height: 1.2;\n}\n\n.lead {\n font-size: 1.5rem;\n color: #636e72;\n}\n\n/* Sections */\nsection {\n padding: var(--spacing) 0;\n}\n\n.about-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem;\n padding: 4rem 0;\n}\n\n.client-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n list-style: none;\n padding: 2rem 0;\n}\n\n.post-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 2rem 0;\n}\n\n.post-card {\n padding: 2rem;\n background: #f5f6fa;\n border-radius: 1rem;\n transition: transform 0.3s ease;\n}\n\n.post-card:hover {\n transform: translateY(-5px);\n}\n\n/* Footer */\n.site-footer {\n background: var(--color-primary);\n color: white;\n padding: 4rem 0;\n margin-top: 4rem;\n}\n\n.footer-content {\n text-align: center;\n}\n\n.footer-content a {\n color: white;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .hero h1 {\n font-size: 2.5rem;\n }\n \n .about-grid {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n \n .nav-links {\n display: none;\n }\n \n .menu-toggle {\n display: block;\n }\n}\n\n/* Animations */\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.hero h1,\n.hero p {\n animation: fadeIn 1s ease-out forwards;\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n \n if (menuToggle) {\n menuToggle.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n menuToggle.classList.toggle('active');\n });\n }\n\n // Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n\n // Intersection Observer for fade-in animations\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('section').forEach(section => {\n observer.observe(section);\n });\n});\n\n---end---\n\nThis implementation creates a modern, clean, and responsive personal portfolio website for Anders Norén. Key features include:\n\n1. Smooth scrolling navigation\n2. Responsive design with mobile menu\n3. Beautiful gradient backgrounds and subtle animations\n4. Card-based layout for blog posts\n5. Grid-based client showcase\n6. Accessibility features\n7. Modern CSS with variables\n8. Performant animations using IntersectionObserver\n9. Clean semantic HTML structure\n10. Subtle hover effects and transitions\n\nThe design emphasizes typography and whitespace while maintaining a professional appearance that reflects Anders' work as a designer and developer. The color scheme is minimal but effective, with careful attention to contrast and readability." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 766, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2758 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..6882c9d --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# anders.scroll.pub +Website generated by Claude from prompt: Hi! I’m Anders Norén. I’m a freelance designer & developer living in the Swedish mountains. Anders Norén I’ve been a WordPress user since 2007, worked with it full-time since 2015, and been self-employed since 2019. These days, I mostly design and build things for Automattic, although I’m always open to talk about side projects. More I’ve released more than 30 free WordPress that have been downloaded over 4 million times and are used on hundreds of thousands of websites. I also designed and helped build Twenty Twenty, the default theme in WordPress 5.3. Me, my girlfriend Rebecka and our Shiba Inu Taki live in Härjedalen, which is the least populated province in Sweden with 10,000 people. We spend as much time as possible in the woods and mountains, on skis in winter and in hiking boots in summer. Preferably for days at a time, with everything we need on our backs. You can follow along on our adventures on my Instagram. I enjoy musicals, would die without coffee, spend too much time on video games, and watch an unreasonable amount of movies. This site and all of my theme demos are hosted on WordPress.com. I’ve worked with… Absolut Company Automattic Bonnier Magazines Bonniers Konsthall Conan Properties ForumCiv Hedengren Agency H&M Foundation Jung Relations Klarna Rehnberg & Swartz Spendrups Svenska Spel Zeta Latest posts All A summer hike in Vålådalen A summer hike in Vålådalen Dec 18, 2024 Our original hiking plan for this August was a one-week trip to Jotunheimen national park in Norway. With the start date only days away, me and my partner Rebecka decided to heed the weather warnings and change our plans. We’ve been looking forward to visiting Jotunheimen for years, and we didn’t want to do it… Four days in Femundsmarka National Park Jun 27, 2024 A new coat of paint May 12, 2024 Introducing Pulitzer May 7, \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..6aac673 --- /dev/null +++ b/script.js @@ -0,0 +1,44 @@ +document.addEventListener('DOMContentLoaded', () => { + // Mobile menu toggle + const menuToggle = document.querySelector('.menu-toggle'); + const navLinks = document.querySelector('.nav-links'); + + if (menuToggle) { + menuToggle.addEventListener('click', () => { + navLinks.classList.toggle('active'); + menuToggle.classList.toggle('active'); + }); + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); + }); + + // Intersection Observer for fade-in animations + const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + } + }); + }, observerOptions); + + document.querySelectorAll('section').forEach(section => { + observer.observe(section); + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..1f87951 --- /dev/null +++ b/style.css @@ -0,0 +1,185 @@ +:root { + --color-primary: #2d3436; + --color-secondary: #0984e3; + --color-bg: #ffffff; + --color-text: #2d3436; + --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + --container-width: 1200px; + --spacing: 2rem; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: var(--font-sans); + line-height: 1.6; + color: var(--color-text); + background: var(--color-bg); +} + +.container { + width: 90%; + max-width: var(--container-width); + margin: 0 auto; + padding: 0 var(--spacing); +} + +/* Header */ +.site-header { + position: fixed; + top: 0; + width: 100%; + background: rgba(255, 255, 255, 0.98); + backdrop-filter: blur(10px); + z-index: 100; + box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); +} + +.main-nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem var(--spacing); +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + text-decoration: none; + color: var(--color-primary); +} + +.nav-links { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-links a { + text-decoration: none; + color: var(--color-text); + font-weight: 500; + transition: color 0.3s ease; +} + +.nav-links a:hover { + color: var(--color-secondary); +} + +/* Hero */ +.hero { + height: 100vh; + display: flex; + align-items: center; + background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); +} + +.hero h1 { + font-size: 4rem; + margin-bottom: 1rem; + line-height: 1.2; +} + +.lead { + font-size: 1.5rem; + color: #636e72; +} + +/* Sections */ +section { + padding: var(--spacing) 0; +} + +.about-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + padding: 4rem 0; +} + +.client-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; + list-style: none; + padding: 2rem 0; +} + +.post-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + padding: 2rem 0; +} + +.post-card { + padding: 2rem; + background: #f5f6fa; + border-radius: 1rem; + transition: transform 0.3s ease; +} + +.post-card:hover { + transform: translateY(-5px); +} + +/* Footer */ +.site-footer { + background: var(--color-primary); + color: white; + padding: 4rem 0; + margin-top: 4rem; +} + +.footer-content { + text-align: center; +} + +.footer-content a { + color: white; +} + +/* Responsive */ +@media (max-width: 768px) { + .hero h1 { + font-size: 2.5rem; + } + + .about-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .nav-links { + display: none; + } + + .menu-toggle { + display: block; + } +} + +/* Animations */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.hero h1, +.hero p { + animation: fadeIn 1s ease-out forwards; +}