Iyola Oyabiyi logo

iyoolaoyabiyi

Iyola Oyabiyi O.

Personal Project

Logistics Company Website

A responsive logistics website with quotes, tracking, and contact workflows for small freight teams.

Role

Frontend Engineer

Stack

React Vite TypeScript Tailwind CSS React Router GSAP
Demo Repository

Web template / Solo project: I built and maintained every part of the project

A responsive logistics‑cony website template that showcases shipping services and empowers prospective customers to get shipping quotes, track their packages and contact the company. Designed for small freight companies and startups who need a polished online presence without heavy backend infrastructure.

Project overview

The application is a single‑page React site with multiple routes managed by React Router. Major surfaces include a marketing‑focused home page, dedicated pages for “About”, “Services” and “Contact”, a package‑tracking widget and a quote‑request form that calculates volumetric weight on the fly. A theme‑switching context handles light/dark mode, and custom animation hooks tie GSAP animations into the component lifecycle. The site is compiled using Vite and styled exclusively with Tailwind CSS.

My role and ownership

I designed the architecture, set up the Vite + React + TypeScript project and configured Tailwind CSS. I built the routing layer with React Router, created reusable UI components (navigation, buttons, forms) and wrote custom hooks for GSAP‑based animations. I implemented the shipping quote estimator (including volumetric weight calculations and rate logic), the package‑tracking widget using mock data, and the contact form with validation and success feedback. I also implemented a theme context that persists the user’s theme choice in localStorage and added ESLint configuration and scripts for development and build.

Key features

  • Hero section emphasising “Ship from Nigeria to the world” with animated graphics
  • Services section covering sea/ocean, air and land freight options
  • Interactive quote‑request form that validates input, calculates volumetric weight and provides an instant estimate
  • Package‑tracking widget with sample data, error handling and modal details
  • Contact page with validated form and success feedback
  • About page with company overview and statistics
  • Theme switcher with light/dark mode using context and localStorage
  • Modular routing between home, about, services, contact and quote pages
  • Smooth animations using GSAP and custom hooks for entry effects

Skills demonstrated

  • Front‑end architecture with React, Vite and TypeScript
  • Client‑side form validation and state management
  • Tailwind CSS utility‑first styling and responsive design
  • Custom hooks and context for animations and theme management
  • Implementation of routing and navigation using React Router
  • Basic algorithm design for volumetric weight and pricing calculations
  • Integration of vector icons and animated illustrations

Tech stack

  • Frontend: React 19, Vite 7, TypeScript 5.8
  • Styling: Tailwind CSS 4.1, React‑icons
  • Animations: GSAP 3.13 with custom React hooks
  • Routing: React Router 7
  • Tooling: ESLint and TypeScript for static analysis and type safety

Project type

Single‑page marketing website with interactive forms and client‑side functionality