AI Web Portfolio - Front-End Basics

A professional portfolio demonstration built during Day 1 of my HTML/CSS learning roadmap. This project focuses on applying foundational web technologies to create clean, semantic, and visually appealing agency layouts.

🎯 Objective

This repository demonstrates foundational HTML5 and CSS3 skills. The goal was to build a multi-page portfolio for an AI Web Development and Game Studio, utilizing semantic tags for SEO and accessibility, combined with internal CSS for a polished, "out-of-the-box" professional look.

📂 Files Included

Day 1: HTML5 Foundations (Day_01_HTML_Basics/)

• 01_agency_intro.html: A modern landing page introducing the studio with a clear call-to-action.
• 02_services_list.html: Showcases digital services using ordered and unordered lists.
• 03_tools_table.html: A structured data representation using HTML tables to list the technology stack.
• 04_contact_ui.html: A functional and styled contact form for client inquiries.
• 05_text_formatting.html: Demonstrates inline text elements like <strong>, <em>, and <mark>.
• 06_image_gallery.html: Implements image embedding with proper alt attributes and basic styling.
• 07_hyperlinks_hub.html: A collection of external links using the <a> tag and target attributes.
• 08_audio_video.html: Native multimedia embedding using <audio> and <video> tags.
• 09_blockquote_citations.html: Semantic use of <blockquote>, <q>, and <cite> for external references.
• 10_definition_list.html: A glossary structure using the definition list (<dl>, <dt>, <dd>) tags.
• 11_details_summary.html: An interactive FAQ layout using the <details> disclosure element.
• 12_iframe_embed.html: Demonstrates embedding external content like maps and videos using <iframe>.
• 13_article_aside.html: Semantic page structuring using <article> and <aside> for content and sidebars.
• 14_progress_meter.html: Visualizing data and skill levels using <progress> and <meter> elements.

Day 2: CSS Styling & Box Model (Day_02_CSS_Basics/)

• 01_css_selectors.html: Mastering element, class, ID, and universal selectors for targeted styling.
• 02_color_and_backgrounds.html: Implementing hex/rgba colors, gradients, and patterned backgrounds.
• 03_typography_fonts.html: Advanced text styling including font-family, line-height, and weight.
• 04_the_box_model.html: Visual demonstration of content, padding, border, and margin relationships.
• 05_borders_and_shadows.html: Creating depth and modern UI cards with border-radius and box-shadow.
• 06_styling_links_buttons.html: Interactive states using hover/active pseudo-classes for professional buttons.
• 07_styling_lists.html: Converting standard lists into vertical navigation menus and custom-bullet lists.
• 08_display_property.html: Understanding the behavior of block, inline, and inline-block elements.
• 09_positioning_basics.html: Implementing complex layouts using relative, absolute, and fixed positioning.
• 10_flexbox_intro.html: Introduction to Flexbox for perfect vertical and horizontal centering.

Day 3: CSS Flexbox & Responsive Layouts (Day_03_Flexbox_Layouts/)

• 01_flex_container_basics.html: Initializing flex contexts with display: flex.
• 02_flex_direction.html: Controlling layout flow with row and column directions.
• 03_justify_content.html: Mastering main-axis alignment (center, space-between, etc.).
• 04_align_items.html: Precise cross-axis alignment for consistent element heights.
• 05_flex_wrap.html: Handling multi-line layouts and element overflow gracefully.
• 06_flex_grow_shrink.html: Creating dynamic, fluid elements that adapt to available space.
• 07_order_property.html: Decoupling visual order from HTML structure for flexible UIs.
• 08_responsive_navbar.html: Building a professional, adaptive navigation system.
• 09_hero_section_center.html: Implementing the industry-standard perfectly centered hero banner.
• 10_card_grid_flex.html: A modern 3-column project grid with hover effects and fluid sizing.

Day 4: CSS Grid & Responsive Design (Day_04_CSS_Grid_Responsive/)

