Hi I'm Syed Atril👋
a Frontend Engineer

I’m a Frontend Engineer with 3+ years of experience building responsive, high-performance web interfaces with React and Next.js. I focus on clean UI, website performance, and turning ideas into practical digital products.

~ `
! 1
@ 2
# 3
$ 4
% 5
^ 6
& 7
* 8
( 9
) 0
_ -
+ =
Backspace
Tab
Q
W
E
R
T
Y
U
I
O
P
{[
}]
Caps Lock
A
S
D
F
G
H
J
K
L
: ;
"'
|\
Enter
Shift
Z
X
C
V
B
N
M
< ,
> .
?/
Shift
Ctr
🪟
Alt
Alt
🪟
Ctr

Portfolio

LaunchFolio

LaunchFolio is a simple portfolio builder built to help professionals who struggle to showcase their work online. Many people miss out on digital job opportunities because they don’t have a proper portfolio or access to a free and easy tool to create one. LaunchFolio solves this by allowing users to build a professional portfolio in minutes through an easy-to-use interface. It is completely free, requires no signup, and lets users update their portfolio anytime without any restrictions.

Core features I implemented
  • IndexedDB Local Storage: Safely saves large images and text in the browser.
  • Instant Website Export: Downloads your complete portfolio ready to put online.
  • No-Signup Setup: Creates professional websites instantly without making an account.
  • Mobile-Friendly Layouts: Forces final portfolios to fit any phone screen perfectly.
  • Private Offline Design: Keeps personal data highly secure on your own device.
  • Nextjs
  • JavaScript
  • Tailwind CSS
  • CSS
Live Project

E Commerce Operations Dashboard

I built a highly responsive operations dashboard for a CMS-based e-commerce platform to streamline day-to-day business tracking. I engineered the frontend interface using HTML, CSS, JavaScript, and Chart.js to render real-time sales graphs and core performance metrics. To ensure seamless daily management for store operators, I implemented advanced search filters, a system-wide light and dark mode toggle, and a completely fluid layout that scales perfectly down to mobile viewports.

Core features I implemented
  • Chart.js Analytics Panels: Coded interactive data visualization graphs tracking real-time sales performance.
  • Instant Search Filtering: Built quick client-side filtering tools to parse business metrics effortlessly.
  • System Dark Mode Toggle: Implemented clean CSS color-shifting schemas for day and night environments.
  • Responsive Design: Ensured optimal performance on all device sizes.
  • HTML
  • CSS
  • JavaScript
  • Chart.js
Live Project

Pondesk

I redesigned the entire frontend of the Pondesk website from scratch to modernize their user experience and significantly improve interface performance. Working within an older, legacy codebase, I focused on rewriting heavy UI components to optimize page efficiency and layout responsiveness. To streamline how customers navigate their vast hardware catalogs, I engineered custom JavaScript search filters, alongside interactive media enhancements like seamless product page popup sliders and precision hover-zoom mechanics.

Core features I implemented
  • Legacy Codebase Modernization: Rewrote old frontend elements to maximize rendering performance and speed.
  • Dynamic JavaScript Filters: Coded fast, real-time search filters to navigate complex inventory.
  • Product Image Popup Sliders: Programmed modal media overlays for seamless close-up product views.
  • Image Zoom and Mirroring: Built interactive hover-magnification tools for detailed component inspection.
  • Fluid Fully Responsive Layouts: Hand-crafted flexible layouts adapting perfectly to mobile and desktop screens.
  • HTML
  • CSS
  • JavaScript
Live Project

AQ Steel 3D Configurator

I designed and coded the complex 3D visual layout for AQ Steel Built, collaborating directly with the engineering team to integrate it into React. As the sole developer focusing on the interface, I used HTML and pure CSS to construct the accurate, multi-angle elevation views. I hand-crafted the structural visuals—including the multi-bay segments and responsive dimension lines—and engineered the frontend structure so it could be easily bound to dynamic React data states..

Core features I implemented
  • Pure CSS Elevation Layouts: Hand-coded accurate, scale blueprint views for front, back, and side profiles.
  • React Integration Engineering: Structure components with clear hooks for seamless backend state connection.
  • Visual Dimension Indicators: Built precise HTML alignment lines displaying dynamic structural measurements.
  • Multi-Bay Segment Layouts: Created clean CSS structures dividing long structural spans into individual sections.
  • HTML
  • CSS
  • React
  • JavaScript
Live Project

About Me

âš¡

Modern Frontend Architecture

What I Do

I build high-performance web applications using React, Next.js, and Tailwind CSS.

Why It Matters

Your clients get lightning-fast page speeds, seamless client-side routing, and robust, responsive layouts that look flawless on everything from a mobile phone to an ultrawide monitor.

🔌

API Integration & Dynamic Data

What I Do

I connect modern front-end interfaces to RESTful and GraphQL APIs to fetch, sync, and display live data dynamically.

Why It Matters

I don't just build static mockups. I handle the complex asynchronous logic, state management, form submissions, and authentication flows needed to power functional digital products.

🎨

Pixel-Perfect Figma-to-Code

What I Do

I translate complex Figma, Adobe XD, and PSD designs into identical, production-ready code.

Why It Matters

Your design vision remains completely uncompromised. I guarantee a 1:1 match across typography, spacing, and layout alignment, preventing costly design-QA revision loops.

My Skills

HTML

CSS

Tailwind CSS

JavaScript

React

Redux

Nextjs

TypeScript

Git

GitHub

Web Design

Responsive Design

Ruby on Rails

PostgreSQL

Contact

Email

atril3123@gmail.com

Phone

+923484673983