commit 39ddbac77deb26c6acd8e368ea4504a769040dd9

Author: root <root@hub.scroll.pub> Date: 2024-12-27 18:14:33 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..ef55770 --- /dev/null +++ b/body.html @@ -0,0 +1,142 @@ +<header class="nav-header"> + <nav> + <div class="logo">DB</div> + <button class="mobile-menu" aria-label="Toggle menu"> + <span></span><span></span><span></span> + </button> + <ul class="nav-links"> + <li><a href="#home">Home</a></li> + <li><a href="#about">About</a></li> + <li><a href="#skills">Skills</a></li> + <li><a href="#projects">Projects</a></li> + <li><a href="#contact">Contact</a></li> + </ul> + </nav> +</header> + +<main> + <section id="home" class="hero"> + <div class="container"> + <h1 class="glitch" data-text="Backend Developer">Backend Developer</h1> + <p class="subtitle">Building robust server-side solutions</p> + <div class="cta-buttons"> + <a href="#projects" class="btn primary">View Projects</a> + <a href="#contact" class="btn secondary">Contact Me</a> + </div> + </div> + </section> + + <section id="about" class="about"> + <div class="container"> + <h2>About Me</h2> + <div class="about-content"> + <div class="about-text"> + <p>Backend developer with 5+ years of experience crafting scalable server architectures and RESTful APIs. Passionate about clean code, performance optimization, and database design.</p> + <p>Specialized in building high-performance microservices and distributed systems that handle millions of requests.</p> + </div> + <div class="tech-stack"> + <h3>Tech Stack</h3> + <div class="stack-grid"> + <span>Node.js</span> + <span>Python</span> + <span>Java</span> + <span>PostgreSQL</span> + <span>MongoDB</span> + <span>Redis</span> + </div> + </div> + </div> + </div> + </section> + + <section id="skills" class="skills"> + <div class="container"> + <h2>Skills</h2> + <div class="skills-grid"> + <div class="skill-card"> + <h3>API Development</h3> + <div class="skill-bar" data-level="95"></div> + </div> + <div class="skill-card"> + <h3>Database Design</h3> + <div class="skill-bar" data-level="90"></div> + </div> + <div class="skill-card"> + <h3>System Architecture</h3> + <div class="skill-bar" data-level="85"></div> + </div> + <div class="skill-card"> + <h3>Cloud Services</h3> + <div class="skill-bar" data-level="88"></div> + </div> + </div> + </div> + </section> + + <section id="projects" class="projects"> + <div class="container"> + <h2>Featured Projects</h2> + <div class="project-grid"> + <article class="project-card"> + <h3>E-commerce API</h3> + <p>Scalable REST API handling 1M+ daily requests</p> + <div class="project-tags"> + <span>Node.js</span> + <span>MongoDB</span> + <span>Redis</span> + </div> + </article> + <article class="project-card"> + <h3>Data Pipeline</h3> + <p>Real-time data processing system</p> + <div class="project-tags"> + <span>Python</span> + <span>Apache Kafka</span> + <span>PostgreSQL</span> + </div> + </article> + <article class="project-card"> + <h3>Auth Service</h3> + <p>Microservice for authentication & authorization</p> + <div class="project-tags"> + <span>Java</span> + <span>Spring Boot</span> + <span>JWT</span> + </div> + </article> + </div> + </div> + </section> + + <section id="contact" class="contact"> + <div class="container"> + <h2>Get in Touch</h2> + <form id="contact-form" class="contact-form"> + <div class="form-group"> + <label for="name">Name</label> + <input type="text" id="name" required> + </div> + <div class="form-group"> + <label for="email">Email</label> + <input type="email" id="email" required> + </div> + <div class="form-group"> + <label for="message">Message</label> + <textarea id="message" required></textarea> + </div> + <button type="submit" class="btn primary">Send Message</button> + </form> + </div> + </section> +</main> + +<footer> + <div class="container"> + <p>Made with passion for backend development</p> + <div class="social-links"> + <a href="#" aria-label="GitHub Profile">GitHub</a> + <a href="#" aria-label="LinkedIn Profile">LinkedIn</a> + <a href="#" aria-label="Twitter Profile">Twitter</a> + </div> + </div> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..e6a3e7e --- /dev/null +++ b/index.scroll @@ -0,0 +1,11 @@ +buildHtml +baseUrl https://backend.scroll.pub +metaTags + description Backend developer portfolio showcasing expertise in server-side technologies, APIs, and database architecture + keywords backend development, software engineer, API development, database architecture, server-side programming + author Backend Developer Portfolio +editButton /edit.html +title Backend Developer Portfolio | Server-Side Expert +style.css +body.html +script.js \ No newline at end of file diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..3a31165 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_0119PCNVmaheE9zhgwbqZK5P", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll create a clean, professional portfolio website for a backend developer.\n\nSuggested domain: backend.scroll.pub - Simple, direct, and memorable.\n\n---domain---\nbackend.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://backend.scroll.pub\nmetaTags\n description Backend developer portfolio showcasing expertise in server-side technologies, APIs, and database architecture\n keywords backend development, software engineer, API development, database architecture, server-side programming\n author Backend Developer Portfolio\neditButton /edit.html\ntitle Backend Developer Portfolio | Server-Side Expert\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header class=\"nav-header\">\n <nav>\n <div class=\"logo\">DB</div>\n <button class=\"mobile-menu\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#home\">Home</a></li>\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#skills\">Skills</a></li>\n <li><a href=\"#projects\">Projects</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"home\" class=\"hero\">\n <div class=\"container\">\n <h1 class=\"glitch\" data-text=\"Backend Developer\">Backend Developer</h1>\n <p class=\"subtitle\">Building robust server-side solutions</p>\n <div class=\"cta-buttons\">\n <a href=\"#projects\" class=\"btn primary\">View Projects</a>\n <a href=\"#contact\" class=\"btn secondary\">Contact Me</a>\n </div>\n </div>\n </section>\n\n <section id=\"about\" class=\"about\">\n <div class=\"container\">\n <h2>About Me</h2>\n <div class=\"about-content\">\n <div class=\"about-text\">\n <p>Backend developer with 5+ years of experience crafting scalable server architectures and RESTful APIs. Passionate about clean code, performance optimization, and database design.</p>\n <p>Specialized in building high-performance microservices and distributed systems that handle millions of requests.</p>\n </div>\n <div class=\"tech-stack\">\n <h3>Tech Stack</h3>\n <div class=\"stack-grid\">\n <span>Node.js</span>\n <span>Python</span>\n <span>Java</span>\n <span>PostgreSQL</span>\n <span>MongoDB</span>\n <span>Redis</span>\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=\"skills-grid\">\n <div class=\"skill-card\">\n <h3>API Development</h3>\n <div class=\"skill-bar\" data-level=\"95\"></div>\n </div>\n <div class=\"skill-card\">\n <h3>Database Design</h3>\n <div class=\"skill-bar\" data-level=\"90\"></div>\n </div>\n <div class=\"skill-card\">\n <h3>System Architecture</h3>\n <div class=\"skill-bar\" data-level=\"85\"></div>\n </div>\n <div class=\"skill-card\">\n <h3>Cloud Services</h3>\n <div class=\"skill-bar\" data-level=\"88\"></div>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"projects\" class=\"projects\">\n <div class=\"container\">\n <h2>Featured Projects</h2>\n <div class=\"project-grid\">\n <article class=\"project-card\">\n <h3>E-commerce API</h3>\n <p>Scalable REST API handling 1M+ daily requests</p>\n <div class=\"project-tags\">\n <span>Node.js</span>\n <span>MongoDB</span>\n <span>Redis</span>\n </div>\n </article>\n <article class=\"project-card\">\n <h3>Data Pipeline</h3>\n <p>Real-time data processing system</p>\n <div class=\"project-tags\">\n <span>Python</span>\n <span>Apache Kafka</span>\n <span>PostgreSQL</span>\n </div>\n </article>\n <article class=\"project-card\">\n <h3>Auth Service</h3>\n <p>Microservice for authentication & authorization</p>\n <div class=\"project-tags\">\n <span>Java</span>\n <span>Spring Boot</span>\n <span>JWT</span>\n </div>\n </article>\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=\"contact-form\" class=\"contact-form\">\n <div class=\"form-group\">\n <label for=\"name\">Name</label>\n <input type=\"text\" id=\"name\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"email\">Email</label>\n <input type=\"email\" id=\"email\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"message\">Message</label>\n <textarea id=\"message\" required></textarea>\n </div>\n <button type=\"submit\" class=\"btn primary\">Send Message</button>\n </form>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"container\">\n <p>Made with passion for backend development</p>\n <div class=\"social-links\">\n <a href=\"#\" aria-label=\"GitHub Profile\">GitHub</a>\n <a href=\"#\" aria-label=\"LinkedIn Profile\">LinkedIn</a>\n <a href=\"#\" aria-label=\"Twitter Profile\">Twitter</a>\n </div>\n </div>\n</footer>\n---style.css---\n:root {\n --primary-color: #2a2a72;\n --secondary-color: #009ffd;\n --text-color: #333;\n --bg-color: #f8f9fa;\n --card-bg: #ffffff;\n --transition: all 0.3s ease;\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: 'Inter', system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--bg-color);\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n}\n\n/* Navigation */\n.nav-header {\n position: fixed;\n width: 100%;\n top: 0;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n z-index: 1000;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--primary-color);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text-color);\n font-weight: 500;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--secondary-color);\n}\n\n.mobile-menu {\n display: none;\n}\n\n/* Hero Section */\n.hero {\n height: 100vh;\n display: flex;\n align-items: center;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n}\n\n.hero h1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n position: relative;\n}\n\n.glitch {\n position: relative;\n}\n\n.glitch::before,\n.glitch::after {\n content: attr(data-text);\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n opacity: 0.8;\n}\n\n.glitch::before {\n animation: glitch-effect 3s infinite;\n clip: rect(44px, 450px, 56px, 0);\n text-shadow: -2px 0 #ff00c1;\n}\n\n.glitch::after {\n animation: glitch-effect 2s infinite;\n clip: rect(44px, 450px, 56px, 0);\n text-shadow: 2px 0 #00fff9;\n animation-delay: 1s;\n}\n\n@keyframes glitch-effect {\n 0% {\n clip: rect(42px, 450px, 54px, 0);\n }\n 20% {\n clip: rect(12px, 450px, 84px, 0);\n }\n 40% {\n clip: rect(62px, 450px, 34px, 0);\n }\n 60% {\n clip: rect(22px, 450px, 74px, 0);\n }\n 80% {\n clip: rect(52px, 450px, 44px, 0);\n }\n 100% {\n clip: rect(42px, 450px, 54px, 0);\n }\n}\n\n.subtitle {\n font-size: 1.5rem;\n margin-bottom: 2rem;\n}\n\n.cta-buttons {\n display: flex;\n gap: 1rem;\n}\n\n.btn {\n padding: 0.8rem 2rem;\n border-radius: 5px;\n text-decoration: none;\n font-weight: 600;\n transition: var(--transition);\n}\n\n.btn.primary {\n background: white;\n color: var(--primary-color);\n}\n\n.btn.secondary {\n background: transparent;\n border: 2px solid white;\n color: white;\n}\n\n.btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n}\n\n/* Skills Section */\n.skills {\n padding: 5rem 0;\n background: var(--bg-color);\n}\n\n.skills-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.skill-card {\n background: var(--card-bg);\n padding: 1.5rem;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.skill-bar {\n height: 10px;\n background: #eee;\n border-radius: 5px;\n margin-top: 1rem;\n overflow: hidden;\n}\n\n.skill-bar::after {\n content: '';\n display: block;\n height: 100%;\n background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\n width: var(--width);\n animation: skillProgress 1s ease-out forwards;\n}\n\n@keyframes skillProgress {\n from { width: 0; }\n to { width: var(--width); }\n}\n\n/* Projects Section */\n.projects {\n padding: 5rem 0;\n}\n\n.project-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.project-card {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: var(--transition);\n}\n\n.project-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);\n}\n\n.project-tags {\n display: flex;\n gap: 0.5rem;\n margin-top: 1rem;\n flex-wrap: wrap;\n}\n\n.project-tags span {\n background: var(--primary-color);\n color: white;\n padding: 0.3rem 0.8rem;\n border-radius: 15px;\n font-size: 0.8rem;\n}\n\n/* Contact Section */\n.contact {\n padding: 5rem 0;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n}\n\n.contact-form {\n max-width: 600px;\n margin: 2rem auto 0;\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\n.form-group label {\n display: block;\n margin-bottom: 0.5rem;\n}\n\n.form-group input,\n.form-group textarea {\n width: 100%;\n padding: 0.8rem;\n border: none;\n border-radius: 5px;\n background: rgba(255, 255, 255, 0.1);\n color: white;\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.form-group input:focus,\n.form-group textarea:focus {\n outline: none;\n background: rgba(255, 255, 255, 0.2);\n}\n\n.form-group textarea {\n height: 150px;\n resize: vertical;\n}\n\n/* Footer */\nfooter {\n padding: 2rem 0;\n background: var(--primary-color);\n color: white;\n text-align: center;\n}\n\n.social-links {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-top: 1rem;\n}\n\n.social-links a {\n color: white;\n text-decoration: none;\n transition: var(--transition);\n}\n\n.social-links a:hover {\n color: var(--secondary-color);\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n\n .mobile-menu {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n }\n\n .mobile-menu span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--primary-color);\n margin: 5px 0;\n transition: var(--transition);\n }\n\n .nav-links.active {\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 100%;\n left: 0;\n right: " + } + ], + "stop_reason": "max_tokens", + "stop_sequence": null, + "usage": { + "input_tokens": 276, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 4000 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..d23d2e2 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# backend.scroll.pub +Website generated by Claude from prompt: portfolio website for a backend developer \ No newline at end of file