From 198bef2c4a13c724d74967e263b9ca41a3abfa48 Mon Sep 17 00:00:00 2001 From: Robby Zambito Date: Tue, 29 Jul 2025 19:09:30 -0400 Subject: Initial fancy site This is generated by Kagi Code. Prompt used: Write a really nice, modern looking, static HTML page. It can reference CSS and JS files, so long as you create both of them also, and they can be statically served. --- static/index.html | 170 ++++++++++++++++++++- static/script.js | 157 +++++++++++++++++++ static/styles.css | 448 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 768 insertions(+), 7 deletions(-) create mode 100644 static/script.js create mode 100644 static/styles.css (limited to 'static') diff --git a/static/index.html b/static/index.html index 0e5ea7b..d5b5cd4 100644 --- a/static/index.html +++ b/static/index.html @@ -1,8 +1,164 @@ - - - This is a good page! - - - Hello, world! - + + + + + + Alex Chen - Creative Developer + + + + + + +
+
+
+

+ Creative Developer +
& Digital Designer +

+

Crafting beautiful digital experiences with modern web technologies

+
+ + +
+
+
+
+
+
+
+
+ +
+
+

About Me

+
+
+

I'm a passionate full-stack developer with 5+ years of experience creating digital solutions that combine beautiful design with robust functionality.

+
+
React
+
TypeScript
+
Node.js
+
Python
+
AWS
+
Design Systems
+
+
+
+
+
50+
+
Projects Completed
+
+
+
5+
+
Years Experience
+
+
+
25+
+
Happy Clients
+
+
+
+
+
+ +
+
+

Featured Projects

+
+
+
+
+

E-Commerce Platform

+

Modern React-based shopping platform with real-time inventory management

+
+ React + Node.js + MongoDB +
+
+
+
+
+
+

Analytics Dashboard

+

Data visualization dashboard with interactive charts and real-time updates

+
+ Vue.js + D3.js + Python +
+
+
+
+
+
+

Mobile App

+

Cross-platform mobile application for task management and productivity

+
+ React Native + Firebase + Redux +
+
+
+
+
+
+ +
+
+

Let's Work Together

+
+
+

Get in touch

+

Ready to start your next project? Let's discuss how we can bring your ideas to life.

