Hi, I'm Sopian đź‘‹
UI-focused Frontend Developer. I enjoy turning ideas into responsive web experiences and leveraging cloud tech to scale products.
MS

About

I've been passionate about the internet since I was a kid. Growing up in Jakarta, I spent a lot of time at internet cafes, where I first explored the web and became curious about how it worked. This led me to learn programming, and the more I practiced, the more excited I became about mastering it.

Education

U

Universitas Pendidikan Indonesia

2021 - 2025
S1 Education of System and Information Technology
Fresh Graduate from Universitas Pendidikan Indonesia, Purwakarta Campus, with strong background in leadership, research, and academic achievements. Served as Vice Chair of the Student Legislative Body (HIMA), successfully improving organizational effectiveness by 40% through the implementation of five legislative regulations, and actively contributing as a steering committee member in various legislative activities. Achieved recognition in public speaking and debate competitions, winning Runner-Up (2022) and Third Place (2023) at UPI Purwakarta Student Debate Championship. Completed a thesis research titled “Development of a Machine Learning Model for Student Behavior Detection”, showcasing expertise in technology and education.
B

Bangkit Academy

Feb 2024 - Aug 2024
Cloud Computing
Experienced in developing and implementing a scalable backend service for Kukuliner, a mobile food recommendation application powered by machine learning and integrated with Google Cloud Platform (GCP). Gained comprehensive knowledge in cloud computing, including fundamental principles, system architecture, and its business applications.
S

SMA Negeri 95 Jakarta

2018 - 2021
Social Science
During my three years at school, I was active in extracurricular activities and seized opportunities to develop my social skills. Academically, I managed to stay in the top 20% throughout my time in high school and even qualified for university through an invitation-based track (SNMPTN).

Skills

JavaScript
TypeScript
React.js
Next.js
Vue.js
Nuxt.js
Python
My Projects

Check out my projects 👇

I love bringing ideas to life through code. Here are some of my favorite projects I've worked on.

EduVision (Student Behavior Detection)

  • Developed a real-time classroom monitoring app using YOLOv11 and Streamlit to detect student behaviors with live visualization.
  • Achieved mAP@0.5: 0.71, mAP@0.5:0.95: 0.55, trained on 11.7k annotated instances across 1.6k images.
  • Delivered real-time inference at 3.6 FPS with ~65 ms latency per frame, running with 71% CPU, 84% memory, 25% GPU usage on test video (1 min / 1800 frames).
  • Implemented DeepSORT tracking with activity voting window, reducing misclassification and enabling time-series analysis of engagement.
  • Built an interactive analytics dashboard (activity counts, average durations, time series) using Streamlit + Matplotlib.
Python
YOLO
Streamlit

Kukuliner (AI-Powered Food Recommendation)

  • Developed a responsive, scalable landing page with Next.js + TypeScript and interactive animations powered by Framer Motion.
  • Achieved 90 Performance, 91 Accessibility, 81 Best Practices, 100 SEO (desktop) and 99 Performance, 91 Accessibility, 100 Best Practices, 100 SEO (mobile) on Lighthouse.
  • Built a modular codebase of 1,200+ lines across 16 files and 9 reusable components, ensuring maintainability and scalability.
  • Implemented SEO best practices (structured metadata, semantic HTML) that resulted in perfect SEO scores across devices.
  • Designed and optimized a user-centric interface with Tailwind CSS, improving engagement through responsive layouts and smooth UI animations.
Next.js
TypeScript
Tailwind CSS
Framer Motion
Nextra

Mindcare (AI Mental Health Companion)

  • Created a full-stack mental health platform with AI chatbot and secure authentication, improving accessibility.
  • Designed and implemented 68 reusable UI components across a 17.5K LOC codebase.
  • Achieved 94 Performance (desktop) and 76 Performance (mobile) in Lighthouse; 96 Accessibility and 100 SEO.
  • Optimized bundle size to 483 KB gzipped, reducing initial load by 25% compared to baseline setup.
  • Implemented secure email delivery with Resend and optimized PostgreSQL queries for scalable data handling.
Next.js
TypeScript
Tailwind CSS
AI SDK
NextAuth.js
Prisma
PostgreSQL
Resend

