+ "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\n\n
\n \n \n
Backend Developer
\n
Building robust server-side solutions
\n
\n
\n
About Me
\n
\n
\n
Backend developer with 5+ years of experience crafting scalable server architectures and RESTful APIs. Passionate about clean code, performance optimization, and database design.
\n
Specialized in building high-performance microservices and distributed systems that handle millions of requests.
\n
\n
\n
Tech Stack
\n
\n Node.js\n Python\n Java\n PostgreSQL\n MongoDB\n Redis\n
\n
\n
\n
\n
Skills
\n
\n
\n
\n
\n
System Architecture
\n
\n
\n
\n
\n
\n
Featured Projects
\n
\n
\n E-commerce API
\n Scalable REST API handling 1M+ daily requests
\n \n Node.js\n MongoDB\n Redis\n
\n \n
\n Data Pipeline
\n Real-time data processing system
\n \n Python\n Apache Kafka\n PostgreSQL\n
\n \n
\n Auth Service
\n Microservice for authentication & authorization
\n \n Java\n Spring Boot\n JWT\n
\n \n
\n
\n\n
\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: "
