About

About Me

Arifian Saputra

Arifian Saputra

AI Technical Mentor
@ Infinite Learning Indonesia

Full Stack Web Developer

Who Am I?

A passionate individual with deep interest in AI and Web Development. I've been teaching for 2+ years in AI field, specializing in Machine Learning, Large Language Models, Natural Language Processing, building production-ready web applications, and QA automation with Playwright.

Stats

Years Teaching2+
Projects Built15+
Students Taught100+

Skills & Expertise

Machine Learning
LLM & NLP
Full Stack Dev
Database
Web Apps
Teaching

Get In Touch

Resume
EmailOffice
@arifiansaputra_
Arifian Saputra
arifian853
@ArifianSaputra0
Next.js
React
Node.js
Express
NestJS
Tailwind CSS
MongoDB
Python
Framer Motion
TensorFlow
Keras
Red Hat
Docker
Playwright
Playwright

What I Offer

Web Development

  • •Frontend (HTML, CSS, JS, React, Tailwind)
  • •Backend (Express, Flask, FastAPI) + Database
  • •Full Stack (MERN Stack, Next.js)
  • •WordPress Development

AI & Machine Learning

  • •Python API & AI Chatbot Development
  • •ML Modelling (Deep Learning, NLP, CV)
  • •Recommendation & Time Series
  • •Model Deployment with Python Backend

Mentoring & Others

  • •Private Mentoring (AI & Web Dev)
  • •DevOps & Linux Tutorials
  • •Deployment Guidance
  • •Webinar Request (Institutional)

Education

2020 - 2024Bachelor's Degree

S1 Teknik Informatika

Universitas Maritim Raja Ali Haji

Tanjungpinang, Kepulauan Riau, Indonesia

2017 - 2020High School

Matematika dan Ilmu Alam

SMA Negeri 1 Bintan Utara

Tanjunguban, Kepulauan Riau, Indonesia

About This Website

This website is a hobby project I built to showcase my portfolio, projects, and skills. It's designed with a clean, modern aesthetic and built using some of the latest web technologies. Feel free to explore and get inspired! Anyway, this website is 50% human-crafted and 50% vibe-coded lol.

Frontend

Next.js
React
TypeScript
Tailwind CSS
shadcn/ui

Backend AI

FastAPI
Python
GPT-OSS 20B via Groq

Design System

This website is designed with a Minimalist Brutalism approach, highlighting sharp corners (rounded-none) and a modular bento grid. The warm color palette is directly inspired by the editorial aesthetics of the Claude.ai website (Parchment, Ivory, and Terracotta).

Typography

Lexend Deca

Headings & Titles

--font-heading / font-heading

Inclusive Sans

Body Text & UI

--font-sans / font-sans
Color Palette

Terracotta Brand (Primary Accent)

brand-500 | #c96442

Terracotta Accent (Buttons)

brand-700 | #b55333

Background (Light)

background | #f5f4ed

Background (Dark)

background | #141413

Card Background

Ivory/Dark Surface | #faf9f5 / #30302e

Animation System
LibraryFramer Motion
Fade-in Duration500-600ms
Stagger Children100ms (0.1s)
Easing FunctioneaseOut
Translate Y (Start)20px
Hover Transitions300ms
Design Principles
  • •
    Non-Rounded Design

    All corners use rounded-none for brutalist aesthetic

  • •
    Bento Grid Layout

    Modular card-based layout with varying spans

  • •
    Hover Border Accent

    Cards highlight with border-brand-500 on hover

  • •
    Grayscale-to-Color

    Images start grayscale, colorize on hover

  • •
    Underline Highlights

    Key text uses border-b-2 border-brand-500