Linkify (URL Shortener)

  • Built and deployed a URL shortener with analytics dashboard and responsive performance.
  • Achieved 89 Performance, 88 Accessibility, 96 Best Practices, 92 SEO (desktop Lighthouse scores) by optimizing CSS/JS, enabling text compression, and reducing render-blocking resources.
  • Designed an intuitive, analytics-driven dashboard with Tailwind CSS for real-time click tracking and URL management.
Express.js
PostgreSQL
Tailwind CSS
Shortid
Vercel Edge

Cinemora (Netflix Clone)

  • Developed a streaming web app with 974 LOC, 11 source files, and 5 reusable components, integrating TMDB API (8+ endpoints) for dynamic movie and TV content.
  • Delivered strong performance: Lighthouse 88 (desktop), 75 (mobile), Accessibility 94–98, SEO 100, with Core Web Vitals compliance (LCP 0.28s, CLS 0.04, INP 0ms).
  • Reduced bundle size by ~30% (from ~640 KB parsed to ~180 KB gzipped) via code-splitting, tree-shaking, and Next/Image, improving mobile load speed by 30%+ and raising Lighthouse mobile score by +10 points.
Next.js
Tailwind CSS
Axios

TuneStream (Spotify Clone)

  • Developed a Spotify-like music streaming web app with real-time playback, audio visualization, and responsive design.
  • Achieved 99 Performance, 100 Accessibility, 100 Best Practices scores on Lighthouse desktop audit by optimizing image formats, reducing unused JavaScript, and eliminating render-blocking resources.
  • Enhanced mobile performance (Performance score 75 → 90+) through lazy loading, image optimization, and code-splitting.
  • Managed 33.99 MB bundle size with efficient asset handling and minimized JavaScript payloads.
  • Implemented user-centric UI using Tailwind CSS and optimized audio interaction with Wavesurfer.js for seamless playback.
React
Vite
Tailwind CSS
Wavesurfer.js
Certifications

Always learning,
always improving 🌟

Throughout my career, I've pursued multiple certifications to continuously improve my skills and stay ahead in a rapidly changing field. These certifications reflect my commitment to learning and adapting to new challenges, ensuring I can bring the best solutions to every project.

  • G

    Google

    Google IT Support

    This certification has provided me with a solid foundation in IT support, equipping me with the skills necessary for an entry-level IT role. I gained hands-on experience in key tasks such as computer assembly, wireless networking, and software installation. The certification also enabled me to develop the ability to troubleshoot and resolve technical issues, providing end-to-end customer support. Additionally, I became proficient in working with essential IT systems like Linux, Domain Name Systems (DNS), Command-Line Interface (CLI), and Binary Code, ensuring I can effectively navigate and manage IT infrastructures.
  • D

    IBM

    Developing Front-End Apps with React

    This certification has equipped me with the skills to build interactive UIs and dynamic web applications using JavaScript technologies such as React, JSX, and ES6. I learned to quickly and efficiently develop front-end applications by creating reusable React components. The certification also deepened my understanding of essential React concepts, including props, states, hooks, forms, and Redux, enabling me to manage data and state in complex applications. To demonstrate my proficiency, I successfully built several front-end applications, including a shopping cart, showcasing my ability to create functional and dynamic web interfaces.
  • W

    University of Michigan

    Web Design for Everybody

    This certification has provided me with foundational skills in web development and design. I learned how to enhance web pages with interactivity using JavaScript, making them more engaging for users. The certification also covered the basics of Cascading Style Sheets (CSS3), allowing me to style and design responsive web pages that adapt to various devices. Additionally, I gained experience with the Document Object Model (DOM), enabling me to modify web pages dynamically. These skills have equipped me to create functional, interactive, and responsive web applications.
  • J

    FreeCodeCamp

    JavaScript Algorithms and Data Structures

    This certification has strengthened my problem-solving and programming skills using JavaScript. I gained a deep understanding of core algorithms and data structures, including arrays, linked lists, stacks, queues, and sorting algorithms. The certification also focused on applying these concepts to efficiently solve real-world coding challenges. I learned to write clean, optimized code, improving both performance and readability. This experience has enhanced my ability to approach complex problems and build efficient solutions using JavaScript.
Contact

Get in Touch

Feel free to message me on LinkedIn with a direct question, and I'll reply when I can.