index.scroll
Changed around line 1
+ title Career Paths in Computer Science: Your Journey Starts Here
+ metaTags
+ keywords Computer Science careers, tech jobs, programming careers, CS opportunities
+ description Explore exciting career opportunities in computer science and find your path in tech
+
+ slideshow
+
+ # Your Future in Computer Science 🚀
+ ## Discover Endless Possibilities
+
+ ***
+
+ # Why Computer Science? 💡
+ - High demand across industries
+ - Competitive salaries
+ - Remote work opportunities
+ - Constant learning & growth
+ - Shape the future of technology
+
+ ***
+
+ # Popular Career Paths 🌟
+ - Software Engineering
+ - AI/Machine Learning
+ - Cybersecurity
+ - Cloud Computing
+ - Data Science
+ - Game Development
+
+ ***
+
+ # Where to Start? 🎯
+ 1. Build a strong foundation (algorithms, data structures)
+ 2. Choose your specialization
+ 3. Create personal projects
+ 4. Network with professionals
+ 5. Stay current with tech trends
+
+ ***
+
+ # Success Tips 🌈
+ - Contribute to open source
+ - Build an online presence
+ - Join tech communities
+ - Never stop learning
+ - Find a mentor
+
+ ***
+
+ # Resources & Next Steps 🎓
+ - Online learning platforms
+ - Tech meetups & conferences
+ - GitHub projects
+ - LinkedIn networking
+ - Tech blogs & podcasts
+
+ Let's begin your tech journey!
+
+ ****
prompt.json
Changed around line 1
+ {
+ "id": "msg_01LLShP1RFnMmGqwhB5xLKak",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create an engaging slideshow about computer science career opportunities.\n\n---domain---\ntechpaths.scroll.pub\n\n---index.scroll---\ntitle Career Paths in Computer Science: Your Journey Starts Here\nmetaTags\nkeywords Computer Science careers, tech jobs, programming careers, CS opportunities\ndescription Explore exciting career opportunities in computer science and find your path in tech\n\nslideshow\n\n# Your Future in Computer Science 🚀\n## Discover Endless Possibilities\n\n***\n\n# Why Computer Science? 💡\n- High demand across industries\n- Competitive salaries\n- Remote work opportunities\n- Constant learning & growth\n- Shape the future of technology\n\n***\n\n# Popular Career Paths 🌟\n- Software Engineering\n- AI/Machine Learning\n- Cybersecurity\n- Cloud Computing\n- Data Science\n- Game Development\n\n***\n\n# Where to Start? 🎯\n1. Build a strong foundation (algorithms, data structures)\n2. Choose your specialization\n3. Create personal projects\n4. Network with professionals\n5. Stay current with tech trends\n\n***\n\n# Success Tips 🌈\n- Contribute to open source\n- Build an online presence\n- Join tech communities\n- Never stop learning\n- Find a mentor\n\n***\n\n# Resources & Next Steps 🎓\n- Online learning platforms\n- Tech meetups & conferences\n- GitHub projects\n- LinkedIn networking\n- Tech blogs & podcasts\n\nLet's begin your tech journey!\n\n****\n\n---style.css---\n:root {\n --gradient-bg: linear-gradient(135deg, #1a1a2e, #16213e, #1a1a2e);\n --text-primary: #ffffff;\n --text-secondary: #8a8fa3;\n --accent: #4a90e2;\n}\n\nbody {\n background: var(--gradient-bg);\n color: var(--text-primary);\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 20px;\n min-height: 100vh;\n}\n\n.slideContent {\n max-width: 800px;\n margin: 0 auto;\n padding: 40px 20px;\n text-align: center;\n animation: fadeIn 0.5s ease-in;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 1.5rem;\n background: linear-gradient(45deg, #4a90e2, #63b3ed);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n}\n\nul, ol {\n text-align: left;\n display: inline-block;\n margin: 20px auto;\n}\n\nli {\n margin: 12px 0;\n font-size: 1.2rem;\n color: var(--text-secondary);\n}\n\n.slideshowNav {\n position: fixed;\n bottom: 30px;\n left: 0;\n right: 0;\n background: rgba(0,0,0,0.3);\n padding: 15px;\n backdrop-filter: blur(5px);\n border-radius: 50px;\n max-width: 200px;\n margin: 0 auto;\n}\n\n.slideshowNav a {\n color: var(--text-primary);\n transition: color 0.3s ease;\n}\n\n.slideshowNav a:hover {\n color: var(--accent);\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@media (max-width: 768px) {\n h1 { font-size: 2rem; }\n .slideContent { padding: 20px 10px; }\n li { font-size: 1rem; }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Add sparkle effect to headings\n const headings = document.querySelectorAll('h1');\n headings.forEach(heading => {\n heading.addEventListener('mouseover', () => {\n heading.style.transform = 'scale(1.05)';\n heading.style.transition = 'transform 0.3s ease';\n });\n heading.addEventListener('mouseout', () => {\n heading.style.transform = 'scale(1)';\n });\n });\n});\n\n---end---\n\nThis slideshow features:\n- Modern gradient background\n- Smooth animations and transitions\n- Responsive design\n- Interactive elements\n- Clean, professional typography\n- Accessible color contrast\n- Mobile-friendly layout\n- Elegant navigation\n- Consistent branding\n- Engaging emojis for visual interest\n\nThe content is structured to inspire while providing practical steps and resources for aspiring computer scientists."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 643,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1217
+ }
+ }
readme.scroll
Changed around line 1
+ # techpaths.scroll.pub
+
+ Prompt: slideshow
+ Agent: claude
+ Model: claude-3-5-sonnet-20241022
+
+ ## User prompt
+ Talks about how to explore career opportunities as a computer scientist
+
+ ## System prompt
+ You are an expert design agency tasked with helping someone create a slideshow. Create a slideshow based on this request: "Talks about how to explore career opportunities as a computer scientist"
+
+ Requirements:
+ - Make the slideshow inspirational, concise, witty.
+ - The scroll slideshow keyword automatically injects javascript to handle the showing/hiding of slide content, navigation, urls, etc. You just need to add content and style.
+ - Use mostly Scroll, but you can also use CSS, HTML and JavaScript (NO frameworks, NO external dependencies)
+ - Make it mobile-responsive
+ - 5-10 slides
+ - Follow modern best practices and accessibility guidelines
+ - Keep it simple but professional
+ - Use only relative links and no external resources
+ - Do not put a copyright symbol or all rights reserved or confidential or any of that mumbo jumbo.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+
+ Below is the Scroll Parser that implements the Slideshow. This should give you the class names for the styles.
+ slideshowParser
+ // Left and right arrows navigate.
+ description Slideshow widget. *** delimits slides.
+ extends abstractScrollWithRequirementsParser
+ string copyFromExternal .jquery-3.7.1.min.js .slideshow.js
+ example
+ slideshow
+ Why did the cow cross the road?
+ ***
+ Because it wanted to go to the MOOOO-vies.
+ ***
+ THE END
+ ****
+ javascript
+ buildHtml() {
+ return \`\`
+ }
+
+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:
+
+ ---domain---
+ (domainscroll.pub here)
+ ---index.scroll---
+ buildTxt
+ buildHtml
+ title (slideshow title for meta tags)
+ metaTags
+ style.css
+ script.js
+ slideshow
+ ***
+
+ (first slide)
+
+ ***
+
+ (slides here, delimited by ***)
+
+ ***
+
+ (Final slide)
+
+ ****
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (Any JavaScript content here, if needed)
+ ---end---
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Add sparkle effect to headings
+ const headings = document.querySelectorAll('h1');
+ headings.forEach(heading => {
+ heading.addEventListener('mouseover', () => {
+ heading.style.transform = 'scale(1.05)';
+ heading.style.transition = 'transform 0.3s ease';
+ });
+ heading.addEventListener('mouseout', () => {
+ heading.style.transform = 'scale(1)';
+ });
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --gradient-bg: linear-gradient(135deg, #1a1a2e, #16213e, #1a1a2e);
+ --text-primary: #ffffff;
+ --text-secondary: #8a8fa3;
+ --accent: #4a90e2;
+ }
+
+ body {
+ background: var(--gradient-bg);
+ color: var(--text-primary);
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ margin: 0;
+ padding: 20px;
+ min-height: 100vh;
+ }
+
+ .slideContent {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 40px 20px;
+ text-align: center;
+ animation: fadeIn 0.5s ease-in;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1.5rem;
+ background: linear-gradient(45deg, #4a90e2, #63b3ed);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+ }
+
+ ul, ol {
+ text-align: left;
+ display: inline-block;
+ margin: 20px auto;
+ }
+
+ li {
+ margin: 12px 0;
+ font-size: 1.2rem;
+ color: var(--text-secondary);
+ }
+
+ .slideshowNav {
+ position: fixed;
+ bottom: 30px;
+ left: 0;
+ right: 0;
+ background: rgba(0,0,0,0.3);
+ padding: 15px;
+ backdrop-filter: blur(5px);
+ border-radius: 50px;
+ max-width: 200px;
+ margin: 0 auto;
+ }
+
+ .slideshowNav a {
+ color: var(--text-primary);
+ transition: color 0.3s ease;
+ }
+
+ .slideshowNav a:hover {
+ color: var(--accent);
+ }
+
+ @keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+ }
+
+ @media (max-width: 768px) {
+ h1 { font-size: 2rem; }
+ .slideContent { padding: 20px 10px; }
+ li { font-size: 1rem; }
+ }