A demo Shopify Hydrogen project built to showcase GSAP for page transitions
The Tools I Use
'%3e%3cpath%20d='M-100,-102m-28,0v300h300z'%20fill='url(%23gradient-1)'/%3e%3cpath%20d='M-100,-102m28,0h300v300z'%20fill='url(%23gradient-3)'/%3e%3cpath%20d='M-100,-102l300,300'%20fill='none'%20stroke='url(%23gradient-2)'%20stroke-width='40'/%3e%3c/g%3e%3c/svg%3e)
'%3e%3cpath%20d='M13.3333%2080.0002C20.6933%2080.0002%2026.6667%2074.0268%2026.6667%2066.6668V53.3335H13.3333C5.97333%2053.3335%200%2059.3068%200%2066.6668C0%2074.0268%205.97333%2080.0002%2013.3333%2080.0002Z'%20fill='%230ACF83'/%3e%3cpath%20d='M0%2039.9998C0%2032.6398%205.97333%2026.6665%2013.3333%2026.6665H26.6667V53.3332H13.3333C5.97333%2053.3332%200%2047.3598%200%2039.9998Z'%20fill='%23A259FF'/%3e%3cpath%20d='M0%2013.3333C0%205.97333%205.97333%200%2013.3333%200H26.6667V26.6667H13.3333C5.97333%2026.6667%200%2020.6933%200%2013.3333Z'%20fill='%23F24E1E'/%3e%3cpath%20d='M26.6667%200H40.0001C47.3601%200%2053.3334%205.97333%2053.3334%2013.3333C53.3334%2020.6933%2047.3601%2026.6667%2040.0001%2026.6667H26.6667V0Z'%20fill='%23FF7262'/%3e%3cpath%20d='M53.3334%2039.9998C53.3334%2047.3598%2047.3601%2053.3332%2040.0001%2053.3332C32.6401%2053.3332%2026.6667%2047.3598%2026.6667%2039.9998C26.6667%2032.6398%2032.6401%2026.6665%2040.0001%2026.6665C47.3601%2026.6665%2053.3334%2032.6398%2053.3334%2039.9998Z'%20fill='%231ABCFE'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_912_3'%3e%3crect%20width='53.3333'%20height='80'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
'%3e%3ccircle%20cx='90'%20cy='90'%20data-circle='true'%20fill='black'%20r='90'%3e%3c/circle%3e%3cpath%20d='M149.508%20157.52L69.142%2054H54V125.97H66.1136V69.3836L139.999%20164.845C143.333%20162.614%20146.509%20160.165%20149.508%20157.52Z'%20fill='url(%23:r8:paint0_linear_408_134)'%3e%3c/path%3e%3crect%20fill='url(%23:r8:paint1_linear_408_134)'%20height='72'%20width='12'%20x='115'%20y='54'%3e%3c/rect%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20gradientUnits='userSpaceOnUse'%20id=':r8:paint0_linear_408_134'%20x1='109'%20x2='144.5'%20y1='116.5'%20y2='160.5'%3e%3cstop%20stop-color='white'%3e%3c/stop%3e%3cstop%20offset='1'%20stop-color='white'%20stop-opacity='0'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient%20gradientUnits='userSpaceOnUse'%20id=':r8:paint1_linear_408_134'%20x1='121'%20x2='120.799'%20y1='54'%20y2='106.875'%3e%3cstop%20stop-color='white'%3e%3c/stop%3e%3cstop%20offset='1'%20stop-color='white'%20stop-opacity='0'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
'%3e%3crect%20width='128'%20height='128'%20fill='%23F03E2F'/%3e%3cpath%20d='M39.4229%2033.1629C39.4229%2044.1614%2046.3362%2050.7055%2060.1767%2054.1563L74.8429%2057.4971C87.9417%2060.453%2095.9185%2067.7945%2095.9185%2079.7554C96.0204%2084.9662%2094.296%2090.053%2091.0345%2094.1634C91.0345%2082.23%2084.751%2075.7822%2069.595%2071.9052L55.1947%2068.6881C43.6633%2066.1035%2034.7628%2060.068%2034.7628%2047.076C34.7021%2042.0589%2036.3415%2037.1644%2039.4229%2033.1629'%20fill='white'/%3e%3cpath%20d='M82.0221%2076.827C88.2777%2080.759%2091.0206%2086.2583%2091.0206%2094.1497C85.8426%20100.666%2076.7462%20104.323%2066.0545%20104.323C48.0576%20104.323%2035.4626%2095.6207%2032.6637%2080.4978H49.9469C52.172%2087.4406%2058.0636%2090.6577%2065.9285%2090.6577C75.5287%2090.6577%2081.9102%2085.6258%2082.0361%2076.7995'%20fill='%23F9B1AB'/%3e%3cpath%20d='M48.4074%2049.4682C45.5509%2047.8004%2043.2074%2045.404%2041.6255%2042.5332C40.0437%2039.6624%2039.2826%2036.4244%2039.423%2033.1629C44.419%2026.7013%2053.1096%2022.7556%2063.7034%2022.7556C82.0361%2022.7556%2092.6439%2032.2693%2095.2608%2045.66H78.6354C76.8022%2040.3807%2072.212%2036.27%2063.8433%2036.27C54.9008%2036.27%2048.7993%2041.3843%2048.4494%2049.4682'%20fill='%23F9B1AB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1_816'%3e%3crect%20width='128'%20height='128'%20rx='64'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
'/%3e%3cpath%20d='M63.7076%20110.284C60.8481%20113.885%2055.0502%20111.912%2054.9813%20107.314L53.9738%2040.0627L99.1935%2040.0627C107.384%2040.0627%20111.952%2049.5228%20106.859%2055.9374L63.7076%20110.284Z'%20fill='url(%23paint1_linear)'%20fill-opacity='0.2'/%3e%3cpath%20d='M45.317%202.07103C48.1765%20-1.53037%2053.9745%200.442937%2054.0434%205.041L54.4849%2072.2922H9.83113C1.64038%2072.2922%20-2.92775%2062.8321%202.1655%2056.4175L45.317%202.07103Z'%20fill='%233ECF8E'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear'%20x1='53.9738'%20y1='54.974'%20x2='94.1635'%20y2='71.8295'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23249361'/%3e%3cstop%20offset='1'%20stop-color='%233ECF8E'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear'%20x1='36.1558'%20y1='30.578'%20x2='54.4844'%20y2='65.0806'%20gradientUnits='userSpaceOnUse'%3e%3cstop/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
'%3e%3cpath%20fill='%2338bdf8'%20fill-rule='evenodd'%20d='M27%200c-7.2%200-11.7%203.6-13.5%2010.8%202.7-3.6%205.85-4.95%209.45-4.05%202.054.513%203.522%202.004%205.147%203.653C30.744%2013.09%2033.808%2016.2%2040.5%2016.2c7.2%200%2011.7-3.6%2013.5-10.8-2.7%203.6-5.85%204.95-9.45%204.05-2.054-.513-3.522-2.004-5.147-3.653C36.756%203.11%2033.692%200%2027%200zM13.5%2016.2C6.3%2016.2%201.8%2019.8%200%2027c2.7-3.6%205.85-4.95%209.45-4.05%202.054.514%203.522%202.004%205.147%203.653C17.244%2029.29%2020.308%2032.4%2027%2032.4c7.2%200%2011.7-3.6%2013.5-10.8-2.7%203.6-5.85%204.95-9.45%204.05-2.054-.513-3.522-2.004-5.147-3.653C23.256%2019.31%2020.192%2016.2%2013.5%2016.2z'%20clip-rule='evenodd'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='prefix__clip0'%3e%3cpath%20fill='%23fff'%20d='M0%200h54v32.4H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
'/%3e%3cpath%20d='M185.432.063%2096.44%2017.501a3.268%203.268%200%200%200-2.634%203.014l-5.474%2092.456a3.268%203.268%200%200%200%203.997%203.378l24.777-5.718c2.318-.535%204.413%201.507%203.936%203.838l-7.361%2036.047c-.495%202.426%201.782%204.5%204.151%203.78l15.304-4.649c2.372-.72%204.652%201.36%204.15%203.788l-11.698%2056.621c-.732%203.542%203.979%205.473%205.943%202.437l1.313-2.028%2072.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505%204.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z'%20fill='url(%23b)'/%3e%3c/svg%3e)
'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M456.946%20428.768C461.201%20483.418%20461.201%20509.036%20461.201%20537H334.756C334.756%20530.909%20334.865%20525.337%20334.975%20519.687C335.317%20502.123%20335.674%20483.807%20332.828%20446.819C329.067%20392.667%20305.748%20380.634%20262.871%20380.634H224.883H64V282.109H268.889C323.049%20282.109%20350.13%20265.633%20350.13%20222.011C350.13%20183.654%20323.049%20160.41%20268.889%20160.41H64V64H291.456C414.069%2064%20475%20121.912%20475%20214.42C475%20283.613%20432.123%20328.739%20374.201%20336.26C423.096%20346.037%20451.681%20373.865%20456.946%20428.768Z'%20fill='%23E8F2FF'/%3e%3cpath%20d='M64%20537V463.553H197.697C220.029%20463.553%20224.878%20480.116%20224.878%20489.994V537H64Z'%20fill='%23E8F2FF'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_dd_3_106'%20x='0'%20y='0'%20width='539'%20height='601'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset/%3e%3cfeGaussianBlur%20stdDeviation='28'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.223529%200%200%200%200%200.572549%200%200%200%200%201%200%200%200%201%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_3_106'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset/%3e%3cfeGaussianBlur%20stdDeviation='32'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.223529%200%200%200%200%200.572549%200%200%200%200%201%200%200%200%200.9%200'/%3e%3cfeBlend%20mode='normal'%20in2='effect1_dropShadow_3_106'%20result='effect2_dropShadow_3_106'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect2_dropShadow_3_106'%20result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e)
'%20d='M134.923%201.832c-4.344-2.443-9.502-2.443-13.846%200L6.787%2067.801C2.443%2070.244%200%2074.859%200%2079.745v132.208c0%204.887%202.715%209.502%206.787%2011.945l114.29%2065.968c4.344%202.444%209.502%202.444%2013.846%200l114.29-65.968c4.344-2.443%206.787-7.058%206.787-11.945V79.745c0-4.886-2.715-9.501-6.787-11.944L134.923%201.832Z'/%3e%3cmask%20id='d'%20fill='%23fff'%3e%3cuse%20xlink:href='%23b'/%3e%3c/mask%3e%3cpath%20fill='url(%23c)'%20d='M249.485%2067.8%20134.65%201.833c-1.086-.542-2.443-1.085-3.529-1.357L2.443%20220.912c1.086%201.357%202.444%202.443%203.8%203.258l114.834%2065.968c3.258%201.9%207.059%202.443%2010.588%201.357L252.47%2070.515c-.815-1.086-1.9-1.9-2.986-2.714Z'%20mask='url(%23d)'/%3e%3cmask%20id='g'%20fill='%23fff'%3e%3cuse%20xlink:href='%23e'/%3e%3c/mask%3e%3cpath%20fill='url(%23f)'%20d='M249.756%20223.898c3.258-1.9%205.701-5.158%206.787-8.687L130.579.204c-3.258-.543-6.787-.272-9.773%201.628L6.786%2067.53l122.979%20224.238c1.628-.272%203.529-.815%205.158-1.63l114.833-66.239Z'%20mask='url(%23g)'/%3e%3c/svg%3e)
I build websites and web apps with Next.js, Remix, Python, Node ect. I also write stuff on my blog.
A demo Shopify Hydrogen project built to showcase GSAP for page transitions
A Next.js site using MDX and Framer Motion
Robust ecom templates built from scratch with jQuery and Bootstrap