Changes to neomorph.scroll.pub

root
root
18 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+ projects
+ designs
+ contact
+
+
+
+
+
+
+
+

digital dreams
come alive

+

creative technologist & digital artist

+
+
+
+

projects

+
+
+
+

neural interface

+

ai-powered user experience design

+
+
+
+

quantum flux

+

interactive data visualization

+
+
+
+

cyber garden

+

generative art installation

+
+
+
+
+
+

designs

+
+
+
+
+
+
+
+
+
+

let's connect

+
+
+
+
+
+
+
+
+
+
+

crafted with neural networks and human creativity

+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://neomorph.scroll.pub
+ metaTags
+ editButton /edit.html
+ title digital dreams portfolio
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_019SJwAJnnZBBeKBkTwMHQs7",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a futuristic, AI-inspired personal portfolio website.\n\n---domain---\nneomorph.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://neomorph.scroll.pub\nmetaTags\neditButton /edit.html\ntitle digital dreams portfolio\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
\n \n
\n\n
\n
\n
\n

digital dreams
come alive

\n

creative technologist & digital artist

\n
\n\n
\n

projects

\n
\n
\n
\n

neural interface

\n

ai-powered user experience design

\n
\n
\n
\n

quantum flux

\n

interactive data visualization

\n
\n
\n
\n

cyber garden

\n

generative art installation

\n
\n
\n
\n\n
\n

designs

\n
\n
\n
\n
\n
\n
\n
\n\n
\n

let's connect

\n
\n \n \n \n \n
\n
\n
\n\n
\n

crafted with neural networks and human creativity

