Skip to main content
Arran, Home
Donate

Arran

Arransha Nouvalafi P.

Love to tinker.Like to make.Keep learning.

Arran wearing a navy suit and tie, holding a phone.

I make websites and digital experiences from ideas I want to try, then test them with AI until they are easier to use.

Open my workGet to know me

Get to know me

I am Arran, a ninth grader who likes technology, science, and taekwondo. Building LEGO and learning robotics made me curious about how an idea can be made to really work.

I enjoy the moment when something that did not work finally becomes usable. That is why I want to keep tinkering, try new projects, and understand the process more deeply. My father supports this interest.

ngulik

an Indonesian word for trying, taking apart what is not right yet, and putting it back together until it is better.

What AI does and what I do

AI helps by

  • Writing and explaining code
  • Finding possible causes of bugs
  • Comparing design options

I do the

  • Ideas and direction
  • Reading and learning from the result
  • Testing features in the browser
  • Asking for or making fixes
  • Deciding what is good enough to use

So I do not write every line of code myself. What I own is the idea, the direction, the testing, and the final decision.

Where the curiosity began

  1. Building with blocks
  2. Building logic
  3. Building websites

Now I learn through websites and apps. I plan the idea and its flow, build it with help from AI, then try the result and fix the parts that are not right yet.

Work

6 public sites. Open a folder to see its screens, its story, and the site.

  1. EcoTrack

    Educational website for sorting household waste

    EcoTrack invites people to sort waste at home: learn four categories, try a sorting exercise without an account, then record the result. Records are checked before they count.

    The EcoTrack storyOpen ecotrack.id (opens in a new tab)

  2. SANDI SALDO

    Web-based digital finance education game

    Seven Days in a Cashless City: players explore an isometric city, take on seven main missions and extra cases, and learn to make decisions about money and digital safety.

    The SANDI SALDO storyOpen sandi-saldo.ct.ws (opens in a new tab)

  3. PJ CUP XXIX 2027

    Event and competition registration website

    The PJ CUP XXIX 2027 website helps participants find competitions, registration information, the schedule, and event documents.

    The PJ CUP XXIX 2027 storyOpen pjcup.web.id (opens in a new tab)

  4. BID Consulting

    Website for an infrastructure consulting company

    The public BID Consulting site introduces infrastructure and management consulting services for government, state-owned enterprises, development partners, and the private sector.

    The BID Consulting storyOpen bidconsulting.co.id (opens in a new tab)

  5. Ruang Penilaian PSN

    Interface for an initial proposal assessment website

    The sign-in page of Ruang Penilaian PSN, used for evidence-based initial assessment of proposals. This portfolio shows only the public sign-in page.

    The Ruang Penilaian PSN storyOpen psn-penilaian.web.id (opens in a new tab)

  6. REFF Partnership

    Website for a law firm

    The public REFF Partnership site introduces a law firm in South Jakarta, its practice areas, and how to arrange a consultation.

    The REFF Partnership storyOpen refflawfirm.com (opens in a new tab)

EcoTrack

Educational website for sorting household waste

EcoTrack invites people to sort waste at home: learn four categories, try a sorting exercise without an account, then record the result. Records are checked before they count.

I shaped the idea and the flow, built it with AI, then tested every feature.

The EcoTrack storyOpen ecotrack.id (opens in a new tab)
EcoTrack home page on a cream background with the dark green headline “Pilah sampah dari rumah, lihat hasilnya tumbuh.” and four coloured waste bins.
Screen recording of the public site, 13 November 2026.
EcoTrack home page on a phone screen with the green button “Coba pilah sekarang”.
Phone view
  • Organic
  • Inorganic
  • Hazardous
  • Residual

SANDI SALDO

Web-based digital finance education game

Seven Days in a Cashless City: players explore an isometric city, take on seven main missions and extra cases, and learn to make decisions about money and digital safety.

For a group assignment, I built the website for this game with AI and tested it on laptop and phone.

The SANDI SALDO storyOpen sandi-saldo.ct.ws (opens in a new tab)
SANDI SALDO start menu: a large white and cyan title on the left, a Start button, and a cyan outlined isometric city on the right.
Screen recording of the public site, 13 November 2026.
SANDI SALDO start menu on a phone screen with a cyan Start button.
Phone view

PJ CUP XXIX 2027

Event and competition registration website

Event website. The event is scheduled for 16-23 January 2027 and has not taken place yet.

The PJ CUP XXIX 2027 website helps participants find competitions, registration information, the schedule, and event documents.

I worked on the website and its software together with a collaborator, with AI assistance.

The PJ CUP XXIX 2027 storyOpen pjcup.web.id (opens in a new tab)
PJ CUP XXIX home page on a wide screen: the event logo in the center, the theme Beneath the Sea, Above the Limit, the dates 16-23 January 2027, and a Daftar Lomba button.
Screen recording of the public site, 13 November 2026. The countdown, buttons, and illustrations in the image document how the site looked when captured. They are not live data, and the illustrations belong to the PJ CUP committee.
PJ CUP XXIX home page on a phone screen with the event logo, dates, and registration buttons.
Phone view

How I work

Five steps I repeat in every project. You can try arranging them yourself on the board.

  1. Idea

    I start from a need or something I want to try.

  2. Direction

    I plan the content, the flow, and the look that are needed.

  3. Building with AI

    I use AI as a tool to help write and understand the code.

  4. Testing

    I try the flow on several screens and check the parts that are not right yet.

  5. Refining

    I fix the result, then try again.

