All Projects

November 6, 2023

Sumber Berkat Solusindo Website

Website company profile untuk Sumber Berkat Solusindo (SBK), perusahaan yang bergerak di bidang networking, data communication, dan wiring specialist. Platform ini dirancang untuk memperkuat kredibilitas perusahaan melalui tampilan modern, interaktif, dan informatif.

Dibangun menggunakan Next.js 15 dan React 19 dengan animasi Framer Motion, website ini menghadirkan pengalaman visual yang dinamis, performa optimal, serta struktur konten yang profesional untuk kebutuhan branding dan presentasi layanan perusahaan.

Sumber Berkat Solusindo Website
Next.js 15React 19Framer MotionSASSSwiper.jsCorporate Website

Role

Frontend Developer

Duration

2 Months

Team

3 People

Live Demo

Project Gallery

Swipe or hover to explore

Project Overview

Sumber Berkat Solusindo (SBK) membutuhkan website company profile yang mampu merepresentasikan identitas profesional perusahaan di bidang networking infrastructure, data communication systems, dan wiring solutions. Fokus utama project ini adalah membangun tampilan visual yang modern, meningkatkan kredibilitas brand, serta menyampaikan layanan dan portfolio proyek secara jelas dan terstruktur.

Sebagai Frontend Developer, saya bertanggung jawab mengimplementasikan keseluruhan UI, animasi interaktif, serta memastikan performa dan responsivitas website tetap optimal di berbagai perangkat.

Problem

Website sebelumnya belum mampu merepresentasikan positioning perusahaan secara optimal dari sisi visual maupun pengalaman pengguna. Informasi layanan belum tersusun secara strategis, serta tampilan kurang mencerminkan perusahaan teknologi yang modern dan profesional.

Goal

Membangun website company profile yang modern, interaktif, dan informatif untuk meningkatkan brand trust, memperjelas positioning layanan perusahaan, serta memberikan pengalaman pengguna yang smooth dan engaging.

Solution

Mengembangkan website berbasis Next.js 15 dengan pendekatan component-based architecture. Animasi interaktif diimplementasikan menggunakan Framer Motion untuk meningkatkan engagement, sementara optimasi performa dilakukan melalui lazy loading, media optimization, dan efisiensi rendering pada React 19. Struktur konten dirancang modular agar mudah dikembangkan dan dikelola ke depannya.

Tech Stack

  • Next.js 15 — React framework untuk performa tinggi & SEO-ready
  • React 19 — Modern component architecture
  • Framer Motion — Smooth animation & interactive transitions
  • SASS — Modular styling & maintainable CSS structure
  • Swiper.js — Interactive slider & showcase sections
  • React Intersection Observer — Scroll-based animation trigger

Key Features

  • Modern animated landing section
  • Interactive service showcase
  • Project portfolio carousel
  • Responsive navigation & layout
  • Optimized media handling
  • Smooth scroll-triggered animations

Architecture

Website menggunakan modular component architecture berbasis Next.js App Router. Struktur styling terorganisir menggunakan SASS modules untuk maintainability. Animasi diisolasi dalam reusable motion components, dan implementasi intersection observer digunakan untuk efisiensi animasi berbasis viewport. Pendekatan ini memastikan scalability, performance stability, dan clean code structure.