diff --git a/404.html b/404.html new file mode 100644 index 0000000..4bdd456 --- /dev/null +++ b/404.html @@ -0,0 +1,219 @@ +--- +layout: default +title: Page Not Found +description: The page you're looking for could not be found. Return to CodeStorm Hub homepage or explore our services. +keywords: 404, page not found, error +permalink: /404.html +--- + + +
+
+
+
+
404
+
+ +
+
+

Page Not Found

+

+ Oops! The page you're looking for seems to have wandered off into the digital void. + Don't worry, even the best code sometimes takes unexpected paths. +

+
+ + + Back to Home + + + + Contact Support + +
+
+
+
+ + +
+
+
+

Maybe you're looking for:

+
+ +
+ +
+

Our Services

+

Explore our technology solutions

+ + +
+ +
+

Portfolio

+

View our completed projects

+ + +
+ +
+

About Us

+

Learn about our team

+ + +
+ +
+

Contact

+

Get in touch with us

+ +
+
+
+
+ + \ No newline at end of file diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..0c2a3a7 --- /dev/null +++ b/Gemfile @@ -0,0 +1,50 @@ +source "https://rubygems.org" +# Hello! This is where you manage which Jekyll version is used to run. +# When you want to use a different version, change it below, save the +# file and run `bundle install`. Run Jekyll with `bundle exec`, like so: +# +# bundle exec jekyll serve +# +# This will help ensure the proper Jekyll version is running. +# Happy Jekylling! + +# Use GitHub Pages compatible version +gem "github-pages", "~> 231", group: :jekyll_plugins + +# If you want to use Jekyll native, uncomment this line: +# gem "jekyll", "~> 4.3.3" + +# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem +# and associated library. +platforms :mingw, :x64_mingw, :mswin, :jruby do + gem "tzinfo", ">= 1", "< 3" + gem "tzinfo-data" +end + +# Performance-booster for watching directories on Windows +gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin] + +# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem +# do not have a Java counterpart. +gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby] + +# Jekyll plugins for enhanced functionality +group :jekyll_plugins do + gem "jekyll-feed", "~> 0.12" + gem "jekyll-sitemap" + gem "jekyll-seo-tag" + gem "jekyll-paginate" + gem "jekyll-compose" + gem "jekyll-redirect-from" + gem "jekyll-minifier" + gem "jekyll-imageoptim" +end + +# Development and testing gems +group :development, :test do + gem "html-proofer" + gem "rake" + gem "rspec" + gem "capybara" + gem "selenium-webdriver" +end \ No newline at end of file diff --git a/Rakefile b/Rakefile new file mode 100644 index 0000000..a0bad86 --- /dev/null +++ b/Rakefile @@ -0,0 +1,132 @@ +require 'rake' +require 'rspec/core/rake_task' +require 'html-proofer' + +# Default task +task default: [:test] + +# Define test task +task test: [:spec, :htmlproofer] + +# RSpec task +RSpec::Core::RakeTask.new(:spec) do |t| + t.pattern = 'spec/**/*_spec.rb' + t.rspec_opts = '--format documentation --color' +end + +# Jekyll build task +task :build do + puts "Building Jekyll site..." + system('bundle exec jekyll build') +end + +# Jekyll serve task for development +task :serve do + puts "Starting Jekyll development server..." + system('bundle exec jekyll serve --livereload') +end + +# HTML Proofer task for link checking +task :htmlproofer => :build do + puts "Running HTML Proofer..." + HTMLProofer.check_directory( + "./_site", + { + assume_extension: true, + check_html: true, + check_img_http: true, + disable_external: true, # Disable external link checking for faster tests + empty_alt_ignore: true, + allow_hash_href: true, + url_ignore: [/localhost/, /127.0.0.1/, /example\.com/] + } + ).run +end + +# Lighthouse performance testing (requires lighthouse CLI) +task :lighthouse => :build do + puts "Running Lighthouse audit..." + urls = ['http://localhost:4000/', 'http://localhost:4000/about/', 'http://localhost:4000/contact/'] + + # Start Jekyll server for testing + pid = spawn('bundle exec jekyll serve --port 4000') + sleep 5 # Wait for server to start + + begin + urls.each do |url| + puts "Auditing #{url}..." + system("npx lighthouse #{url} --chrome-flags='--headless' --quiet --output json --output-path /tmp/lighthouse-#{url.gsub(/[^\w]/, '')}.json") + end + ensure + Process.kill('TERM', pid) + end +end + +# Security audit task +task :security do + puts "Running security checks..." + + # Check for common security issues + puts "Checking for exposed sensitive files..." + sensitive_files = ['.env', '.env.local', 'config/database.yml', 'id_rsa', '.ssh/'] + + sensitive_files.each do |file| + if File.exist?(file) + puts "WARNING: Sensitive file #{file} found!" + end + end + + # Check for CSP headers in _config.yml + if File.exist?('_config.yml') + config = File.read('_config.yml') + unless config.include?('content_security_policy') || config.include?('csp') + puts "RECOMMENDATION: Add Content Security Policy headers" + end + end + + puts "Security check complete." +end + +# Clean task +task :clean do + puts "Cleaning build artifacts..." + FileUtils.rm_rf(['./_site', './.sass-cache', './.jekyll-cache']) +end + +# Deploy task (for GitHub Pages) +task :deploy => [:test, :build] do + puts "Site ready for deployment!" + puts "Commit and push to main branch to deploy to GitHub Pages." +end + +# Development workflow task +task :dev do + puts "Starting development workflow..." + puts "1. Installing dependencies..." + system('bundle install') + + puts "2. Building site..." + Rake::Task[:build].execute + + puts "3. Running tests..." + Rake::Task[:test].execute + + puts "4. Starting development server..." + Rake::Task[:serve].execute +end + +desc "Show available tasks" +task :help do + puts "Available tasks:" + puts " rake build - Build the Jekyll site" + puts " rake serve - Start development server" + puts " rake test - Run all tests" + puts " rake spec - Run RSpec tests only" + puts " rake htmlproofer - Run HTML validation" + puts " rake lighthouse - Run Lighthouse audit" + puts " rake security - Run security checks" + puts " rake clean - Clean build artifacts" + puts " rake deploy - Test and prepare for deployment" + puts " rake dev - Full development workflow" + puts " rake help - Show this help" +end \ No newline at end of file diff --git a/_config.yml b/_config.yml index d45562d..27059bb 100644 --- a/_config.yml +++ b/_config.yml @@ -70,4 +70,31 @@ social: google_analytics: G-XXXXXXXXXX # Contact form settings -contact_form_action: "https://formspree.io/f/your-form-id" \ No newline at end of file +contact_form_action: "https://formspree.io/f/your-form-id" + +# Performance and SEO settings +permalink: pretty +future: false +show_drafts: false +safe: true + +# Compression settings +sass: + style: compressed + sourcemap: never + +# Content Security Policy +content_security_policy: + default_src: "'self'" + script_src: "'self' 'unsafe-inline' https://www.googletagmanager.com https://www.google-analytics.com https://cdnjs.cloudflare.com" + style_src: "'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com" + font_src: "'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com" + img_src: "'self' data: https: *.google-analytics.com" + connect_src: "'self' https://www.google-analytics.com" + +# Additional meta tags +meta_tags: + robots: "index, follow" + rating: "general" + distribution: "global" + charset: "utf-8" \ No newline at end of file diff --git a/_includes/breadcrumb.html b/_includes/breadcrumb.html new file mode 100644 index 0000000..b263fed --- /dev/null +++ b/_includes/breadcrumb.html @@ -0,0 +1,98 @@ + +{% unless page.url == '/' %} + + + +{% endunless %} \ No newline at end of file diff --git a/_includes/critical.css b/_includes/critical.css new file mode 100644 index 0000000..d4f6c38 --- /dev/null +++ b/_includes/critical.css @@ -0,0 +1,306 @@ +/* Critical CSS - Above the fold styles for CodeStorm Hub */ +/* This file contains only the essential styles needed for the initial page render */ + +/* CSS Variables - Essential only */ +:root { + --primary-color: #6366f1; + --primary-dark: #4f46e5; + --white: #ffffff; + --gray-100: #f3f4f6; + --gray-200: #e5e7eb; + --gray-500: #6b7280; + --gray-700: #374151; + --gray-900: #111827; + --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --text-base: 1rem; + --text-lg: 1.125rem; + --text-xl: 1.25rem; + --text-2xl: 1.5rem; + --text-3xl: 1.875rem; + --text-4xl: 2.25rem; + --text-5xl: 3rem; + --space-4: 1rem; + --space-6: 1.5rem; + --space-8: 2rem; + --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +[data-theme="dark"] { + --text-color: var(--gray-100); + --text-secondary: var(--gray-300); + --bg-color: var(--gray-900); + --bg-secondary: var(--gray-800); + --border-color: var(--gray-700); +} + +[data-theme="light"] { + --text-color: var(--gray-900); + --text-secondary: var(--gray-700); + --bg-color: var(--white); + --bg-secondary: var(--gray-100); + --border-color: var(--gray-200); +} + +/* Essential Reset */ +*, *::before, *::after { + box-sizing: border-box; +} + +* { + margin: 0; + padding: 0; +} + +html { + font-size: 16px; + scroll-behavior: smooth; +} + +body { + font-family: var(--font-primary); + font-size: var(--text-base); + line-height: 1.6; + color: var(--text-color); + background-color: var(--bg-color); + transition: var(--transition); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Typography - Critical only */ +h1, h2, h3 { + font-family: var(--font-heading); + font-weight: 600; + line-height: 1.3; + margin-bottom: var(--space-4); + color: var(--text-color); +} + +h1 { font-size: var(--text-5xl); } +h2 { font-size: var(--text-4xl); } +h3 { font-size: var(--text-3xl); } + +p { + margin-bottom: var(--space-4); + color: var(--text-secondary); +} + +a { + color: var(--primary-color); + text-decoration: none; + transition: var(--transition-fast); +} + +/* Container */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--space-6); +} + +/* Header - Critical styles only */ +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + background-color: var(--bg-color); + border-bottom: 1px solid var(--border-color); + transition: var(--transition); +} + +.navbar { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) 0; +} + +.navbar-brand { + font-size: var(--text-xl); + font-weight: 700; + color: var(--primary-color); +} + +/* Hero Section - Above the fold */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + position: relative; + overflow: hidden; + background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-secondary) 100%); + padding-top: 80px; +} + +.hero-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-8); + align-items: center; + width: 100%; +} + +.hero-title { + font-size: var(--text-5xl); + font-weight: 700; + margin-bottom: var(--space-6); + line-height: 1.2; +} + +.gradient-text { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-description { + font-size: var(--text-lg); + margin-bottom: var(--space-8); + color: var(--text-secondary); +} + +/* Buttons - Critical only */ +.btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: 12px 24px; + border: none; + border-radius: 6px; + font-weight: 500; + text-decoration: none; + transition: var(--transition-fast); + cursor: pointer; +} + +.btn-primary { + background-color: var(--primary-color); + color: var(--white); +} + +.btn-primary:hover { + background-color: var(--primary-dark); + color: var(--white); +} + +.btn-outline { + background-color: transparent; + color: var(--primary-color); + border: 1px solid var(--primary-color); +} + +.btn-lg { + padding: 16px 32px; + font-size: var(--text-lg); +} + +.hero-buttons { + display: flex; + gap: var(--space-4); + margin-bottom: var(--space-8); +} + +/* Mobile Navigation - Critical */ +.mobile-menu-btn { + display: none; + flex-direction: column; + gap: 4px; + background: none; + border: none; + cursor: pointer; + padding: var(--space-2); +} + +.hamburger-line { + width: 24px; + height: 2px; + background-color: var(--text-color); + transition: var(--transition-fast); +} + +/* Skip Link for Accessibility */ +.skip-link { + position: absolute; + top: -40px; + left: 6px; + background: var(--primary-color); + color: var(--white); + padding: 8px; + text-decoration: none; + z-index: 100; +} + +.skip-link:focus { + top: 6px; +} + +/* Loading Spinner - Critical */ +.loading-spinner { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--bg-color); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + opacity: 1; + transition: opacity 0.3s ease; +} + +.loading-spinner.hidden { + opacity: 0; + pointer-events: none; +} + +.spinner { + width: 40px; + height: 40px; + border: 4px solid var(--border-color); + border-top: 4px solid var(--primary-color); + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Responsive - Mobile First Critical Styles */ +@media (max-width: 768px) { + .container { + padding: 0 var(--space-4); + } + + .hero-content { + grid-template-columns: 1fr; + text-align: center; + } + + .hero-title { + font-size: var(--text-4xl); + } + + .btn-lg { + padding: 14px 28px; + font-size: var(--text-base); + } + + .hero-buttons { + flex-direction: column; + align-items: center; + } + + .mobile-menu-btn { + display: flex; + } +} \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index b860c64..98325d1 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -6,6 +6,12 @@ + + + + + + @@ -13,14 +19,27 @@ + + + + + + + + + + + + + {% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %} @@ -35,8 +54,14 @@ - - + + + + + + + + {% if page.url == '/' %} + + + {% endif %} + + {% if page.layout == 'post' or page.layout == 'project' %} + + + {% endif %} \ No newline at end of file diff --git a/about.html b/about.html index cd57c39..fcf76cc 100644 --- a/about.html +++ b/about.html @@ -173,13 +173,13 @@

