Skip to content

Create visual text-based wireframe for front page layout in docs folder #275

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 1, 2025
Merged

Create visual text-based wireframe for front page layout in docs folder #275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
07b21e8
Initial plan
Copilot Aug 30, 2025
1b2b8f0
Add front page wireframe in docs folder and configure Eleventy to ign…
Copilot Aug 30, 2025
0e9a366
Complete wireframe implementation - verified Eleventy ignores docs fo…
Copilot Aug 30, 2025
b1c8070
Replace HTML wireframe with visual layout representation and revert p…
Copilot Sep 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eleventyignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@
./_drafts
./tests
./.github
docs
Dockerfile
DOCKER_OPTIMIZATION.md
158 changes: 158 additions & 0 deletions docs/front-page-wireframe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.