commit 494c6032d0eebb217a178f8a433e11a8c3e72036
Author: root <root@hub.scroll.pub>
Date: 2025-01-13 06:53:50 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..962ab16
--- /dev/null
+++ b/body.html
@@ -0,0 +1,90 @@
+<header class="header">
+ <nav>
+ <ul>
+ <li><a href="#about">About</a></li>
+ <li><a href="#experience">Experience</a></li>
+ <li><a href="#skills">Skills</a></li>
+ <li><a href="#education">Education</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="hero" class="hero">
+ <div class="container">
+ <h1 class="animate-in">John Doe</h1>
+ <h2>Full Stack Developer</h2>
+ <div class="subtitle">Turning ideas into reality through code</div>
+ </div>
+ </section>
+
+ <section id="about" class="about">
+ <div class="container">
+ <h2>About Me</h2>
+ <p>Passionate developer with 5+ years of experience building web applications and digital experiences that delight users and solve real business problems.</p>
+ </div>
+ </section>
+
+ <section id="experience" class="experience">
+ <div class="container">
+ <h2>Work Experience</h2>
+ <div class="timeline">
+ <div class="timeline-item">
+ <div class="year">2020-Present</div>
+ <div class="content">
+ <h3>Senior Developer</h3>
+ <h4>Tech Company Inc.</h4>
+ <p>Led development of enterprise applications using modern web technologies.</p>
+ </div>
+ </div>
+ <div class="timeline-item">
+ <div class="year">2018-2020</div>
+ <div class="content">
+ <h3>Web Developer</h3>
+ <h4>Digital Agency Ltd.</h4>
+ <p>Developed responsive websites and e-commerce solutions.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="skills" class="skills">
+ <div class="container">
+ <h2>Skills</h2>
+ <div class="skill-grid">
+ <div class="skill-item">HTML5/CSS3</div>
+ <div class="skill-item">JavaScript</div>
+ <div class="skill-item">Node.js</div>
+ <div class="skill-item">React</div>
+ <div class="skill-item">Python</div>
+ <div class="skill-item">SQL</div>
+ </div>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <div class="container">
+ <h2>Get In Touch</h2>
+ <form id="contactForm">
+ <div class="form-group">
+ <input type="text" id="name" placeholder="Your Name" required>
+ </div>
+ <div class="form-group">
+ <input type="email" id="email" placeholder="Your Email" required>
+ </div>
+ <div class="form-group">
+ <textarea id="message" placeholder="Your Message" required></textarea>
+ </div>
+ <button type="submit">Send Message</button>
+ </form>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="container">
+ <p>Made with passion by John Doe</p>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..058bb13
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://my-resume.scroll.pub
+metaTags
+editButton /edit.html
+title Professional Resume | Portfolio
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..8c54d48
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_012wcRb1LmJABPXoWJnei3cY",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a beautiful personal resume website.\n\n---domain---\nmy-resume.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://my-resume.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Professional Resume | Portfolio\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header class=\"header\">\n <nav>\n <ul>\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#experience\">Experience</a></li>\n <li><a href=\"#skills\">Skills</a></li>\n <li><a href=\"#education\">Education</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"hero\" class=\"hero\">\n <div class=\"container\">\n <h1 class=\"animate-in\">John Doe</h1>\n <h2>Full Stack Developer</h2>\n <div class=\"subtitle\">Turning ideas into reality through code</div>\n </div>\n </section>\n\n <section id=\"about\" class=\"about\">\n <div class=\"container\">\n <h2>About Me</h2>\n <p>Passionate developer with 5+ years of experience building web applications and digital experiences that delight users and solve real business problems.</p>\n </div>\n </section>\n\n <section id=\"experience\" class=\"experience\">\n <div class=\"container\">\n <h2>Work Experience</h2>\n <div class=\"timeline\">\n <div class=\"timeline-item\">\n <div class=\"year\">2020-Present</div>\n <div class=\"content\">\n <h3>Senior Developer</h3>\n <h4>Tech Company Inc.</h4>\n <p>Led development of enterprise applications using modern web technologies.</p>\n </div>\n </div>\n <div class=\"timeline-item\">\n <div class=\"year\">2018-2020</div>\n <div class=\"content\">\n <h3>Web Developer</h3>\n <h4>Digital Agency Ltd.</h4>\n <p>Developed responsive websites and e-commerce solutions.</p>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"skills\" class=\"skills\">\n <div class=\"container\">\n <h2>Skills</h2>\n <div class=\"skill-grid\">\n <div class=\"skill-item\">HTML5/CSS3</div>\n <div class=\"skill-item\">JavaScript</div>\n <div class=\"skill-item\">Node.js</div>\n <div class=\"skill-item\">React</div>\n <div class=\"skill-item\">Python</div>\n <div class=\"skill-item\">SQL</div>\n </div>\n </div>\n </section>\n\n <section id=\"contact\" class=\"contact\">\n <div class=\"container\">\n <h2>Get In Touch</h2>\n <form id=\"contactForm\">\n <div class=\"form-group\">\n <input type=\"text\" id=\"name\" placeholder=\"Your Name\" required>\n </div>\n <div class=\"form-group\">\n <input type=\"email\" id=\"email\" placeholder=\"Your Email\" required>\n </div>\n <div class=\"form-group\">\n <textarea id=\"message\" placeholder=\"Your Message\" required></textarea>\n </div>\n <button type=\"submit\">Send Message</button>\n </form>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"container\">\n <p>Made with passion by John Doe</p>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2d3436;\n --accent-color: #0984e3;\n --text-color: #2d3436;\n --light-bg: #f5f6fa;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n}\n\n/* Header */\n.header {\n position: fixed;\n top: 0;\n width: 100%;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n z-index: 1000;\n box-shadow: 0 2px 20px rgba(0,0,0,0.1);\n}\n\nnav ul {\n display: flex;\n justify-content: center;\n list-style: none;\n padding: 20px 0;\n}\n\nnav ul li {\n margin: 0 20px;\n}\n\nnav ul li a {\n text-decoration: none;\n color: var(--text-color);\n font-weight: 500;\n transition: var(--transition);\n}\n\nnav ul li a:hover {\n color: var(--accent-color);\n}\n\n/* Hero Section */\n.hero {\n height: 100vh;\n display: flex;\n align-items: center;\n background: linear-gradient(135deg, #fff 0%, var(--light-bg) 100%);\n text-align: center;\n}\n\n.hero h1 {\n font-size: 4rem;\n margin-bottom: 20px;\n opacity: 0;\n transform: translateY(20px);\n animation: fadeInUp 0.8s forwards;\n}\n\n.hero h2 {\n font-size: 2rem;\n color: var(--accent-color);\n margin-bottom: 20px;\n}\n\n.subtitle {\n font-size: 1.2rem;\n color: #666;\n}\n\n/* Sections */\nsection {\n padding: 100px 0;\n}\n\nsection h2 {\n text-align: center;\n margin-bottom: 50px;\n font-size: 2.5rem;\n}\n\n/* Timeline */\n.timeline {\n position: relative;\n max-width: 800px;\n margin: 0 auto;\n}\n\n.timeline::before {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 2px;\n height: 100%;\n background: var(--accent-color);\n}\n\n.timeline-item {\n display: flex;\n justify-content: space-between;\n margin-bottom: 50px;\n}\n\n.timeline-item:nth-child(odd) .content {\n margin-left: auto;\n}\n\n.year {\n min-width: 150px;\n padding: 10px;\n background: var(--accent-color);\n color: white;\n border-radius: 5px;\n text-align: center;\n}\n\n.content {\n width: 45%;\n padding: 20px;\n background: white;\n border-radius: 5px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n}\n\n/* Skills */\n.skill-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 20px;\n margin-top: 40px;\n}\n\n.skill-item {\n background: white;\n padding: 20px;\n border-radius: 5px;\n text-align: center;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.skill-item:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 25px rgba(0,0,0,0.2);\n}\n\n/* Contact Form */\n.form-group {\n margin-bottom: 20px;\n}\n\ninput, textarea {\n width: 100%;\n padding: 15px;\n border: 2px solid #eee;\n border-radius: 5px;\n font-size: 1rem;\n transition: var(--transition);\n}\n\ninput:focus, textarea:focus {\n outline: none;\n border-color: var(--accent-color);\n}\n\ntextarea {\n height: 150px;\n resize: vertical;\n}\n\nbutton {\n background: var(--accent-color);\n color: white;\n padding: 15px 30px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 1rem;\n transition: var(--transition);\n}\n\nbutton:hover {\n background: #0773c5;\n transform: translateY(-2px);\n}\n\n/* Animations */\n@keyframes fadeInUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Mobile Responsive */\n@media (max-width: 768px) {\n nav ul {\n flex-direction: column;\n align-items: center;\n }\n \n nav ul li {\n margin: 10px 0;\n }\n \n .hero h1 {\n font-size: 2.5rem;\n }\n \n .timeline::before {\n left: 0;\n }\n \n .timeline-item {\n flex-direction: column;\n }\n \n .year, .content {\n width: 100%;\n margin: 10px 0;\n }\n \n .skill-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\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 // Form submission handling\n const contactForm = document.getElementById('contactForm');\n if (contactForm) {\n contactForm.addEventListener('submit', function(e) {\n e.preventDefault();\n \n // Get form values\n const name = document.getElementById('name').value;\n const email = document.getElementById('email').value;\n const message = document.getElementById('message').value;\n \n // Simple form validation\n if (!name || !email || !message) {\n alert('Please fill in all fields');\n return;\n }\n \n // Here you would typically send the form data to a server\n alert('Thank you for your message! I will get back to you soon.');\n contactForm.reset();\n });\n }\n\n // Intersection Observer for scroll animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('animate-in');\n }\n });\n }, {\n threshold: 0.1\n });\n\n // Observe all sections\n document.querySelectorAll('section').forEach((section) => {\n observer.observe(section);\n });\n});\n\n---end---\n\nThis creates a modern, responsive personal resume website with smooth animations, clean design, and professional layout. Key features include:\n\n1. Fixed header with smooth-scrolling navigation\n2. Hero section with animated entrance\n3. Timeline-based experience section\n4. Skills grid with hover effects\n5. Contact form with validation\n6. Responsive design that works on all devices\n7. Smooth scroll animations using Intersection Observer\n8. Modern glass-morphism effects in the header\n9. Beautiful gradient backgrounds\n10. Clean typography and spacing\n\nThe site uses CSS custom properties for easy theming, modern CSS Grid and Flexbox for layouts, and vanilla JavaScript for interactivity. It follows accessibility best practices with semantic HTML and proper contrast ratios."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 274,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3077
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..71d8e0c
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# my-resume.scroll.pub
+
+website generated by Claude from prompt: 个人简历
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8b5ed3a
--- /dev/null
+++ b/script.js
@@ -0,0 +1,50 @@
+document.addEventListener('DOMContentLoaded', function() {
+ // 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'
+ });
+ });
+ });
+
+ // Form submission handling
+ const contactForm = document.getElementById('contactForm');
+ if (contactForm) {
+ contactForm.addEventListener('submit', function(e) {
+ e.preventDefault();
+
+ // Get form values
+ const name = document.getElementById('name').value;
+ const email = document.getElementById('email').value;
+ const message = document.getElementById('message').value;
+
+ // Simple form validation
+ if (!name || !email || !message) {
+ alert('Please fill in all fields');
+ return;
+ }
+
+ // Here you would typically send the form data to a server
+ alert('Thank you for your message! I will get back to you soon.');
+ contactForm.reset();
+ });
+ }
+
+ // Intersection Observer for scroll animations
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('animate-in');
+ }
+ });
+ }, {
+ threshold: 0.1
+ });
+
+ // Observe all sections
+ document.querySelectorAll('section').forEach((section) => {
+ observer.observe(section);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..0548bbe
--- /dev/null
+++ b/style.css
@@ -0,0 +1,244 @@
+:root {
+ --primary-color: #2d3436;
+ --accent-color: #0984e3;
+ --text-color: #2d3436;
+ --light-bg: #f5f6fa;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+/* Header */
+.header {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ z-index: 1000;
+ box-shadow: 0 2px 20px rgba(0,0,0,0.1);
+}
+
+nav ul {
+ display: flex;
+ justify-content: center;
+ list-style: none;
+ padding: 20px 0;
+}
+
+nav ul li {
+ margin: 0 20px;
+}
+
+nav ul li a {
+ text-decoration: none;
+ color: var(--text-color);
+ font-weight: 500;
+ transition: var(--transition);
+}
+
+nav ul li a:hover {
+ color: var(--accent-color);
+}
+
+/* Hero Section */
+.hero {
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ background: linear-gradient(135deg, #fff 0%, var(--light-bg) 100%);
+ text-align: center;
+}
+
+.hero h1 {
+ font-size: 4rem;
+ margin-bottom: 20px;
+ opacity: 0;
+ transform: translateY(20px);
+ animation: fadeInUp 0.8s forwards;
+}
+
+.hero h2 {
+ font-size: 2rem;
+ color: var(--accent-color);
+ margin-bottom: 20px;
+}
+
+.subtitle {
+ font-size: 1.2rem;
+ color: #666;
+}
+
+/* Sections */
+section {
+ padding: 100px 0;
+}
+
+section h2 {
+ text-align: center;
+ margin-bottom: 50px;
+ font-size: 2.5rem;
+}
+
+/* Timeline */
+.timeline {
+ position: relative;
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.timeline::before {
+ content: '';
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 2px;
+ height: 100%;
+ background: var(--accent-color);
+}
+
+.timeline-item {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 50px;
+}
+
+.timeline-item:nth-child(odd) .content {
+ margin-left: auto;
+}
+
+.year {
+ min-width: 150px;
+ padding: 10px;
+ background: var(--accent-color);
+ color: white;
+ border-radius: 5px;
+ text-align: center;
+}
+
+.content {
+ width: 45%;
+ padding: 20px;
+ background: white;
+ border-radius: 5px;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
+
+/* Skills */
+.skill-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: 20px;
+ margin-top: 40px;
+}
+
+.skill-item {
+ background: white;
+ padding: 20px;
+ border-radius: 5px;
+ text-align: center;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+ transition: var(--transition);
+}
+
+.skill-item:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 25px rgba(0,0,0,0.2);
+}
+
+/* Contact Form */
+.form-group {
+ margin-bottom: 20px;
+}
+
+input, textarea {
+ width: 100%;
+ padding: 15px;
+ border: 2px solid #eee;
+ border-radius: 5px;
+ font-size: 1rem;
+ transition: var(--transition);
+}
+
+input:focus, textarea:focus {
+ outline: none;
+ border-color: var(--accent-color);
+}
+
+textarea {
+ height: 150px;
+ resize: vertical;
+}
+
+button {
+ background: var(--accent-color);
+ color: white;
+ padding: 15px 30px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 1rem;
+ transition: var(--transition);
+}
+
+button:hover {
+ background: #0773c5;
+ transform: translateY(-2px);
+}
+
+/* Animations */
+@keyframes fadeInUp {
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+ nav ul {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ nav ul li {
+ margin: 10px 0;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .timeline::before {
+ left: 0;
+ }
+
+ .timeline-item {
+ flex-direction: column;
+ }
+
+ .year, .content {
+ width: 100%;
+ margin: 10px 0;
+ }
+
+ .skill-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}