Meet Our Team

Alex Chen
- - -
@@ -199,13 +199,13 @@

Alex Chen

Sarah Johnson
- - -
@@ -225,13 +225,13 @@

Sarah Johnson

Michael Rodriguez
- - -
@@ -251,13 +251,13 @@

Michael Rodriguez

Emily Davis
- - -
@@ -277,13 +277,13 @@

Emily Davis

David Kim
- - -
@@ -303,13 +303,13 @@

David Kim

Lisa Wang
- - -
diff --git a/assets/css/style.css b/assets/css/style.css index ed51f1e..6f01788 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -83,9 +83,9 @@ /* Dark Theme Variables */ [data-theme="dark"] { - --text-color: var(--gray-100); - --text-secondary: var(--gray-300); - --text-muted: var(--gray-400); + --text-color: #f9fafb; + --text-secondary: #e5e7eb; + --text-muted: #9ca3af; --bg-color: var(--gray-900); --bg-secondary: var(--gray-800); --bg-tertiary: var(--gray-700); @@ -97,7 +97,7 @@ [data-theme="light"] { --text-color: var(--gray-900); --text-secondary: var(--gray-700); - --text-muted: var(--gray-500); + --text-muted: var(--gray-600); --bg-color: var(--white); --bg-secondary: var(--gray-50); --bg-tertiary: var(--gray-100); @@ -133,6 +133,22 @@ body { -moz-osx-font-smoothing: grayscale; } +/* Prevent scrolling when mobile menu is open */ +body.menu-open { + overflow: hidden; +} + +/* Mobile specific styles */ +body.is-mobile .hero-particles { + animation-duration: 30s; +} + +/* Touch active state for mobile */ +.touch-active { + opacity: 0.8 !important; + transition: opacity 0.15s ease; +} + /* Typography */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); @@ -182,6 +198,58 @@ img { } } +/* Utility Classes for Performance */ +.flex { display: flex; } +.flex-col { flex-direction: column; } +.items-center { align-items: center; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.gap-2 { gap: var(--space-2); } +.gap-4 { gap: var(--space-4); } +.gap-6 { gap: var(--space-6); } +.gap-8 { gap: var(--space-8); } + +.text-center { text-align: center; } +.text-left { text-align: left; } +.text-right { text-align: right; } + +.mb-4 { margin-bottom: var(--space-4); } +.mb-6 { margin-bottom: var(--space-6); } +.mb-8 { margin-bottom: var(--space-8); } +.mt-4 { margin-top: var(--space-4); } +.mt-6 { margin-top: var(--space-6); } +.mt-8 { margin-top: var(--space-8); } + +.p-4 { padding: var(--space-4); } +.p-6 { padding: var(--space-6); } +.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } +.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } + +.w-full { width: 100%; } +.h-full { height: 100%; } +.min-h-screen { min-height: 100vh; } + +.rounded { border-radius: var(--radius); } +.rounded-lg { border-radius: var(--radius-lg); } +.shadow { box-shadow: var(--shadow); } +.shadow-lg { box-shadow: var(--shadow-lg); } + +.transition { transition: var(--transition); } +.transition-fast { transition: var(--transition-fast); } + +.hidden { display: none; } +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + /* Skip Link for Accessibility */ .skip-link { position: absolute; @@ -1229,10 +1297,10 @@ section { .services-hero, .portfolio-hero, .contact-hero { - padding: var(--space-24) 0 var(--space-16); + padding: var(--space-16) 0 var(--space-16); background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-secondary) 100%); text-align: center; - margin-top: 80px; + margin-top: 0; /* Breadcrumb will handle spacing */ } .page-title { @@ -2498,6 +2566,352 @@ section { opacity: 1; } +.form-help { + display: block; + color: var(--text-muted); + font-size: var(--text-sm); + margin-top: var(--space-1); + line-height: 1.4; +} + +.form-status { + margin-top: var(--space-6); +} + +.success-message, +.error-message { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-4); + border-radius: var(--radius-md); + font-size: var(--text-sm); + transition: var(--transition); +} + +.success-message { + background-color: rgba(16, 185, 129, 0.1); + color: var(--success-color); + border: 1px solid rgba(16, 185, 129, 0.2); +} + +.error-message { + background-color: rgba(239, 68, 68, 0.1); + color: var(--error-color); + border: 1px solid rgba(239, 68, 68, 0.2); +} + +/* Enhanced form validation states */ +.form-input.error, +.form-select.error, +.form-textarea.error { + border-color: var(--error-color); + box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); +} + +.form-input.success, +.form-select.success, +.form-textarea.success { + border-color: var(--success-color); + box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); +} + +.character-counter { + font-size: var(--text-xs); + color: var(--text-muted); + text-align: right; + margin-top: var(--space-1); + transition: var(--transition-fast); +} + +/* Content Pages Styles */ +.page-hero { + background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-secondary) 100%); + padding: calc(80px + var(--space-8)) 0 var(--space-8) 0; + text-align: center; +} + +.content-section { + padding: var(--space-12) 0; +} + +.content-wrapper { + max-width: 800px; + margin: 0 auto; + line-height: 1.7; +} + +.content-wrapper h2 { + color: var(--primary-color); + margin-top: var(--space-8); + margin-bottom: var(--space-4); + font-size: var(--text-2xl); + border-bottom: 2px solid var(--border-color); + padding-bottom: var(--space-2); +} + +.content-wrapper h2:first-child { + margin-top: 0; +} + +.content-wrapper ul { + margin: var(--space-4) 0; + padding-left: var(--space-6); +} + +.content-wrapper li { + margin-bottom: var(--space-2); + color: var(--text-secondary); +} + +.content-wrapper a { + color: var(--primary-color); + font-weight: 500; +} + +.content-wrapper a:hover { + color: var(--primary-dark); + text-decoration: underline; +} + +/* Loading States and Micro-interactions */ +.btn { + position: relative; + overflow: hidden; +} + +.btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); + transition: left 0.5s; +} + +.btn:hover::before { + left: 100%; +} + +/* Card hover effects */ +.service-card, +.portfolio-item, +.team-member { + transition: var(--transition); +} + +.service-card:hover, +.portfolio-item:hover, +.team-member:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-xl); +} + +/* Loading skeleton for images */ +.image-skeleton { + background: linear-gradient( + 90deg, + var(--gray-200) 25%, + var(--gray-100) 50%, + var(--gray-200) 75% + ); + background-size: 200% 100%; + animation: loading-shimmer 1.5s infinite; +} + +@keyframes loading-shimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} + +/* Form loading states */ +.form-group.loading .form-input, +.form-group.loading .form-select, +.form-group.loading .form-textarea { + background-image: linear-gradient( + 90deg, + transparent 40%, + rgba(255, 255, 255, 0.1) 50%, + transparent 60% + ); + background-size: 200% 100%; + animation: input-shimmer 1.5s infinite; +} + +@keyframes input-shimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} + +/* Progress indicator */ +.progress-bar { + width: 100%; + height: 4px; + background-color: var(--gray-200); + border-radius: 2px; + overflow: hidden; + margin: var(--space-2) 0; +} + +.progress-fill { + height: 100%; + background: linear-gradient(90deg, var(--primary-color), var(--primary-light)); + border-radius: 2px; + transition: width 0.3s ease; + width: 0%; +} + +/* Toast notifications */ +.toast { + position: fixed; + top: 20px; + right: 20px; + background: var(--bg-color); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + padding: var(--space-4); + box-shadow: var(--shadow-lg); + z-index: var(--z-tooltip); + transform: translateX(100%); + opacity: 0; + transition: var(--transition); + max-width: 400px; +} + +.toast.show { + transform: translateX(0); + opacity: 1; +} + +.toast.success { + border-left: 4px solid var(--success-color); +} + +.toast.error { + border-left: 4px solid var(--error-color); +} + +.toast.warning { + border-left: 4px solid var(--warning-color); +} + +.toast-content { + display: flex; + flex-direction: column; + gap: var(--space-1); +} + +.toast-content strong { + font-size: var(--text-sm); + font-weight: 600; +} + +.toast-content p { + font-size: var(--text-sm); + margin: 0; + color: var(--text-secondary); +} + +.toast-close { + position: absolute; + top: var(--space-2); + right: var(--space-2); + background: none; + border: none; + color: var(--text-muted); + cursor: pointer; + padding: var(--space-1); + border-radius: var(--radius-sm); + transition: var(--transition-fast); +} + +.toast-close:hover { + color: var(--text-color); + background: var(--bg-secondary); +} + +/* Pulse animation for important elements */ +.pulse { + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); + } + 70% { + box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); + } +} + +/* Fade in animation for content */ +.fade-in { + opacity: 0; + transform: translateY(20px); + animation: fade-in 0.6s ease-out forwards; +} + +@keyframes fade-in { + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Scale animation for buttons */ +.btn:active { + transform: scale(0.95); + transition: transform 0.1s ease; +} + +/* Focus visible improvements for accessibility */ +.btn:focus-visible, +.form-input:focus-visible, +.form-select:focus-visible, +.form-textarea:focus-visible, +.theme-toggle:focus-visible, +.mobile-menu-btn:focus-visible { + outline: 2px solid var(--primary-color); + outline-offset: 2px; +} + +/* Reduce motion for users who prefer it */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .hero-particles { + animation: none; + } + + .scroll-progress { + transition: none; + } +} + .checkbox-container { display: flex; align-items: flex-start; @@ -2915,12 +3329,480 @@ section { } } +/* Enhanced Mobile Responsiveness for 320px and up */ +@media (max-width: 480px) { + .container { + padding: 0 var(--space-3); + } + + /* Enhanced Hero Section for mobile */ + .hero { + min-height: 80vh; + padding-top: 60px; + } + + .hero-title { + font-size: var(--text-3xl); + line-height: 1.2; + } + + .hero-description { + font-size: var(--text-base); + margin-bottom: var(--space-6); + } + + .hero-buttons { + gap: var(--space-3); + } + + .hero-buttons .btn { + width: 100%; + max-width: 280px; + padding: var(--space-3) var(--space-4); + } + + .hero-stats { + flex-direction: column; + gap: var(--space-4); + margin-top: var(--space-8); + } + + .stat { + padding: var(--space-4); + background: var(--card-bg); + border-radius: var(--radius-lg); + border: 1px solid var(--border-color); + } + + /* Services grid mobile optimization */ + .services-grid { + grid-template-columns: 1fr; + gap: var(--space-6); + } + + .service-card { + padding: var(--space-6); + } + + /* Portfolio grid mobile optimization */ + .portfolio-grid { + grid-template-columns: 1fr; + gap: var(--space-6); + } + + .portfolio-actions { + flex-direction: column; + gap: var(--space-2); + } + + .portfolio-actions .btn { + width: 100%; + } + + /* Testimonials mobile optimization */ + .testimonial-author { + flex-direction: column; + gap: var(--space-3); + } + + .author-info { + text-align: center; + } + + .testimonial-text p { + font-size: var(--text-lg); + } + + /* Page titles and sections */ + .page-title { + font-size: var(--text-3xl); + } + + .page-description { + font-size: var(--text-base); + } + + .section-title { + font-size: var(--text-3xl); + } + + .section-description { + font-size: var(--text-base); + } + + /* Form improvements for mobile */ + .form-row { + grid-template-columns: 1fr; + gap: var(--space-3); + } + + .form-input, + .form-select, + .form-textarea { + padding: var(--space-4); + font-size: max(16px, 1rem); /* Prevents zoom on iOS while respecting user preferences */ + } + + /* Button improvements for mobile */ + .btn { + padding: var(--space-4) var(--space-6); + font-size: var(--text-base); + min-height: 44px; /* Improve touch targets */ + } + + .btn-sm { + padding: var(--space-3) var(--space-5); + min-height: 40px; + } + + .btn-lg { + padding: var(--space-5) var(--space-8); + min-height: 48px; + } +} + +/* Disabled button styles */ +.btn-disabled, +.btn:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none !important; + box-shadow: none !important; +} + +.btn-disabled:hover, +.btn:disabled:hover { + transform: none !important; + box-shadow: none !important; +} + +/* Social link disabled state */ +.social-link.btn-disabled { + opacity: 0.5; + cursor: not-allowed; + pointer-events: none; +} + +/* Enhanced touch targets for mobile */ +@media (max-width: 768px) { + .nav-link { + padding: var(--space-4) 0; + font-size: var(--text-lg); + } + + .theme-toggle { + width: 48px; + height: 48px; + } + + .mobile-menu-btn { + width: 48px; + height: 48px; + padding: var(--space-3); + } + + .testimonial-nav-btn { + width: 16px; + height: 16px; + } + + /* Improve spacing for mobile */ + section { + padding: var(--space-16) 0; + } + + .section-header { + margin-bottom: var(--space-12); + } + + /* Portfolio filter mobile scrolling */ + .filter-tabs { + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + -ms-overflow-style: none; + } + + .filter-tabs::-webkit-scrollbar { + display: none; + } + + /* Enhanced focus states for accessibility */ + .nav-link:focus, + .btn:focus, + .theme-toggle:focus, + .mobile-menu-btn:focus { + outline: 2px solid var(--primary-color); + outline-offset: 2px; + } + + /* Loading spinner mobile */ + .loading-spinner { + backdrop-filter: blur(5px); + } + + .spinner { + width: 32px; + height: 32px; + } +} + +/* Typography scaling for very small screens */ +@media (max-width: 360px) { + html { + font-size: 14px; + } + + .hero-title { + font-size: calc(var(--text-2xl) + 0.5rem); + } + + .cta-title { + font-size: var(--text-3xl); + } +} + +/* Landscape mobile optimization */ +@media (max-width: 768px) and (orientation: landscape) { + .hero { + min-height: 70vh; + padding-top: 80px; + } + + .hero-content { + gap: var(--space-6); + } + + .hero-stats { + flex-direction: row; + justify-content: center; + gap: var(--space-6); + } +} + +/* Performance optimizations for mobile */ +@media (max-width: 768px) { + /* Reduce animation complexity on mobile */ + .hero-particles { + animation-duration: 30s; + } + + /* Simplify transforms for better performance */ + .service-card:hover, + .portfolio-item:hover, + .team-member:hover { + transform: translateY(-2px); + } + + /* Reduce blur effects on mobile for performance */ + .header { + backdrop-filter: blur(5px); + } + + .modal-overlay { + backdrop-filter: blur(3px); + } + + /* Enhanced form styles for mobile */ + .form-row { + grid-template-columns: 1fr; + gap: var(--space-4); + } + + .form-input, + .form-select, + .form-textarea { + font-size: 16px; /* Prevents zoom on iOS */ + padding: var(--space-4); + min-height: 44px; /* Better touch target */ + } + + .form-textarea { + min-height: 120px; + } + + .btn { + min-height: 44px; + padding: var(--space-4) var(--space-6); + font-size: var(--text-base); + } + + .btn-lg { + min-height: 48px; + padding: var(--space-5) var(--space-8); + } + + /* Better spacing for mobile forms */ + .contact-form-container { + grid-template-columns: 1fr; + gap: var(--space-8); + } + + .form-sidebar { + order: -1; /* Show sidebar before form on mobile */ + } + + /* Improved mobile navigation */ + .navbar-menu.active { + transform: translateY(0); + opacity: 1; + visibility: visible; + } + + .navbar-nav { + flex-direction: column; + gap: var(--space-2); + } + + .navbar-actions { + flex-direction: column; + gap: var(--space-4); + align-items: center; + margin-top: var(--space-6); + } + + /* Better mobile hero section */ + .hero-buttons { + gap: var(--space-3); + width: 100%; + } + + .hero-buttons .btn { + width: 100%; + justify-content: center; + } +} +} + +/* Scroll progress indicator */ +.scroll-progress { + position: fixed; + top: 0; + left: 0; + width: 0%; + height: 3px; + background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%); + z-index: var(--z-tooltip); + transition: width 0.1s ease-out; + opacity: 0; + transition: opacity 0.3s ease, width 0.1s ease-out; +} + +/* Image loading states */ +img.loading { + opacity: 0.5; + filter: blur(2px); + transition: all 0.3s ease; +} + +img.loaded { + opacity: 1; + filter: blur(0); +} + +img.error { + opacity: 0.5; + background: var(--bg-secondary); + display: inline-block; + padding: var(--space-4); + border: 1px dashed var(--border-color); + border-radius: var(--radius); +} + +/* Breadcrumb enhancements */ +.breadcrumb-nav { + background: var(--bg-secondary); + border-bottom: 1px solid var(--border-color); + padding: var(--space-4) 0; + margin-top: 80px; + position: relative; + z-index: 1; +} + +.breadcrumb { + display: flex; + align-items: center; + list-style: none; + margin: 0; + padding: 0; + font-size: var(--text-sm); + color: var(--text-secondary); +} + +.breadcrumb-item { + display: flex; + align-items: center; +} + +.breadcrumb-item a { + color: var(--text-secondary); + text-decoration: none; + transition: var(--transition-fast); + padding: var(--space-1) var(--space-2); + border-radius: var(--radius); +} + +.breadcrumb-item a:hover { + color: var(--primary-color); + background: var(--bg-color); +} + +.breadcrumb-current { + color: var(--text-color); + font-weight: 500; + padding: var(--space-1) var(--space-2); +} + +.breadcrumb-separator { + margin: 0 var(--space-2); + color: var(--text-muted); + user-select: none; +} + +/* Accessibility improvements */ +@media (prefers-reduced-motion: reduce) { + .scroll-progress { + transition: none; + } + + img.loading, + img.loaded { + transition: none; + } + + .hero-particles { + animation: none; + } +} + +/* Print optimizations */ +@media print { + .scroll-progress, + .breadcrumb-nav { + display: none; + } + + .hero { + padding-top: 0; + } + + .hero-title { + font-size: 24pt; + color: black !important; + } + + .section-title { + font-size: 18pt; + color: black !important; + } +} + /* Print Styles */ @media print { .header, .footer, .back-to-top, - .loading-spinner { + .loading-spinner, + .scroll-progress { display: none !important; } diff --git a/assets/images/about/company-story.jpg b/assets/images/about/company-story.jpg new file mode 100644 index 0000000..d7890e5 --- /dev/null +++ b/assets/images/about/company-story.jpg @@ -0,0 +1,4 @@ + + + Our Story + diff --git a/assets/images/apple-touch-icon.png b/assets/images/apple-touch-icon.png new file mode 100644 index 0000000..12f96a8 --- /dev/null +++ b/assets/images/apple-touch-icon.png @@ -0,0 +1,4 @@ + + + CodeStorm + diff --git a/assets/images/favicon.ico b/assets/images/favicon.ico new file mode 100644 index 0000000..bb65748 --- /dev/null +++ b/assets/images/favicon.ico @@ -0,0 +1,4 @@ + + + CS + diff --git a/assets/images/hero-illustration.svg b/assets/images/hero-illustration.svg new file mode 100644 index 0000000..21c18d9 --- /dev/null +++ b/assets/images/hero-illustration.svg @@ -0,0 +1,4 @@ + + + Innovation + diff --git a/assets/images/logo.svg b/assets/images/logo.svg new file mode 100644 index 0000000..44e1263 --- /dev/null +++ b/assets/images/logo.svg @@ -0,0 +1,4 @@ + + + CodeStorm Hub + diff --git a/assets/images/og-image.jpg b/assets/images/og-image.jpg new file mode 100644 index 0000000..be27aa5 --- /dev/null +++ b/assets/images/og-image.jpg @@ -0,0 +1,12 @@ + + + + + + + + + CodeStorm Hub + Innovative Technology Solutions + Transform Your Business with Cutting-Edge Software Development + \ No newline at end of file diff --git a/assets/images/portfolio/analytics-platform.jpg b/assets/images/portfolio/analytics-platform.jpg new file mode 100644 index 0000000..e9646a7 --- /dev/null +++ b/assets/images/portfolio/analytics-platform.jpg @@ -0,0 +1,4 @@ + + + Analytics Platform + diff --git a/assets/images/portfolio/banking-app.jpg b/assets/images/portfolio/banking-app.jpg new file mode 100644 index 0000000..52b8f12 --- /dev/null +++ b/assets/images/portfolio/banking-app.jpg @@ -0,0 +1,4 @@ + + + Banking App + diff --git a/assets/images/portfolio/cloud-migration.jpg b/assets/images/portfolio/cloud-migration.jpg new file mode 100644 index 0000000..b081524 --- /dev/null +++ b/assets/images/portfolio/cloud-migration.jpg @@ -0,0 +1,4 @@ + + + Cloud Migration + diff --git a/assets/images/portfolio/corporate-website.jpg b/assets/images/portfolio/corporate-website.jpg new file mode 100644 index 0000000..981455f --- /dev/null +++ b/assets/images/portfolio/corporate-website.jpg @@ -0,0 +1,4 @@ + + + Corporate Website + diff --git a/assets/images/portfolio/digital-transformation.jpg b/assets/images/portfolio/digital-transformation.jpg new file mode 100644 index 0000000..cd177a6 --- /dev/null +++ b/assets/images/portfolio/digital-transformation.jpg @@ -0,0 +1,4 @@ + + + Digital Transform + diff --git a/assets/images/portfolio/ecommerce-1.jpg b/assets/images/portfolio/ecommerce-1.jpg new file mode 100644 index 0000000..b085533 --- /dev/null +++ b/assets/images/portfolio/ecommerce-1.jpg @@ -0,0 +1,4 @@ + + + E-commerce 1 + diff --git a/assets/images/portfolio/ecommerce-2.jpg b/assets/images/portfolio/ecommerce-2.jpg new file mode 100644 index 0000000..c420eb8 --- /dev/null +++ b/assets/images/portfolio/ecommerce-2.jpg @@ -0,0 +1,4 @@ + + + E-commerce 2 + diff --git a/assets/images/portfolio/ecommerce-3.jpg b/assets/images/portfolio/ecommerce-3.jpg new file mode 100644 index 0000000..a169363 --- /dev/null +++ b/assets/images/portfolio/ecommerce-3.jpg @@ -0,0 +1,4 @@ + + + E-commerce 3 + diff --git a/assets/images/portfolio/ecommerce-platform.jpg b/assets/images/portfolio/ecommerce-platform.jpg new file mode 100644 index 0000000..7bfc9e5 --- /dev/null +++ b/assets/images/portfolio/ecommerce-platform.jpg @@ -0,0 +1,4 @@ + + + E-commerce Platform + diff --git a/assets/images/portfolio/erp-system.jpg b/assets/images/portfolio/erp-system.jpg new file mode 100644 index 0000000..6d48910 --- /dev/null +++ b/assets/images/portfolio/erp-system.jpg @@ -0,0 +1,4 @@ + + + ERP System + diff --git a/assets/images/portfolio/fitness-app.jpg b/assets/images/portfolio/fitness-app.jpg new file mode 100644 index 0000000..36870cb --- /dev/null +++ b/assets/images/portfolio/fitness-app.jpg @@ -0,0 +1,4 @@ + + + Fitness App + diff --git a/assets/images/portfolio/food-delivery.jpg b/assets/images/portfolio/food-delivery.jpg new file mode 100644 index 0000000..acb4115 --- /dev/null +++ b/assets/images/portfolio/food-delivery.jpg @@ -0,0 +1,4 @@ + + + Food Delivery + diff --git a/assets/images/portfolio/healthcare-platform.jpg b/assets/images/portfolio/healthcare-platform.jpg new file mode 100644 index 0000000..ab7cf61 --- /dev/null +++ b/assets/images/portfolio/healthcare-platform.jpg @@ -0,0 +1,4 @@ + + + Healthcare Platform + diff --git a/assets/images/portfolio/real-estate.jpg b/assets/images/portfolio/real-estate.jpg new file mode 100644 index 0000000..a59580a --- /dev/null +++ b/assets/images/portfolio/real-estate.jpg @@ -0,0 +1,4 @@ + + + Real Estate + diff --git a/assets/images/portfolio/saas-platform.jpg b/assets/images/portfolio/saas-platform.jpg new file mode 100644 index 0000000..8990dd7 --- /dev/null +++ b/assets/images/portfolio/saas-platform.jpg @@ -0,0 +1,4 @@ + + + SaaS Platform + diff --git a/assets/images/projects/cloud-migration.jpg b/assets/images/projects/cloud-migration.jpg new file mode 100644 index 0000000..b081524 --- /dev/null +++ b/assets/images/projects/cloud-migration.jpg @@ -0,0 +1,4 @@ + + + Cloud Migration + diff --git a/assets/images/projects/ecommerce-platform.jpg b/assets/images/projects/ecommerce-platform.jpg new file mode 100644 index 0000000..7bfc9e5 --- /dev/null +++ b/assets/images/projects/ecommerce-platform.jpg @@ -0,0 +1,4 @@ + + + E-commerce Platform + diff --git a/assets/images/projects/mobile-banking-app.jpg b/assets/images/projects/mobile-banking-app.jpg new file mode 100644 index 0000000..3186026 --- /dev/null +++ b/assets/images/projects/mobile-banking-app.jpg @@ -0,0 +1,4 @@ + + + Mobile Banking + diff --git a/assets/images/team/alex-chen.jpg b/assets/images/team/alex-chen.jpg new file mode 100644 index 0000000..281e5b1 --- /dev/null +++ b/assets/images/team/alex-chen.jpg @@ -0,0 +1,4 @@ + + + Alex Chen + diff --git a/assets/images/team/david-kim.jpg b/assets/images/team/david-kim.jpg new file mode 100644 index 0000000..91820da --- /dev/null +++ b/assets/images/team/david-kim.jpg @@ -0,0 +1,4 @@ + + + David Kim + diff --git a/assets/images/team/emily-davis.jpg b/assets/images/team/emily-davis.jpg new file mode 100644 index 0000000..4554862 --- /dev/null +++ b/assets/images/team/emily-davis.jpg @@ -0,0 +1,4 @@ + + + Emily Davis + diff --git a/assets/images/team/lisa-wang.jpg b/assets/images/team/lisa-wang.jpg new file mode 100644 index 0000000..288fb3f --- /dev/null +++ b/assets/images/team/lisa-wang.jpg @@ -0,0 +1,4 @@ + + + Lisa Wang + diff --git a/assets/images/team/michael-rodriguez.jpg b/assets/images/team/michael-rodriguez.jpg new file mode 100644 index 0000000..1c3a29a --- /dev/null +++ b/assets/images/team/michael-rodriguez.jpg @@ -0,0 +1,4 @@ + + + Michael Rodriguez + diff --git a/assets/images/team/sarah-johnson.jpg b/assets/images/team/sarah-johnson.jpg new file mode 100644 index 0000000..75b2b2f --- /dev/null +++ b/assets/images/team/sarah-johnson.jpg @@ -0,0 +1,4 @@ + + + Sarah Johnson + diff --git a/assets/images/testimonials/emily-rodriguez.jpg b/assets/images/testimonials/emily-rodriguez.jpg new file mode 100644 index 0000000..9b06a87 --- /dev/null +++ b/assets/images/testimonials/emily-rodriguez.jpg @@ -0,0 +1,4 @@ + + + Emily Rodriguez + diff --git a/assets/images/testimonials/michael-chen.jpg b/assets/images/testimonials/michael-chen.jpg new file mode 100644 index 0000000..d4f2110 --- /dev/null +++ b/assets/images/testimonials/michael-chen.jpg @@ -0,0 +1,4 @@ + + + Michael Chen + diff --git a/assets/images/testimonials/sarah-johnson.jpg b/assets/images/testimonials/sarah-johnson.jpg new file mode 100644 index 0000000..bc9978f --- /dev/null +++ b/assets/images/testimonials/sarah-johnson.jpg @@ -0,0 +1,4 @@ + + + Sarah Johnson + diff --git a/assets/js/main.js b/assets/js/main.js index 6db0016..ead293d 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,33 +1,72 @@ // Main JavaScript file for CodeStorm Hub website -document.addEventListener('DOMContentLoaded', function() { - // Initialize all components - initializeNavigation(); - initializeThemeToggle(); - initializeScrollEffects(); - initializeAnimations(); - initializeTestimonialSlider(); - initializeFormHandlers(); - initializeLoadingSpinner(); - initializeAccessibility(); - initializePortfolioFilter(); - initializeContactForm(); +// Performance optimized with debouncing, throttling, and efficient event handling + +// Utility functions for performance optimization +function debounce(func, delay) { + let timeoutId; + return function (...args) { + clearTimeout(timeoutId); + timeoutId = setTimeout(() => func.apply(this, args), delay); + }; +} + +function throttle(func, delay) { + let inProgress = false; + return function (...args) { + if (inProgress) return; + inProgress = true; + func.apply(this, args); + setTimeout(() => inProgress = false, delay); + }; +} + +// Efficient DOM ready check +function domReady(callback) { + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', callback); + } else { + callback(); + } +} + +// Initialize all components when DOM is ready +domReady(function() { + // Initialize components with error handling + try { + initializeNavigation(); + initializeThemeToggle(); + initializeScrollEffects(); + initializeAnimations(); + initializeTestimonialSlider(); + initializeFormHandlers(); + initializeLoadingSpinner(); + initializeAccessibility(); + initializePortfolioFilter(); + initializeContactForm(); + initializeMobileEnhancements(); + initializeScrollProgress(); + initializePerformanceOptimizations(); + } catch (error) { + console.error('Error initializing components:', error); + } }); -// Navigation functionality +// Enhanced navigation functionality with mobile improvements function initializeNavigation() { const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); const navbarMenu = document.querySelector('.navbar-menu'); const navLinks = document.querySelectorAll('.nav-link'); const header = document.querySelector('.header'); - // Mobile menu toggle + // Mobile menu toggle with improved animation if (mobileMenuBtn && navbarMenu) { mobileMenuBtn.addEventListener('click', function() { const isExpanded = this.getAttribute('aria-expanded') === 'true'; this.setAttribute('aria-expanded', !isExpanded); navbarMenu.classList.toggle('active'); + document.body.classList.toggle('menu-open'); - // Animate hamburger lines + // Animate hamburger lines with improved timing const lines = this.querySelectorAll('.hamburger-line'); lines.forEach((line, index) => { if (navbarMenu.classList.contains('active')) { @@ -40,34 +79,76 @@ function initializeNavigation() { } }); }); + + // Close menu when clicking outside + document.addEventListener('click', function(e) { + if (!mobileMenuBtn.contains(e.target) && !navbarMenu.contains(e.target)) { + if (navbarMenu.classList.contains('active')) { + closeMobileMenu(); + } + } + }); + + // Close menu on escape key + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && navbarMenu.classList.contains('active')) { + closeMobileMenu(); + } + }); + } + + function closeMobileMenu() { + if (navbarMenu && mobileMenuBtn) { + navbarMenu.classList.remove('active'); + document.body.classList.remove('menu-open'); + mobileMenuBtn.setAttribute('aria-expanded', 'false'); + const lines = mobileMenuBtn.querySelectorAll('.hamburger-line'); + lines.forEach(line => { + line.style.transform = ''; + line.style.opacity = ''; + }); + } } - // Close mobile menu when clicking nav links + // Enhanced mobile menu close on nav link click navLinks.forEach(link => { - link.addEventListener('click', () => { - if (navbarMenu && navbarMenu.classList.contains('active')) { - navbarMenu.classList.remove('active'); - if (mobileMenuBtn) { - mobileMenuBtn.setAttribute('aria-expanded', 'false'); - const lines = mobileMenuBtn.querySelectorAll('.hamburger-line'); - lines.forEach(line => { - line.style.transform = ''; - line.style.opacity = ''; + link.addEventListener('click', (e) => { + closeMobileMenu(); + + // Smooth scroll for anchor links + if (link.getAttribute('href').startsWith('#')) { + e.preventDefault(); + const target = document.querySelector(link.getAttribute('href')); + if (target) { + const headerHeight = header ? header.offsetHeight : 80; + const targetPosition = target.offsetTop - headerHeight; + + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' }); + } else { + console.warn(`Target element not found for selector: ${link.getAttribute('href')}`); } } }); }); - // Header scroll effect + // Enhanced header scroll effect with better performance if (header) { let lastScrollY = window.scrollY; + let ticking = false; - window.addEventListener('scroll', () => { + // Enhanced header scroll effect with better performance + const updateHeader = throttle(() => { const currentScrollY = window.scrollY; if (currentScrollY > 100) { - header.style.transform = currentScrollY > lastScrollY ? 'translateY(-100%)' : 'translateY(0)'; + if (currentScrollY > lastScrollY) { + header.style.transform = 'translateY(-100%)'; + } else { + header.style.transform = 'translateY(0)'; + } header.style.boxShadow = 'var(--shadow-lg)'; } else { header.style.transform = 'translateY(0)'; @@ -75,10 +156,12 @@ function initializeNavigation() { } lastScrollY = currentScrollY; - }); + }, 16); // 60fps throttling + + window.addEventListener('scroll', updateHeader, { passive: true }); } - // Smooth scrolling for anchor links + // Enhanced smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); @@ -622,10 +705,27 @@ function initializeContactForm() { const submitButton = contactForm.querySelector('.form-submit'); const submitText = submitButton.querySelector('.submit-text'); const submitLoading = submitButton.querySelector('.submit-loading'); + const successMessage = document.getElementById('success-message'); + const errorMessage = document.getElementById('general-error'); + + // Real-time validation + const formFields = contactForm.querySelectorAll('.form-input, .form-select, .form-textarea, .form-checkbox'); + formFields.forEach(field => { + field.addEventListener('blur', () => validateField(field)); + field.addEventListener('input', debounce(() => { + if (field.classList.contains('error')) { + validateField(field); + } + }, 300)); + }); contactForm.addEventListener('submit', async (e) => { e.preventDefault(); + // Hide previous messages + if (successMessage) successMessage.classList.add('hidden'); + if (errorMessage) errorMessage.classList.add('hidden'); + // Clear previous errors clearFormErrors(contactForm); @@ -633,10 +733,49 @@ function initializeContactForm() { const isValid = validateContactForm(contactForm); if (!isValid) { - showNotification('Please correct the errors in the form', 'error'); + // Focus on first error field + const firstError = contactForm.querySelector('.error'); + if (firstError) { + firstError.focus(); + firstError.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } return; } + // Show loading state + submitButton.disabled = true; + submitText.classList.add('hidden'); + submitLoading.classList.remove('hidden'); + + try { + // Simulate form submission (replace with actual endpoint) + await simulateFormSubmission(new FormData(contactForm)); + + // Show success toast + showToast('Message sent successfully! We\'ll get back to you soon.', 'success'); + + // Reset form + contactForm.reset(); + + // Clear validation states + contactForm.querySelectorAll('.form-input, .form-select, .form-textarea').forEach(field => { + field.classList.remove('error', 'success'); + }); + + } catch (error) { + console.error('Form submission error:', error); + + // Show error toast + showToast('Sorry, there was an error sending your message. Please try again or contact us directly.', 'error'); + } finally { + // Reset button state + submitButton.disabled = false; + submitText.classList.remove('hidden'); + submitLoading.classList.add('hidden'); + } + }); +} + // Show loading state submitText.classList.add('hidden'); submitLoading.classList.remove('hidden'); @@ -701,15 +840,27 @@ function initializeContactForm() { function validateContactForm(form) { let isValid = true; + const errors = []; + + // Clear previous validation states + form.querySelectorAll('.form-input, .form-select, .form-textarea').forEach(field => { + field.classList.remove('error', 'success'); + }); // Required fields validation const requiredFields = form.querySelectorAll('[required]'); requiredFields.forEach(field => { if (!validateField(field)) { isValid = false; + errors.push(`${field.name}: ${getFieldErrorMessage(field)}`); } }); + // Log validation results for debugging + if (!isValid) { + console.log('Form validation failed:', errors); + } + return isValid; } @@ -724,34 +875,96 @@ function validateField(field) { // Required field validation if (field.hasAttribute('required') && !value) { isValid = false; - errorMessage = 'This field is required'; + errorMessage = getRequiredFieldMessage(fieldName); } - // Email validation + // Email validation (enhanced) else if (fieldName === 'email' && value) { if (!isValidEmail(value)) { isValid = false; - errorMessage = 'Please enter a valid email address'; + errorMessage = 'Please enter a valid email address (e.g., name@domain.com)'; } } - // Phone validation + // Phone validation (more flexible) else if (fieldName === 'phone' && value) { - const phoneRegex = /^\(\d{3}\) \d{3}-\d{4}$/; + const phoneRegex = /^[\+]?[\d\s\(\)\-\.]{10,}$/; if (!phoneRegex.test(value)) { isValid = false; - errorMessage = 'Please enter a valid phone number'; + errorMessage = 'Please enter a valid phone number (at least 10 digits)'; } } - // Name validation + // Name validation (enhanced) else if ((fieldName === 'firstName' || fieldName === 'lastName') && value) { if (value.length < 2) { isValid = false; errorMessage = 'Name must be at least 2 characters long'; + } else if (!/^[a-zA-Z\s\-\'\.]+$/.test(value)) { + isValid = false; + errorMessage = 'Name can only contain letters, spaces, hyphens, and apostrophes'; + } + } + + // Message validation (enhanced) + else if (fieldName === 'message' && value) { + if (value.length < 50) { + isValid = false; + errorMessage = `Message must be at least 50 characters long (currently ${value.length})`; + } else if (value.length > 1000) { + isValid = false; + errorMessage = `Message must be no more than 1000 characters (currently ${value.length})`; + } + } + + // Project type validation + else if (fieldName === 'projectType' && field.hasAttribute('required') && !value) { + isValid = false; + errorMessage = 'Please select a project type'; + } + + // Privacy checkbox validation + else if (fieldName === 'privacy' && field.hasAttribute('required') && !field.checked) { + isValid = false; + errorMessage = 'You must agree to the Privacy Policy and Terms of Service'; + } + + // Update field appearance and error message + if (errorElement) { + if (isValid) { + errorElement.textContent = ''; + errorElement.classList.remove('visible'); + field.classList.remove('error'); + field.classList.add('success'); + } else { + errorElement.textContent = errorMessage; + errorElement.classList.add('visible'); + field.classList.add('error'); + field.classList.remove('success'); } } + return isValid; +} + +function getRequiredFieldMessage(fieldName) { + const messages = { + 'firstName': 'First name is required', + 'lastName': 'Last name is required', + 'email': 'Email address is required', + 'message': 'Project description is required', + 'projectType': 'Please select a project type', + 'privacy': 'You must agree to the Privacy Policy and Terms of Service' + }; + return messages[fieldName] || 'This field is required'; +} + +function getFieldErrorMessage(field) { + const errorElement = document.getElementById(`${field.name}-error`); + return errorElement ? errorElement.textContent : 'Invalid value'; +} + } + // Message validation else if (fieldName === 'message' && value) { if (value.length < 10) { @@ -1056,21 +1269,6 @@ function initializePerformanceMonitoring() { }); } -// Service Worker registration (for PWA features) -function initializeServiceWorker() { - if ('serviceWorker' in navigator) { - window.addEventListener('load', () => { - navigator.serviceWorker.register('/sw.js') - .then(registration => { - console.log('SW registered: ', registration); - }) - .catch(registrationError => { - console.log('SW registration failed: ', registrationError); - }); - }); - } -} - // Utility functions const utils = { // Debounce function for performance @@ -1128,5 +1326,662 @@ window.CodeStormUtils = utils; // Initialize performance monitoring initializePerformanceMonitoring(); -// Optional: Initialize service worker for PWA features -// initializeServiceWorker(); \ No newline at end of file +// Mobile-specific enhancements +function initializeMobileEnhancements() { + // Detect mobile device + const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); + const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0; + + if (isMobile || isTouch) { + document.body.classList.add('is-mobile'); + + // Enhanced touch interactions for portfolio items + const portfolioItems = document.querySelectorAll('.portfolio-item, .portfolio-project'); + portfolioItems.forEach(item => { + let touchStartY = 0; + let touchEndY = 0; + + item.addEventListener('touchstart', (e) => { + touchStartY = e.touches[0].clientY; + item.classList.add('touch-active'); + }); + + item.addEventListener('touchend', (e) => { + touchEndY = e.changedTouches[0].clientY; + item.classList.remove('touch-active'); + + // Handle tap to show overlay on mobile + const overlay = item.querySelector('.portfolio-overlay, .project-overlay'); + if (overlay && Math.abs(touchStartY - touchEndY) < 10) { + overlay.style.opacity = overlay.style.opacity === '1' ? '0' : '1'; + setTimeout(() => { + overlay.style.opacity = ''; + }, 3000); + } + }); + }); + + // Improve touch scrolling for testimonials + const testimonialSlider = document.querySelector('.testimonials-slider'); + if (testimonialSlider) { + testimonialSlider.style.webkitOverflowScrolling = 'touch'; + } + + // Prevent zoom on form inputs (iOS Safari) + const formInputs = document.querySelectorAll('input, select, textarea'); + formInputs.forEach(input => { + if (input.style.fontSize === '' || parseFloat(input.style.fontSize) < 16) { + input.style.fontSize = '16px'; + } + }); + + // Add visual feedback for touch interactions + const touchableElements = document.querySelectorAll('.btn, .nav-link, .service-card, .team-member'); + touchableElements.forEach(element => { + element.addEventListener('touchstart', () => { + element.style.opacity = '0.8'; + }); + + element.addEventListener('touchend', () => { + setTimeout(() => { + element.style.opacity = ''; + }, 150); + }); + }); + + // Optimize animations for mobile performance + const animatedElements = document.querySelectorAll('[data-aos]'); + animatedElements.forEach(element => { + element.style.willChange = 'transform, opacity'; + }); + + // Reduce motion for users who prefer it + if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { + const style = document.createElement('style'); + style.textContent = ` + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + `; + document.head.appendChild(style); + } + } + + // Enhanced keyboard navigation for desktop + if (!isMobile) { + // Add keyboard shortcuts + document.addEventListener('keydown', (e) => { + // Alt + M to toggle mobile menu (useful for testing) + if (e.altKey && e.key === 'm') { + const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); + if (mobileMenuBtn) { + mobileMenuBtn.click(); + } + } + + // Alt + T to toggle theme + if (e.altKey && e.key === 't') { + const themeToggle = document.querySelector('.theme-toggle'); + if (themeToggle) { + themeToggle.click(); + } + } + }); + } + + // Handle orientation changes on mobile + window.addEventListener('orientationchange', () => { + setTimeout(() => { + // Recalculate hero height + const hero = document.querySelector('.hero'); + if (hero) { + hero.style.minHeight = `${window.innerHeight}px`; + } + + // Close mobile menu on orientation change + const navbarMenu = document.querySelector('.navbar-menu'); + const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); + if (navbarMenu && navbarMenu.classList.contains('active')) { + navbarMenu.classList.remove('active'); + if (mobileMenuBtn) { + mobileMenuBtn.setAttribute('aria-expanded', 'false'); + } + } + }, 100); + }); + + // Prevent iOS bounce scrolling + if (/iPad|iPhone|iPod/.test(navigator.userAgent)) { + let touchMoveHandler = (e) => { + if (e.scale && e.scale !== 1) { + e.preventDefault(); + } + }; + + // Add the listener with passive: true by default + document.addEventListener('touchmove', touchMoveHandler, { passive: true }); + + // Monitor for conditions where passive: false is required + document.addEventListener('gesturestart', () => { + document.removeEventListener('touchmove', touchMoveHandler, { passive: true }); + document.addEventListener('touchmove', touchMoveHandler, { passive: false }); + }); + + document.addEventListener('gestureend', () => { + document.removeEventListener('touchmove', touchMoveHandler, { passive: false }); + document.addEventListener('touchmove', touchMoveHandler, { passive: true }); + }); + } +} + +// Scroll progress indicator +function initializeScrollProgress() { + const progressBar = document.createElement('div'); + progressBar.className = 'scroll-progress'; + document.body.appendChild(progressBar); + + let ticking = false; + + function updateScrollProgress() { + const scrollTop = window.pageYOffset || document.documentElement.scrollTop; + const scrollHeight = document.documentElement.scrollHeight - window.innerHeight; + const scrollPercent = (scrollTop / scrollHeight) * 100; + + progressBar.style.width = `${Math.min(scrollPercent, 100)}%`; + ticking = false; + } + + window.addEventListener('scroll', () => { + if (!ticking) { + requestAnimationFrame(updateScrollProgress); + ticking = true; + } + }); + + // Show/hide progress bar based on scroll position + window.addEventListener('scroll', utils.throttle(() => { + const scrollTop = window.pageYOffset || document.documentElement.scrollTop; + if (scrollTop > 300) { + progressBar.style.opacity = '1'; + } else { + progressBar.style.opacity = '0'; + } + }, 100)); +} + +// Add breadcrumb navigation for better UX +function initializeBreadcrumbs() { + const breadcrumbContainer = document.querySelector('.breadcrumb'); + if (!breadcrumbContainer) return; + + const currentPath = window.location.pathname; + const pathSegments = currentPath.split('/').filter(segment => segment); + + let breadcrumbHTML = 'Home'; + let currentPath_build = ''; + + pathSegments.forEach((segment, index) => { + currentPath_build += '/' + segment; + const isLast = index === pathSegments.length - 1; + const segmentName = segment.charAt(0).toUpperCase() + segment.slice(1); + + if (isLast) { + breadcrumbHTML += ` / ${segmentName}`; + } else { + breadcrumbHTML += ` / ${segmentName}`; + } + }); + + breadcrumbContainer.innerHTML = breadcrumbHTML; +} + +// Enhanced error handling +window.addEventListener('error', (e) => { + console.error('JavaScript error:', e.error); + + // In production, you might want to send errors to a logging service + if (window.location.hostname !== 'localhost') { + // Example: Send to error tracking service + // sendErrorToTracking(e.error); + } +}); + +// Enhanced image lazy loading +function initializeImageOptimization() { + // Check if browser supports intersection observer + if ('IntersectionObserver' in window) { + const imageObserver = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const img = entry.target; + + // If image has data-src, use it for lazy loading + if (img.dataset.src) { + img.src = img.dataset.src; + img.classList.add('loading'); + + img.addEventListener('load', () => { + img.classList.remove('loading'); + img.classList.add('loaded'); + }); + + img.addEventListener('error', () => { + img.classList.add('error'); + img.alt = 'Image failed to load'; + }); + + delete img.dataset.src; + } + + observer.unobserve(img); + } + }); + }, { + rootMargin: '50px 0px', + threshold: 0.1 + }); + + // Observe all images with data-src attribute + document.querySelectorAll('img[data-src]').forEach(img => { + imageObserver.observe(img); + }); + + // Also observe regular images for fade-in effect + document.querySelectorAll('img[loading="lazy"]').forEach(img => { + if (!img.complete) { + img.style.opacity = '0'; + img.addEventListener('load', () => { + img.style.transition = 'opacity 0.3s ease'; + img.style.opacity = '1'; + }); + } + }); + } + + // Fallback for browsers without intersection observer + else { + document.querySelectorAll('img[data-src]').forEach(img => { + img.src = img.dataset.src; + delete img.dataset.src; + }); + } +} + +// Performance optimization for images +function optimizeImagePerformance() { + // Add responsive image handling + const images = document.querySelectorAll('img'); + images.forEach(img => { + // Add better loading attributes + if (!img.hasAttribute('loading')) { + // Don't lazy load above-the-fold images + const rect = img.getBoundingClientRect(); + if (rect.top < window.innerHeight) { + img.loading = 'eager'; + } else { + img.loading = 'lazy'; + } + } + + // Add decoding attribute for better performance + if (!img.hasAttribute('decoding')) { + img.decoding = 'async'; + } + }); +} + +// Performance optimization functions +function initializePerformanceOptimizations() { + // Preload critical resources + preloadCriticalResources(); + + // Optimize images + optimizeImages(); + + // Initialize service worker if supported + initializeServiceWorker(); + + // Add connection-aware loading + initializeConnectionAwareLoading(); +} + +function preloadCriticalResources() { + const criticalResources = [ + '/assets/css/style.css', + '/assets/js/main.js', + '/assets/images/logo.svg' + ]; + + criticalResources.forEach(resource => { + const link = document.createElement('link'); + link.rel = 'preload'; + + if (resource.endsWith('.css')) { + link.as = 'style'; + } else if (resource.endsWith('.js')) { + link.as = 'script'; + } else if (resource.includes('images')) { + link.as = 'image'; + } + + link.href = resource; + document.head.appendChild(link); + }); +} + +function optimizeImages() { + // Add responsive image loading + const images = document.querySelectorAll('img'); + + images.forEach(img => { + // Add loading attribute if not present + if (!img.hasAttribute('loading')) { + img.loading = 'lazy'; + } + + // Add decoding attribute for better performance + if (!img.hasAttribute('decoding')) { + img.decoding = 'async'; + } + + // Add error handling + img.addEventListener('error', function() { + console.warn(`Failed to load image: ${this.src}`); + this.style.display = 'none'; + }); + }); +} + +function initializeServiceWorker() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('/sw.js') + .then(registration => { + console.log('Service Worker registered successfully:', registration); + }) + .catch(error => { + console.warn('Service Worker registration failed:', error); + }); + } +} + +function initializeConnectionAwareLoading() { + // Check if connection API is supported + if ('connection' in navigator) { + const connection = navigator.connection; + + // Adjust loading strategy based on connection + if (connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g') { + // Disable some non-critical features for slow connections + document.body.classList.add('slow-connection'); + + // Reduce image quality + const images = document.querySelectorAll('img'); + images.forEach(img => { + if (img.src && !img.src.includes('low-quality')) { + // You could implement low-quality image variants here + console.log('Slow connection detected, consider loading lower quality images'); + } + }); + } + } +} + +// Initialize breadcrumbs if container exists +domReady(() => { + initializeBreadcrumbs(); + initializeImageOptimization(); + optimizeImagePerformance(); + initializeServiceWorker(); +}); + +// Service Worker registration (for PWA features) +function initializeServiceWorker() { + if ('serviceWorker' in navigator) { + window.addEventListener('load', () => { + navigator.serviceWorker.register('/sw.js') + .then(registration => { + console.log('SW registered: ', registration); + + // Check for updates + registration.addEventListener('updatefound', () => { + const newWorker = registration.installing; + newWorker.addEventListener('statechange', () => { + if (newWorker.state === 'installed' && navigator.serviceWorker.controller) { + // New content is available + showNotification('New content available! Refresh to update.', 'info'); + } + }); + }); + }) + .catch(registrationError => { + console.log('SW registration failed: ', registrationError); + }); + }); + } +} +// initializeServiceWorker(); + +// Form submission simulation (replace with actual API endpoint) +async function simulateFormSubmission(formData) { + // Simulate network delay + await new Promise(resolve => setTimeout(resolve, 2000)); + + // Log form data for debugging + const data = {}; + for (let [key, value] of formData.entries()) { + data[key] = value; + } + console.log('Form submission data:', data); + + // Simulate random success/failure for testing + if (Math.random() > 0.1) { // 90% success rate + return { success: true, message: 'Form submitted successfully' }; + } else { + throw new Error('Simulated submission failure'); + } +} + +// Utility function to clear form errors +function clearFormErrors(form) { + form.querySelectorAll('.form-error').forEach(error => { + error.textContent = ''; + error.classList.remove('visible'); + }); + + form.querySelectorAll('.form-input, .form-select, .form-textarea').forEach(field => { + field.classList.remove('error', 'success'); + }); +} + +// Enhanced email validation +function isValidEmail(email) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(email) && email.length <= 254; +} + +// Character counter for textarea +function initializeCharacterCounters() { + const textareas = document.querySelectorAll('textarea[maxlength]'); + + textareas.forEach(textarea => { + const maxLength = parseInt(textarea.getAttribute('maxlength')); + const counter = document.createElement('div'); + counter.className = 'character-counter'; + counter.textContent = `0 / ${maxLength}`; + + textarea.parentNode.appendChild(counter); + + textarea.addEventListener('input', () => { + const currentLength = textarea.value.length; + counter.textContent = `${currentLength} / ${maxLength}`; + + if (currentLength > maxLength * 0.9) { + counter.style.color = 'var(--warning-color)'; + } else { + counter.style.color = 'var(--text-muted)'; + } + }); + }); +} + +// Initialize character counters when DOM is ready +domReady(() => { + initializeCharacterCounters(); + initializeMicroInteractions(); + initializeLoadingStates(); + initializeToastNotifications(); +}); + +// Micro-interactions and animations +function initializeMicroInteractions() { + // Add fade-in animation to elements + const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }; + + const fadeInObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('fade-in'); + fadeInObserver.unobserve(entry.target); + } + }); + }, observerOptions); + + // Observe elements for fade-in animation + document.querySelectorAll('.service-card, .portfolio-item, .team-member, .testimonial, .stat').forEach(el => { + fadeInObserver.observe(el); + }); + + // Add pulse animation to CTA buttons + const ctaButtons = document.querySelectorAll('.cta-btn, .hero-buttons .btn-primary'); + ctaButtons.forEach(btn => { + btn.addEventListener('mouseenter', () => { + btn.classList.add('pulse'); + }); + + btn.addEventListener('mouseleave', () => { + btn.classList.remove('pulse'); + }); + }); + + // Add touch feedback for mobile + if ('ontouchstart' in window) { + document.addEventListener('touchstart', (e) => { + if (e.target.matches('.btn, .nav-link, .card')) { + e.target.classList.add('touch-active'); + } + }); + + document.addEventListener('touchend', (e) => { + if (e.target.matches('.btn, .nav-link, .card')) { + setTimeout(() => { + e.target.classList.remove('touch-active'); + }, 150); + } + }); + } +} + +// Loading states management +function initializeLoadingStates() { + // Image loading skeleton + const images = document.querySelectorAll('img'); + + images.forEach(img => { + if (!img.complete) { + img.classList.add('image-skeleton'); + + img.addEventListener('load', () => { + img.classList.remove('image-skeleton'); + }); + + img.addEventListener('error', () => { + img.classList.remove('image-skeleton'); + img.style.display = 'none'; + }); + } + }); + + // Form loading states + const forms = document.querySelectorAll('form'); + forms.forEach(form => { + form.addEventListener('submit', () => { + const formGroups = form.querySelectorAll('.form-group'); + formGroups.forEach(group => { + group.classList.add('loading'); + }); + }); + }); +} + +// Toast notification system +function initializeToastNotifications() { + window.showToast = function(message, type = 'info', duration = 5000) { + const toast = document.createElement('div'); + toast.className = `toast ${type}`; + toast.innerHTML = ` +
+ ${type.charAt(0).toUpperCase() + type.slice(1)} +

${message}

+
+ + `; + + document.body.appendChild(toast); + + // Show toast + requestAnimationFrame(() => { + toast.classList.add('show'); + }); + + // Close button functionality + const closeBtn = toast.querySelector('.toast-close'); + closeBtn.addEventListener('click', () => { + hideToast(toast); + }); + + // Auto-hide after duration + setTimeout(() => { + hideToast(toast); + }, duration); + }; + + function hideToast(toast) { + toast.classList.remove('show'); + setTimeout(() => { + if (toast.parentNode) { + toast.parentNode.removeChild(toast); + } + }, 300); + } +} + +// Progress bar utility +function createProgressBar(container, initialValue = 0) { + const progressBar = document.createElement('div'); + progressBar.className = 'progress-bar'; + + const progressFill = document.createElement('div'); + progressFill.className = 'progress-fill'; + progressFill.style.width = `${initialValue}%`; + + progressBar.appendChild(progressFill); + container.appendChild(progressBar); + + return { + update: (value) => { + progressFill.style.width = `${Math.min(100, Math.max(0, value))}%`; + }, + remove: () => { + if (progressBar.parentNode) { + progressBar.parentNode.removeChild(progressBar); + } + } + }; +} \ No newline at end of file diff --git a/contact.html b/contact.html index 7240800..7bc761b 100644 --- a/contact.html +++ b/contact.html @@ -91,41 +91,92 @@

Start Your Project

Tell us about your project requirements and we'll provide you with a detailed proposal and timeline.

-
+ +

Contact Form

+
- - + +
- - + +
- - + + We'll never share your email with anyone else. +
- - + + Optional - for quicker response +
- +
- @@ -134,12 +185,17 @@

Start Your Project

- +
- @@ -147,11 +203,17 @@

Start Your Project

+ This helps us provide better recommendations
- @@ -159,38 +221,86 @@

Start Your Project

+ When would you like to start?
- - + + Please provide at least 50 characters describing your project. +
+ Optional - receive monthly updates about technology trends and our latest projects.
- +
- + We'll respond within 24 hours during business days. + + +
+ + +
diff --git a/health-check.html b/health-check.html new file mode 100644 index 0000000..6f9b657 --- /dev/null +++ b/health-check.html @@ -0,0 +1,21 @@ +--- +layout: null +--- +{ + "status": "healthy", + "timestamp": "{{ site.time | date_to_xmlschema }}", + "version": "1.0.0", + "features": { + "responsive": true, + "accessible": true, + "performant": true, + "seo_optimized": true, + "secure": true + }, + "checks": { + "css": "{{ '/assets/css/style.css' | relative_url }}", + "js": "{{ '/assets/js/main.js' | relative_url }}", + "images": "{{ '/assets/images/logo.svg' | relative_url }}", + "sitemap": "{{ '/sitemap.xml' | relative_url }}" + } +} diff --git a/index.html b/index.html index 6093273..58a1553 100644 --- a/index.html +++ b/index.html @@ -144,8 +144,8 @@

Featured Projects

E-commerce Platform

Web Development

- View Case Study - Live Demo + View Case Study + Live Demo
@@ -160,7 +160,7 @@

E-commerce Platform

Banking Mobile App

Mobile Development

- View Case Study + View Case Study
@@ -175,7 +175,7 @@

Banking Mobile App

Cloud Migration

Cloud Solutions

- View Case Study + View Case Study
diff --git a/portfolio.html b/portfolio.html index 7a7aba4..ed3de7f 100644 --- a/portfolio.html +++ b/portfolio.html @@ -58,9 +58,9 @@

Our Portfolio

- + @@ -91,7 +91,7 @@

TechMart E-commerce Platform

- + App Store @@ -154,7 +154,7 @@

Enterprise Cloud Migration

- + Live Demo @@ -187,7 +187,7 @@

HealthConnect Platform

- + Play Store @@ -253,7 +253,7 @@

Manufacturing Digital Transformation

- + Live Demo @@ -286,7 +286,7 @@

InnovateCorp Website

- + Download @@ -349,7 +349,7 @@

DataInsight Analytics Platform

- + Live Demo @@ -412,7 +412,7 @@

Enterprise ERP Integration

- + Live Demo diff --git a/privacy-policy.html b/privacy-policy.html new file mode 100644 index 0000000..6a390ed --- /dev/null +++ b/privacy-policy.html @@ -0,0 +1,61 @@ +--- +layout: default +title: Privacy Policy +description: CodeStorm Hub Privacy Policy - How we collect, use, and protect your personal information. +--- + +
+
+

Privacy Policy

+

Last updated: {{ "now" | date: "%B %d, %Y" }}

+
+
+ +
+
+
+

Information We Collect

+

We collect information you provide directly to us, such as when you:

+
    +
  • Fill out our contact form
    • +
  • Subscribe to our newsletter
    • +
  • Communicate with us via email or phone
    • +
  • Request information about our services
    • +
+ +

How We Use Your Information

+

We use the information we collect to:

+
    +
  • Respond to your inquiries and provide customer support
    • +
  • Send you information about our services
    • +
  • Improve our website and services
    • +
  • Comply with legal obligations
    • +
+ +

Information Sharing

+

We do not sell, trade, or otherwise transfer your personal information to third parties except:

+
    +
  • With your consent
    • +
  • To trusted third parties who assist us in operating our website
    • +
  • When required by law
    • +
+ +

Data Security

+

We implement appropriate security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.

+ +

Your Rights

+

You have the right to:

+
    +
  • Access your personal information
    • +
  • Correct inaccurate information
    • +
  • Request deletion of your information
    • +
  • Opt out of marketing communications
    • +
+ +

Contact Us

+

If you have any questions about this Privacy Policy, please contact us at:

+

Email: privacy@codestormhub.com

+

Phone: +1 (555) 123-4567

+
+
+
\ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml new file mode 100644 index 0000000..30984eb --- /dev/null +++ b/sitemap.xml @@ -0,0 +1,48 @@ +--- +layout: null +--- + + + + {{ site.url }}/ + {{ site.time | date_to_xmlschema }} + weekly + 1.0 + + + {{ site.url }}/about/ + {{ site.time | date_to_xmlschema }} + monthly + 0.8 + + + {{ site.url }}/services/ + {{ site.time | date_to_xmlschema }} + monthly + 0.9 + + + {{ site.url }}/portfolio/ + {{ site.time | date_to_xmlschema }} + weekly + 0.9 + + + {{ site.url }}/contact/ + {{ site.time | date_to_xmlschema }} + monthly + 0.7 + + + {{ site.url }}/privacy-policy/ + {{ site.time | date_to_xmlschema }} + yearly + 0.3 + + + {{ site.url }}/terms-of-service/ + {{ site.time | date_to_xmlschema }} + yearly + 0.3 + + \ No newline at end of file diff --git a/spec/features/contact_form_spec.rb b/spec/features/contact_form_spec.rb new file mode 100644 index 0000000..9f52000 --- /dev/null +++ b/spec/features/contact_form_spec.rb @@ -0,0 +1,53 @@ +require_relative '../spec_helper' + +RSpec.describe 'Contact Form', type: :feature, js: true do + before(:each) do + visit '/contact/' + end + + it 'displays the contact form' do + expect(page).to have_selector('#contact-form') + expect(page).to have_field('name') + expect(page).to have_field('email') + expect(page).to have_field('subject') + expect(page).to have_field('message') + expect(page).to have_button('Send Message') + end + + it 'validates required fields' do + click_button 'Send Message' + + # Check for validation messages + expect(page).to have_selector('.error-message', count: 4) + end + + it 'validates email format' do + fill_in 'name', with: 'Test User' + fill_in 'email', with: 'invalid-email' + fill_in 'subject', with: 'Test Subject' + fill_in 'message', with: 'Test message' + + click_button 'Send Message' + + expect(page).to have_selector('.error-message', text: /email/i) + end + + it 'shows success message on valid submission' do + fill_in 'name', with: 'Test User' + fill_in 'email', with: 'test@example.com' + fill_in 'subject', with: 'Test Subject' + fill_in 'message', with: 'This is a test message with sufficient length to pass validation.' + + click_button 'Send Message' + + expect(page).to have_selector('.success-message', wait: 10) + end + + it 'has proper ARIA labels and accessibility' do + expect(page).to have_field('name', type: 'text') + expect(page).to have_field('email', type: 'email') + + # Check for ARIA attributes + expect(page).to have_selector('[aria-required="true"]', count: 4) + end +end \ No newline at end of file diff --git a/spec/features/homepage_spec.rb b/spec/features/homepage_spec.rb new file mode 100644 index 0000000..7c371b0 --- /dev/null +++ b/spec/features/homepage_spec.rb @@ -0,0 +1,62 @@ +require_relative '../spec_helper' + +RSpec.describe 'Homepage', type: :feature do + before(:each) do + visit '/' + end + + it 'loads successfully' do + expect(page.status_code).to eq(200) + end + + it 'displays the correct title' do + expect(page).to have_title('CodeStorm Hub') + end + + it 'has the main hero section' do + expect(page).to have_selector('.hero') + expect(page).to have_content('Transform Your Business') + end + + it 'has working navigation' do + expect(page).to have_selector('.navbar') + expect(page).to have_link('Home') + expect(page).to have_link('About') + expect(page).to have_link('Services') + expect(page).to have_link('Portfolio') + expect(page).to have_link('Contact') + end + + it 'has call-to-action buttons' do + expect(page).to have_link('Start Your Project') + expect(page).to have_link('View Our Work') + end + + it 'has accessibility features' do + expect(page).to have_selector('a.skip-link', visible: false) + expect(page).to have_selector('[role="main"]') + end +end + +RSpec.describe 'Navigation', type: :feature do + it 'can navigate to about page' do + visit '/' + click_link 'About' + expect(page).to have_current_path('/about/') + expect(page).to have_content('About') + end + + it 'can navigate to contact page' do + visit '/' + click_link 'Contact' + expect(page).to have_current_path('/contact/') + expect(page).to have_content('Contact') + end + + it 'can navigate to portfolio page' do + visit '/' + click_link 'Portfolio' + expect(page).to have_current_path('/portfolio/') + expect(page).to have_content('Portfolio') + end +end \ No newline at end of file diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb new file mode 100644 index 0000000..eab1c64 --- /dev/null +++ b/spec/spec_helper.rb @@ -0,0 +1,42 @@ +require 'rspec' +require 'capybara' +require 'capybara/rspec' +require 'selenium-webdriver' + +# Configure Capybara +Capybara.configure do |config| + config.default_driver = :selenium_chrome_headless + config.javascript_driver = :selenium_chrome_headless + config.default_max_wait_time = 10 + config.app_host = 'http://localhost:4000' +end + +# Configure Chrome options for headless testing +Capybara.register_driver :selenium_chrome_headless do |app| + options = Selenium::WebDriver::Chrome::Options.new + options.add_argument('--headless') + options.add_argument('--no-sandbox') + options.add_argument('--disable-dev-shm-usage') + options.add_argument('--disable-gpu') + options.add_argument('--window-size=1280,800') + + Capybara::Selenium::Driver.new(app, browser: :chrome, options: options) +end + +RSpec.configure do |config| + config.include Capybara::DSL + + config.before(:each, type: :feature) do + # Start Jekyll server if not running + unless system('curl -s http://localhost:4000 > /dev/null 2>&1') + puts "Starting Jekyll server for testing..." + spawn('bundle exec jekyll serve --detach') + sleep 5 # Wait for server to start + end + end + + config.after(:suite) do + # Clean up Jekyll server + system('pkill -f jekyll') if ENV['CI'] != 'true' + end +end \ No newline at end of file diff --git a/sw.js b/sw.js new file mode 100644 index 0000000..12d4ee4 --- /dev/null +++ b/sw.js @@ -0,0 +1,153 @@ +// Service Worker for CodeStorm Hub +// Basic caching strategy for improved performance + +const CACHE_NAME = 'codestorm-hub-v1.1'; +const STATIC_ASSETS = [ + '/', + '/assets/css/style.css', + '/assets/js/main.js', + '/assets/images/logo.svg', + '/assets/images/favicon.ico', + '/about/', + '/services/', + '/portfolio/', + '/contact/', + '/404.html' +]; + +const DYNAMIC_CACHE_NAME = 'codestorm-hub-dynamic-v1.1'; +const IMAGES_CACHE_NAME = 'codestorm-hub-images-v1.1'; + +// Install event - cache static assets +self.addEventListener('install', (event) => { + event.waitUntil( + caches.open(CACHE_NAME) + .then((cache) => { + console.log('Service Worker: Caching static assets'); + return cache.addAll(STATIC_ASSETS); + }) + .catch((error) => { + console.error('Service Worker: Failed to cache assets', error); + }) + ); + self.skipWaiting(); +}); + +// Activate event - clean up old caches +self.addEventListener('activate', (event) => { + event.waitUntil( + caches.keys().then((cacheNames) => { + return Promise.all( + cacheNames.map((cache) => { + if (cache !== CACHE_NAME && cache !== DYNAMIC_CACHE_NAME && cache !== IMAGES_CACHE_NAME) { + console.log('Service Worker: Deleting old cache', cache); + return caches.delete(cache); + } + }) + ); + }) + ); + self.clients.claim(); +}); + +// Fetch event - serve cached content when offline +self.addEventListener('fetch', (event) => { + // Only handle GET requests + if (event.request.method !== 'GET') { + return; + } + + // Skip cross-origin requests + if (!event.request.url.startsWith(self.location.origin)) { + return; + } + + event.respondWith( + caches.match(event.request) + .then((cachedResponse) => { + // Return cached version if available + if (cachedResponse) { + return cachedResponse; + } + + // Otherwise, fetch from network + return fetch(event.request) + .then((response) => { + // Don't cache non-successful responses + if (!response || response.status !== 200 || response.type !== 'basic') { + return response; + } + + // Clone the response + const responseToCache = response.clone(); + + // Cache the fetched response + caches.open(CACHE_NAME) + .then((cache) => { + cache.put(event.request, responseToCache); + }); + + return response; + }) + .catch(() => { + // If network fails, try to serve a fallback page + if (event.request.mode === 'navigate') { + return caches.match('/404.html'); + } + }); + }) + ); +}); + +// Background sync for form submissions (when supported) +self.addEventListener('sync', (event) => { + if (event.tag === 'contact-form-sync') { + event.waitUntil(syncContactForm()); + } +}); + +// Handle push notifications (for future use) +self.addEventListener('push', (event) => { + if (event.data) { + const data = event.data.json(); + const options = { + body: data.body, + icon: '/assets/images/icon-192x192.png', + badge: '/assets/images/badge-72x72.png', + tag: data.tag || 'default', + requireInteraction: true + }; + + event.waitUntil( + self.registration.showNotification(data.title, options) + ); + } +}); + +// Handle notification clicks +self.addEventListener('notificationclick', (event) => { + event.notification.close(); + + event.waitUntil( + clients.openWindow('/') + ); +}); + +// Sync contact form submissions +async function syncContactForm() { + try { + // This would handle any queued form submissions + console.log('Service Worker: Syncing contact form submissions'); + // Implementation would depend on your backend + } catch (error) { + console.error('Service Worker: Failed to sync contact form', error); + } +} + +// Performance monitoring +self.addEventListener('message', (event) => { + if (event.data && event.data.type === 'PERFORMANCE_MARK') { + // Log performance metrics + console.log('Service Worker: Performance mark', event.data); + } +}); \ No newline at end of file diff --git a/terms-of-service.html b/terms-of-service.html new file mode 100644 index 0000000..0e854a2 --- /dev/null +++ b/terms-of-service.html @@ -0,0 +1,78 @@ +--- +layout: default +title: Terms of Service +description: CodeStorm Hub Terms of Service - The terms and conditions for using our services. +--- + +
+
+

Terms of Service

+

Last updated: {{ "now" | date: "%B %d, %Y" }}

+
+
+ +
+
+
+

Acceptance of Terms

+

By accessing and using CodeStorm Hub services, you accept and agree to be bound by the terms and provision of this agreement.

+ +

Services Description

+

CodeStorm Hub provides technology consulting, software development, and digital transformation services including:

+
    +
  • Custom software development
    • +
  • Web and mobile application development
    • +
  • Cloud solutions and migration
    • +
  • Digital transformation consulting
    • +
  • Maintenance and support services
    • +
+ +

Project Terms

+

All projects are governed by separate project agreements that outline:

+
    +
  • Scope of work and deliverables
    • +
  • Timeline and milestones
    • +
  • Payment terms and schedule
    • +
  • Intellectual property rights
    • +
  • Confidentiality agreements
    • +
+ +

Payment Terms

+

Payment terms are specified in individual project agreements. Generally:

+
    +
  • Invoices are due within 30 days of receipt
    • +
  • Late payments may incur additional fees
    • +
  • Project milestones may require upfront payments
    • +
+ +

Intellectual Property

+

Upon full payment, clients receive ownership of custom-developed software. However:

+
    +
  • We retain rights to general methodologies and know-how
    • +
  • Third-party components remain under their respective licenses
    • +
  • We may showcase projects in our portfolio (with permission)
    • +
+ +

Limitation of Liability

+

Our liability is limited to the amount paid for services. We are not liable for:

+
    +
  • Indirect or consequential damages
    • +
  • Loss of data or business interruption
    • +
  • Third-party integrations or services
    • +
+ +

Termination

+

Either party may terminate services with written notice. Upon termination:

+
    +
  • Payment is due for completed work
    • +
  • We will provide deliverables for paid work
    • +
  • Confidentiality obligations continue
    • +
+ +

Contact Information

+

For questions about these terms, contact us at:

+

Email: legal@codestormhub.com

+

Phone: +1 (555) 123-4567

+
+
+
\ No newline at end of file diff --git a/test.html b/test.html new file mode 100644 index 0000000..5f49d7a --- /dev/null +++ b/test.html @@ -0,0 +1,251 @@ + + + + + + JavaScript Unit Tests - CodeStorm Hub + + + +

JavaScript Unit Tests

+ + +
+ + + + \ No newline at end of file