• 01_grid_container_basics.html: Initializing grid contexts with display: grid.
• 02_grid_columns_rows.html: Mastering fr units, repeat(), and minmax() for layout control.
• 03_grid_template_areas.html: Semantic layout mapping using named grid areas.
• 04_responsive_grid_auto_fit.html: Creating self-adjusting layouts with auto-fit and auto-fill.
• 05_media_queries_intro.html: Implementing standard breakpoints for Mobile, Tablet, and Desktop.
• 06_mobile_first_layout.html: Designing robust layouts starting from the smallest screen size.
• 07_bento_box_portfolio.html: A modern "Bento Box" grid layout for showcasing AI projects.
• 08_gaming_character_gallery.html: A responsive image-heavy grid for gaming assets with hover tags.
• 09_css_transitions_hover.html: Adding fluid animations and depth with 3D transforms and shadows.
• 10_full_responsive_landing.html: A complete, mobile-ready landing page combining all Grid and Media Query concepts.

Day 5: CSS Animations & Forms (Day_05_Animations_Forms/)

• 01_css_keyframes_intro.html: Understanding @keyframes and complex multi-stage animations.
• 02_button_hover_effects.html: Creating professional, interactive UI elements with transitions and glow effects.
• 03_loading_spinners.html: Building pure CSS performance-focused loading indicators.
• 04_styled_contact_form.html: Modern, accessible form layouts using Flexbox and Grid.
• 05_input_focus_states.html: Enhancing UX with :focus, :valid, and :invalid pseudo-classes.
• 06_glassmorphism_login.html: Implementation of the modern "frosted glass" aesthetic for UI cards.
• 07_dark_mode_toggle_ui.html: Building a theme-switcher component with smooth CSS variable transitions.
• 08_studio_recruitment_form.html: A themed, high-fidelity application form for VS Gaming Studio.
• 09_animated_progress_bar.html: Visualizing data with animated fills and shine overlays.
• portfolio_hero_animated.html: A high-impact hero section with entry animations and floating 3D elements.

Day 6: Responsive Web Design & Mobile-First (Day_06_Responsive_Design/)

• 01_viewport_meta_tag.html: Understanding the critical foundation for mobile-responsive scaling.
• 02_basic_media_queries.html: Implementing breakpoints for adaptive backgrounds and layouts.
• 03_mobile_first_grid.html: Designing 1-column mobile layouts that expand to 3-columns on desktop.
• 04_responsive_typography.html: Mastering fluid text scaling using clamp() and viewport units.
• 05_hamburger_menu_css_only.html: Building a functional mobile navigation using the "Checkbox Hack".
• 06_responsive_images.html: Art direction with the <picture> element and responsive max-width.
• 07_card_layout_flex_wrap.html: Creating self-stacking flexbox cards for dynamic content.
• 08_studio_team_roster.html: A responsive 7-member grid with auto-fit and minmax() properties.
• 09_youtube_video_embed_responsive.html: Implementing the aspect-ratio hack for perfectly scaled video iframes.
• 10_portfolio_contact_responsive.html: A fully adaptive contact form with mobile-optimized spacing.

Day 7: CSS Flexbox & Grid Architecture (Day_07_Flexbox_and_Grid/)

• 01_flexbox_align_justify.html: Mastering align-items and justify-content for precise centering.
• 02_flex_grow_shrink.html: Dynamic item sizing using growth and shrinkage logic.
• 03_css_grid_basics.html: Foundation of 2D layouts with columns, rows, and gaps.
• 04_grid_areas.html: Advanced semantic structuring using named grid-template-areas.
• 05_holy_grail_layout.html: Implementing the classic industry-standard layout with Header, Footer, and Sidebars.
• 06_masonry_layout_mimic.html: A Pinterest-style dynamic gallery using variable row spanning.
• 07_auto_fit_vs_auto_fill.html: Understanding the nuances of responsive track behavior in repeat().
• 08_studio_game_showcase.html: A high-fidelity gaming dashboard using card-based Grid design.
• 09_youtube_video_dashboard.html: Hybrid architecture combining a Flex sidebar with a Grid video feed.
• 10_cybersecurity_tools_panel.html: Complex nested Grids for data-heavy hacker interfaces.

Day 8: CSS Animations & UI Micro-interactions (Day_08_CSS_Animations/)