Try arranging the flow

Drag the five steps to try arranging the order yourself.

What I am learning

Pick one to see where I used it.

  • I have used this

    Ideas and needs

    Finding out what needs explaining and who will use it.

    EcoTrack, PJ CUP XXIX 2027, BID Consulting

  • I have used this

    User flow

    Planning the steps a visitor takes from start to finish.

    EcoTrack, SANDI SALDO, PJ CUP XXIX 2027

  • I have used this

    Visual direction

    Deciding the page layout, the colors, and what needs to stand out.

    SANDI SALDO, EcoTrack, PJ CUP XXIX 2027

  • I am learning this

    Building with AI

    AI helps write and explain the code. I review the direction and the final decisions myself.

    BID Consulting, Ruang Penilaian PSN, REFF Partnership

  • I have used this

    Interface testing

    Trying the screens, links, and features on a laptop and a phone before calling them done.

    Ruang Penilaian PSN, EcoTrack, SANDI SALDO

  • I have used this

    Document automation

    Using AutoCrat to prepare documents for the Student Company team automatically.

    AutoCrat, Student Company

  • I have used this

    Visual logic

    Scratch and Construct, where I first arranged commands into a program.

    Scratch, Construct

  • I want to go deeper

    Databases and how AI works

    What I want to understand more deeply next.

  1. Economics and XAUUSD

    Besides building websites, I am also interested in economics and I study how the gold price moves through XAUUSD. I like understanding how economic news, changes in the value of the dollar, and market decisions relate to the price chart.

  2. What is XAUUSD?

    XAUUSD shows the price of gold in United States dollars.

  3. Reading one candle

    On the chart, one candlestick sums up the opening, highest, lowest, and closing price of a period.

    • Up: the close is above the open
    • Down: the close is below the open
    HighCloseOpenLow

  4. Several candles form a movement

    When candles are lined up in order, the direction of the price over time starts to show.

Explore the chart

Hover, touch, or use the arrow keys to see the details of each candle.

A simulation for learning — not live prices

The data on this chart was made up for practising how to read candlesticks. It is not market prices, not my trading results, and not investment advice.

Off screen

Training, activities, and experiences that also shape how I learn.

  • Taekwondo

    Taekwondo trains me to face nervousness and stay focused on the moves I have practiced. I still want to be calmer when making decisions in the arena.

    • SACTI club, Bintaro Jaya
    • 1st place, CNN Indonesia Taekwondo Championship 2024
    • 1st place, Sacti League Taekwondo Championship 2025
    • 2nd place, Tangsel Open Taekwondo Championship 2025
    • Black belt is still a goal

  • School activities

    I joined the student council election committee (Komisi Pemilihan OSIS) in the IT division, Paskibra as a school representative, and several PJ CUP committees. I like challenges that make me work with other people.

    • Komisi Pemilihan OSIS, IT division
    • Paskibra
    • Several PJ CUP committees

  • Japan immersion

    The immersion experience in Japan made me braver about meeting people and adapting to different habits.

    • Visited a school
    • Met local students
    • Stayed with a Japanese family

  • Student Company

    In the Student Company team I helped with digital record keeping and document automation. The award we received is a team achievement, not a personal title.

    • Excellence in Financial Management & Reporting Award
    • School year 2025/2026
    • Team achievement

Journey

Education

  1. Sekolah Nusantara Ibu Kelinci logo

    Kindergarten

    TK Ibu Kelinci

    Early learning and curiosity.

    Since I was little

    LEGO and robotics

    I liked building LEGO and took robotics lessons. That is where I got used to trying, taking apart, and rebuilding.

  2. Budi Mulia Dua Bintaro logo

    Primary school

    SD Budi Mulia Dua Bintaro

    Where I first tried Scratch and Construct.

    Grade 5

    The start

    I tried making programs with Scratch and Construct, and saw that a few logic blocks could make something move.

  3. Grades 6 to 8

    A pause

    I focused more on school activities and rarely made programs. The curiosity about how software is made stayed.

  4. Sekolah Pembangunan Jaya logo

    Junior high, class IX ANow

    SMP Pembangunan Jaya

    My current school.

    Grade 9

    Finding a direction

    The KTI and HOLISTIC projects pushed me to build EcoTrack. The interface, material, accounts, and data started to connect.

  5. Now

    Still building

    SANDI SALDO for a group assignment, then the websites for BID Consulting, Ruang Penilaian PSN, and REFF Partnership.

Archive

Two experiences with no site to open, but which still taught me something.

  • Illustration

    Archive, the site is closed

    Pilkasis

    Helping put together a website for the student council chair and vice chair election, with a flow students could follow easily.

  • Illustration

    A document automation story

    AutoCrat for Student Company

    Document automation to help the Student Company team with administrative work.

Support my work

If you enjoy my work and the way I learn, you can support me through Saweria.

Donate via Saweria (opens in a new tab)

You choose the amount and payment method on the official Saweria page. No payment is processed on this website.

  1. Open my Saweria page.
  2. Choose an amount and a payment method there.
  3. Complete the payment on Saweria.

Arransha Nouvalafi P.

Have an idea to try?

I enjoy exchanging ideas while I keep learning to make something useful.

Send an emailSee GitHub (opens in a new tab)

Opens WhatsApp. No message is sent automatically.

Back to top