Discover Delos-343/Dribble-App-UI Open Source project

A helper mini-project from my time as a freelance / volunteer consultant regarding web development. This project was an aid to a colleague for her final project in the Web Development course during her academic studies in ITS Surabaya.

Syifa-s-FP-PHP

PHP

Movie-DB

A starter SvelteKit project using the MovieDB API to fetch and return film data, complete with a search filter function to sort user-based inputs.

Svelte

spotify-clone

A web / PWA clone built with NEXT.JS and Tailwind CSS, complete with the Spotify API, a middleware, as well as login form-validation with access token generation.

A static React App created as my first complete project as a modern JavaScript developer / frontend engineer.

Modern-UI

A [very] personal project: an e-blog / web SPA made with NEXT.js, Tailwind, and SCSS, complete with a GraphQL content-management system.

My-E.BLOG

TypeScript

Shopee-User-Interview-2

Alternative title: "CSS Waves". This was a Live demo and test from my user interview with the Southeast Asian [corporate] unicorn, Shopee.

A company website project from Broaden Creative by Expecto, a digital marketing firm that promotes the growth of small to medium-scale businesses and startups.

Broaden-Creative-by-Expecto

Blade

DW-s-Quiz-App

A helper project done together with a close friend during his independent [bootcamp] study period at Alterra Academy.

The beginning of a new startup project, serving as an online educational platform and forum for university students across Indonesia. This Bootstrap-5 landing page serves to showcase the startup's core theme, fundamental principles, and planned services.

IlmuDewantara

These projects were part of a one-week programme and private events hosted for members of the Tokopedia Meetup group, by official Tokopedia staff and software engineering veterans.

Tokopedia-Tech-Workshop-2021

My official, simultaneously personal and professional, portfolio website. One of my greatest achievements as a frontend developer, this build was made with Emmet, Bootstrap 5, and JavaScript [& jQuery].

Official-Personal-Portfolio

A web / PWA clone built with NEXT.js and Tailwind, complete with the Spotify API, a middleware, as well as login form-validation with access token generation.

Spotify-2.0

The title says it all. Just use an assets folder to store images and such, then source it to an array for indexing.

Einfacher-Musiker-Spieler

Another FreeCodeCamp project regarding the building of a static login form, and part of the Responsive Web Design course.

FCC_Survey-Form

BPJPH-Wikia

A simple, fun side-project on constructing a digital drawing board with holographic / glassmorphic themes.

Drawing-Board-App

A digital portfolio [header] section, mobile-first responsive, and comes with dark mode.

Digital-Brochure

A landing page built as a tribute to my favorite [hard] science-fiction book & TV series, The Expanse ~ James S. A. Corey . Made with React and SASS.

The-Expanse-Website

Snake-Game

The beginning of a new startup project, serving as an online educational platform and forum for university students across Indonesia.

IDe-IlmuDewantara

A cute animated sprite made from base HTML attributes and CSS components sourced from their standard libraries.

Cute-Choobz

404-ERROR

*confused unga bunga*

Another day, another clone ~ this time as a set of practices on new JS frameworks. This simple build was constructed with Svelte.

Linktree-3.0

A modern, minimalist portfolio done as part of the IDCAMP 2022 scholarship program. Made with React and Tailwind CSS.

Design-Course-Portfolio

An animated profile card or banner to display client-side information in the form of static markups (HTML).

Animated-Profile-Card

Chat-Network

Python

3D-SaaS

Fiction-Books

my-react-app

A React boilerplate.

A Hulu Clone, designed to be as close and legitimate to the original site / application as much as possible. This build is constructed with NEXT.JS and Tailwind CSS.

Hulu-2.0-PWA

A "back-to-the-basics" frontend development practice in the form of an online portfolio. Made with React and Tailwind CSS with a GetForm.io POST method.

React-Portfolio

Another take on a music player UI design with local storage to store .MP3 or image assets.

Music-Player-2.0

A flashy Linktree clone made with custom components that are interactive and animated.

Linktree-Clone

KK-FP_HoKKi-Group

Jupyter Notebook

my-next-app

A NEXT.js boilerplate.

An old repo from my competitive programming days in the first and second semesters of university. Written in either C or C++.

C-and-CPP-for-Competitive-Programming

A mini-project and simulation for the Basic Media Schooling program for Environmental Engineering students in ITS.

BMS-HMTL_Dasar-Web

A neumorphism design study using static HTML and CSS components to make a digital debit card piece.

Neumorphism-Debit-Card

A glassmorphism design study utilizing HTML and CSS, in the form of a digital flip card.

Glassmorphism-Flip-Card

A personal tryout in [frontend] mobile development under the Android operating system, specifically to test widgets and widget states in respect to component layouts and code syntax.

Flutter-UI-Test

my-vue-project

A Vue.js boilerplate.

Vue

Single-Page-Application

A simple, interactable, and animated single-page application (SPA) built with base HTML, CSS, and JS.

my-nuxt-app

A Nuxt,js boilerplate.

Vue

REACTJS__Telkom-Corporate-University-

A modular yet half-debugged box component used as a basic profile card / user profile.

