Portfolio — 2026
Frontend Web Development with UI/UX Design Systems, Technical SEO & AI Automation.
98+SEO & Accessibility
100%Client Satisfaction
6 MonthsProfessional Training
Brand Identity
Web Design
Creative Direction
Motion
Front-end
Art Direction
About the studio
I am a university-certified Frontend Web Developer and UI/UX Designer certified by National University of Modern Languages (NUML). I also specialize in WordPress development, Canva design, SEO & Digital Marketing, and performance optimization through Coursera certifications. A certified AI Developer focused on building intelligent systems like personal AI agents, chatbots, and AI-integrated applications.
Expertise
Specialized — Frontend Engineering & UI/UX Services.
I design and develop high-performance digital products using frontend development, responsive web design, UI/UX design systems, WordPress CMS, AI automation, technical SEO, accessibility, and modern web deployment workflows.
01
Frontend Web Development
Frontend Web Development
I build responsive, accessible, SEO-friendly, and performance-optimized websites using semantic HTML5, CSS3, JavaScript, React, Tailwind CSS, Bootstrap, and clean frontend architecture focused on speed, usability, and conversion.
02
UI/UX Design Systems
UI/UX Design Systems
I design user-centered interfaces, scalable design systems, high-fidelity Figma prototypes, wireframes, user flows, and component libraries that improve clarity, visual hierarchy, usability, and frontend handoff quality.
03
WordPress CMS Development
WordPress CMS Development
I create custom WordPress websites, business sites, portfolio websites, blogs, and CMS-powered pages with responsive themes, Gutenberg or Elementor workflows, SEO-friendly structure, plugin integration, and easy content management.
04
AI Automation
AI Automation
I integrate AI-powered workflows, intelligent chatbots, personal AI agents, prompt-engineered experiences, and API-based automation systems that help websites respond smarter, qualify leads, process requests, and improve user interaction.
05
Technical SEO & Digital Growth
Technical SEO & Digital Growth
I improve website visibility, search engine crawlability, page speed, metadata quality, semantic HTML structure, accessibility, content hierarchy, and conversion-focused on-page optimization for stronger long-term digital growth.
How I work
Features — built into every engagement.
Featured Work
All Projects at a Glance
Browse through every project — from Figma design systems to full-stack frontend implementations. Each card tells a unique story of craft and code.
1 – 3 / 13
More Design Styles
Explore More Design Styles
Browse through 16 distinct design aesthetics — from Modern & Minimal to Immersive & Motion. Each style represents a unique visual language and design philosophy.
Before & after
What good design actually changes.
The deltas from a recent SaaS engagement — from a confused product to a calm, focused workflow.
Before
4.2s
Slow, scattered.
Cluttered layout, inconsistent spacing, weak visual hierarchy, and poor mobile responsiveness across devices.
After
0.9s
Focused, fast.
Clean structure, consistent spacing, improved visual hierarchy, and fully responsive layout across devices.
Skills & toolkit
Skills built through practice and learning.
Figma
HTML
CSS
JavaScript
Bootstrap
Tailwind
WordPress
GitHub
Generative AI
Cloud Computing
Blogger
Best Practices
Accessibility
SEO
MS Excel
MS Word
Recognition
Certifications & learning milestones.
Verified learning across frontend web development, UI/UX design, technical SEO, accessibility, AI automation, cloud computing, WordPress CMS, and modern digital workflows.
NUML
Frontend Development Certification
HTML5 · CSS3 · JavaScript · Bootstrap · Tailwind CSS · Responsive Web Development
Skills gained
Frontend Web
Development
Responsive Web
Design
Semantic HTML5
Architecture
CSS Layout Systems
JavaScript DOM
Manipulation
Mobile-First UI
Development
Tools mastered
Applied focus
Landing Page Development
Portfolio Website Design
Clean Code Structure
Cross-Browser Compatibility
NUML
UI/UX Design Certification
Wireframing · User Interface Design · Prototyping · Figma · UX Design Workflow
Skills gained
User Interface
Design
User Experience
Design
Wireframing
Interactive
Prototyping
Information
Architecture
User Journey
Mapping
Tools mastered
Applied focus
UX Research Basics
Design Systems
Usability Planning
Figma to Frontend Workflow
IBM
Introduction to Artificial Intelligence (AI)
Artificial Intelligence · Machine Learning · Deep Learning · Generative AI · IBM Watson
Skills gained
Artificial Intelligence
Fundamentals
Generative AI
Concepts
Machine Learning
Basics
Deep Learning
Overview
Natural Language
Processing
Responsible AI
AI Risk Awareness
Tools mastered
Applied focus
AI Chatbot Strategy
AI Automation Planning
AI-Enhanced Web Workflows
Human-Centered AI UX
Coursera
Creating a Free Business Page with Blogger
Blogger CMS · Business Website Setup · Content Marketing · Google Analytics · Online
Presence
Skills gained
Business Website
Setup
Blogger CMS
Strategy
Content Management
Content Marketing
Customer
Engagement
Content Performance
Analysis
Tools mastered
Applied focus
Small Business Websites
Digital Marketing Basics
SEO-Friendly Content Layout
Online Brand Presence
Scrimba
Learn Bootstrap
Bootstrap Grid · Responsive Utilities · UI Components · Mobile-First Layouts
Skills gained
Bootstrap Web
Development
Responsive Web
Design
Mobile-First
Layouts
UI Component
Styling
CSS Utility
Classes
Grid-Based Page
Layouts
Tools mastered
Applied focus
Rapid Prototyping
Responsive Landing Pages
Reusable UI Blocks
Frontend Layout Systems
Skillshare
Canva Design Essentials Pt. 1: Core Tools & Layouts
Graphic Design · Typography · Layout Design · Color Theory · Visual Content Creation
Skills gained
Graphic Design
Visual Layout
Design
Typography Pairing
Color Theory
Photo Editing
Brand Asset
Organization
Tools mastered
Applied focus
Social Media Visuals
Marketing Graphics
Presentation Design
Visual Brand Consistency
IBM
Introduction to Cloud Computing
Cloud Infrastructure · IaaS · PaaS · SaaS · Virtualization · Cloud Security
Skills gained
Cloud Computing
Fundamentals
Cloud Deployment
Models
IaaS PaaS SaaS
Concepts
Virtualization
Cloud Storage
Cloud Security
Basics
Distributed
Computing
Tools mastered
Applied focus
Website Deployment Planning
Hosting Architecture
Scalable Web Infrastructure
Cloud-Ready Applications
Coursera
Design and Develop a Website using Figma and CSS
Figma to CSS · UI Prototyping · Responsive Website Design · HTML CSS Implementation
Skills gained
Figma to Website
Workflow
UI Design
Implementation
Responsive Web
Design
HTML and CSS
Development
Mockup Translation
Prototyping
Tools mastered
Applied focus
Pixel-Conscious UI Development
Design Handoff
Frontend Styling Systems
Responsive Prototypes
IBM
Getting Started with Git and GitHub
Git Version Control · GitHub Repositories · Branching · Collaboration · CLI Workflows
Skills gained
Git Version
Control
GitHub Repository
Management
Branching and
Merging
Software
Versioning
Open Source
Workflow
Collaborative
Development
Tools mastered
Applied focus
Code History Management
Project Collaboration
Deployment Workflows
Clean Development Process
IBM
Introduction to HTML, CSS, & JavaScript
HTML5 · CSS3 · JavaScript · DOM · Browser APIs · Dynamic Web Pages
Skills gained
HTML5 Web
Structure
CSS Styling
Standards
JavaScript
Programming
DOM Manipulation
Responsive Web
Design
Browser
Compatibility
Tools mastered
Applied focus
Interactive UI Development
Dynamic DOM Elements
Web Page Scripting
Frontend Foundations
Coursera
Getting Started with Microsoft Excel
Spreadsheet Data · Excel Formulas · Pivot Tables · Charts · Data Visualization
Skills gained
Data Analysis
Data Cleaning
Data Manipulation
Excel Formulas
Pivot Tables
Charts and
Dashboards
Data Visualization
Tools mastered
Applied focus
Performance Reporting
Marketing Data Review
Business Data Organization
Analytics Support
Coursera
Getting Started with Microsoft Word
Technical Documentation · Document Formatting · Report Layouts · Microsoft Office 365
Skills gained
Technical
Documentation
Document
Formatting
Report Layout
Design
Writing and
Editing
Document
Management
Computer Literacy
Tools mastered
Applied focus
Project Documentation
Client Reports
Process Documentation
Structured Communication
IBM
Generative AI: Prompt Engineering Basics
Prompt Engineering · Large Language Models · AI Workflows · Context Design · Generative
AI Tools
Skills gained
Prompt Engineering
Prompt Patterns
Context Management
Large Language
Models
Generative AI
Workflows
Responsible AI
AI Decision
Support
Tools mastered
Applied focus
AI Chatbot Automation
AI Agent Workflows
Prompt-Driven UX
Business Automation
Board Infinity
Semantic HTML & Accessibility
Accessible Web Design · Semantic HTML5 · WCAG · WAI-ARIA · Screen Reader Support
Skills gained
Semantic HTML5
Accessible Web
Design
WCAG Accessibility
Compliance
WAI-ARIA Web
Standards
Keyboard Navigation
UX
Screen Reader Friendly
UI
Frontend Accessibility
Testing
Tools mastered
Applied focus
Inclusive UX Design
Accessible Forms
Accessible Modals
Technical SEO Structure
LearnKartS
Tailwind CSS Mastery: Modern UI Design & Responsive
Layouts
Tailwind CSS · Utility-First Styling · Responsive Layouts · Design Systems · Build Tools
Skills gained
Tailwind CSS
Development
Utility-First CSS
Architecture
Responsive UI
Design
Mobile-First
Layouts
Component Styling
Configuration
Management
Modern Web Design
Tools mastered
Applied focus
Modern Landing Pages
Scalable UI Systems
Responsive Component Design
Production CSS Workflow
Packt
WordPress 101 - The Complete Guide
WordPress CMS · Theme Customization · Plugins · Gutenberg · Elementor · SEO Setup
Skills gained
WordPress CMS
Development
WordPress Theme
Customization
Plugin Integration
Gutenberg Content
Editing
Elementor Page
Building
WordPress SEO
Basics
Website Security
Controls
Content Management
Tools mastered
Applied focus
Custom WordPress Websites
CMS Architecture
SEO-Friendly Content Management
Client-Editable Websites
By the numbers
Performance you can measure.
Every project ships with audited, real-world metrics. Here’s what I aim for.
94
Website · Performance
100
Website · Accessibility
100
Website · SEO
100
Website · Best practice
Learning journey
From learning to building.
A simple timeline of how I developed skills in frontend development, UI/UX design, and modern web technologies.
Started web learning
learning HTML and CSS basics, understanding how websites are structured and styled.
UI/UX exploration
Started working with Figma and learned UI design principles like spacing, typography, and layout.
Frontend development practice
Built small projects using HTML, CSS, Bootstrap, and Tailwind to improve responsive design skills.
WordPress & SEO learning
Learned WordPress customization, basic SEO, and content optimization through structured courses.
Certified learning phase
Completed certifications in frontend development, UI/UX design, WordPress, SEO, and digital marketing (Coursera + NUML).
AI development introduction
Started learning AI integration, building simple chatbots and exploring API-based AI applications.
Building portfolio projects
Currently focused on building frontend projects using HTML, CSS, Bootstrap, and Tailwind with UI/UX focus.
Solutions
Ways to collaborate with me.
High-quality design, development, and integration solutions tailored to meet your digital product needs.
Figma Design
Visuals / UI & UX
Creating high-fidelity UI/UX layouts, wireframes, and scalable design systems.
- Visual design for websites and apps
- Clear page layouts & screen structures
- Clickable interactive previews of pages
- Organized design systems (fonts, colors)
- Smooth animations & screen transitions
- Developer-ready files for quick coding
Web Development
Full-Scale / development
Fully responsive, highly optimized, and accessible websites built with modern clean code.
- Responsive layout (mobile, tablet, & desktop)
- Clean, modern code (React, HTML, CSS, & JS)
- Fast loading speeds & code optimization
- SEO setup to help you rank higher on Google
- Full accessibility (easy to use for all visitors)
- Domain setup, hosting launch, & support
AI Integrations
Smart / automation
Supercharging your digital platforms with custom AI models, APIs, and automated systems.
- Automated workflows to save manual hours
- Custom AI chatbot setup for customer help
- Secure connection to ChatGPT & AI models
- Automations to process text, files, & data
- Custom API setups for smart features
- Automatic content or response systems
Email & Auth
Advanced / secure
Secure user dashboards, custom authentication, database systems, and SMTP mailing setup.
- Advanced forms
- SMTP setup for automations
- Secure user login/register
- Database & API setups
Fixes & Updates
Maintenance / support
Resolving website bugs, speed tuning, upgrading accessibility standards, and building additions.
- Fast bug fixing & layout repairs
- Speed boost & optimization tuning
- SEO & Google search ranking audits
- Adding new custom page sections
- Accessibility fixes for easy reading
- Upgrading old code for safety
Frequently asked
A few common questions.
I build fast, modern web spaces using HTML5, CSS3, JavaScript (ES6+), React.js, Tailwind
CSS, and
Bootstrap. For content-focused sites, I build custom themes on WordPress using Gutenberg or
Elementor.
Absolutely. Because I code from scratch, my workflow is entirely flexible. If your team
requires a
specific setup—like using pure CSS instead of Tailwind, or opting for Bootstrap over utility
frameworks—I
will adapt the codebase completely to match your technical guidelines.
Yes, absolutely. Because I code layouts and systems from scratch, I can build any custom
functionality
your business needs. This includes full e-commerce architectures (like interactive shopping
carts, product
wishlists, and optimized checkouts), secure payment gateway integrations, or specialized
forms tailored to
your exact workflow.
Yes. If you already have a design ready, I can step in purely as your frontend engineer to
convert your
visuals into clean, pixel-perfect, and fully interactive HTML/CSS, Tailwind, or Bootstrap
code.
Absolutely. I specialize in taking slow template-built websites and rebuilding them into
high-performance,
custom-coded web spaces or optimized WordPress setups that rank better on Google.
I connect modern AI tools to your website to automate manual tasks. Examples include setting
up custom AI
chatbots for 24/7 customer support, smart contact forms, or automated workflows that process
user data
instantly.
Yes. I build websites using clean semantic HTML structure, schema.org markup, and fast core
web vitals.
This ensures Google search bots can easily read, index, and rank your business higher.
Yes. I don't just design and code—I handle the full technical deployment. This includes
configuring your
custom domain, setting up secure SSL certificates, and launching your site live via
platforms like Vercel,
Netlify, or secure web servers.
Yes. I believe in complete transparency. During the design phase, you will get a clickable
Figma prototype
link to test the visuals. Once coding begins, I will provide a private live staging link so
you can watch
your website come to life and test it in real-time before launch.
Every project includes a post-launch support period. Additionally, I offer a Fixes & Updates
service to
handle future browser updates, fix bugs, optimize speed, or add new page sections as your
business grows.
Yes. I can integrate custom REST APIs, handle secure user logins/registrations, set up
automated SMTP
email forms, and connect your frontend user interface seamlessly to backend database
architectures.
I work primarily on a flat, transparent project rate so you know exactly what you are paying
upfront with
no hidden fees. Timelines depend entirely on the scope, but a standard premium landing page
typically
takes 3 to 5 days.
Yes. I frequently work with stealth startups, unreleased digital products, and confidential
agency
designs. I am entirely comfortable signing NDAs to ensure your business ideas and assets
stay 100% secure.
Yes. I frequently collaborate with independent UI/UX designers and creative agencies. I can
step in purely
as your frontend engineer to take finished Figma mockups and turn them into pixel-perfect,
responsive
code.
Every project includes built-in revision rounds during the design and planning phases. We
lock in the
structure and visuals together before any development begins, ensuring the final code
matches your vision
perfectly.
Get in touch
Have a project? Let’s talk.
Fill the form or email me directly — I reply within 24 hours, Mon–Fri.