About the Project: WeMove Transport is a logistics and cargo company website built with HTML, Tailwind CSS, and JavaScript. It presents services, projects, and company information in a clean, professional layout — designed to reflect a real-world transport business.
Key Highlights: Component-based JavaScript architecture with a fully responsive layout, smooth scroll interactions, animated hero section, and a mobile-friendly navigation drawer.
- Header — Fixed navigation with scroll effect and mobile drawer menu.
- Hero — Full-screen banner with animated floating shapes and CTA button.
- About — Company overview with feature points and decorative images.
- Services — Six transport services displayed in a responsive grid layout.
- Features — Three key capabilities with circular icons and numbered layout.
- Projects — Horizontally scrollable gallery of featured logistics projects.
- Blog — Two recent blog posts with styled date badges and excerpts.
- Footer — Multi-column footer with quick links and social media icons.
- Back to Top — Fixed button that appears on scroll and returns to top.
- Component-Based JS — Each section is a separate module initialized from
app.js. - Responsive Design — Fully adapts from mobile screens to large desktop displays.
- Mobile Navigation — Slide-in drawer menu with overlay and smooth open/close behavior.
- Sticky Header — Header background changes to solid color when the user scrolls.
- Animated Elements — Hero and about section include bouncing floating shapes.
- Horizontal Scroll Gallery — Projects section scrolls horizontally with snap alignment.
- Back to Top Button — Appears after scrolling 300px and smoothly returns to top.
- HTML5 — Semantic structure with root elements for each JS component.
- Tailwind CSS (CDN) — Utility-first styling with a custom theme configuration.
- JavaScript (ES Modules) — Modular scripts that render each section independently.
- Google Fonts — Oswald for headings and Rubik for body text.
- Ionicons — Icon library used throughout the UI for visual elements.
wemove-transport/
│
├── index.html # Main HTML with root elements for each section
│
├── assets/
│ ├── js/
│ │ ├── app.js # Main entry point that initializes all components
│ │ ├── header.js # Header navigation and mobile menu functionality
│ │ ├── hero.js # Hero banner with background and floating shapes
│ │ ├── about.js # About section with images and feature points
│ │ ├── service.js # Services grid with six transport options
│ │ ├── feature.js # Features section with circular icons
│ │ ├── project.js # Projects gallery with horizontal scroll
│ │ ├── blog.js # Blog posts with date badges
│ │ ├── footer.js # Footer with links and social media
│ │ └── backTop.js # Back-to-top button with scroll detection
│ │
│ └── images/ # Hero banners, service icons, project photos, blog images
│
└── README.md # Project documentation
-
Clone the repository:
git clone https://github.com/nawazdevx/wemove-transport.git
<li>
<strong>Open the project:</strong>
<ul>
<li>Open <code>index.html</code> directly in your browser</li>
<li>Or run a local server:</li>
</ul>
<pre><code>python -m http.server 3000</code></pre>
Then visit <code>http://localhost:3000</code>
</li>
<li>
<strong>Start Customizing:</strong>
<ul>
<li>Update site content and navigation links in <code>header.js</code></li>
<li>Change hero text, image, and CTA button in <code>hero.js</code></li>
<li>Edit services, features, and projects data in their respective <code>.js</code> files</li>
<li>Modify colors, fonts, and theme settings in <code>index.html</code></li>
<li>Replace images inside <code>assets/images/</code> with your own</li>
</ul>
</li>
</ol>
License: This project is licensed under the MIT License.
Contact: Connect with me on LinkedIn or visit my Portfolio.
Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.
