SKETCH. CODE. LAUNCH.
Ever wonder what goes into building a personal site like this? I created this page to walk you through the full process, from planning the layout to pushing the final commit.
/story.png)
LOADING...
Ever wonder what goes into building a personal site like this? I created this page to walk you through the full process, from planning the layout to pushing the final commit.
HERE'S HOW IT ALL
CAME TOGETHER
/Figma.png)
FIGMA → UI/UX PLANNING AND VISUAL DESIGN
Design process on Figma
My process starts in Figma, where I lay down the core ideas, simple wireframes to explore structure, layout planning to shape each section, and design concepts to set the overall vibe. Since I'm still growing as a developer, I don't wait for the design to be “final” before I start coding. Instead, I design and develop side by side, testing what works (and what doesn't) as I go.
Some ideas look great in Figma but need tweaking in the browser, so I keep things flexible.
/Spline.png)
SPLINE → EYE CATCHING 3D ELEMENTS
Spline
Next came the 3D asset work in Spline, definitely one of the more fun parts of this project. I designed a clean 3D animation for the homepage to grab attention without overwhelming the user. I also focused on keeping things lightweight and smooth, prioritizing optimization over excessive effects. Learning Spline was a blast, and playing around with it added a whole new layer of personality to the site.
VIEW ON SPLINE →
/Photoshop-and-paint-dot-NET.png)
PHOTOSHOP → SHAPING 2D ASSETS
PAINT.NET → SHAPING 2D ASSETS
Photoshop & paint.NET
For this project, I relied on Photoshop and Paint.NET to handle the visual side of things, from editing images and creating custom assets to fine-tuning icons and design elements. These tools helped me shape a more cohesive look across the site, making sure everything felt visually balanced.
/code-and-development.png)
VISUAL STUDIO CODE → STREAMLINED CODING
LARAGON → LOCAL ENVIRONMENT FOR PHP CODES
GIT → VERSION CONTROL
GITHUB → ORGANIZE AND MANAGE THE PROJECT
Code & development
Development goes hand-in-hand with design process. I use Visual Studio Code for coding, Laragon to run PHP codes smoothly, and Git with GitHub to keep everything organized. I take things step by step, working alongside Figma to stay flexible and adapt as I go. I'm especially patient with learning animations, diving into GSAP and Bootstrap to truly understand how and why they work as is.
VIEW ON GITHUB →
/live.png)
NIAGAHOSTER → CUSTOM DOMAIN PROVIDER
HOSTINGER → WEB HOSTING
Launch & maintenance
The final step was taking the site live. I grabbed a custom domain (joviantogodjali.com) through Niagahoster for its budget-friendly pricing, and hosted it on Hostinger for its ease of use, perfect for getting things up and running without hassle. To make updates smoother, I hooked up GitHub Webhooks so that every time I push code, the live site updates automatically.
LET'S BUILD A GREAT
FUTURE TOGETHER
Chat me on WhatsApp →
© Copyright 2025 by Jovianto Godjali // Akshiro