\n
\n\n---style.css---\n:root {\n --neon-blue: #00f3ff;\n --neon-purple: #9d00ff;\n --dark-bg: #080808;\n --glass-bg: rgba(255, 255, 255, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Space Grotesk', sans-serif;\n background: var(--dark-bg);\n color: white;\n line-height: 1.6;\n}\n\n.glass-nav {\n position: fixed;\n width: 100%;\n backdrop-filter: blur(10px);\n background: var(--glass-bg);\n z-index: 1000;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n margin-left: 2rem;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--neon-blue);\n}\n\n.hero-section {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n overflow: hidden;\n}\n\n.blob-animation {\n position: absolute;\n width: 50vw;\n height: 50vw;\n background: linear-gradient(var(--neon-blue), var(--neon-purple));\n filter: blur(100px);\n animation: blob 15s infinite;\n z-index: -1;\n}\n\n@keyframes blob {\n 0% { transform: translate(0, 0) scale(1); }\n 33% { transform: translate(30%, -20%) scale(1.2); }\n 66% { transform: translate(-20%, 20%) scale(0.8); }\n 100% { transform: translate(0, 0) scale(1); }\n}\n\nh1 {\n font-size: 4rem;\n text-align: center;\n text-transform: lowercase;\n background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.subtitle {\n font-size: 1.2rem;\n opacity: 0.8;\n}\n\n.project-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 5%;\n}\n\n.project-card {\n background: var(--glass-bg);\n border-radius: 15px;\n padding: 1.5rem;\n transition: transform 0.3s ease;\n}\n\n.project-card:hover {\n transform: translateY(-10px);\n}\n\n.design-gallery {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n padding: 5%;\n}\n\n.design-item {\n aspect-ratio: 1;\n background: var(--glass-bg);\n border-radius: 10px;\n transition: transform 0.3s ease;\n}\n\n.design-item:hover {\n transform: scale(1.05);\n}\n\n.contact-form {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n max-width: 600px;\n margin: 0 auto;\n padding: 5%;\n}\n\ninput, textarea {\n background: var(--glass-bg);\n border: 1px solid rgba(255, 255, 255, 0.1);\n color: white;\n padding: 1rem;\n border-radius: 5px;\n}\n\nbutton {\n background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));\n color: white;\n border: none;\n padding: 1rem;\n border-radius: 5px;\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\nbutton:hover {\n transform: scale(1.05);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--glass-bg);\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2.5rem;\n }\n \n .nav-links {\n display: none;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scroll for navigation\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 // Parallax effect for blob animation\n window.addEventListener('scroll', () => {\n const blob = document.querySelector('.blob-animation');\n const scrolled = window.pageYOffset;\n blob.style.transform = `translate(${scrolled * 0.1}px, ${scrolled * 0.1}px)`;\n });\n\n // Form submission handler\n const form = document.getElementById('contact-form');\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n // Add form submission logic here\n form.reset();\n });\n\n // Animate design items on scroll\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = 1;\n entry.target.style.transform = 'translateY(0)';\n }\n });\n });\n\n document.querySelectorAll('.design-item').forEach((item) => {\n item.style.opacity = 0;\n item.style.transform = 'translateY(20px)';\n observer.observe(item);\n });\n});\n\n---end---\n\nThis website features:\n- Glassmorphism design elements\n- Animated gradient blob background\n- Smooth scrolling navigation\n- Responsive grid layouts\n- Interactive hover effects\n- Intersection Observer for scroll animations\n- Clean, semantic HTML structure\n- Mobile-responsive design\n- Accessible form elements\n- Modern CSS features including CSS Grid and Flexbox\n- Subtle animations and transitions\n- Neural/AI-inspired color scheme and design elements\n\nThe domain name \"neomorph\" combines \"neo\" (new) and \"morph\" (form/shape), suggesting transformation and futuristic design, which aligns with the AI-generated artistic theme of the website."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 304,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2439
+ }
+ }
readme.scroll
Changed around line 1
+ # neomorph.scroll.pub
+ Website generated by Claude from prompt: personal website with projects, designs, and contact info, I want it to be in the style of ai gen photo / artistic futueristic vibe. all lowercase text
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Smooth scroll for navigation
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Parallax effect for blob animation
+ window.addEventListener('scroll', () => {
+ const blob = document.querySelector('.blob-animation');
+ const scrolled = window.pageYOffset;
+ blob.style.transform = `translate(${scrolled * 0.1}px, ${scrolled * 0.1}px)`;
+ });
+
+ // Form submission handler
+ const form = document.getElementById('contact-form');
+ form.addEventListener('submit', (e) => {
+ e.preventDefault();
+ // Add form submission logic here
+ form.reset();
+ });
+
+ // Animate design items on scroll
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = 1;
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ });
+
+ document.querySelectorAll('.design-item').forEach((item) => {
+ item.style.opacity = 0;
+ item.style.transform = 'translateY(20px)';
+ observer.observe(item);
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --neon-blue: #00f3ff;
+ --neon-purple: #9d00ff;
+ --dark-bg: #080808;
+ --glass-bg: rgba(255, 255, 255, 0.1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Space Grotesk', sans-serif;
+ background: var(--dark-bg);
+ color: white;
+ line-height: 1.6;
+ }
+
+ .glass-nav {
+ position: fixed;
+ width: 100%;
+ backdrop-filter: blur(10px);
+ background: var(--glass-bg);
+ z-index: 1000;
+ }
+
+ nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ }
+
+ .nav-links a {
+ color: white;
+ text-decoration: none;
+ margin-left: 2rem;
+ transition: color 0.3s ease;
+ }
+
+ .nav-links a:hover {
+ color: var(--neon-blue);
+ }
+
+ .hero-section {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .blob-animation {
+ position: absolute;
+ width: 50vw;
+ height: 50vw;
+ background: linear-gradient(var(--neon-blue), var(--neon-purple));
+ filter: blur(100px);
+ animation: blob 15s infinite;
+ z-index: -1;
+ }
+
+ @keyframes blob {
+ 0% { transform: translate(0, 0) scale(1); }
+ 33% { transform: translate(30%, -20%) scale(1.2); }
+ 66% { transform: translate(-20%, 20%) scale(0.8); }
+ 100% { transform: translate(0, 0) scale(1); }
+ }
+
+ h1 {
+ font-size: 4rem;
+ text-align: center;
+ text-transform: lowercase;
+ background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .subtitle {
+ font-size: 1.2rem;
+ opacity: 0.8;
+ }
+
+ .project-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 5%;
+ }
+
+ .project-card {
+ background: var(--glass-bg);
+ border-radius: 15px;
+ padding: 1.5rem;
+ transition: transform 0.3s ease;
+ }
+
+ .project-card:hover {
+ transform: translateY(-10px);
+ }
+
+ .design-gallery {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+ padding: 5%;
+ }
+
+ .design-item {
+ aspect-ratio: 1;
+ background: var(--glass-bg);
+ border-radius: 10px;
+ transition: transform 0.3s ease;
+ }
+
+ .design-item:hover {
+ transform: scale(1.05);
+ }
+
+ .contact-form {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 5%;
+ }
+
+ input, textarea {
+ background: var(--glass-bg);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ color: white;
+ padding: 1rem;
+ border-radius: 5px;
+ }
+
+ button {
+ background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));
+ color: white;
+ border: none;
+ padding: 1rem;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+ }
+
+ button:hover {
+ transform: scale(1.05);
+ }
+
+ footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--glass-bg);
+ }
+
+ @media (max-width: 768px) {
+ h1 {
+ font-size: 2.5rem;
+ }
+
+ .nav-links {
+ display: none;
+ }
+ }