I build web applications with a focus on clean architecture, maintainable code, responsive interfaces, and practical backend systems.
My development path covers the complete application lifecycle:
Interface
↓
Frontend
↓
Application Logic
↓
API
↓
Backend
↓
Database
↓
Deployment
I'm particularly interested in understanding why systems are designed the way they are, rather than only learning how to use individual technologies.
HTML · CSS · JavaScript · Tailwind CSS
React · Vue.js · Vite
PHP · Laravel · REST APIs · Authentication · Sessions
MySQL · SQL · PDO · CRUD · Relational Data
Git · GitHub · npm · Figma
┌────────────────────────────────────────────────────┐
│ │
│ ARCHITECTURE │
│ Designing projects that remain understandable │
│ as they grow. │
│ │
│ REUSABILITY │
│ Building components and logic that can be reused. │
│ │
│ MAINTAINABILITY │
│ Writing code that another developer can read. │
│ │
│ USER EXPERIENCE │
│ Making interfaces responsive and intuitive. │
│ │
│ FUNDAMENTALS │
│ Understanding the technology beneath the tools. │
│ │
└────────────────────────────────────────────────────┘
E-Commerce Application
A modern React e-commerce project focused on component architecture, routing, product experiences, authentication flow, cart functionality, and responsive UI.
Technology
React JavaScript Tailwind CSS Vite React Router
Repository
→ https://github.com/yosuf-dev/shoesWebsite
Live
→ https://yosuf-dev.github.io/shoesWebsite
Vue.js Browser Game
A browser-based vertical jump game developed with Vue.js as part of frontend engineering and Web Technologies competition practice.
Technology
Vue.js JavaScript Vite CSS
Repository
→ https://github.com/yosuf-dev/gameJump
Live
→ https://yosuf-dev.github.io/gameJump/
PHP Content Management System
A backend-oriented blog application implementing authentication, sessions, categories, posts, CRUD operations, database communication, and an administration panel.
Technology
PHP MySQL PDO HTML CSS
Repository
→ https://github.com/yosuf-dev/project-weblog
RTL Frontend Experience
A Persian RTL interface focused on responsive layout, modern visual design, typography, dark mode, and frontend implementation.
Technology
HTML CSS JavaScript Tailwind CSS
Repository
→ https://github.com/yosuf-dev/CoffeeShop
Live
→ https://yosuf-dev.github.io/CoffeeShop/
I'm currently moving deeper into the backend and full-stack side of web development.
FULL-STACK
│
┌───────────────┴───────────────┐
│ │
FRONTEND BACKEND
│ │
React / Vue PHP / Laravel
│ │
JavaScript REST APIs
│ │
Tailwind CSS Authentication
│ │
└───────────────┬───────────────┘
│
MySQL
│
▼
DEPLOYMENT
- Advanced JavaScript
- Vue.js
- React
- PHP
- Laravel
- MySQL
- REST API architecture
- Authentication
- Server fundamentals
- Deployment
01 Understand
↓
02 Plan
↓
03 Design
↓
04 Implement
↓
05 Test
↓
06 Refactor
↓
07 Deploy
The goal is not just to make a project work.
The goal is to make it understandable, maintainable, and extensible.
Technology changes. Engineering fundamentals remain.
I try to build with a fundamentals-first mindset:
Problem
↓
Requirements
↓
Architecture
↓
Implementation
↓
Validation
↓
Iteration
Every project is an opportunity to understand something more deeply.
My current development path is centered around Web Technologies and practical Full-Stack development.
HTML / CSS
│
▼
JavaScript
│
├──────────────┐
▼ ▼
React Vue
│ │
└──────┬───────┘
▼
REST API
│
▼
PHP / Laravel
│
▼
MySQL
│
▼
Deployment
| Area | Technologies |
|---|---|
| Frontend | HTML · CSS · JavaScript · Tailwind |
| Frameworks | React · Vue · Vite |
| Backend | PHP · Laravel |
| Database | MySQL · SQL · PDO |
| Tools | Git · GitHub · npm |
| Design | Figma · Responsive UI · RTL |
IDEA
│
▼
REQUIREMENTS
│
▼
DESIGN
│
▼
FRONTEND
│
▼
API
│
▼
BACKEND
│
▼
DATABASE
│
▼
TESTING
│
▼
DEPLOYMENT
github.com/yosuf-dev
Full-Stack Web Development
React · Vue · PHP · MySQL
Building → Learning → Improving
YOSUF
│
▼
┌───────────────┐
│ FRONTEND │
│ React / Vue │
└───────┬───────┘
│
▼
┌───────────────┐
│ JAVASCRIPT │
│ Advanced │
└───────┬───────┘
│
▼
┌───────────────┐
│ BACKEND │
│ PHP / Laravel │
└───────┬───────┘
│
▼
┌───────────────┐
│ DATABASE │
│ MySQL │
└───────┬───────┘
│
▼
┌───────────────┐
│ API + AUTH │
└───────┬───────┘
│
▼
┌───────────────┐
│ DEPLOYMENT │
└───────┬───────┘
│
▼
┌───────────────┐
│ FULL-STACK │
│ ENGINEERING │
└───────────────┘
