hardik khyal ®
hardik khyal

Initializing Portfolio...

0% LOADED
who I am

About Me

WWiitthh mmoorree tthhaann ffiivvee yyeeaarrss ooff eexxppeerriieennccee iinn ddeessiiggnn,, ii ffooccuuss oonn bbrraannddiinngg,, wweebb ddeessiiggnn,, aanndd uusseerr eexxppeerriieennccee,, ii ttrruullyy eennjjooyy wwoorrkkiinngg wwiitthh bbuussiinneesssseess tthhaatt aaiimm ttoo ssttaanndd oouutt aanndd pprreesseenntt tthheeiirr bbeesstt iimmaaggee.. LLeett''ss bbuuiilldd ssoommeetthhiinngg iinnccrreeddiibbllee ttooggeetthheerr!!

Hero Image 1

Founder

Creator

Hero Image 2

Producer

Executive

Hero Image 3

Psychic

Celebrity

HARDIKKHYAL • APPROVED • HARDIKKHYAL • APPROVED •APPROVEDEST. 2026capabilities & stack

Skills & Expertise

[ DOSSIER / STACK_EVIDENCE_ROOM ]
UI/UX Design

UI/UX Design

Creating high-fidelity wireframes, interface mockups, user flows, and interactive prototypes that unify aesthetic elegance with clear usability.

FigmaVisual DesignPrototypingWireframingUser Research
01
Frontend Architecture

Frontend Architecture

Crafting modern, highly immersive web applications using React, Next.js, and TypeScript with clean component design and responsive layout systems.

Next.jsReactTypeScriptTailwind CSSHTML5 & CSS3
02
Creative Interaction

Creative Interaction

Bringing interfaces to life with interactive physics, scroll-driven page animations, dynamic SVG yarn structures, and fluid Framer Motion transitions.

Framer MotionGSAPSVG AnimationWebGLLenis Scroll
03
Design Systems

Design Systems

Constructing scalable design tokens and reusable visual style libraries to ensure perfect consistency and smooth engineering workflow.

Figma LibrariesDesign TokensTailwind ConfigStorybookAccessibility
04
HARDIKKHYAL • APPROVED • HARDIKKHYAL • APPROVED •APPROVEDEST. 2026
selected works

Graphic Design

artwork

01 — artwork

logo

02 — logo

graphic designer

03 — graphic designer

webproject

04 — webproject

artwork view 1
artwork view 2
artwork view 3
artwork view 4
logo view 1
logo view 2
logo view 3
logo view 4
graphic designer view 1
graphic designer view 2
graphic designer view 3
graphic designer view 4
webproject view 1
webproject view 2
webproject view 3
webproject view 4
selected works

Projects

( DEVOPSHUB PLATFORM )
[ REF-03_SYS ]
[03] — ENGINEERING CATALOGUE

DEVOPSHUB PLATFORM

OBJECTIVE.

A self-hosted, lightweight DevOps deployment and PaaS management platform designed for single-click application deployments.

  • Automates git repository cloning and Docker multi-container image building.
  • Streams live container execution and build logs to the browser using Socket.io and XTerm.js.
  • Features dynamic Nginx reverse proxy routing and Prometheus/Grafana hardware monitoring.
EXECUTION.

Constructed on a React/Vite client and Node.js server paired with Prisma ORM and PostgreSQL databases.

  • Interacts directly with Docker container runtimes using the Dockerode client API.
  • Leverages Terraform and Ansible scripts for automated server and infrastructure provisioning.
  • Optimized configuration profiles to run efficiently on an AWS EC2 t2.micro instance.
TECH STACKREACT / NODE.JS / DOCKER / AWS
( HR PAYROLL SYSTEM )
[ REF-02_SYS ]
[02] — ENGINEERING CATALOGUE

HR PAYROLL SYSTEM

OBJECTIVE.

A clean, modular student-level Python backend system for managing corporate HR payroll and attendance records.

  • Add, update, search, and list employee profiles in the database.
  • Mark employee attendance status and manage historic work logs.
  • Generate monthly salary slips and comprehensive company payroll reports.
EXECUTION.

Designed with an environment-configured database connector supporting MySQL and Oracle SQL DBMS.

  • Enforces referential integrity and safe transactions during payroll execution.
  • Configured setup files for rapid table initialization and schema seeding.
  • Written in structured Python 3.9+ using standard SQL query protocols.
TECH STACKPYTHON / MYSQL / ORACLE
( AI BACKGROUND REMOVER )
[ REF-01_SYS ]
[ DEVELOPER FOLDER ]
CLICK ON ANY FOLDER TAB TO EXPAND SYSTEM AND VIEW PROJECT MODULES
[01] — ENGINEERING CATALOGUE

AI BACKGROUND REMOVER

OBJECTIVE.

A free, unlimited, privacy-first AI background remover that runs entirely inside the client browser with WebGL acceleration.

  • 100% private — processing happens locally; images never leave your device.
  • High-quality transparent PNG export with one-click download.
  • Advanced edge refinement using bilateral filtering and alpha matting for smooth boundaries.
EXECUTION.

Built using MediaPipe Selfie Segmentation and TensorFlow.js for in-browser ML inference.

  • Loads model asynchronously to optimize bundle size and execution latency.
  • Runs fully offline inside the browser with zero external server dependencies.
  • Requires no login, has no watermarks, and offers unlimited usage.
TECH STACKJS / TENSORFLOW.JS / MEDIAPIPE
HARDIKKHYAL • APPROVED • HARDIKKHYAL • APPROVED •APPROVEDEST. 2026
academic timeline

My Journey

2018–2020

High School Education

Mother Teresa Sr. Sec. SchoolScience & Mathematics91.2% Aggregate

Fostered a strong analytical foundation with deep focus on Physics, Chemistry, and Advanced Mathematics.

2020–2023

Diploma in Computer Science

Government Polytechnic CollegeSoftware Engineering8.5 CGPA / 87.5%

Learned core computer science concepts including OOPs, Data Structures, Database Systems, and built multiple web-based platforms.

2024–Present

B.Tech in Computer Science

Lovely Professional UniversityWeb Architecture & AIPursuing (Current)

Specializing in full-stack architecture, machine learning integrations, creative UI motion, and next-generation web technologies.

Bespoke Web Design & Digital Art Direction Experience 2026 Hardik Khyal Portfolio Experience Copenhagen Bespoke Creative Design Playground Interactive Artistry Studio Future of Web Design 

I am a creative developer focusing on high-end interactions, elegant motion system design, and ergonomic digital products. Let's create something extraordinary.