01✦
Research & User Flow
I map user journeys and key actions first, then translate goals into clear page structures that reduce friction and improve navigation.
AS
FRONT-END DEVELOPER
Abdulatif
FRONTEND ENGINEER — CREATIVE DEVELOPER
A passionate Front-End Developer crafting beautiful web experiences with clean code and modern design.
TELEMETRY / ACTIVE
EGYPT, EG
TECH SPECS / LOAD
REACT / NEXT95%
TAILWIND / CSS92%
JAVASCRIPT / TS90%
01
// THE PROFILE
ABOUT ME
I prioritize client collaboration, fostering open communication. I'm very flexible with time zone communications and constantly try to improve. Tech enthusiast with a passion for development.
Core Values
- Open communication and collaboration
- Flexibility with time zones and schedules
- Continuous improvement and learning
- Delivering seamless, user-friendly experiences
My Approach
SYS.01
Staying Updated with Industry Trends
I continuously explore the latest trends in web development, UI/UX design, and front-end technologies. I actively engage with the tech community and take online courses to keep my skills sharp and relevant.
SYS.02
Development & Progress Update
Once we agree on the plan, I cue my lofi playlist and dive into coding. From initial sketches to polished code, I keep you updated every step of the way.
SYS.03
Proactive Learning and Exploration
I actively explore new tools and frameworks, mastering Figma for design or diving deeper into TypeScript for better code quality. I ensure I can adapt to any new challenge and build versatile, high-quality solutions.
02
// TECH STACK
SKILL SET
FRONTEND / CORECAPACITY
React95%
Next.js92%
React Native85%
JavaScript90%
TypeScript80%
STYLING / DESIGNCAPACITY
Tailwind CSS95%
CSS / SCSS92%
Figma85%
UI/UX Design88%
TOOLS / OTHERCAPACITY
Git / GitHub90%
WordPress85%
RESTful APIs88%
Framer Motion82%
HTMLCSSSCSSBootstrapjQueryJavaScriptTypeScriptReactReact NativeNext.jsTailwind CSSFramer MotionGSAPThree.jsWordPressPHPMySQLFirebaseStrapiREST APIsGit / GitHubFigmaC++Responsive DesignSEOUI/UX DesignProblem SolvingAnimation & MotionComponent Libraries
03
// JOURNEY
EXPERIENCE
SYS.01
Frontend Engineer Intern
Assisted in the development of a web-based platform using React.js, enhancing interactivity.
SYS.02
UseFigma & Design
Leveraging Figma for UI/UX design, I created responsive and user-centric layouts, focusing on simplicity and functionality. My work involved wireframing, prototyping, and visual design to bring ideas to life with an emphasis on user experience.
SYS.03
Idea Generation & Creativity
I played an active role in brainstorming sessions, where I generated innovative ideas and conceptualized creative solutions for projects. Whether it was for e-commerce platforms or mental health clinics, I ensured that every design and feature aligned with the client's vision.
SYS.04
GitHub & Git
I utilized Git and GitHub for version control, collaborating with team members and ensuring efficient code management and integration. Regular commits, branching, and pull requests helped maintain a smooth workflow across projects.
04
// PORTFOLIO
SELECTED WORKS
Explore a curated collection of innovative projects showcasing cutting-edge web technologies, creative design, and seamless user experiences.
#01
BOWMENMedizen Medical Website
A responsive medical website powered by WordPress REST API, delivering real-time healthcare services, detailed treatments, and bilingual support. Features smooth animations and a modern design for seamless user engagement.
5.0
reactnext.jsTailwind CSSframer-motion+2
View Project 
#02
BOWMENBowmen plus
A cutting-edge headless WordPress application. Built with React and Next.js, it merges sophisticated animations with a utility-first design to redefine modern web browsing.
5.0
reactnext.jsTailwind CSSWordPress+2
View Project 
#03
BOWMENUnderground Heritage
A premium headless e-commerce experience designed to showcase cultural and heritage-inspired products with a focus on high-performance retail and immersive storytelling.
5.0
Next.jsReactTailwind CSSTypeScript+3
View Project 
#04
Neuro Bridge
An innovative healthcare platform focusing on neurology and wellness services. Built with modern tech stack, it provides detailed information about neurological treatments, specialist consultations, and patient management.
5.0
reactnext.jsTailwind CSSfirebase+1
View Project 
#05
Nova Space
An immersive space exploration website featuring stunning 3D visuals and interactive elements. Powered by Three.js, it educates users about universe exploration and astronomy with smooth animations and captivating design.
5.0
reactnext.jsTailwind CSSThree.js+1
View Project 
#06
Voyage AI
An AI-powered travel planning platform offering personalized itinerary recommendations, real-time travel assistance, and destination insights. Designed with intuitive navigation to revolutionize how travelers explore the world.
5.0
reactnext.jsTailwind CSShuggingface+1
View Project // UI/UX & FIGMA
DESIGN PROJECTS
I leverage Figma to design responsive, user-centric interfaces that bridge the gap between creativity and functionality. From wireframes to high-fidelity prototypes, I create design systems that maintain consistency while captivating users.
// DESIGN PROCESS
02◆
Wireframing & Prototyping
I build low and high-fidelity wireframes in Figma, then create interactive prototypes to validate layout, spacing, and interaction patterns.
03▲
UI Systems & Handoff
I organize reusable components, typography scales, and spacing rules to make developer handoff smooth and keep designs consistent.
// LIVE PREVIEW
Figma Interactive Preview
Now viewing: Ventura
// PORTFOLIO
Design Collection
Figma Design ProjectVentura
A complete UI/UX design crafted in Figma with a clean visual direction, structured layout system, and polished user flow.
Social App UISocialGram
A social media app interface designed in Figma, focused on clean content feeds, profile interactions, and intuitive mobile navigation.
UI Design SystemUntitled-UI
A comprehensive UI design system with reusable components, typography scales, and color tokens for consistent design implementation across projects.
// GET IN TOUCH
LET'S WORK
TOGETHER
Ready to elevate your brand or start a new project? Let's connect and build something amazing together.