QDrive Project Documentation Organization and Frontend Website Development Project Proposal

I. Introduction

1.1 Project Background

This project is an approved initiative under the Zhejiang Provincial University Student Science and Technology Innovation Activity Plan (New Seedling Talent Program), with the project title"QDrive" — A High-Performance Servo Motion Control Platform for University Research and CompetitionsThis project is based on the discipline of Control Science and Engineering at Hangzhou Dianzi University, focusing on the engineering promotion of high-performance servo-grade Permanent Magnet Synchronous Motor (PMSM) control and verification systems. The core products include the QD4310 integrated drive-control hollow brushless servo motor platform, as well as derivative solutions such as the QGimbal two-axis gimbal and the QCar two-wheel self-balancing vehicle.

As the project products have completed prototype finalization and entered the market promotion phase, establishing a professional, systematic, and easily maintainable online product display and technical service system has become a critical infrastructure for the project's transition from "technology research and development" to "product promotion." Against this backdrop, the project team undertook the construction of the QDrive project official website (https://qdrive.com.cn/) and the organization of project materials, aiming to achieve structured presentation of product information, centralized management of technical documentation, and continuous optimization of user interaction experience through the systematic design of the front-end website.

1.2 Core Responsibilities

This report focuses on the author's core responsibilities within the project:For the "QDrive" consumer electronics gimbal product, establishing the website and organizing project materials, designing front-end product introduction and product specification web services.The specific work encompasses the following three aspects:

1. Site Architecture Design: Planning the overall information architecture and page hierarchy of the QDrive official website, defining the functional boundaries and interaction logic of core modules such as the homepage, product center, solutions, technical blog, about us, and tool services.
2. Front-End Page Development: Based on the Astro static site generation framework, completing the component-based front-end development of each page, including responsive layout, product carousel, navigation interaction, dark mode adaptation, and interactive animations for visual and functional implementation.
3. Project Material Organization: Systematically organizing product technical specifications, hardware design documents, software algorithm documentation, firmware versions, instructional videos, and user manuals, establishing standardized document naming, classification, archiving, and online publishing procedures.

II. Overall Website Architecture Design

2.1 Information Architecture and Site Map

The QDrive official website adopts a three-tier information architecture of "Brand Homepage—Product Depth—Service Support," balancing the brand awareness needs of first-time visitors with the technical material acquisition requirements of advanced users. The site map is shown in Figure 1.

2.2 Technology Stack Selection

The front-end of the website adoptsAstroas the static site generation framework, supplemented by native JavaScript for implementing interaction logic. The technical basis for the selection is shown in Table 1.

3. Frontend Page Module Design

3.1 Homepage Design: Brand Recognition and Product Entry

The homepage serves as the "brand facade," with the core design objective of conveying QDrive’s technical positioning (Precision Drive · Motion Control) within the first screen and providing clear product entry points. The homepage adopts the following module structure:

1. Global Navigation Bar: Fixed at the top, including the brand mark (Brand Mark + QDRIVE TECH / tagline), primary navigation (Home, Products, Solutions, Tech Blog, About Us). Products and Solutions use hover-triggered dropdown menus (Popover) to display sub-item summaries and jump links.
2. Hero Carousel Area: A three-screen carousel showcasing the three core product lines: QD4310 Servo Motor Platform, QGimbal Two-Axis Gimbal, and QCar Two-Wheel Balancing Vehicle. Each screen adopts a "text-left, image-right" layout, with the left side containing a category label (Kicker), product title, key selling points summary, and action buttons (View Details / Buy Now), while the right side displays product renderings.
3. Content Panel Area: Two large panels are placed below the carousel, directing users to "Tech Blog" and "About QDrive Tech," forming a natural transition from the homepage to in-depth content.
4. FooterA three-column layout comprising service support (video tutorials, web-based host computer, firmware download), purchase channels (Taobao store), contact information (email, QQ group, service hours), and filing information.

3.2 Product Center Page: In-depth Display of QD4310

The Product Center currently features the QD4310 servo motor platform as the core display object. The page adopts a vertical-scroll narrative structure, with each module unfolding sequentially:

1. Product HeroTitle + core positioning description + main rendering image, with action buttons including "Buy Now" (external link to Taobao) and "Download Resources" (anchor to the download section).
2. Core Selling Point CardsFive selling point cards arranged in a grid, respectively elaborating on the five major advantages: "Integrated Motor-Drive System," "Multiple Communication Interfaces," "High-Precision Encoder," "Hollow Shaft Design," and "Wide Voltage Support."
3. Product Material GalleryA three-column display of actual product photos, exploded views, and slip ring application images, enhancing users' intuitive understanding of the physical product.
4. Engineering DrawingsA single-column large image displaying mechanical dimensions and interface definitions, supplemented by CSS filters to achieve inverted color highlighting in dark mode, ensuring the readability of the drawings.
5. Key Parameter TableA structured table presenting technical specifications such as rated voltage, rated current, encoder resolution, communication interfaces, and control modes.
6. Resource Download AreaA list of firmware versions (including version number, release date, and update notes) along with download buttons; historical versions are selectable via a dialog pop-up.
7. Web-Based Host Computer EntryGuides users to use a browser-based serial port tuning tool, lowering the threshold for parameter configuration.

3.3 Solution Page: QGimbal 2-Axis Gimbal

The QGimbal 2-Axis Gimbal is a "consumer electronics gimbal product" explicitly mentioned in the content for which the author is responsible. This solution page shares the same visual and interaction framework as the Product Center page, but emphasizes "application scenarios" and "system-level value" in its content organization:

1. Solution Hero: Highlights the positioning of "dual-axis stabilization and intelligent visual tracking," with rendered images showcasing the overall appearance of the gimbal.
2. Solution Advantage Cards: Six cards elaborate on the solution's competitiveness from six dimensions: "dual-axis attitude stabilization," "intelligent visual tracking," "precise laser pointing," "high-precision control" (0.01° accuracy), "millisecond-level response," and "flexible serial port control integration."
3. Product Detail Gallery: Displays actual product photos and topology diagrams side by side, helping users understand the hardware composition and signal flow of the gimbal.
4. Embedded Demonstration Video: Embeds a Bilibili video player to showcase the gimbal's actual operational performance (stabilization, tracking, laser pointing).
5. Key Parameter Table: Covers parameters such as gimbal type, pitch/yaw angle range, drive motor, control accuracy, and communication method.

3.4 Technical Blog and About Page

Technical BlogServing as a vehicle for content marketing and user education, it adopts an article list layout covering topics such as servo motor control theory, FOC algorithm practice, sensorless control observer design, and product application cases. Each article includes a title, abstract, publication date, and tags, with support for filtering by topic.

About UsThe page presents the project team background, core member responsibilities, advisor information, the QDrive brand philosophy, and contact details, thereby reinforcing brand trust.

3.5 Tool Service Page: Web-Based Host Computer

The Web-Based Host Computer (/tools/motor-serial) is an important tool for lowering the user entry barrier. Users do not need to install desktop software; they can connect via USB serial port using only the Chrome/Edge browser, and use the Shell terminal and graphical panel to read, write, and calibrate motor parameters. This tool is implemented purely on the front end, based on the Web Serial API and Canvas drawing, and shares the navigation and visual style with the main website.

IV. Interaction and Visual Design System

4.1 Responsive Layout Strategy

The site adopts a Mobile-First responsive strategy, with breakpoints configured as follows:

• Desktop(≥1024px): Full navigation bar with dropdown Menu, Hero dual-column layout, three-column/five-column grid for feature cards, and large-scale display of engineering drawings.
• Tablet(768px–1023px): Navigation bar collapses into a hamburger Menu; Hero dual-column layout is retained with reduced spacing; feature cards are arranged in a two-column grid.
• Mobile(<768px): Single-column layout, Hero image-text stacking, single-column scrolling for highlight cards, horizontal sliding for parameter table, and adaptive aspect ratio for video embedding.

4.2 Scroll Animation and Interaction Details

The site incorporates lightweight scroll-triggered Reveal Animations, implemented via the IntersectionObserver API:

1. Page elements are assigneddata-revealattributes and delay parameters--d(e.g., 0ms, 120ms, 220ms, etc.).
2. When an element enters the viewport (threshold = 0.18), ais-visibleclass is automatically added, triggering CSS transition animations (opacity and translateY).
3. If the user has enabled the "prefers-reduced-motion" preference, all content is displayed directly to ensure accessibility.

4.3 Dark Mode Adaptation

The entire site uses CSS Custom Properties to define color tokens. Light and dark themes are automatically switched via prefers-color-scheme: dark media queries. Key adaptation points include:

