Howdy 👋 I'm Ala,

Building modern websites and fun game experiences

 65 
              
 66 
      <FadeIn className='w-full' startScale={1} bounce={0.1} type={'spring'} duration={0.75}>
 67 
          <h1 className='group mt-4 flex flex-col leading-[1.1] justify-center items-center '>
 68 
            <div className='mb-4 text-3xl font-bold text-center transition duration-300 scale-90 opacity-60'>
 69 
              Howdy, I&apos;m Ala
 70 
            </div> |
 71 
            <div className='text-center sm:max-w-screen-lg sm:px-20'>
 72 
              Building modern websites and fun game experiences
 73 
            </div>
 74 
          </h1>
 75 
          </FadeIn>
 76 

 77 
          <FadeIn className='mx-auto' startScale={1} bounce={0.1} type={'spring'} duration={0.75} delay={0.25}>
 78 
          <div className='flex flex-wrap justify-center gap-4 mt-12'>
 79 
            <button
 80 
              onClick={() => {
 81 
                s1Ref.current!.scrollIntoView({ behavior: 'smooth' });
 82 
              }}
 83 
              ref={discRef}
 84 
              className='relative inline-flex items-center h-16 gap-4 text-xl font-medium text-gray-700 transition duration-300 shadow active:scale-95 cursor-down group rounded-2xl bg-white/90 px-7 hover:opacity-80'
 85 
            >
 86 
              Discover
 87 
              <HiChevronDoubleDown className='transition duration-300 group-hover:translate-y-1' />
 88 
            </button>
 89 
            <a
 90 
              onMouseEnter={() => {
 91 
                discRef.current!.classList.add('opacity-50');
 92 
              }}
 93 
              onMouseLeave={() => {
 94 
                discRef.current!.classList.remove('opacity-50');
 95 
              }}
 96 
              href='/cv-alachebbi.pdf'
 97 
              target={'_blank'}
 98 
              ref={cvRef}
 99 
              className='relative inline-flex items-center h-16 gap-4 text-xl font-medium transition duration-300 bg-white bg-opacity-50 shadow select-none active:scale-95 whitespace-nowrap cursor-newtab rounded-2xl px-7 text-gray-700/70 hover:bg-opacity-100 hover:text-blue-800'
 100 
            >
 101 
              Get Resume
 102 
              <HiOutlineDocumentText />
 103 
            </a>
 104 
          </div>
 105 
          </FadeIn>
 106 
          </div>
 107 

 108 
          <div className='relative flex w-full mt-20 '>
 109 
            <FadeIn className='w-full ' startScale={0.9} bounce={0} duration={0.5} delay={0.35}>
 110 
              <CodeWindow
 111 
                className='w-full '
 112 
              />
 113 
            </FadeIn>
 114 

 115 

 116 
          </div>
 117 
          </section>
 118 

 119 
          <section
 120 
          className='relative flex flex-col max-w-screen-md pt-32 pb-12 layout scroll-mt-20'
 121 
          id='about'
 122 
          ref={s1Ref}
 123 
          >
 124 
            <FadeIn bounce={0} duration={0.5} distance={40} once={false}>
 125 
              <h2 className='max-w-xl text-5xl text-gray-600 dark:text-gray-200'>
 126 
              Passionate Frontend and <br /> Game developer
 127 
              </h2>
 128 
            </FadeIn>
 129 
            <FadeIn bounce={0} duration={0.5} distance={40} once={false}>
 130 
              <p className='max-w-2xl mt-20 mb-4 text-xl text-gray-600 dark:text-gray-400'>
 131 
              Welcome to my portfolio! I'm Ala, a passionate programmer, gamer, artist and UI aspiring designer. I currently work as a fullstack web and mobile developer at <a href="https://brandbox.tn" target={'_blank'} rel='noreferrer noopener' className='text-yellow-600 underline cursor-newtab'>Brandbox</a>.
 132 

 133 
              <br /> My favourite and most used frameworks are <em className='font-medium'>Next.js</em> and <em className='font-medium'>TailwindCSS</em> for frontend development and <em className='font-medium'>Unity3D</em> for game development.
 134 
              </p>
 135 
            </FadeIn>
 136