+
+ Email: alex@example.com +
+
+ Phone: +1 (555) 123-4567 +
+
+
+
+ +
+
+ +
+
+ +
+ +
+
+
+
+
+ + + + + diff --git a/static/script.js b/static/script.js new file mode 100644 index 0000000..e1fd02c --- /dev/null +++ b/static/script.js @@ -0,0 +1,157 @@ +// Smooth scrolling for navigation links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); +}); + +// Mobile menu toggle +const hamburger = document.querySelector('.hamburger'); +const navMenu = document.querySelector('.nav-menu'); + +hamburger.addEventListener('click', () => { + hamburger.classList.toggle('active'); + navMenu.classList.toggle('active'); +}); + +// Close mobile menu when clicking on a link +document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => { + hamburger.classList.remove('active'); + navMenu.classList.remove('active'); +})); + +// Navbar background on scroll +window.addEventListener('scroll', () => { + const navbar = document.querySelector('.navbar'); + if (window.scrollY > 50) { + navbar.style.background = 'rgba(255, 255, 255, 0.98)'; + } else { + navbar.style.background = 'rgba(255, 255, 255, 0.95)'; + } +}); + +// Intersection Observer for animations +const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' +}; + +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); +}, observerOptions); + +// Observe elements for animation +document.querySelectorAll('.project-card, .stat, .about-text').forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(30px)'; + el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; + observer.observe(el); +}); + +// Form submission +document.querySelector('.contact-form').addEventListener('submit', function(e) { + e.preventDefault(); + + // Get form data + const formData = new FormData(this); + const name = this.querySelector('input[type="text"]').value; + const email = this.querySelector('input[type="email"]').value; + const message = this.querySelector('textarea').value; + + // Simple validation + if (!name || !email || !message) { + alert('Please fill in all fields'); + return; + } + + // Simulate form submission + const submitBtn = this.querySelector('button[type="submit"]'); + const originalText = submitBtn.textContent; + + submitBtn.textContent = 'Sending...'; + submitBtn.disabled = true; + + setTimeout(() => { + alert('Thank you for your message! I\'ll get back to you soon.'); + this.reset(); + submitBtn.textContent = originalText; + submitBtn.disabled = false; + }, 2000); +}); + +// Add typing animation to hero title +const heroTitle = document.querySelector('.hero-title'); +if (heroTitle) { + const text = heroTitle.innerHTML; + heroTitle.innerHTML = ''; + + let i = 0; + const typeWriter = () => { + if (i < text.length) { + heroTitle.innerHTML += text.charAt(i); + i++; + setTimeout(typeWriter, 50); + } + }; + + // Start typing animation after page load + window.addEventListener('load', () => { + setTimeout(typeWriter, 500); + }); +} + +// Parallax effect for floating cards +window.addEventListener('scroll', () => { + const scrolled = window.pageYOffset; + const parallaxElements = document.querySelectorAll('.floating-card'); + + parallaxElements.forEach((element, index) => { + const speed = 0.5 + (index * 0.1); + const yPos = -(scrolled * speed); + element.style.transform = `translateY(${yPos}px)`; + }); +}); + +// Add mobile menu styles dynamically +const style = document.createElement('style'); +style.textContent = ` + @media (max-width: 768px) { + .nav-menu.active { + display: flex; + position: absolute; + top: 100%; + left: 0; + width: 100%; + background: white; + flex-direction: column; + padding: 1rem 2rem; + box-shadow: var(--shadow); + border-top: 1px solid var(--border); + } + + .hamburger.active span:nth-child(1) { + transform: rotate(-45deg) translate(-5px, 6px); + } + + .hamburger.active span:nth-child(2) { + opacity: 0; + } + + .hamburger.active span:nth-child(3) { + transform: rotate(45deg) translate(-5px, -6px); + } + } +`; +document.head.appendChild(style); diff --git a/static/styles.css b/static/styles.css new file mode 100644 index 0000000..98ce52e --- /dev/null +++ b/static/styles.css @@ -0,0 +1,448 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary-color: #6366f1; + --primary-dark: #4f46e5; + --secondary-color: #f1f5f9; + --text-primary: #1e293b; + --text-secondary: #64748b; + --background: #ffffff; + --surface: #f8fafc; + --border: #e2e8f0; + --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1); + --gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); +} + +body { + font-family: 'Inter', sans-serif; + line-height: 1.6; + color: var(--text-primary); + background: var(--background); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +/* Navigation */ +.navbar { + position: fixed; + top: 0; + width: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + z-index: 1000; + border-bottom: 1px solid var(--border); +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 1rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.nav-logo { + font-size: 1.5rem; + font-weight: 700; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.nav-menu { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-link { + text-decoration: none; + color: var(--text-primary); + font-weight: 500; + transition: color 0.3s ease; +} + +.nav-link:hover { + color: var(--primary-color); +} + +.hamburger { + display: none; + flex-direction: column; + cursor: pointer; +} + +.hamburger span { + width: 25px; + height: 3px; + background: var(--text-primary); + margin: 3px 0; + transition: 0.3s; +} + +/* Hero Section */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + padding: 0 2rem; + background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); + position: relative; + overflow: hidden; +} + +.hero-content { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.hero-title { + font-size: 3.5rem; + font-weight: 700; + line-height: 1.1; + margin-bottom: 1.5rem; +} + +.gradient-text { + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-subtitle { + font-size: 1.25rem; + color: var(--text-secondary); + margin-bottom: 2rem; +} + +.hero-buttons { + display: flex; + gap: 1rem; +} + +.btn { + padding: 0.75rem 2rem; + border: none; + border-radius: 0.5rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-decoration: none; + display: inline-block; +} + +.btn-primary { + background: var(--gradient); + color: white; + box-shadow: var(--shadow); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.btn-secondary { + background: white; + color: var(--text-primary); + border: 2px solid var(--border); +} + +.btn-secondary:hover { + border-color: var(--primary-color); + color: var(--primary-color); +} + +.hero-visual { + position: relative; + height: 400px; +} + +.floating-card { + position: absolute; + border-radius: 1rem; + box-shadow: var(--shadow-lg); + animation: float 6s ease-in-out infinite; +} + +.card-1 { + width: 200px; + height: 120px; + background: var(--gradient); + top: 20%; + left: 10%; + animation-delay: 0s; +} + +.card-2 { + width: 160px; + height: 100px; + background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); + top: 50%; + right: 20%; + animation-delay: 2s; +} + +.card-3 { + width: 180px; + height: 110px; + background: linear-gradient(135deg, #10b981 0%, #059669 100%); + bottom: 20%; + left: 30%; + animation-delay: 4s; +} + +@keyframes float { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-20px); } +} + +/* Sections */ +.section-title { + font-size: 2.5rem; + font-weight: 700; + text-align: center; + margin-bottom: 3rem; +} + +.about { + padding: 6rem 0; + background: var(--background); +} + +.about-grid { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 4rem; + align-items: center; +} + +.about-text p { + font-size: 1.125rem; + color: var(--text-secondary); + margin-bottom: 2rem; +} + +.skills { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +.skill-item { + background: var(--surface); + padding: 0.5rem 1rem; + border-radius: 2rem; + font-size: 0.875rem; + font-weight: 500; + border: 1px solid var(--border); +} + +.about-stats { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.stat { + text-align: center; + padding: 1.5rem; + background: white; + border-radius: 1rem; + box-shadow: var(--shadow); +} + +.stat-number { + font-size: 2rem; + font-weight: 700; + color: var(--primary-color); +} + +.stat-label { + color: var(--text-secondary); + font-size: 0.875rem; +} + +.projects { + padding: 6rem 0; + background: var(--surface); +} + +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2rem; +} + +.project-card { + background: white; + border-radius: 1rem; + overflow: hidden; + box-shadow: var(--shadow); + transition: transform 0.3s ease; +} + +.project-card:hover { + transform: translateY(-5px); +} + +.project-image { + height: 200px; + background: var(--gradient); +} + +.project-content { + padding: 1.5rem; +} + +.project-content h3 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.project-content p { + color: var(--text-secondary); + margin-bottom: 1rem; +} + +.project-tags { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.project-tags span { + background: var(--surface); + padding: 0.25rem 0.75rem; + border-radius: 1rem; + font-size: 0.75rem; + color: var(--text-secondary); +} + +.contact { + padding: 6rem 0; + background: var(--background); +} + +.contact-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; +} + +.contact-info h3 { + font-size: 1.5rem; + margin-bottom: 1rem; +} + +.contact-info p { + color: var(--text-secondary); + margin-bottom: 2rem; +} + +.contact-item { + margin-bottom: 1rem; +} + +.contact-form { + background: white; + padding: 2rem; + border-radius: 1rem; + box-shadow: var(--shadow); +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 0.75rem; + border: 1px solid var(--border); + border-radius: 0.5rem; + font-family: inherit; + transition: border-color 0.3s ease; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--primary-color); +} + +.footer { + background: var(--text-primary); + color: white; + text-align: center; + padding: 2rem 0; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .hamburger { + display: flex; + } + + .nav-menu { + display: none; + } + + .hero-content { + grid-template-columns: 1fr; + text-align: center; + } + + .hero-title { + font-size: 2.5rem; + } + + .about-grid, + .contact-content { + grid-template-columns: 1fr; + } + + .hero-buttons { + flex-direction: column; + align-items: center; + } + + .btn { + width: 200px; + } +} + +@media (max-width: 480px) { + .container { + padding: 0 1rem; + } + + .hero { + padding: 0 1rem; + } + + .hero-title { + font-size: 2rem; + } + + .projects-grid { + grid-template-columns: 1fr; + } +} -- cgit