Changes to showcase.scroll.pub

root

23 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Showcase of Web Development Skills
+   Scroll to explore everything I can do with HTML, CSS, and JavaScript.
+ 
+ 
+ 
+   Typography
+   This section demonstrates advanced typography techniques, including responsive font sizes, fluid typography, and beautiful text effects.
+ 
+ 
+ 
+   CSS Animations
+   
+   Smooth, performant animations created purely with CSS.
+ 
+ 
+ 
+   Responsive Layouts
+   
+     1
+     2
+     3
+     4
+     5
+     6
+   
+   Complex, responsive grid layouts that adapt to any screen size.
+ 
+ 
+ 
+   JavaScript Interactivity
+   
+   Watch this text change!
+ 
+ 
+ 
+   Accessibility
+   This website follows WCAG 2.1 AA standards, with proper ARIA labels, semantic HTML, and keyboard navigation.
+ 
+ 
+ 
+   
+     Typography
+     Animations
+     Layout
+     Interactivity
+     Accessibility
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://showcase.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Showcase of Web Development Skills
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "a201968b-f847-4239-91a0-45a707e46da3",
+   "object": "chat.completion",
+   "created": 1735523134,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nshowcase.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://showcase.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Showcase of Web Development Skills\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  Showcase of Web Development Skills\n  Scroll to explore everything I can do with HTML, CSS, and JavaScript.
\n\n\n\n  Typography\n  This section demonstrates advanced typography techniques, including responsive font sizes, fluid typography, and beautiful text effects.
\n\n\n\n  CSS Animations\n  
\n  Smooth, performant animations created purely with CSS.
\n\n\n\n  Responsive Layouts\n  \n    1
\n    2
\n    3
\n    4
\n    5
\n    6
\n  
\n  Complex, responsive grid layouts that adapt to any screen size.
\n\n\n\n  JavaScript Interactivity\n  \n  Watch this text change!
\n\n\n\n  Accessibility\n  This website follows WCAG 2.1 AA standards, with proper ARIA labels, semantic HTML, and keyboard navigation.
\n\n\n\n  \n    Typography\n    Animations\n    Layout\n    Interactivity\n    Accessibility\n  \n\n---style.css---\n:root {\n  --primary-color: #1a73e8;\n  --secondary-color: #202124;\n  --background-color: #ffffff;\n  --text-color: #202124;\n  --animation-duration: 0.3s;\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  background-color: var(--background-color);\n  padding: 2rem;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\nheader {\n  text-align: center;\n  margin-bottom: 4rem;\n}\n\nh1 {\n  font-size: clamp(2rem, 5vw, 3.5rem);\n  margin-bottom: 1rem;\n  color: var(--primary-color);\n}\n\nsection {\n  margin: 4rem 0;\n  padding: 2rem;\n  border-radius: 8px;\n  background-color: #f8f9fa;\n}\n\nh2 {\n  font-size: clamp(1.5rem, 3vw, 2rem);\n  margin-bottom: 1.5rem;\n  color: var(--secondary-color);\n}\n\n.animation-box {\n  width: 100px;\n  height: 100px;\n  background-color: var(--primary-color);\n  border-radius: 8px;\n  animation: rotate 2s infinite ease-in-out;\n}\n\n@keyframes rotate {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n.grid-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 1rem;\n}\n\n.grid-item {\n  background-color: var(--primary-color);\n  color: white;\n  padding: 2rem;\n  text-align: center;\n  border-radius: 8px;\n  transition: transform var(--animation-duration) ease;\n}\n\n.grid-item:hover {\n  transform: scale(1.05);\n}\n\nbutton {\n  background-color: var(--primary-color);\n  color: white;\n  border: none;\n  padding: 0.75rem 1.5rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color var(--animation-duration) ease;\n}\n\nbutton:hover {\n  background-color: #1557b0;\n}\n\nfooter {\n  margin-top: 4rem;\n  text-align: center;\n}\n\nfooter nav {\n  display: flex;\n  justify-content: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n\nfooter a {\n  color: var(--primary-color);\n  text-decoration: none;\n  padding: 0.5rem 1rem;\n  border-radius: 4px;\n  transition: background-color var(--animation-duration) ease;\n}\n\nfooter a:hover {\n  background-color: #e8f0fe;\n}\n\n@media (max-width: 768px) {\n  body {\n    padding: 1rem;\n  }\n  \n  section {\n    padding: 1rem;\n  }\n}\n---script.js---\ndocument.getElementById('interactive-button').addEventListener('click', function() {\n  const textElement = document.getElementById('interactive-text');\n  textElement.textContent = \"You clicked the button!\";\n  textElement.style.color = \"#1a73e8\";\n  textElement.style.fontWeight = \"bold\";\n});\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 249,
+     "completion_tokens": 1252,
+     "total_tokens": 1501,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 249
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # showcase.scroll.pub

+ Website generated by DeepSeek from prompt: I want a website that shows everything you are capable of on 1 page

script.js

Changed around line 1
+ document.getElementById('interactive-button').addEventListener('click', function() {
+   const textElement = document.getElementById('interactive-text');
+   textElement.textContent = "You clicked the button!";
+   textElement.style.color = "#1a73e8";
+   textElement.style.fontWeight = "bold";
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #1a73e8;
+   --secondary-color: #202124;
+   --background-color: #ffffff;
+   --text-color: #202124;
+   --animation-duration: 0.3s;
+ }
+ 
+ * {
+   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);
+   background-color: var(--background-color);
+   padding: 2rem;
+   max-width: 1200px;
+   margin: 0 auto;
+ }
+ 
+ header {
+   text-align: center;
+   margin-bottom: 4rem;
+ }
+ 
+ h1 {
+   font-size: clamp(2rem, 5vw, 3.5rem);
+   margin-bottom: 1rem;
+   color: var(--primary-color);
+ }
+ 
+ section {
+   margin: 4rem 0;
+   padding: 2rem;
+   border-radius: 8px;
+   background-color: #f8f9fa;
+ }
+ 
+ h2 {
+   font-size: clamp(1.5rem, 3vw, 2rem);
+   margin-bottom: 1.5rem;
+   color: var(--secondary-color);
+ }
+ 
+ .animation-box {
+   width: 100px;
+   height: 100px;
+   background-color: var(--primary-color);
+   border-radius: 8px;
+   animation: rotate 2s infinite ease-in-out;
+ }
+ 
+ @keyframes rotate {
+   0% { transform: rotate(0deg); }
+   100% { transform: rotate(360deg); }
+ }
+ 
+ .grid-container {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+   gap: 1rem;
+ }
+ 
+ .grid-item {
+   background-color: var(--primary-color);
+   color: white;
+   padding: 2rem;
+   text-align: center;
+   border-radius: 8px;
+   transition: transform var(--animation-duration) ease;
+ }
+ 
+ .grid-item:hover {
+   transform: scale(1.05);
+ }
+ 
+ button {
+   background-color: var(--primary-color);
+   color: white;
+   border: none;
+   padding: 0.75rem 1.5rem;
+   border-radius: 4px;
+   cursor: pointer;
+   transition: background-color var(--animation-duration) ease;
+ }
+ 
+ button:hover {
+   background-color: #1557b0;
+ }
+ 
+ footer {
+   margin-top: 4rem;
+   text-align: center;
+ }
+ 
+ footer nav {
+   display: flex;
+   justify-content: center;
+   gap: 1rem;
+   flex-wrap: wrap;
+ }
+ 
+ footer a {
+   color: var(--primary-color);
+   text-decoration: none;
+   padding: 0.5rem 1rem;
+   border-radius: 4px;
+   transition: background-color var(--animation-duration) ease;
+ }
+ 
+ footer a:hover {
+   background-color: #e8f0fe;
+ }
+ 
+ @media (max-width: 768px) {
+   body {
+     padding: 1rem;
+   }
+ 
+   section {
+     padding: 1rem;
+   }
+ }