name: Dareean Ahmad Raffi Mardin (Roxy)
role: Front-End Developer & UI/UX Designer
program: Teknik Informatika @ Universitas Tadulako (2024 – Present)
focus: React / Next.js ecosystems, design systems, and product-grade frontend architecture
philosophy: "Efficient, maintainable, high-performing interfaces for real end users."
currently_leading: I-FEST 2026 (Informatics Festival) as Person In ChargeI'm a front-end-focused engineer who builds interfaces at the intersection of design systems and application architecture. My background spans consumer-facing dashboards, medical record platforms, and community-scale event tooling — always with an emphasis on clean component structure, accessibility, and performance under real production traffic.
Beyond code, I lead cross-functional teams: from steering a 10+ division committee for I-FEST 2026 to coordinating mentors across a developer community. I care as much about how a system scales organizationally as how it scales technically.
🎯 Open To:
- Front-End / UI Engineering roles (React, Next.js, TypeScript)
- Product Design & UI/UX collaboration
- Open-source contribution in developer tooling & design systems
- Internship / Teaching Factory-style industry placements
Languages
Frontend
Animation & Interaction: Framer Motion · GSAP
Backend & Databases
Also: Blade + Livewire (incl. Livewire Volt), PHPUnit, REST API design
Cloud, DevOps & Tooling
| Domain | Focus Level | Details |
|---|---|---|
| Front-End Architecture | Core Expertise | Component-driven UI in React/Next.js, state-transition–based interfaces, contextual interaction design |
| UI/UX Design | Core Expertise | User research → high-fidelity Figma prototyping → production handoff |
| Accessibility Engineering | Growing | Applied accessibility practices on public-facing platforms (I-FEST 2026 site) |
| Full-Stack Development | Working Knowledge | Laravel/Blade + Livewire, MySQL, RBAC-based authentication systems |
| Event & Product Operations | Applied Leadership | Command-center dashboard design for real-time cross-division coordination |
🎛️ I-FEST 2026 Dashboard — Event Operations Tracking System
Command-center style operations dashboard built for the I-FEST 2026 committee, designed to minimize field data-entry errors through state-transition architecture and contextual UI behavior.
| Aspect | Detail |
|---|---|
| Stack | Blade + Livewire, Tailwind CSS, Laravel |
| Scale | 10+ operational divisions, real-time cross-division workflows |
| Performance | Grid-based "Helicopter View" for rapid tactical decision-making |
| Security | Role-based approval flows for logistics sign-off |
| Impact | Two-way filtering for logistics approvals and real-time crowd-control monitoring |
| Repository | github.com/Dareean |
Designed as a Command Center for Field Coordinators, the dashboard reduces decision latency during live event operations by surfacing status at a glance instead of requiring manual cross-checking across divisions.
🌐 I-FEST 2026 Landing Page — Official Informatics Festival Website
Public-facing website for I-FEST 2026 at Universitas Tadulako, built to handle high-volume registrant traffic with a modern, minimal design language.
| Aspect | Detail |
|---|---|
| Stack | Livewire + Volt, Vite, PHPUnit, Tailwind CSS |
| Scale | Thousands of prospective registrants |
| Performance | Responsive across devices, optimized production deploy cycle |
| Security | Accessibility-first implementation for inclusive access, including for the disability community |
| Impact | Consistent production releases via GitHub-managed repository workflow |
| Repository | github.com/Dareean |
🩺 MedicFlow — Medical Record Management Platform
Front-end interface enabling fast, secure access to patient medical records for doctors and patients alike.
| Aspect | Detail |
|---|---|
| Stack | React, Next.js, TypeScript, Tailwind CSS |
| Scale | Multi-role healthcare access (doctor/patient) |
| Performance | Optimized rendering for complex medical record datasets |
| Security | Authentication and Role-Based Access Control (RBAC) for sensitive data |
| Impact | Smooth navigation even under complex data loads |
| Repository | github.com/Dareean |
Built during a training engagement with HammerCode Palu, Sep–Dec 2025.
🛠️ JasaKita — Local Service Marketplace
Lead UI/UX design for a platform connecting newcomers in Palu with trusted local service providers.
| Aspect | Detail |
|---|---|
| Stack | Figma, User Research, Prototyping |
| Scale | Mobile-first design for all-age usability |
| Performance | High-fidelity prototypes validated through user research |
| Security | N/A (design-stage engagement) |
| Impact | Built for Recursion UH 1.0 hackathon, Feb–Mar 2025 |
| Repository | github.com/Dareean |
🧾 DreamPOS — Inventory Management System
Point-of-sale system covering inventory management, barcode generation, and automated sales reporting.
| Aspect | Detail |
|---|---|
| Stack | PHP, MySQL, JavaScript, Bootstrap |
| Scale | Full retail POS workflow |
| Performance | Automated report generation, low-friction checkout flow |
| Security | Standard transactional data handling |
| Impact | Excel export integration for sales reporting |
| Repository | github.com/Dareean |
Built at PT Educa Sisfomedia Indonesia, Jul–Sep 2023.
May 2026 – Present
Leading front-end development for I-FEST 2026's internal operations tooling and public-facing website.
- Architected state-transition based interaction models to reduce field data-entry error rates
- Designed the Command Center dashboard with a "Helicopter View" grid for tactical field decisions
- Built two-way filtering systems for logistics approval and real-time crowd monitoring workflows
Blade Livewire Laravel Tailwind CSS
September 2025 – December 2025
Developed MedicFlow, a medical record management platform focused on secure, fast access for clinical staff and patients.
- Implemented authentication and RBAC to protect sensitive medical data
- Optimized application performance for complex data views using Next.js and TypeScript
React Next.js TypeScript Tailwind CSS
February 2025 – March 2025
Designed the end-to-end user experience for JasaKita, a local services marketplace for Palu.
- Conducted user research to validate a mobile-first design across age groups
- Delivered high-resolution interactive prototypes in Figma
Figma User Research Prototyping
July 2023 – September 2023
Built DreamPOS, a point-of-sale inventory management system.
- Implemented stock management, barcode generation, and automated sales reporting
- Integrated Excel export functionality for reporting workflows
PHP MySQL JavaScript Bootstrap
July 2023 – September 2023
Completed a Teaching Factory program building web application modules to industry standard.
- Applied clean coding practices and Git/GitHub workflows within a team development environment
Git GitHub Web Development
February 2023 – June 2023
Translated technical specifications from mentors into responsive front-end interfaces.
- Delivered a final capstone web application integrating the full internship curriculum to industry quality standards
Frontend Development Responsive Design
| Recognition | Details |
|---|---|
| Person In Charge — I-FEST 2026 | Full ownership of planning and execution for the largest technology festival under the Research, Innovation & Works Department, coordinating multiple committee divisions and industry partners |
| Humas (PR) — Palu Developer Day 2026 | Shaped content calendars and outreach strategy that grew organic and partnership-driven registrations |
| Koordinator Mentor — Programming Tadulako (UNTAD) | Facilitated mentor-community communication and improved attendance/engagement in weekly skill-building sessions |
| Active Member — HammerCode Programming Community | Regular participant in weekly technical discussions, code reviews, and frontend tooling knowledge-sharing |
Currently building out formal certifications — check back soon, or connect with me directly for the latest on my learning path.
Coding profile stats will be linked here as they're established.
learning:
- Advanced Next.js App Router patterns
- Design systems architecture at scale
- Accessibility-first frontend engineering
building:
- I-FEST 2026 committee tooling
- Personal design-system component library
exploring:
- Product engineering & UX research methods
- Full-stack TypeScript workflows
open_to:
- Front-End / UI Engineering opportunities
- Design collaboration & open-source contribution
"Good design is invisible — good engineering makes it fast, and good leadership makes it happen on time."