All work

Case 09 / 10

A Vue front end for an energy logistics group, still running four years on

Altus Indonesia has handled logistics for Indonesia's energy industry since 2003. In 2022 I built the public front end of their site in Vue 3: seventeen pages for their services, project experience and company profile, reading projects and announcements from an API built by another developer. Four years on it runs on the same design, and the team keeps it current from their admin.

Role
Front-End Developer
Client
Altus Indonesia, direct
Year
2022
Stack
Vue 3, Vue Router, Vuex, axios, Bootstrap
Visit altusindonesia.com
Home page: a warehouse photo slider with Welcome to Altus Indonesia, and five service cards for logistics, supply base, marine, manpower and support services.

17

public pages in one Vue app

5

services, each with its own experience page

2003

the year Altus Indonesia started

4

years live without a redesign

Key contributions

  1. 01

    Seventeen pages in one Vue app

    Built the public site from the design in Vue 3 with Vue Router: home, five services, five experience pages, profile, network, clients, QHSE, news and contact, shipped as a modern build with a legacy build for older browsers.

  2. 02

    Project experience straight from the API

    The experience pages read projects by service type, with pinned projects first, then the newest, five at a time and searchable. Each project gets its own photo carousel and a Read More.

  3. 03

    Announcements the team controls

    A site-wide popup reads the current announcement from the API, so Altus can warn visitors on every page without a release, as it does now with its recruitment scam alert.

Screens

Marine Services page: a photo of crew in life jackets, a side menu of the five services with Marine selected, and the service description.
Services
Logistics experiences: each project has a photo carousel with dots on the left and a title, summary and Read More link on the right.
Project experiences
Profile page: an aerial photo of a supply base and vessel, a section menu for overview, vision and mission, subsidiaries and membership, and the Altus History text.
Profile
Clients page: a port photo with cranes and a vessel, above a row of client logos including Pertamina, Petronas and Chevron.
Clients
An announcement popup over the home page titled Recruitment Scam Alert, warning that Altus never asks for payment during recruitment, with a Close button.
Announcement
Mobile logistics experiences with the heading, a search field and the first project carousel.
Mobile profile page with the aerial photo and a stacked section menu.

Screens from altusindonesia.com, October 2026.

How content reaches the page

Nothing about projects or announcements is written into the front end. The Altus team adds them in their admin, a .NET API on Azure stores them, and the Vue pages ask the API's public endpoints for what to show. That is why the site still reads as current four years later.

  1. 1The team adds a project or an announcement in their admin.
  2. 2The .NET API on Azure, built by another developer, stores it and serves it on public endpoints.
  3. 3 Projects Five experience pages, one per service: active only, pinned first, then newest, five at a time, with search Announcements A popup on every page, used today for a recruitment scam alert 
// One service's experiences: active only, pinned first, newest next
const { data } = await axios.get("/api/projects/public/access", {
  params: {
    "type.Operator": 4, "type.Value": serviceType, // 1 logistics … 5 support
    "isActive.Operator": 4, "isActive.Value": true,
    "sort[0][field]": "isPinned", "sort[0][dir]": "desc",
    "sort[1][field]": "createdAt", "sort[1][dir]": "desc",
    pageNo: page,
    recordsPerPage: 5,
  },
});

Simplified from the request the live site makes. The same pattern loads the announcement on every page.

Next case Where it started: Java at Wirecard