• 01_hover_transitions.html: Smooth background, color, and transform changes on hover.
• 02_keyframes_basics.html: Creating custom multi-stage animations using @keyframes.
• 03_loading_spinners.html: Building 3 different pure CSS high-performance loading animations.
• 04_bouncing_elements.html: Mastering timing functions like ease-in-out and cubic-bezier.
• 05_parallax_scrolling_lite.html: Creating a simple depth effect on scroll using 3D transforms.
• 06_typing_effect_css.html: A retro console typing animation using steps() and overflow.
• 07_glassmorphism_cards.html: Frosted glass UI elements with backdrop filters and floating motion.
• 08_vs_studio_splash_screen.html: A dramatic, fading-in animated logo screen for 'VS Gaming Studio'.
• 09_youtube_subscribe_button.html: Highly interactive subscribe button with a bell ringing animation.
• 10_cyber_glitch_text.html: A hacker-style neon glitch effect on text using multiple shadows.

Day 9: Responsive Layouts & CSS Architecture (Day_09_Responsive_Layouts/)

• 01_flexbox_row_column.html: Mastering flex-direction, justify-content, and align-items for precise centering.
• 02_css_grid_template.html: Building a classic layout using grid-template-columns and rows.
• 03_media_queries_basics.html: Implementing dynamic background colors and typography based on screen breakpoints.
• 04_mobile_first_design.html: Executing a "Small-to-Large" strategy by scaling layouts from phone to desktop.
• 05_holy_grail_layout.html: The industry-standard Header/Footer/Sidebar architecture using named Grid areas.
• 06_responsive_image_gallery.html: A fluid auto-fit image grid that adjusts columns dynamically based on viewport width.
• 07_navigation_bar_flex.html: A modern navbar that transforms into a sliding mobile menu on smaller screens.
• 08_vs_studio_dashboard.html: A complex CSS Grid dashboard representing an AI project management interface.
• 09_rise_and_shine_blog.html: A Flexbox-driven motivational article feed with responsive stacked states.
• 10_hardware_store_grid.html: A high-fidelity responsive product display grid for high-performance PC components.

Day 10: CSS Animations & Modern UI Effects (Day_10_CSS_Animations/)

• 01_hover_transitions.html: Smooth background, color, and transform changes on hover with cubic-bezier timing.
• 02_css_keyframes_basics.html: Multi-circle pulsing and bouncing loader using layered @keyframes.
• 03_glassmorphism_card.html: Modern "frosted glass" aesthetic with backdrop-filter, blur, and floating background shapes.
• 04_parallax_scrolling_effect.html: Immersive 3-section layout using background-attachment: fixed for depth.
• 05_animated_navigation_menu.html: Interactive navbar with sliding underline micro-interactions.
• 06_typing_text_animation.html: Retro-futuristic typewriter effect using steps() keyframe timing and blinking cursor.
• 07_3d_flip_card.html: Interactive profile card with 180-degree Y-axis rotation using perspective and preserve-3d.
• 08_cyberpunk_neon_button.html: High-fidelity glitching button effect with multiple box-shadows and clip-path animations.
• 09_vs_studio_team_reveal.html: Professional team gallery with slide-up detail overlays and image scaling.
• 10_ai_tool_loading_screen.html: Complex futuristic screen featuring rotating rings, scanning lines, and pulsing status text.

Day 11: JS DOM Basics & Interactivity (Day_11_JS_DOM_Basics/)

• 01_dom_element_selectors.html: Mastering getElementById and querySelector to dynamically update system status text.
• 02_event_listeners_click.html: Implementing multiple click listeners to shift the global atmosphere (background color).
• 03_dynamic_list_creator.html: A functional Quest Log using createElement and appendChild for real-time inventory updates.
• 04_css_class_toggler.html: Creating interactive ability cards using classList.toggle for expandable UI mechanics.
• 05_dark_mode_switch.html: A professional theme switcher with persistent state management using localStorage.
• 06_vs_gaming_score_tracker.html: A high-fidelity gaming score counter with state-driven display updates and leading-zero padding.
• 07_form_input_validation.html: Real-time security key validation using input events and conditional UI feedback.
• 08_mouse_move_tracker.html: Building a hardware-accelerated motion tracker with live X/Y coordinates and a custom neon cursor.
• 09_settimeout_popup.html: Implementing timed UI events with a blur-filtered modal that auto-triggers after a 3-second delay.
• 10_custom_context_menu.html: Overriding native browser behavior to implement a stylized, absolute-positioned right-click neural menu.

