diff --git a/.eleventyignore b/.eleventyignore index 54cbec1b..52f2e70c 100644 --- a/.eleventyignore +++ b/.eleventyignore @@ -3,5 +3,6 @@ ./_drafts ./tests ./.github +docs Dockerfile DOCKER_OPTIMIZATION.md diff --git a/docs/front-page-wireframe.md b/docs/front-page-wireframe.md new file mode 100644 index 00000000..15a371b0 --- /dev/null +++ b/docs/front-page-wireframe.md @@ -0,0 +1,158 @@ +# Front Page Layout Wireframe + +This wireframe shows the visual layout structure of the Orionrobots front page as it appears to visitors, from top to bottom including what's above and below the fold. + +## Desktop Layout View (Full Page Structure) + +``` +┌───────────────────────────────────────────────────────────────────┐ +│ HEADER (Above the Fold) │ +├───────────────────────────────────────────────────────────────────┤ +│ 🏠 Orionrobots [Menu] [Menu] [Menu] [Menu] [Search Box] │ ← Navigation Bar +├───────────────────────────────────────────────────────────────────┤ +│ │ +│ MAIN CONTENT AREA (Full Width - No Sidebar) │ +├───────────────────────────────────────────────────────────────────┤ +│ [Tags: robot building, robotics at home, making robots] [🔗📧📱] │ ← Tag & Social Row +├───────────────────────────────────────────────────────────────────┤ +│ Welcome to Orionrobots │ ← Page Title +├───────────────────────────────────────────────────────────────────┤ +│ │ +│ At Orionrobots, Danny and his team build robots, electronics, │ +│ gadgets and stuff that moves. We aim to make robots easy for │ +│ anyone to build, and push the boundaries of what is easy. │ +│ │ +│ ┌─────────────────────────────────────────────────────────────┐ │ ← Book Banner +│ │ [Large Book Cover Image - Robotics at Home with Pi Pico] │ │ (Featured Content) +│ └─────────────────────────────────────────────────────────────┘ │ +│ │ +│ Discuss robot building on Our Discord Server! │ +│ You can see my latest videos on Orionrobots Youtube. │ +│ You can reach me on Facebook, Discord and LinkedIn... │ +│ │ +├───────────────────────────────────────────────────────────────────┤ +│ Recent Posts │ ← Section Heading +├───────────────────────────────────────────────────────────────────┤ +│ [📷] 30 Aug 2025 » Post Title One │ ← Recent Post Item +│ Post excerpt text about robotics and electronics... │ +│ [more...] │ +├───────────────────────────────────────────────────────────────────┤ +│ [📷] 25 Aug 2025 » Post Title Two │ ← Recent Post Item +│ Another post excerpt describing robot building projects... │ +│ [more...] │ +├───────────────────────────────────────────────────────────────────┤ +│ [📷] 20 Aug 2025 » Post Title Three │ +│ More content about electronics and maker projects... │ +│ [more...] │ +├───────────────────────────────────────────────────────────────────┤ +│ [📷] 15 Aug 2025 » Post Title Four │ +│ Additional robotics content and tutorials... │ +│ [more...] │ +├───────────────────────────────────────────────────────────────────┤ +│ [📷] 10 Aug 2025 » Post Title Five │ +│ Electronics projects and robot building guides... │ +│ [more...] │ +├───────────────────────────────────────────────────────────────────┤ +│ [📷] 05 Aug 2025 » Post Title Six │ +│ Latest robotics news and project updates... │ +│ [more...] │ +├───────────────────────────────────────────────────────────────────┤ +│ │ +│ Events │ ← Additional Sections +│ Robot Events │ +│ │ +│ Policies │ +│ Terms And Conditions │ +│ │ ← Bottom of Content +├───────────────────────────────────────────────────────────────────┤ +│ FOOTER (Below the Fold) │ +├───────────────────────────────────────────────────────────────────┤ +│ 💬 Discuss robot building on Our Discord Server! │ ← Social Links +│ 📺 Youtube │ +│ 📘 Facebook │ +│ 🔒 Privacy and Cookies │ +├───────────────────────────────────────────────────────────────────┤ +│ © 2025 OrionRobots. Orionrobots is a registered trademark. │ ← Copyright +│ with help from Bootstrap │ +└───────────────────────────────────────────────────────────────────┘ +``` + +## Layout Sections Breakdown + +### Above the Fold (Initially Visible) +``` +┌─ NAVIGATION BAR ─────────────────────────────────────────────────┐ +│ Logo + Brand Name | Menu Items | Search Box │ +└─────────────────────────────────────────────────────────────────┘ + +┌─ TAG & SOCIAL ROW ──────────────────────────────────────────────┐ +│ [Tag Buttons] | [Social Share Icons] │ +└─────────────────────────────────────────────────────────────────┘ + +┌─ PAGE HEADER ───────────────────────────────────────────────────┐ +│ Welcome to Orionrobots │ +└─────────────────────────────────────────────────────────────────┘ + +┌─ INTRO TEXT ────────────────────────────────────────────────────┐ +│ At Orionrobots, Danny and his team build robots... │ +└─────────────────────────────────────────────────────────────────┘ + +┌─ FEATURED BOOK BANNER ──────────────────────────────────────────┐ +│ [Large promotional image for "Robotics at Home with Pi Pico"] │ +└─────────────────────────────────────────────────────────────────┘ +``` + +### Below the Fold (Requires Scrolling) +``` +┌─ CALL TO ACTION LINKS ──────────────────────────────────────────┐ +│ • Discord Server Link │ +│ • YouTube Channel Link │ +│ • Social Media Links │ +└─────────────────────────────────────────────────────────────────┘ + +┌─ RECENT POSTS SECTION ──────────────────────────────────────────┐ +│ ## Recent Posts │ +│ │ +│ [Thumb] Date » Title | Post excerpt... [more...] │ +│ [Thumb] Date » Title | Post excerpt... [more...] │ +│ [Thumb] Date » Title | Post excerpt... [more...] │ +│ [Thumb] Date » Title | Post excerpt... [more...] │ +│ [Thumb] Date » Title | Post excerpt... [more...] │ +│ [Thumb] Date » Title | Post excerpt... [more...] │ +└─────────────────────────────────────────────────────────────────┘ + +┌─ ADDITIONAL NAVIGATION ─────────────────────────────────────────┐ +│ ## Events │ +│ Robot Events │ +│ │ +│ ## Policies │ +│ Terms And Conditions │ +└─────────────────────────────────────────────────────────────────┘ + +┌─ FOOTER ────────────────────────────────────────────────────────┐ +│ • Discord Link │ +│ • YouTube Link │ +│ • Facebook Link │ +│ • Privacy & Cookies Link │ +│ │ +│ © Year OrionRobots | Powered by Bootstrap │ +└─────────────────────────────────────────────────────────────────┘ +``` + +## Key Layout Characteristics + +**Full-Width Design**: Unlike other pages, the front page uses the entire container width (no sidebar) + +**Content Hierarchy**: +1. Navigation & Branding (sticky header) +2. Content tags & social sharing +3. Welcome message & intro +4. Featured book promotion (prominent placement) +5. Community links (Discord, YouTube, social) +6. Recent posts grid (main content discovery) +7. Additional navigation (events, policies) +8. Footer with links & copyright + +**Visual Flow**: Designed to capture attention with the book banner above the fold, then guide users to recent content and community resources below. + +**Responsive Breakpoints**: On mobile/tablet, the navigation collapses to hamburger menu, and content stacks vertically while maintaining the same content order. \ No newline at end of file