• Global variable switching for background color, text color, and border color.
• In dark mode, engineering drawing images use an SVG feComponentTransfer filter to brighten black lines to dark gray (#111), avoiding high-contrast glare.
• The navigation bar arrows and button hover states have dedicated dark mode styles.

V. Project Documentation Organization System

5.1 Documentation Classification and Archiving Standards

For the technical and market documentation related to the QDrive project, a four-level classification system has been established:

5.2 Online Release Process

The workflow for organizing project materials from local preparation to online release is designed as follows:

1. Local Editing: Technical documents are written in Markdown. Image assets are stored under the path "/images/{page}/{product}/{filename}". Firmware binary files are stored in the/downloadsdirectory.
2. Version Control: Both the website source code and documentation source code are managed under Git version control. The Astro build configuration defines the output rules for static assets.
3. Build and Release: Execute the Astro production build (astro build) to generate static HTML and optimized resource files, which are then deployed to a web server or object storage.
4. Asset UpdateWhen updating the firmware version, synchronously modify the version list data, pop-up options, and download links on the product page to ensure that online materials are consistent with the released version.

VI. Implementation Roadmap and Current Progress

6.1 Completed Work

To date, the following core tasks have been completed for website construction and material organization:

1. Site Architecture Stabilization: Completed the structural design and front-end implementation of all pages, including the Homepage, Product Center (QD4310), Solutions (QGimbal/QCar), Tech Blog, About Us, Web-Based Host Computer, and Firmware Download.
2. Visual System Establishment: Established brand colors, typography standards, component libraries (buttons, cards, tables, pop-ups, navigation), and dark mode adaptation schemes, ensuring a unified visual style across the entire site.
3. Core Interaction Implementation: Implemented and tested all interactive features, including Hero carousel, navigation dropdown menus, scroll reveal animations, firmware version selection pop-ups, and dark mode filters for engineering drawings.
4. QGimbal Product Material Organization: Completed product copywriting for the two-axis gimbal, extracted six-dimensional selling points, organized real-shot images and topology diagrams, drafted engineering drawings, embedded Bilibili demonstration videos, and compiled parameter tables.
5. Website Registration and Launch: Completed ICP registration (Zhejiang ICP No. 2026018811) and public security registration (Zhejiang Public Security No. 33112402000139), and the site has been officially launched and is operational.

6.2 Future Optimization Directions

1. SEO Optimization: Supplement Open Graph and Twitter Card metadata for each page, optimize structured data (Schema.org Product markup), and improve search engine indexing performance.
2. Performance Optimization: Implement WebP/AVIF multi-format output and lazy loading strategies for large images (renderings, engineering drawings) to further reduce initial page load time.
3. Content ExpansionContinuously write technical blog posts, refine the content of the QCar solution page, and supplement it with more application cases and user tutorials.
4. Multilingual SupportEvaluate the requirements for the English version of the site, and provide localized content for overseas competition teams and academic research users.

VII. Summary of Achievements

In this phase, focusing on the site construction and project documentation organization for the "QDrive Consumer Electronics Gimbal Product," the following quantifiable results have been achieved:

1. Site Construction AchievementsCompleted the full front-end development of the QDrive Tech official website, encompassing 7 core pages, 1 set of component-based UI system, and 3 interactive systems (carousel/navigation/Reveal animations), supporting desktop and mobile responsiveness as well as dark mode.
2. Product Display AchievementsEstablished the QD4310 product in-depth display page and the QGimbal two-axis gimbal solution page, featuring a full-chain information presentation including selling point cards, asset galleries, engineering drawings, parameter tables, demonstration videos, and firmware downloads.
3. Documentation Organization AchievementsDeveloped a four-level document classification system and an online publishing workflow, achieving systematic organization of product technical documentation, firmware version management, user manuals, and multimedia assets.
4. Tool and Service AchievementsLaunched a web-based serial port parameter tuning tool, enabling users to configure motor parameters without installing software, significantly lowering the product's usage threshold.
5. Brand Operation AchievementsThe website has completed ICP and public security registration and is officially online, forming a multi-channel brand operation matrix of "site + e-commerce + community" in conjunction with the Taobao store, Bilibili videos, and technical discussion groups.

References

[1] Astro Framework Documentation. Astro Docs, 2024. https://docs.astro.build

[2] MDN Web Docs. Web Serial API, 2024. https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API

[3] Liu Haoqi et al. "QDrive"—A High-Performance Servo Motion Control Platform for University Research and Competitions. Zhejiang Provincial University Student Science and Technology Innovation Activity Plan (New Talent Program) Application Document, 2026.