Day 12: Advanced DOM Utils & Web APIs (Day_12_Advanced_DOM_Utils/)

• 01_custom_audio_player.html: A stylized audio player UI with custom controls and dynamic progress tracking via timeupdate.
• 02_drag_and_drop_kanban.html: Mini Kanban board implementing the HTML5 Drag and Drop API for fluid task management.
• 03_infinite_scroll_list.html: Dynamic gamer-profile feed that fetches and appends mock data as the user scrolls.
• 04_localstorage_sticky_notes.html: Persistent workspace where note content and positions are saved across sessions using localStorage.
• 05_keyboard_hero_game.html: Terminal-style typing game capturing keydown events with WPM calculation and visual error feedback.
• 06_dynamic_data_table.html: Interactive table component with client-side sorting, real-time filtering, and array-backed state.
• 07_intersection_observer_reveal.html: Sleek scroll-triggered entry animations using the Intersection Observer API.
• 08_cyberpunk_countdown_timer.html: Precision timer with SVG ring fill animations and accurate setInterval tracking.
• 09_form_autosave_draft.html: Profile form with automatic sessionStorage persistence to prevent data loss on refresh.
• 10_toast_notification_manager.html: Centralized notification system using a class-based manager to spawn animated toast bubbles.

Day 13: Terminal UI Generators (Day_13_Terminal_UI_Generators/)

Terminal UI Architecture & Metrics Mapping ✅ COMPLETED

• 01_terminal_output_logger.html: A retro CRT Linux terminal component with animated scrolling text output arrays.
• 02_api_quota_dashboard.html: Interactive grid dashboard visualizing model tokens, execution delay gauges, and daily API usage charts.
• 03_system_telemetry_grid.html: Cyberpunk style workspace tracking CPU/Network streams with high-performance mock canvas graphics.
• 04_file_tree_explorer.html: Dynamic file-tree node component utilizing recursive DOM manipulation to collapse/expand workspace structures.
• 05_git_diff_visualizer.html: Color-coded syntax highlighter showing local changes with green/red line highlighting.
• 06_prompt_playground.html: Advanced interface to write, benchmark system instructions, and visualize raw response logs.
• 07_drag_drop_pipeline.html: Kanban style flowchart node system where drag-and-drop connections trigger mock script executions.
• 08_cyber_error_boundary.html: Neon flash overlay container that intercepts application failure states and presents detailed debug steps.
• 09_live_activity_feed.html: Event stream container displaying real-time task notifications using CSS absolute transform slide transitions.
• 10_settings_sync_panel.html: Interface panel handling API configurations and themes, with encrypted state backups to sessionStorage.

Day 14: AI Data Dashboards (Day_14_AI_Data_Dashboards/)

Sleek AI Data Visualization & Interactive Patterns ✅ COMPLETED

• 01_gemini_chat_interface.html: Modern, responsive chat UI with typing indicators and AI message bubbles.
• 02_scraper_results_grid.html: Masonry-style card layout for displaying scraped JSON data with hover effects.
• 03_subnet_visualizer.html: Interactive visual node map showing IP ranges with cyberpunk canvas animations.
• 04_token_cost_calculator_ui.html: Dynamic usage estimator with range sliders and real-time cost calculation.
• 05_code_block_highlighter.html: Markdown-style code container with syntax highlighting and clipboard functionality.
• 06_model_comparison_table.html: Responsive side-by-side spec comparison for Gemini models with sticky headers.
• 07_system_health_widget.html: Compact monitoring dashboard with animated circular progress rings.
• 08_api_key_manager.html: Secure-looking settings panel with masked inputs and visibility toggles.
• 09_drag_drop_file_uploader.html: Custom upload zone with drag-over highlights for AI document ingestion.
• 10_animated_loading_states.html: Collection of 3 performance-optimized CSS loaders for AI generation wait times.

🎨 Tech Stack

• HTML5: Used for semantic structure (header, main, footer, section, form).
• CSS3: Internal styling for typography, layout (Flexbox), and interactive elements.
• JavaScript (ES6+): DOM Manipulation, Event Handling, and LocalStorage for interactivity.
• Design Aesthetic: Modern Dark Mode with Neon Accents (Cyan, Lime, Purple).

🚀 Getting Started

Simply open any of the .html files in a modern web browser to view the portfolio.