Buggy-Box

An alternative take on the digital portfolio [header] section, this time with an interactable hover:state determined by mouseX and mouseY vectors (mouse inputs).

Splitscreen-Brochure

For the Grafika Komputer final project in ITS.

Minecraft-Clone

FCC_Tribute-Page

A tribute [web] page in regards to the host of the popular YouTube show, Hot Ones; named Sean Evans. This was supposed to be for the Responsive Web Design certification by FreeCodeCamp.

A short collection of some components I built during my intermittent time in TEDX ITS.

TEDX-ITS

Cpt-Java-Trip

A special gift for a special someone on his / her special day.

Birthday-Card

An animated 3D carousel designed to as a character selection feature for a game project under a quick weekend hackathon.

3D-Holographic-Carousel

For a friend's final-year project and thesis to make a radio livestreaming platform UI. Made with Flutter.

Flutter-Live_Radio-Player

A calculator UI with basic arithmetic operations and logical processing, decorated with an additional dark mode function.

Calculater-with-Dark-Mode

Indonesia-Peerleaders-Website's backend utility functions and server-side rendering + storage tools.

IPL-Custom-Server

TypeScript

Isometric-Profile-Cards

An isometic UI design study with some profile card UI and hover-state + onClick animations.

This Disney+ Clone is but one part of a lengthy chain of projects for my personal skillbuilding journey to train as a modern JavaScript developer. This Jamstack build was created with React (Firebase + Styled Components + Redux).

Disney-Plus-2.0

An interactable mini-game using a button component styled in the Neumorphism theme.

Dynamic-Neumorphic-Button

An amateur-level project jumpstarted as an introduction to web development frameworks, starting with CSS; in this case, Bootstrap 5.

Bootstrap-Company-Website

My first attempt to clone a web UI component via full-code methodology. I chose my university's login form as a direct inspiration and base boilerplate.

MyITS-Login-Form-Clone

A workspace test - color and background theme picker for a company project.

Color-Picker

A Starbucks clone made with the fullstack Laravel framework.

Starbucks-2.0

PHP

Delos-343

React-Character-Selector

An object-oriented minigame design used to match-select characters in the form of a QTE puzzle.

SCSS

Non-Fiction-Books

Positive, negative. Autobots, Decepticons. Skate fast, eat a**.

The-Duality-of-Man

A beginner practice using the Three.JS library for 3D modeling web components.

Three.JS-3D-Modeling

A company profile and landing page for PT BSL {Wahana Express}. Made with NEXT.JS and Tailwind CSS.

PT-BSL-Landing-Page

TypeScript

Tinder-Clone

A basic Tinder Clone, as part of my third attempt to clone an application. This is more of a component and animation study with an emphasis on user-interactability on the slide / swipe function.

A digital clock + timer built with React.

React-Digital-Clock

HimaTekkomITS-Admin-Dashboard

HimaTekkom-ITS-App

A repo to store the src files, build folders, and design system (frontend) of a landing page for Viding.co. Made with React JS.

Viding.co-Landing-Page

A second iteration for a Linktree clone, this time being more rooted to the original UI and function.

Linktree-Clone-2.0

my-svelte-app

A SvelteKit boilerplate.

SASSiness and some nice transition animation whilst playing with the SCSS preprocessor.

SCSS-Animated-Slider

SCSS

IlmuDewantara-App-UI

An additional, acceleration practice with Flutter to make UI designs for an online course application.

Dart

Simple-Chatbot

01000001 01101000 00100000 01110011 01101000 01101001 01110100 00101100 00100000 01100001 01101000 00100000 01100110 01110101 01100011 01101011

An evolution of the IlmuDewantara website into a fullstack CRUD app utilizing more advanced tools and technologies, specifically NEXT,js, Tailwind CSS, and DatoCMS [GraphQL].

IDe-IlmuDewantara-WebApp

A total, modernized redesign of the Indonesia Peerleaders website, user-friendly and mobile-responsive. Made with React and Tailwind CSS.

Indonesia-Peerleaders-Website

"A cup of caffeine a day keeps the bugs away." --- Another Flutter practice on building interactable widgets for UI design, this time for a café app.

Coffee-App-UI

UI/UX and Frontend Development combined. This was my last major project as a freelancing UI/UX Designer in GenB Data.

GenB-Data-Website

SCSS

GenB-Creative-Login-Form

My first project as a front-end engineer intern in the digital marketing startup, GenB Creative ~ now known as Broaden Creative [by Expecto].

My first ever personal portfolio as a junior frontend developer, complete with a single page presentation layer, animations, and interactive components. Built with base HTML, CSS, and JS.

First-Portfolio

Some brutalism design study in the form of a digital calculator and marked by buggy arithmetic functions. More form over function, really :v

Brutalist-Calculator

An adorable landing page, complete with animations and a modal. Made with React, Styled-Components, and Framer Motion.

Atlas-Landing-Page

My second final project as an amateur frontend engineer; an upgrade / evolution of my first ever online portfolio, albeit with a focus on brutalism-minimalism-post_modernism. Built with Emmet, CSS, and JavaScript.

Personal-Portfolio-2.0