AMAU Interactive is a professional portfolio and services website for an indie game development studio. The site showcases the studio's game projects, services, team members, and provides a contact platform for potential collaborators.
Type: Responsive Multi-page Website
Built With: HTML5, CSS3, JavaScript, Bootstrap 5
Repository: AMAU-INTERACTIVE (GitHub)
- Multi-page Architecture – Home, Services, About, Contact pages
- Dark/Light Mode Toggle – User preference persistence with localStorage
- Responsive Design – Mobile-first approach using Bootstrap 5
- Smooth Animations – Fade-in effects on page elements
- Sticky Navigation – Navigation bar follows users while scrolling
- Modal Dialogs – Product detail modals with rich information display
- Hero carousel showcasing featured projects
- Navigation to main sections
- Call-to-action buttons
- Smooth scroll behavior
- Product grid showcasing multiple projects and engines (metadata: type, release, platform):
- Land of Tears — Bullet Hell (2022) • Platforms: PC / Mobile / WebGL
- Crimson Barrage — Puzzle Adventure (2023) • Platforms: PC / Mobile / WebGL / Console
- Ashfall Mirage — Visual Novel (2025) • Platforms: PC / Mobile / WebGL / Console
- HemoEngine VFX — Visual Novel Engine (2025) • Platforms: PC / WebGL
- Nemophilia INV — Rigging Engine (2025) • Platforms: PC
- TenPat Brute — Bullet‑Hell Pattern Systems (2025) • Platforms: PC
- Hover effects, preview buttons, and detailed product modals for each item
(modal data populated via
data-attributes on buttons)
| # | Title | Type | Release | Platforms | Description |
|---|---|---|---|---|---|
| 1 | Land of Tears | Bullet Hell | 2022 | PC / Mobile / WebGL | Dark fantasy bullet-hell with adaptive shooting patterns and intense VFX |
| 2 | Crimson Barrage | Puzzle Adventure | 2023 | PC / Mobile / WebGL / Console | Magical adventure featuring interactive puzzles and dynamic visual effects |
| 3 | Ashfall Mirage | Visual Novel | 2025 | PC / Mobile / WebGL / Console | Experimental visual novel with custom shader systems and unique engine architecture |
| 4 | HemoEngine VFX | VN Engine | 2025 | PC / WebGL | Specialized VFX engine designed specifically for visual novel development |
| 5 | Nemophilia INV | Rigging Engine | 2025 | PC | Advanced rigging engine for visual novel character animation and control |
| 6 | TenPat Brute | Pattern System | 2025 | PC | Comprehensive bullet-hell pattern library with pre-designed shooting systems |
Each product is interactive on the Services page—hover over any card to preview and click "View Detail" to access full metadata including description, type, platform support, and demo links (where available).
- Studio vision and mission statement
- Team member profiles with roles
- Studio philosophy and capabilities
- Contact form with validation
- Social media links
- Direct communication channels
- Form feedback messaging
AMAU Interactive has developed 6 projects across games, engines, and specialized tools:
- 🎯 Land of Tears (2022) — Dark fantasy bullet-hell with advanced pattern systems
- ⚔️ Crimson Barrage (2023) — Puzzle adventure with immersive visual design
- 🎭 Ashfall Mirage (2025) — Experimental visual novel with cutting-edge shaders
- ⚙️ HemoEngine VFX (2025) — VFX powerhouse for visual novel production
- 🎪 Nemophilia INV (2025) — Professional rigging engine for character animation
- 💥 TenPat Brute (2025) — Bullet-hell pattern system with pre-built designs
👉 View Full Portfolio – Interactive showcase with detailed specs and media
UAS_PEMWEB/
├── HTML/
│ ├── index.html # Home page
│ ├── service.html # Services & portfolio
│ ├── about.html # About & team
│ └── contact.html # Contact form
├── CSS/
│ ├── style-index.css # Home styling
│ ├── style-service.css # Services styling
│ ├── style-about.css # About styling
│ └── style-contact.css # Contact styling
├── JS/
│ ├── script.js # Home page logic
│ ├── service.js # Services page logic
│ ├── about.js # About page logic
│ └── contact.js # Contact form logic
├── assets/
│ └── img/ # Project images and assets
└── README.md # This file
Dark Mode (Default):
- Background:
#000000 - Text:
#FFFFFF - Accent:
#820000(Deep Red) - Accent Dark:
#540000
Light Mode:
- Background:
#F4F6FA(Off-white) - Text:
#1a1a1a(Dark) - Accent:
#0A0F2A(Navy Blue)
- Headings: Playfair Display (serif)
- Body: Inter (sans-serif)
- Responsive navigation with toggle button
- Product cards with hover effects
- Modal dialogs for detailed information
- Form inputs with validation
- Footer sections on all pages
| Technology | Purpose |
|---|---|
| HTML5 | Semantic markup and structure |
| CSS3 | Styling, animations, responsive design |
| JavaScript | DOM manipulation, form handling, theme switching |
| Bootstrap 5 | Grid system, components, responsive framework |
| Bootstrap Icons | Icon library for UI elements |
- Persistent theme preference using localStorage
- CSS variables for dynamic color switching
- Smooth icon transitions (sun ↔ moon)
- Navigation bar stays visible while scrolling
- High z-index for layering
- Responsive collapse on mobile devices
- Email validation
- Required field checking
- User feedback messages
- Product detail modals on Services page
- Dynamic data population from button attributes
- Centered, responsive modal dialogs
- Fade-in effects on page sections
- Hover transforms on cards
- Smooth transitions (0.3s - 0.6s)
- Mobile-first approach
- Bootstrap grid system
- Media queries for different breakpoints
- Touch-friendly navigation
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
- Modern web browser (Chrome, Firefox, Safari, Edge)
- No backend server required (static files)
-
Clone the repository:
git clone https://github.com/Arielabdel/AMAU-INTERACTIVE.git
-
Navigate to project directory:
cd UAS_PEMWEB -
Open in browser:
- Double-click
index.htmlor - Use a local server (e.g., Live Server in VS Code)
- Double-click
- All HTML files link to Bootstrap CDN and local CSS files
- JavaScript files loaded via script tags at bottom of each page
- Each page has its own CSS file for specific styling
- CSS variables defined in
:rootfor theming - Bootstrap CSS loaded via CDN
script.js- Home page logicservice.js- Services page + fade-in animationsabout.js- About page logiccontact.js- Contact form handling
✅ Responsive Multi-page Website – All pages fully responsive
✅ Dark/Light Mode – Theme switching with persistence
✅ Smooth Animations – Fade-in effects and hover animations
✅ Form Validation – Client-side validation on contact form
✅ Modal Dialogs – Dynamic product detail display
✅ Sticky Navigation – Navbar follows user while scrolling
✅ Professional Design – Clean, modern aesthetic
✅ Cross-browser Compatible – Works on all modern browsers
Amau Interactive is a collaborative indie studio with the following team members:
- Adit – Lead Programmer
- Fattah – VFX Artist
- Ariel – Lead Artist
- Misykat – Game Designer
© 2025 Amau Interactive. All rights reserved.
- Website: AMAU Interactive
- GitHub Repository: AMAU-INTERACTIVE
- Contact: amauku@example.com
This is a Final Project (UAS) for Web Programming course. The website demonstrates proficiency in:
- Semantic HTML5
- Modern CSS3 with animations
- Vanilla JavaScript (no frameworks)
- Responsive design principles
- User experience design
- ✨ Added 3 new products: HemoEngine VFX, Nemophilia INV, TenPat Brute
- 🎨 Expanded portfolio to 6 total projects
- 📱 Enhanced Services page with scroll-to-top button
- 📖 Updated README with comprehensive portfolio showcase
- ✅ Fade-in animations on service page header
- 🎯 Multi-page website with Home, Services, About, Contact
- 🌓 Dark/Light mode toggle with localStorage persistence
- 📱 Fully responsive design (mobile-first)
- 🎪 Interactive product modals with dynamic content
- 🔗 Sticky navigation bar
- ✨ Smooth animations and transitions