// identity.ts
const developer = {
alias: "Shadi Alatwani",
specialty: "Frontend Developer",
skills: ["React", "TypeScript", "React Native"],
philosophy: "Clean code is a love letter to the next developer.",
imaginative: true,
}
Available for opportunities
Shadi
Alatwani
Frontend Developer
Designing sharp, high-contrast interfaces with a fantasy-like sense of depth, structure, and polish. I build product experiences that feel intentional, calm, and memorable.
Clean architecture
Responsive systems
Product-focused UI
System Architecture
Identity Fragment // 01
Narrative EngineTS // TSX
>
const craft = { precision, rhythm, restraint };
>
Design language engineered from stark contrast and quiet motion.
>
Every interface is treated like a scene: composed, balanced, and purposeful.
04
Core domains
16
Skills shaped
03+
Years of craft
About Shadi Alatwani — شادي العطواني — Frontend Developer
Beyond the syntax and pixels, I craft interfaces with rhythm, clarity, and intent. Every component tells a micro‑story — a dialogue between user and design.
My creative process merges design emotion with engineering logic. Animation isn't decoration — it's storytelling. Whether crafting new experiences or sculpting code that feels alive, I aim for digital elegance infused with human warmth.
- Elegant Logic — Turning problems into graceful, efficient code solutions
- Artful Interfaces — Blending aesthetics and usability for immersive experiences
- Speed & Flow — Delivering fluid, high‑performance interactions
// design.config.ts
const craftsman = {
alias: "Shadi Alatwani",
specialty: "UI / UX Craftsman",
skills: ["Framer Motion", "TailwindCSS", "Figma"],
philosophy: "Animation isn’t decoration — it’s storytelling.",
imaginative: true,
}
// mobile.native.ts
const builder = {
alias: "Shadi Alatwani",
specialty: "Mobile Builder",
skills: ["Expo", "React Native", "Reanimated"],
philosophy: "Great mobile UX should feel like magic, not effort.",
imaginative: true,
}
Behind the Code
Where Creativity
Meets Precision
Beyond the syntax and pixels, I craft interfaces with rhythm, clarity, and intent. Every component tells a micro‑story — a dialogue between user and design.
My creative process merges design emotion with engineering logic. I believe animation isn't decoration — it's storytelling.
Whether it's crafting new experiences or sculpting code that feels alive, I aim for digital elegance infused with human warmth.
Elegant Logic
Turning problems into graceful, efficient code solutions
Artful Interfaces
Blending aesthetics and usability for immersive experiences
Speed & Flow
Delivering fluid, high‑performance interactions
Skills & Technologies
A practical toolkit shaped by shipped work, iteration, and continuous improvement.
0
Domains
0
Skills
0+
Years
01
Frontend Core
4 skills
Strong foundation in modern frontend development, with a focus on scalable UI and maintainable code.
Next.js
SSR, routing, API routes, and production UI architecture
96%
TypeScript
Typed components, reusable utilities, safer refactors
96%
Tailwind CSS
Fast responsive UI building with clean design systems
96%
API Integration
Connected frontend flows to real backend services
96%
02
Mobile & UI
4 skills
Focused on building polished, responsive interfaces across mobile and web experiences.
React Native
Cross-platform app development with Expo and reusable components
96%
Responsive Design
Layouts that adapt cleanly across device sizes
84%
Component Architecture
Structured, reusable UI systems built for growth
96%
State Management
Managed app state with predictable, scalable patterns
84%
03
Backend & Data
4 skills
Comfortable working with backend concepts and data-driven features when projects require it.
Next.js Backend
API routes and server-side features in full-stack apps
66%
MongoDB
Document-based data handling in real projects
66%
Laravel
Basic backend exposure and project collaboration
42%
SQL
Working knowledge of structured data and queries
42%
04
Tools & Workflow
4 skills
Daily workflow includes speed, iteration, and using the right tools to ship better work.
AI Tools
Used for faster iteration, debugging, and prototyping
84%
Performance Optimization
Improved rendering, loading, and UI responsiveness
84%
Git & Version Control
Branching, collaboration, and clean delivery workflows
84%
Design Thinking
Balanced usability, clarity, and visual polish
84%
continuously learning
Expertise
Experience & Expertise
Areas where I bring depth, passion, and real-world results.
React Ecosystem
Deep expertise in React, including hooks, context, Redux, and modern patterns for building scalable, performant single-page applications.
ReactHooksContext APIComponent Architecture
Next.js Applications
Building server-rendered and statically generated applications with Next.js for optimal performance, SEO, and developer experience.
SSRSSGRoutingAPI RoutesSEO
React Native Mobile
Extending web expertise to mobile platforms, creating cross-platform applications that feel native on both iOS and Android.
AndroidiOSCross-PlatformExpo
API Integration & Real-Time
Seamlessly connecting frontend interfaces with backend services, including RESTful APIs and third-party integrations for rich user experiences.
RESTAxiosData FetchingWebSocketsPusher
AI-Enhanced Development
Leveraging AI tools and assistants to accelerate development workflows, generate solutions, and build smarter, more efficient applications.
LovableBase 44PerplexityGitHub Copilot
Vision
Goals & Aspirations
What drives me forward and shapes my journey as a developer.
01
High-Quality Applications
Building frontend applications that set a high bar for code quality, reliability, and user satisfaction.
02
Intuitive Interfaces
Creating accessible, intuitive user interfaces that make technology feel effortless for everyone.
03
Continuous Learning
Staying ahead by continuously exploring modern technologies, patterns, and best practices.
04
Impactful Products
Developing digital products that create real value and leave a positive impact on users' lives.
05
Creative Problem Solving
Combining creativity with technical depth to find elegant solutions to complex challenges.
"The best way to predict the future is to create it."
Contact
Let's Build Together
I'm always open to discussing new projects, creative ideas, or opportunities to be part of something great.