Changes to josh-is-cool.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     JO
+     
+   
+   
+     Joshua Omomia
+     Developer. Creator. Innovator.
+   
+ 
+ 
+ 
+   
+     What Makes Joshua Cool?
+     
+       
+         💻
+         Tech Wizard
+         Crafting elegant solutions with code
+       
+       
+         🎨
+         Creative Mind
+         Bringing ideas to life with style
+       
+       
+         🚀
+         Innovator
+         Always pushing boundaries
+       
+     
+   
+ 
+ 
+ 
+   Made with ❤️ by Joshua Omomia
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://josh-is-cool.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Joshua Omomia | Developer & Creative
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_011hw9aNDeBAN3MPThABJDTq",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll help create a simple but elegant personal website for Joshua Omomia.\n\n---domain---\njosh-is-cool.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://josh-is-cool.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Joshua Omomia | Developer & Creative\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    JO
\n    \n  \n  \n    Joshua Omomia\n    Developer. Creator. Innovator.
\n  
\n\n\n\n  \n    What Makes Joshua Cool?\n    \n      \n        💻
\n        Tech Wizard\n        Crafting elegant solutions with code
\n      \n      \n        🎨
\n        Creative Mind\n        Bringing ideas to life with style
\n      \n      \n        🚀
\n        Innovator\n        Always pushing boundaries
\n      \n    
\n  \n\n\n\n  Made with ❤️ by Joshua Omomia
\n\n\n---style.css---\n:root {\n  --primary: #2563eb;\n  --text: #1f2937;\n  --background: #ffffff;\n  --card-bg: #f8fafc;\n  --transition: all 0.3s ease;\n}\n\n.dark-mode {\n  --primary: #60a5fa;\n  --text: #f1f5f9;\n  --background: #0f172a;\n  --card-bg: #1e293b;\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  color: var(--text);\n  background: var(--background);\n  transition: var(--transition);\n  line-height: 1.6;\n}\n\n.hero {\n  min-height: 80vh;\n  padding: 2rem;\n  background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);\n  color: white;\n  position: relative;\n  overflow: hidden;\n}\n\nnav {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem 0;\n}\n\n.logo {\n  font-size: 1.5rem;\n  font-weight: bold;\n}\n\n.theme-toggle {\n  background: none;\n  border: none;\n  font-size: 1.5rem;\n  cursor: pointer;\n  color: white;\n}\n\n.hero-content {\n  max-width: 800px;\n  margin: 4rem auto;\n  text-align: center;\n}\n\nh1 {\n  font-size: clamp(2.5rem, 8vw, 4rem);\n  margin-bottom: 1rem;\n  animation: fadeInUp 1s ease;\n}\n\n.tagline {\n  font-size: clamp(1.2rem, 4vw, 1.8rem);\n  opacity: 0.9;\n  animation: fadeInUp 1s ease 0.2s backwards;\n}\n\n.cool-factor {\n  padding: 4rem 2rem;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\nh2 {\n  text-align: center;\n  margin-bottom: 3rem;\n  font-size: clamp(1.8rem, 5vw, 2.5rem);\n  color: var(--primary);\n}\n\n.cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 2rem;\n  padding: 1rem;\n}\n\n.card {\n  background: var(--card-bg);\n  padding: 2rem;\n  border-radius: 1rem;\n  text-align: center;\n  transition: var(--transition);\n  cursor: pointer;\n}\n\n.card:hover {\n  transform: translateY(-10px);\n  box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n}\n\n.card-icon {\n  font-size: 3rem;\n  margin-bottom: 1rem;\n}\n\nfooter {\n  text-align: center;\n  padding: 2rem;\n  background: var(--card-bg);\n}\n\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@media (max-width: 768px) {\n  .cool-factor {\n    padding: 2rem 1rem;\n  }\n  \n  .cards {\n    gap: 1rem;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  const themeToggle = document.querySelector('.theme-toggle');\n  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');\n  \n  // Check for saved theme preference or system preference\n  const currentTheme = localStorage.getItem('theme') || \n    (prefersDarkScheme.matches ? 'dark' : 'light');\n  \n  // Set initial theme\n  if (currentTheme === 'dark') {\n    document.body.classList.add('dark-mode');\n    themeToggle.textContent = '☀️';\n  }\n\n  // Theme toggle functionality\n  themeToggle.addEventListener('click', () => {\n    document.body.classList.toggle('dark-mode');\n    \n    const isDark = document.body.classList.contains('dark-mode');\n    localStorage.setItem('theme', isDark ? 'dark' : 'light');\n    themeToggle.textContent = isDark ? '☀️' : '🌙';\n  });\n\n  // Add hover effect to cards\n  const cards = document.querySelectorAll('.card');\n  cards.forEach(card => {\n    card.addEventListener('mouseenter', () => {\n      card.style.transform = 'translateY(-10px)';\n    });\n    \n    card.addEventListener('mouseleave', () => {\n      card.style.transform = 'translateY(0)';\n    });\n  });\n});\n\n---end---\n\nThis website features:\n- Clean, semantic HTML5 structure\n- Responsive design with CSS Grid and Flexbox\n- Dark mode toggle with system preference detection\n- Smooth animations and transitions\n- Interactive card elements\n- Beautiful gradient hero section\n- Accessible navigation and content\n- Modern typography and spacing\n- Local storage for theme preference\n- Performance optimized CSS animations\n- Mobile-first approach\n- SEO-friendly structure\n\nThe domain name \"josh-is-cool.scroll.pub\" is short, memorable, and directly relates to the website's purpose while maintaining a professional tone."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 281,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 1911
+   }
+ }

