commit cdd6d363d238b57082c95dc160c7659e4429f829
Author: root <root@hub.scroll.pub>
Date: 2024-12-30 09:32:17 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..d0a138f
--- /dev/null
+++ b/body.html
@@ -0,0 +1,54 @@
+<header>
+ <nav>
+ <div class="logo">PC</div>
+ <div class="nav-links">
+ <a href="#profile">Profile</a>
+ <a href="#blog">Blog</a>
+ <button class="theme-toggle" aria-label="Toggle dark mode">🌓</button>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section id="profile" class="profile-section">
+ <div class="profile-card">
+ <div class="avatar-container">
+ <div class="avatar"></div>
+ </div>
+ <h1>Paul Chen</h1>
+ <p class="title">Web Developer & Designer</p>
+ <div class="details">
+ <p><span>🌍 Location:</span> San Francisco, CA</p>
+ <p><span>⚡ Gender:</span> Male</p>
+ <p><span>💻 Skills:</span> HTML, CSS, JavaScript, UI/UX</p>
+ <p><span>🎯 Hobbies:</span> Photography, Hiking, Reading</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="blog" class="blog-section">
+ <h2>Latest Posts</h2>
+ <div class="blog-grid">
+ <article class="blog-card">
+ <div class="blog-image"></div>
+ <div class="blog-content">
+ <h3>Modern CSS Techniques</h3>
+ <p>Exploring the latest CSS features and how they're changing web development...</p>
+ <time>June 15, 2023</time>
+ </div>
+ </article>
+ <article class="blog-card">
+ <div class="blog-image"></div>
+ <div class="blog-content">
+ <h3>JavaScript Best Practices</h3>
+ <p>Essential patterns and practices for writing maintainable JavaScript code...</p>
+ <time>June 10, 2023</time>
+ </div>
+ </article>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Built with passion by Paul Chen</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..923ec38
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://pauldev.scroll.pub
+metaTags
+ title "Paul Chen - Web Developer & Designer"
+ description "Personal website and blog of Paul Chen, featuring web development articles and creative projects"
+ author "Paul Chen"
+editButton /edit.html
+title Paul Chen - Web Developer & Designer
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..4a5affb
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01CSTUHXPmaxud5oNzYk4x29",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a personal website with a profile and blog section:\n\n---domain---\npauldev.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://pauldev.scroll.pub\nmetaTags\n title \"Paul Chen - Web Developer & Designer\"\n description \"Personal website and blog of Paul Chen, featuring web development articles and creative projects\"\n author \"Paul Chen\"\neditButton /edit.html\ntitle Paul Chen - Web Developer & Designer\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">PC</div>\n <div class=\"nav-links\">\n <a href=\"#profile\">Profile</a>\n <a href=\"#blog\">Blog</a>\n <button class=\"theme-toggle\" aria-label=\"Toggle dark mode\">🌓</button>\n </div>\n </nav>\n</header>\n\n<main>\n <section id=\"profile\" class=\"profile-section\">\n <div class=\"profile-card\">\n <div class=\"avatar-container\">\n <div class=\"avatar\"></div>\n </div>\n <h1>Paul Chen</h1>\n <p class=\"title\">Web Developer & Designer</p>\n <div class=\"details\">\n <p><span>🌍 Location:</span> San Francisco, CA</p>\n <p><span>⚡ Gender:</span> Male</p>\n <p><span>💻 Skills:</span> HTML, CSS, JavaScript, UI/UX</p>\n <p><span>🎯 Hobbies:</span> Photography, Hiking, Reading</p>\n </div>\n </div>\n </section>\n\n <section id=\"blog\" class=\"blog-section\">\n <h2>Latest Posts</h2>\n <div class=\"blog-grid\">\n <article class=\"blog-card\">\n <div class=\"blog-image\"></div>\n <div class=\"blog-content\">\n <h3>Modern CSS Techniques</h3>\n <p>Exploring the latest CSS features and how they're changing web development...</p>\n <time>June 15, 2023</time>\n </div>\n </article>\n <article class=\"blog-card\">\n <div class=\"blog-image\"></div>\n <div class=\"blog-content\">\n <h3>JavaScript Best Practices</h3>\n <p>Essential patterns and practices for writing maintainable JavaScript code...</p>\n <time>June 10, 2023</time>\n </div>\n </article>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Built with passion by Paul Chen</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2563eb;\n --bg: #ffffff;\n --text: #1f2937;\n --card-bg: #f8fafc;\n --shadow: rgba(0,0,0,0.1);\n}\n\n[data-theme=\"dark\"] {\n --primary: #60a5fa;\n --bg: #0f172a;\n --text: #f1f5f9;\n --card-bg: #1e293b;\n --shadow: rgba(0,0,0,0.3);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background: var(--bg);\n color: var(--text);\n transition: background 0.3s, color 0.3s;\n}\n\nheader {\n position: fixed;\n width: 100%;\n background: var(--bg);\n box-shadow: 0 2px 10px var(--shadow);\n z-index: 100;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary);\n}\n\n.nav-links a {\n color: var(--text);\n text-decoration: none;\n margin-left: 2rem;\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n.theme-toggle {\n background: none;\n border: none;\n font-size: 1.2rem;\n cursor: pointer;\n margin-left: 2rem;\n padding: 0.5rem;\n}\n\nmain {\n padding-top: 4rem;\n}\n\n.profile-section {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.profile-card {\n background: var(--card-bg);\n border-radius: 1rem;\n padding: 2rem;\n box-shadow: 0 4px 20px var(--shadow);\n max-width: 600px;\n width: 100%;\n text-align: center;\n}\n\n.avatar-container {\n width: 150px;\n height: 150px;\n margin: 0 auto 2rem;\n}\n\n.avatar {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: var(--primary);\n background-image: linear-gradient(45deg, var(--primary), #818cf8);\n}\n\n.profile-card h1 {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n}\n\n.title {\n color: var(--primary);\n margin-bottom: 2rem;\n}\n\n.details {\n text-align: left;\n}\n\n.details p {\n margin: 1rem 0;\n}\n\n.details span {\n font-weight: bold;\n margin-right: 0.5rem;\n}\n\n.blog-section {\n padding: 4rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.blog-section h2 {\n text-align: center;\n margin-bottom: 3rem;\n}\n\n.blog-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.blog-card {\n background: var(--card-bg);\n border-radius: 1rem;\n overflow: hidden;\n box-shadow: 0 4px 20px var(--shadow);\n transition: transform 0.3s;\n}\n\n.blog-card:hover {\n transform: translateY(-5px);\n}\n\n.blog-image {\n height: 200px;\n background: var(--primary);\n background-image: linear-gradient(45deg, var(--primary), #818cf8);\n}\n\n.blog-content {\n padding: 1.5rem;\n}\n\n.blog-content h3 {\n margin-bottom: 1rem;\n}\n\n.blog-content time {\n display: block;\n margin-top: 1rem;\n color: var(--primary);\n font-size: 0.9rem;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--card-bg);\n}\n\n@media (max-width: 768px) {\n .nav-links a {\n margin-left: 1rem;\n }\n \n .profile-card {\n margin: 1rem;\n }\n \n .blog-section {\n padding: 2rem 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Theme toggling\n const themeToggle = document.querySelector('.theme-toggle');\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');\n \n function setTheme(isDark) {\n document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');\n themeToggle.textContent = isDark ? '☀️' : '🌒';\n }\n \n // Set initial theme\n setTheme(prefersDark.matches);\n \n themeToggle.addEventListener('click', () => {\n const isDark = document.documentElement.getAttribute('data-theme') === 'dark';\n setTheme(!isDark);\n });\n \n // Smooth scrolling 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\n---end---\n\nThis website features:\n\n1. Clean, modern design with smooth animations\n2. Dark/light theme toggle with system preference detection\n3. Responsive layout that works on all devices\n4. Profile section with avatar and personal details\n5. Blog section with card-based layout\n6. Smooth scrolling navigation\n7. Semantic HTML5 structure\n8. Accessible navigation and controls\n9. CSS variables for easy theming\n10. Gradient effects and subtle animations\n11. Professional typography and spacing\n12. SEO-friendly meta tags\n\nThe design is minimal yet sophisticated, with attention to detail in animations, color transitions, and layout. The CSS uses modern features like CSS Grid, Flexbox, and CSS Variables, while the JavaScript is kept minimal and functional."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 299,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2434
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..39c3c63
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# pauldev.scroll.pub
+Website generated by Claude from prompt: create a personal website which have profile page(with avatar, gender, hobit and so on), a blog area. you should design ui professionally
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ee3714f
--- /dev/null
+++ b/script.js
@@ -0,0 +1,28 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Theme toggling
+ const themeToggle = document.querySelector('.theme-toggle');
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+ function setTheme(isDark) {
+ document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+ themeToggle.textContent = isDark ? '☀️' : '🌒';
+ }
+
+ // Set initial theme
+ setTheme(prefersDark.matches);
+
+ themeToggle.addEventListener('click', () => {
+ const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+ setTheme(!isDark);
+ });
+
+ // Smooth scrolling for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..0604982
--- /dev/null
+++ b/style.css
@@ -0,0 +1,200 @@
+:root {
+ --primary: #2563eb;
+ --bg: #ffffff;
+ --text: #1f2937;
+ --card-bg: #f8fafc;
+ --shadow: rgba(0,0,0,0.1);
+}
+
+[data-theme="dark"] {
+ --primary: #60a5fa;
+ --bg: #0f172a;
+ --text: #f1f5f9;
+ --card-bg: #1e293b;
+ --shadow: rgba(0,0,0,0.3);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: var(--bg);
+ color: var(--text);
+ transition: background 0.3s, color 0.3s;
+}
+
+header {
+ position: fixed;
+ width: 100%;
+ background: var(--bg);
+ box-shadow: 0 2px 10px var(--shadow);
+ z-index: 100;
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary);
+}
+
+.nav-links a {
+ color: var(--text);
+ text-decoration: none;
+ margin-left: 2rem;
+ transition: color 0.3s;
+}
+
+.nav-links a:hover {
+ color: var(--primary);
+}
+
+.theme-toggle {
+ background: none;
+ border: none;
+ font-size: 1.2rem;
+ cursor: pointer;
+ margin-left: 2rem;
+ padding: 0.5rem;
+}
+
+main {
+ padding-top: 4rem;
+}
+
+.profile-section {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+}
+
+.profile-card {
+ background: var(--card-bg);
+ border-radius: 1rem;
+ padding: 2rem;
+ box-shadow: 0 4px 20px var(--shadow);
+ max-width: 600px;
+ width: 100%;
+ text-align: center;
+}
+
+.avatar-container {
+ width: 150px;
+ height: 150px;
+ margin: 0 auto 2rem;
+}
+
+.avatar {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background: var(--primary);
+ background-image: linear-gradient(45deg, var(--primary), #818cf8);
+}
+
+.profile-card h1 {
+ font-size: 2rem;
+ margin-bottom: 0.5rem;
+}
+
+.title {
+ color: var(--primary);
+ margin-bottom: 2rem;
+}
+
+.details {
+ text-align: left;
+}
+
+.details p {
+ margin: 1rem 0;
+}
+
+.details span {
+ font-weight: bold;
+ margin-right: 0.5rem;
+}
+
+.blog-section {
+ padding: 4rem 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.blog-section h2 {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+.blog-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+}
+
+.blog-card {
+ background: var(--card-bg);
+ border-radius: 1rem;
+ overflow: hidden;
+ box-shadow: 0 4px 20px var(--shadow);
+ transition: transform 0.3s;
+}
+
+.blog-card:hover {
+ transform: translateY(-5px);
+}
+
+.blog-image {
+ height: 200px;
+ background: var(--primary);
+ background-image: linear-gradient(45deg, var(--primary), #818cf8);
+}
+
+.blog-content {
+ padding: 1.5rem;
+}
+
+.blog-content h3 {
+ margin-bottom: 1rem;
+}
+
+.blog-content time {
+ display: block;
+ margin-top: 1rem;
+ color: var(--primary);
+ font-size: 0.9rem;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--card-bg);
+}
+
+@media (max-width: 768px) {
+ .nav-links a {
+ margin-left: 1rem;
+ }
+
+ .profile-card {
+ margin: 1rem;
+ }
+
+ .blog-section {
+ padding: 2rem 1rem;
+ }
+}