text: import React from "react"
  
  import * as headerStyles from '../styles/header.module.scss'
  import Wave from "../images/wave.png"
  
  const Header = () => {
  
      return (
          <header className={headerStyles.header}>
              <div className={headerStyles.banner}>
                  <div className={headerStyles.bannerWrapper}>
                      <div id="banner-text-id" className={`${headerStyles.bannerTextWrapper} ${headerStyles.bannerTextBorder}`}>
                          <p className={headerStyles.bannerText}><span className={headerStyles.bannerTextHi}>Hi</span>, my name is</p>
                          <p className={headerStyles.bannerTextName}>Chen Xinyi</p>
                          <p className={headerStyles.bannerText}>Welcome to my personal website.</p>
                          <p className={headerStyles.bannerTextSmall}>I am a post-graduate student at Nanyang Technology University, studying the Master of Science in Artificial Intelligence.</p>
                      </div>
                  </div>
                  <img id="theImage" src={Wave} alt="Wave" className={headerStyles.bannerWave} />
              </div>
          </header>
      )
  }
  
  export default Header