readme.scroll

Changed around line 1

+ # josh-is-cool.scroll.pub

+ Website generated by Claude from prompt: Create a website showing Joshua Omomia is cool

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   const themeToggle = document.querySelector('.theme-toggle');
+   const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+ 
+   // Check for saved theme preference or system preference
+   const currentTheme = localStorage.getItem('theme') ||
+     (prefersDarkScheme.matches ? 'dark' : 'light');
+ 
+   // Set initial theme
+   if (currentTheme === 'dark') {
+     document.body.classList.add('dark-mode');
+     themeToggle.textContent = '☀️';
+   }
+ 
+   // Theme toggle functionality
+   themeToggle.addEventListener('click', () => {
+     document.body.classList.toggle('dark-mode');
+ 
+     const isDark = document.body.classList.contains('dark-mode');
+     localStorage.setItem('theme', isDark ? 'dark' : 'light');
+     themeToggle.textContent = isDark ? '☀️' : '🌙';
+   });
+ 
+   // Add hover effect to cards
+   const cards = document.querySelectorAll('.card');
+   cards.forEach(card => {
+     card.addEventListener('mouseenter', () => {
+       card.style.transform = 'translateY(-10px)';
+     });
+ 
+     card.addEventListener('mouseleave', () => {
+       card.style.transform = 'translateY(0)';
+     });
+   });
+ });

style.css

Changed around line 1
+ :root {
+   --primary: #2563eb;
+   --text: #1f2937;
+   --background: #ffffff;
+   --card-bg: #f8fafc;
+   --transition: all 0.3s ease;
+ }
+ 
+ .dark-mode {
+   --primary: #60a5fa;
+   --text: #f1f5f9;
+   --background: #0f172a;
+   --card-bg: #1e293b;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: system-ui, -apple-system, sans-serif;
+   color: var(--text);
+   background: var(--background);
+   transition: var(--transition);
+   line-height: 1.6;
+ }
+ 
+ .hero {
+   min-height: 80vh;
+   padding: 2rem;
+   background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
+   color: white;
+   position: relative;
+   overflow: hidden;
+ }
+ 
+ nav {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding: 1rem 0;
+ }
+ 
+ .logo {
+   font-size: 1.5rem;
+   font-weight: bold;
+ }
+ 
+ .theme-toggle {
+   background: none;
+   border: none;
+   font-size: 1.5rem;
+   cursor: pointer;
+   color: white;
+ }
+ 
+ .hero-content {
+   max-width: 800px;
+   margin: 4rem auto;
+   text-align: center;
+ }
+ 
+ h1 {
+   font-size: clamp(2.5rem, 8vw, 4rem);
+   margin-bottom: 1rem;
+   animation: fadeInUp 1s ease;
+ }
+ 
+ .tagline {
+   font-size: clamp(1.2rem, 4vw, 1.8rem);
+   opacity: 0.9;
+   animation: fadeInUp 1s ease 0.2s backwards;
+ }
+ 
+ .cool-factor {
+   padding: 4rem 2rem;
+   max-width: 1200px;
+   margin: 0 auto;
+ }
+ 
+ h2 {
+   text-align: center;
+   margin-bottom: 3rem;
+   font-size: clamp(1.8rem, 5vw, 2.5rem);
+   color: var(--primary);
+ }
+ 
+ .cards {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+   gap: 2rem;
+   padding: 1rem;
+ }
+ 
+ .card {
+   background: var(--card-bg);
+   padding: 2rem;
+   border-radius: 1rem;
+   text-align: center;
+   transition: var(--transition);
+   cursor: pointer;
+ }
+ 
+ .card:hover {
+   transform: translateY(-10px);
+   box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+ }
+ 
+ .card-icon {
+   font-size: 3rem;
+   margin-bottom: 1rem;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 2rem;
+   background: var(--card-bg);
+ }
+ 
+ @keyframes fadeInUp {
+   from {
+     opacity: 0;
+     transform: translateY(20px);
+   }
+   to {
+     opacity: 1;
+     transform: translateY(0);
+   }
+ }
+ 
+ @media (max-width: 768px) {
+   .cool-factor {
+     padding: 2rem 1rem;
+   }
+ 
+   .cards {
+     gap: 1rem;
+   }
+ }