Futuristic Website

Open-source futuristic web template created by D371L for free use.

🌟 Overview

Futuristic Website is a modern, responsive, single-page website template with a futuristic design aesthetic. It features smooth animations, multi-language support, and a clean, minimal codebase. Perfect for portfolios, landing pages, or business websites.

✨ Features

• Modern Design: Futuristic UI with animated starfield background, gradient effects, and smooth transitions
• Responsive: Fully responsive design that works on all devices
• Multi-language: Built-in support for English, Russian, and Hebrew (RTL support included)
• Performance: Optimized for speed with lazy loading, efficient animations, and minimal dependencies
• Accessibility: WCAG compliant with proper ARIA labels and keyboard navigation
• SEO Ready: Semantic HTML structure with proper meta tags
• No Build Process: Pure HTML, CSS, and JavaScript - no bundlers or build tools required

🚀 Quick Start

Option 1: GitHub Pages (Recommended)

1. Fork or clone this repository
2. Go to your repository Settings → Pages
3. Select source: "Deploy from a branch"
4. Choose branch: main and folder: / (root)
5. Your site will be available at https://yourusername.github.io/futuristicwebsite/

Option 2: Local Development

1. Clone the repository:

   git clone https://github.com/D371L/futuristicwebsite.git
   cd futuristicwebsite

2. Serve the files using any static file server:

   Using Python:

   python3 -m http.server 8000

   Using Node.js (http-server):

   npx http-server -p 8000

   Using PHP:

   php -S localhost:8000

3. Open your browser and navigate to http://localhost:8000

Option 3: Deploy to Any Static Hosting

The project is a static website, so it can be deployed to:

• Netlify
• Vercel
• Cloudflare Pages
• Any web server that serves static files

Simply upload all files to your hosting provider.

📁 Project Structure

futuristicwebsite/
├── index.html          # Main HTML file
├── style.css           # All styles (CSS)
├── main.js             # All JavaScript functionality
├── assets/             # Static assets
│   ├── favicon.png     # Site favicon
│   ├── logo.png        # Site logo
│   ├── team/           # Team member photos
│   ├── work/           # Portfolio/work images
│   └── partners/       # Partner logos
├── .nojekyll           # Disables Jekyll on GitHub Pages
├── 404.html            # Custom 404 page
├── LICENSE             # MIT License
└── README.md           # This file

🛠️ Technologies Used

• HTML5: Semantic markup
• CSS3: Modern CSS with custom properties, flexbox, grid, and animations
• Vanilla JavaScript: No frameworks or libraries - pure JavaScript
• Canvas API: For animated starfield background
• Web APIs: LocalStorage for language preferences, Fetch API for forms

📝 Customization

Changing Content

1. Text Content: Edit index.html directly
2. Translations: Modify the locales object in main.js (lines 35-104)
3. Colors: Update CSS custom properties in style.css (lines 1-14)
4. Images: Replace files in assets/ folders

Form Configuration

To enable the contact form, update the ENDPOINT variable in main.js (line 247):

const ENDPOINT = 'https://your-api-endpoint.com/';

Adding New Languages

1. Add a new language object to the locales object in main.js
2. Add language buttons in index.html (around line 42-45)
3. Update RTL support if needed (Hebrew example in code)

🎨 Design Features

• Animated Starfield: Canvas-based starfield animation
• Gradient Overlays: Multiple gradient layers for depth
• 3D Gyroscope: CSS 3D transforms for the hero section element
• Smooth Scrolling: Native CSS smooth scroll behavior
• Responsive Typography: Fluid typography using clamp()
• Dark Theme: Futuristic dark color scheme

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

This project is open-source and available for free use. Feel free to use it for personal or commercial projects.

👤 Author

D371L

• GitHub: @D371L
• Email: [email protected]

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

⚡ Performance

• No external dependencies (except Google Fonts)
• Optimized images with lazy loading
• Efficient CSS animations using transform and opacity
• Minimal JavaScript footprint
• Fast initial load time

🔧 Technical Details

CSS Architecture

• CSS Custom Properties for theming
• Mobile-first responsive design
• Flexbox and Grid layouts
• CSS animations and transitions
• Support for prefers-reduced-motion

JavaScript Architecture

• Vanilla JavaScript (ES6+)
• Modular function-based structure
• Event delegation where appropriate
• LocalStorage for persistence
• Canvas API for animations

File Sizes

• HTML: ~11 KB
• CSS: ~14 KB
• JavaScript: ~16 KB
• Total (without images): ~41 KB

---

Made with 🔥 by D371L

⭐ Star this repo if you find it useful!