Hello! I'm Alaa El Helw, a French developer

Working for Carrefour and also as a freelancer

Who are you?

Born and raised in France, I Left my hometown its been a few years and now I'm based in Paris

How to spell my name ?

Alaa is spelled like "Alé" (phon: ælé) in French which is very close to the ending sound of a famous female singer...
El Helw is spelled like this "El Helu".

What are my tools and programming languages?

React, Polymer, PHP, Node JS, Marionette JS, jQuery, Jenkins, Javascript, HTML 5, Grunt JS, Docker, CSS 3, Code Igniter, Chrome, Backbone JS, Appcelerator, Angular JS, ...

What do I look like?

Where can I be found?

.MuiTouchRipple-root { top: 0; left: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; position: absolute; border-radius: inherit; pointer-events: none; } .MuiTouchRipple-ripple { opacity: 0; position: absolute; } .MuiTouchRipple-rippleVisible { opacity: 0.3; animation: MuiTouchRipple-keyframes-enter 550ms cubic-bezier(0.4, 0, 0.2, 1); transform: scale(1); } .MuiTouchRipple-ripplePulsate { animation-duration: 200ms; } .MuiTouchRipple-child { width: 100%; height: 100%; display: block; opacity: 1; border-radius: 50%; background-color: currentColor; } .MuiTouchRipple-childLeaving { opacity: 0; animation: MuiTouchRipple-keyframes-exit 550ms cubic-bezier(0.4, 0, 0.2, 1); } .MuiTouchRipple-childPulsate { top: 0; left: 0; position: absolute; animation: MuiTouchRipple-keyframes-pulsate 2500ms cubic-bezier(0.4, 0, 0.2, 1) 200ms infinite; } @-webkit-keyframes MuiTouchRipple-keyframes-enter { 0% { opacity: 0.1; transform: scale(0); } 100% { opacity: 0.3; transform: scale(1); } } @-webkit-keyframes MuiTouchRipple-keyframes-exit { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes MuiTouchRipple-keyframes-pulsate { 0% { transform: scale(1); } 50% { transform: scale(0.92); } 100% { transform: scale(1); } } .MuiButtonBase-root { color: inherit; border: 0; cursor: pointer; margin: 0; display: inline-flex; outline: 0; padding: 0; position: relative; align-items: center; user-select: none; border-radius: 0; vertical-align: middle; -moz-appearance: none; justify-content: center; text-decoration: none; background-color: transparent; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; } .MuiButtonBase-root::-moz-focus-inner { border-style: none; } .MuiButtonBase-root.Mui-disabled { cursor: default; pointer-events: none; } @media print { .MuiButtonBase-root { -webkit-print-color-adjust: exact; } } .MuiButton-root { color: #fff; padding: 6px 16px; font-size: 0.875rem; min-width: 64px; box-sizing: border-box; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 500; line-height: 1.75; border-radius: 4px; letter-spacing: 0.02857em; text-transform: uppercase; } .MuiButton-root:hover { text-decoration: none; background-color: rgba(255, 255, 255, 0.08); } .MuiButton-root.Mui-disabled { color: rgba(255, 255, 255, 0.3); } @media (hover: none) { .MuiButton-root:hover { background-color: transparent; } } .MuiButton-root:hover.Mui-disabled { background-color: transparent; } .MuiButton-label { width: 100%; display: inherit; align-items: inherit; justify-content: inherit; } .MuiButton-text { padding: 6px 8px; } .MuiButton-textPrimary { color: #3f51b5; } .MuiButton-textPrimary:hover { background-color: rgba(63, 81, 181, 0.08); } @media (hover: none) { .MuiButton-textPrimary:hover { background-color: transparent; } } .MuiButton-textSecondary { color: #f50057; } .MuiButton-textSecondary:hover { background-color: rgba(245, 0, 87, 0.08); } @media (hover: none) { .MuiButton-textSecondary:hover { background-color: transparent; } } .MuiButton-outlined { border: 1px solid rgba(255, 255, 255, 0.23); padding: 5px 15px; } .MuiButton-outlined.Mui-disabled { border: 1px solid rgba(255, 255, 255, 0.12); } .MuiButton-outlinedPrimary { color: #3f51b5; border: 1px solid rgba(63, 81, 181, 0.5); } .MuiButton-outlinedPrimary:hover { border: 1px solid #3f51b5; background-color: rgba(63, 81, 181, 0.08); } @media (hover: none) { .MuiButton-outlinedPrimary:hover { background-color: transparent; } } .MuiButton-outlinedSecondary { color: #f50057; border: 1px solid rgba(245, 0, 87, 0.5); } .MuiButton-outlinedSecondary:hover { border: 1px solid #f50057; background-color: rgba(245, 0, 87, 0.08); } .MuiButton-outlinedSecondary.Mui-disabled { border: 1px solid rgba(255, 255, 255, 0.3); } @media (hover: none) { .MuiButton-outlinedSecondary:hover { background-color: transparent; } } .MuiButton-contained { color: rgba(0, 0, 0, 0.87); box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); background-color: #e0e0e0; } .MuiButton-contained:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); background-color: #d5d5d5; } .MuiButton-contained.Mui-focusVisible { box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12); } .MuiButton-contained:active { box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12); } .MuiButton-contained.Mui-disabled { color: rgba(255, 255, 255, 0.3); box-shadow: none; background-color: rgba(255, 255, 255, 0.12); } @media (hover: none) { .MuiButton-contained:hover { box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); background-color: #e0e0e0; } } .MuiButton-contained:hover.Mui-disabled { background-color: rgba(255, 255, 255, 0.12); } .MuiButton-containedPrimary { color: #fff; background-color: #3f51b5; } .MuiButton-containedPrimary:hover { background-color: #303f9f; } @media (hover: none) { .MuiButton-containedPrimary:hover { background-color: #3f51b5; } } .MuiButton-containedSecondary { color: #fff; background-color: #f50057; } .MuiButton-containedSecondary:hover { background-color: #c51162; } @media (hover: none) { .MuiButton-containedSecondary:hover { background-color: #f50057; } } .MuiButton-disableElevation { box-shadow: none; } .MuiButton-disableElevation:hover { box-shadow: none; } .MuiButton-disableElevation.Mui-focusVisible { box-shadow: none; } .MuiButton-disableElevation:active { box-shadow: none; } .MuiButton-disableElevation.Mui-disabled { box-shadow: none; } .MuiButton-colorInherit { color: inherit; border-color: currentColor; } .MuiButton-textSizeSmall { padding: 4px 5px; font-size: 0.8125rem; } .MuiButton-textSizeLarge { padding: 8px 11px; font-size: 0.9375rem; } .MuiButton-outlinedSizeSmall { padding: 3px 9px; font-size: 0.8125rem; } .MuiButton-outlinedSizeLarge { padding: 7px 21px; font-size: 0.9375rem; } .MuiButton-containedSizeSmall { padding: 4px 10px; font-size: 0.8125rem; } .MuiButton-containedSizeLarge { padding: 8px 22px; font-size: 0.9375rem; } .MuiButton-fullWidth { width: 100%; } .MuiButton-startIcon { display: inherit; margin-left: -4px; margin-right: 8px; } .MuiButton-startIcon.MuiButton-iconSizeSmall { margin-left: -2px; } .MuiButton-endIcon { display: inherit; margin-left: 8px; margin-right: -4px; } .MuiButton-endIcon.MuiButton-iconSizeSmall { margin-right: -2px; } .MuiButton-iconSizeSmall > *:first-child { font-size: 18px; } .MuiButton-iconSizeMedium > *:first-child { font-size: 20px; } .MuiButton-iconSizeLarge > *:first-child { font-size: 22px; } .MuiDrawer-docked { flex: 0 0 auto; } .MuiDrawer-paper { top: 0; flex: 1 0 auto; height: 100%; display: flex; outline: 0; z-index: 1200; position: fixed; overflow-y: auto; flex-direction: column; -webkit-overflow-scrolling: touch; } .MuiDrawer-paperAnchorLeft { left: 0; right: auto; } .MuiDrawer-paperAnchorRight { left: auto; right: 0; } .MuiDrawer-paperAnchorTop { top: 0; left: 0; right: 0; bottom: auto; height: auto; max-height: 100%; } .MuiDrawer-paperAnchorBottom { top: auto; left: 0; right: 0; bottom: 0; height: auto; max-height: 100%; } .MuiDrawer-paperAnchorDockedLeft { border-right: 1px solid rgba(255, 255, 255, 0.12); } .MuiDrawer-paperAnchorDockedTop { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .MuiDrawer-paperAnchorDockedRight { border-left: 1px solid rgba(255, 255, 255, 0.12); } .MuiDrawer-paperAnchorDockedBottom { border-top: 1px solid rgba(255, 255, 255, 0.12); } .jss5 { margin-left: 12px; margin-right: 20px; } .jss6 { display: none; } .jss7 { top: 64px; width: 100px; height: calc(100% - 64px); } .jss8 { display: flex; padding: 0 8px; min-height: 56px; align-items: center; justify-content: flex-end; } @media (min-width:0px) and (orientation: landscape) { .jss8 { min-height: 48px; } } @media (min-width:600px) { .jss8 { min-height: 64px; } } @media print { .MuiDialog-root { position: absolute !important; } } .MuiDialog-scrollPaper { display: flex; align-items: center; justify-content: center; } .MuiDialog-scrollBody { overflow-x: hidden; overflow-y: auto; text-align: center; } .MuiDialog-scrollBody:after { width: 0; height: 100%; content: ""; display: inline-block; vertical-align: middle; } .MuiDialog-container { height: 100%; outline: 0; } @media print { .MuiDialog-container { height: auto; } } .MuiDialog-paper { margin: 32px; position: relative; overflow-y: auto; } @media print { .MuiDialog-paper { box-shadow: none; overflow-y: visible; } } .MuiDialog-paperScrollPaper { display: flex; max-height: calc(100% - 64px); flex-direction: column; } .MuiDialog-paperScrollBody { display: inline-block; text-align: left; vertical-align: middle; } .MuiDialog-paperWidthFalse { max-width: calc(100% - 64px); } .MuiDialog-paperWidthXs { max-width: 444px; } @media (max-width:507.95px) { .MuiDialog-paperWidthXs.MuiDialog-paperScrollBody { max-width: calc(100% - 64px); } } .MuiDialog-paperWidthSm { max-width: 600px; } @media (max-width:663.95px) { .MuiDialog-paperWidthSm.MuiDialog-paperScrollBody { max-width: calc(100% - 64px); } } .MuiDialog-paperWidthMd { max-width: 960px; } @media (max-width:1023.95px) { .MuiDialog-paperWidthMd.MuiDialog-paperScrollBody { max-width: calc(100% - 64px); } } .MuiDialog-paperWidthLg { max-width: 1280px; } @media (max-width:1343.95px) { .MuiDialog-paperWidthLg.MuiDialog-paperScrollBody { max-width: calc(100% - 64px); } } .MuiDialog-paperWidthXl { max-width: 1920px; } @media (max-width:1983.95px) { .MuiDialog-paperWidthXl.MuiDialog-paperScrollBody { max-width: calc(100% - 64px); } } .MuiDialog-paperFullWidth { width: calc(100% - 64px); } .MuiDialog-paperFullScreen { width: 100%; height: 100%; margin: 0; max-width: 100%; max-height: none; border-radius: 0; } .MuiDialog-paperFullScreen.MuiDialog-paperScrollBody { margin: 0; max-width: 100%; } .jss3 { position: relative; background-color: rgba(40,40,40, .8); } .jss4 { flex: 1; color: #323232; margin-left: 16px; } .jss1 { padding: 0; } .jss2 { background-color: #303030; } html { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *::before, *::after { box-sizing: inherit; } strong, b { font-weight: 700; } body { color: #fff; margin: 0; font-size: 0.875rem; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; line-height: 1.43; letter-spacing: 0.01071em; background-color: #303030; } @media print { body { background-color: #fff; } } body::backdrop { background-color: #303030; }