UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER — UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER — UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER — UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER — UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER — UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER — UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER — UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER — UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER — UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER — UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER — UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER — UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER — UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER — UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER — UI/UX DESIGNER - FRONTEND DEVELOPER - UX RESEARCHER —

PORTFOLIO

SURYA

jayanata

UI/UX DESIGNER & FRONTEND DEVELOPER

Crafting intuitive interfaces, seamless front-end experiences, and research-driven digital products that bridge design and development.

“

IamamultidisciplinaryWebUI/UXDesigner,

FrontendDeveloper,andUXResearcher.Ispecializeincraftinghuman-centeredinterfaces,buildingperformantfront-endsystems,andconductingmeaningfuluserresearchtoinformeverydesigndecision.

Creative Expertise

UI/UX Design

FigmaPrototypingDesign TokensWireframing

Crafting intuitive user interfaces, scalable design systems, and wireframes that convert and delight users.

Frontend Development

ReactNext.jsTailwind CSSGSAP

Building performant, accessible, and responsive web applications with React, Next.js, and modern CSS.

UX Research

User ResearchUsability TestingAffinity Maps

Conducting in-depth usability studies, user interviews, and affinity mapping to inform strategic product decisions.

Interaction & Motion

Framer MotionMicro-interactionsUI TokensLottie

Designing rich micro-interactions, scroll-driven timelines, and fluid transitions that bring interfaces to life.

Tech Stack & Tools

Next.jsFramework

ReactUI Library

Tailwind CSSStyling

Three.js3D & WebGL

GSAPWeb Motion

Framer MotionAnimation

TypeScriptLanguage

JavaScriptLanguage

Next.jsFramework

ReactUI Library

Tailwind CSSStyling

Three.js3D & WebGL

GSAPWeb Motion

Framer MotionAnimation

TypeScriptLanguage

JavaScriptLanguage

FigmaUI/UX Design

FramerNo-Code Web

VS CodeEditor

Git & GitHubVersion Control

ViteBuild Tool

WebflowVisual Dev

Node.jsRuntime

HTML & CSSWeb Standards

FigmaUI/UX Design

FramerNo-Code Web

VS CodeEditor

Git & GitHubVersion Control

ViteBuild Tool

WebflowVisual Dev

Node.jsRuntime

HTML & CSSWeb Standards

Projects

Selected Works

Marketing Agency

Kogniti Marketing Agency

See All Projects

Experience & Milestones

2025AI Solutions

Exploration and development of intelligent artificial intelligence agent workflows and predictive interfaces.

Peserta ExplorAItion Batch 1

2025Web Development

Intensive hackathon solving complex municipal and digital transformation challenges through innovative web tech.

Top 50 peserta JHIC

2026Web Design

National web design competition focusing on accessibility, fluid micro-interactions, and editorial aesthetics.

Juara 2 Web Design SEFEST 2026

Development Process

Discovery & UX Research

Understanding user needs, business objectives, information architecture, and core project requirements before jumping into pixels.

Focus:User ResearchProblem FramingInformation Architecture

Wireframing & UI Design

Translating concepts into intuitive high-fidelity design systems, cohesive component tokens, and pixel-perfect interactive prototypes.

Focus:WireframingHigh-Fidelity UIDesign System Tokens

Frontend Engineering

Transforming designs into performant, accessible code using React, Tailwind CSS, GSAP, and smooth micro-interactions.

Focus:Component ArchitectureReact & TailwindMicro-interactions

Testing & Launch

Conducting thorough cross-browser QA, accessibility testing, performance optimization, and seamless production deployment.

Focus:Cross-Browser QACore Web VitalsProduction Deployment