The brief: recreate a real-world logistics experience
Sea Sky Cargo was a freelance learning project in which I replicated the public-facing experience of an official logistics website. The aim was to study how a freight-forwarding business presents services, resources, and quotation intent in a credible and easy-to-navigate way.
It was not a claim to have built a full freight-operations system. That distinction is central to the project. I was recreating the marketing and service-discovery layer: the part a prospective customer uses to understand what a company offers and decide whether to ask for a quote.
Making a complex service catalogue easier to explore
Freight services can be difficult for a visitor to understand quickly. A user may know they need to move goods, but not yet know whether air freight, sea freight, or land transport is appropriate—or where to find supporting information such as INCOTERMS and container guidance.
I built the frontend around a predictable route structure with shared navigation and footer patterns. The experience presents dedicated routes for air freight, sea freight, and land transport; company pages; resource content; CSR, careers, gallery, and blog pages; and clear entry points to the quote-request overlay.
- React Router routes for public service, company, and resource content.
- Desktop navigation with service and resource dropdowns.
- A mobile menu designed to preserve the same route access on smaller screens.
- Video, imagery, cards, and motion used to create a stronger sense of logistics scale.
Responsive behaviour was part of the work, not a final polish pass
A logistics website is often viewed by visitors researching services from very different devices. The navigation, route content, cards, calls to action, and quote trigger all needed to remain usable whether someone arrived from a desktop screen or a mobile browser.
I used React, TypeScript, Vite, Tailwind CSS, and Framer Motion to build the single-page application. Tailwind kept responsive layout decisions close to the components, while Framer Motion was used for visual entrance and interaction effects. The goal was not animation for its own sake; it was to make content feel deliberate without obscuring service information or calls to action.
The quotation overlay: useful interface, not yet a lead system
The quote-request overlay is where the project made its most important limitation visible. It provides a client-side interface that collects a name, email, service choice, message, and an optional file selection. It can be opened from navigation and calls to action, and it supports close controls, Escape-key closing, and outside-click dismissal.
However, the current implementation only logs the submitted form data in the browser and closes the overlay. It does not persist information, send email, deliver leads to a CRM, or confirm that a quotation request has reached a business team.
What a production handoff would require
Working on the clone made the next steps very clear. A production lead flow needs more than a successful-looking modal. It needs server-side validation, a secure destination for submitted data and files, clear success and error states, and a business process for following up on leads.
- A secure API or CRM/email integration for quote submission.
- Server-side validation and file-type and size limits before storing uploads.
- A real acknowledgement only after delivery is confirmed.
- Analytics and consent-aware measurement for quote conversion.
- Verified service, tenure, customer-count, and logistics-stat content from the business.
- Separate requirements for accounts, booking, shipment tracking, documents, customs, and notifications.
What I handled
- Built the responsive frontend replica using React, TypeScript, Vite, Tailwind CSS, React Router, and Framer Motion.
- Implemented public service, resource, company, and editorial routes along with responsive navigation and the quotation-request overlay.
- Documented the boundary between the delivered interface and the backend, CRM, tracking, and operational systems that would be required for a production logistics product.
Outcome and reflection
The result is a substantial frontend learning project that recreates how a logistics business can present service information, resources, brand content, and quotation intent in one coherent interface.
I also found and documented bugs and limitations during the work. Rather than hiding those gaps, I treat them as part of what the project taught me: visual completeness is not the same as operational completeness. A useful portfolio case study should make that distinction explicit.