GAMABA Digital Portfolio Template

A comprehensive digital portfolio website template for showcasing GAMABA (Gawad sa Manlilikha ng Bayan) awardees and their literary significance. This template fulfills all requirements for APP 001: Website/Digital Portfolio.

🎯 Features

✅ Required Components

• Recorded Webinar Video: Template section for embedding webinar videos about GAMABA awardees
• Digital E-Brochure: Section for linking or embedding digital brochures
• Group Reflections: Curated literary content and group written reflections
• Netiquette Section: Comprehensive guidelines for responsible online communication
• Cultural Heritage Connection: Clear integration of Philippine literature with GAMABA artists

🎨 Design Features

• Responsive Design: Works perfectly on desktop, tablet, and mobile devices
• Modern UI/UX: Clean, professional design with Philippine cultural elements
• Interactive Carousel: Hero section with auto-advancing image carousel
• Video Template: Ready-to-use video embedding section
• Smooth Animations: Scroll-triggered animations and hover effects
• Accessibility: Proper semantic HTML and keyboard navigation

📁 File Structure

Website_Portfolio/
├── index.html          # Main HTML file
├── styles.css          # Custom CSS styles
├── script.js           # JavaScript functionality
└── README.md           # This documentation

🚀 Quick Start

1. Open the Website: Simply open index.html in any modern web browser
2. Customize Content: Replace placeholder content with your actual materials
3. Add Your Media: Update video embeds, brochure links, and reflection content
4. Deploy: Upload all files to your web hosting service

📝 Customization Guide

1. Adding Your Webinar Video

Replace the YouTube embed in the video section:

<!-- Replace this line in index.html -->
<iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID" ...></iframe>

2. Adding Your E-Brochure

Update the brochure section with your actual brochure:

<!-- Replace the placeholder in the brochure section -->
<a href="YOUR_BROCHURE_LINK" class="btn btn-primary btn-lg">
    <i class="fas fa-download me-2"></i>View E-Brochure
</a>

3. Adding Group Reflections

Replace the placeholder content in the reflections section with your actual group work:

<!-- Update each card in the reflections section -->
<div class="card-body">
    <h5 class="card-title">Your Reflection Title</h5>
    <p class="card-text">Your actual reflection content here...</p>
    <a href="YOUR_DETAILED_CONTENT_LINK" class="btn btn-outline-primary">Read More</a>
</div>

4. Customizing Colors

Update the CSS variables in styles.css:

:root {
    --primary-color: #your-color;
    --secondary-color: #your-color;
    /* ... other colors */
}

🎨 Sections Overview

1. Hero Section with Carousel

• Auto-advancing image carousel
• Call-to-action buttons
• Responsive background images
• Smooth transitions

2. Webinar Video Section

• YouTube/Video embed template
• Video description and highlights
• Responsive video player
• Loading animations

3. E-Brochure Section

• Download/view button
• Brochure preview area
• Hover effects
• Professional styling

4. Group Reflections Section

• Card-based layout
• Multiple reflection categories
• Hover animations
• Responsive grid

5. Netiquette Section

• Interactive guidelines
• Modal popup for detailed rules
• Cultural sensitivity focus
• Professional communication

📱 Responsive Design

The template is fully responsive and includes:

• Mobile-first design approach
• Flexible grid system
• Touch-friendly navigation
• Optimized images and videos
• Adaptive typography

🔧 Technical Features

• Bootstrap 5.3.0: Modern CSS framework
• Font Awesome 6.0.0: Professional icons
• Vanilla JavaScript: No external dependencies
• CSS Grid & Flexbox: Modern layout techniques
• Smooth Scrolling: Enhanced user experience
• Intersection Observer: Performance-optimized animations

🎯 GAMABA Integration

The template specifically addresses the connection between Philippine literature and GAMABA cultural heritage through:

• Cultural Color Scheme: Philippine flag colors and cultural elements
• Literary Focus: Dedicated sections for literary analysis and reflections
• Heritage Preservation: Emphasis on cultural significance and preservation
• Educational Content: Structured learning materials about GAMABA awardees

📚 Content Guidelines

For Webinar Section:

• Include clear learning objectives
• Provide video transcripts if available
• Add discussion questions
• Include presenter information

For E-Brochure:

• Use high-quality images
• Include proper citations
• Ensure accessibility compliance
• Provide multiple format options

For Reflections:

• Encourage diverse perspectives
• Include personal insights
• Connect to broader cultural themes
• Maintain academic integrity

For Netiquette:

• Emphasize cultural sensitivity
• Include specific examples
• Address academic communication
• Promote inclusive language

🚀 Deployment Options

Option 1: GitHub Pages

1. Upload files to a GitHub repository
2. Enable GitHub Pages in repository settings
3. Access via username.github.io/repository-name

Option 2: Netlify

1. Drag and drop the folder to Netlify
2. Automatic deployment and HTTPS
3. Custom domain support

Option 3: Traditional Web Hosting

1. Upload all files via FTP
2. Ensure proper file permissions
3. Test all functionality

🔍 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+
• Mobile browsers (iOS Safari, Chrome Mobile)

📞 Support

For questions or customization help:

• Check the code comments for guidance
• Review the CSS variables for easy customization
• Test responsiveness across different devices
• Validate HTML and CSS for best practices

📄 License

This template is provided for educational use. Please ensure all content and media used complies with copyright laws and academic integrity standards.

---

Note: Remember to replace all placeholder content with your actual GAMABA project materials before deployment. The template provides the structure and styling - you provide the meaningful content that connects Philippine literature with GAMABA cultural heritage.