index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Jay Hayes: The Portfolio</title>
    <link
      rel="icon"
      type="image/x-icon"
      href="/Media/Photos/logos-icons/favicon-32x32.png"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body id="home">
    <nav id="navbar">
      <ul class="navlist">
        <a href="#home">
          <p class="nav-text">Home</p>
          <img
            class="nav-img"
            src="./Media/Photos/logos-icons/home.png"
            width="30px"
            alt="Home"
          />
        </a>
        <a href="#bottom-of-home">
          <p class="nav-text">About</p>
          <img
            class="nav-img"
            src="./Media/Photos/logos-icons/profile.png"
            width="30px"
            alt="About"
          />
        </a>
        <a href="#bottom-of-who">
          <p class="nav-text">Projects</p>
          <img
            class="nav-img"
            src="./Media/Photos/logos-icons/catalog.png"
            width="30px"
            alt="Projects"
          />
        </a>
        <a href="#what">
          <p class="nav-text">Skills</p>
          <img
            class="nav-img"
            src="./Media/Photos/logos-icons/skills.png"
            width="30px"
            alt="Skills"
          />
        </a>
        <a href="#where">
          <p class="nav-text">Contact</p>
          <img
            class="nav-img"
            src="./Media/Photos/logos-icons/contact.png"
            width="30px"
            alt="Contact"
          />
        </a>
      </ul>
    </nav>

    <div class="frame">
      <img id="background-img" src="Media/Photos/background-image.jpg" />
      <section id="header">
        <img class="profile-pic" src="Media/Photos/profile-pic-square.png" />
        <div class="header-text">
          <h1 class="intro-text">
            Hey, <br />
            I'm Jay.
          </h1>
          <hr />
          <h2 class="sub-intro-text">
            A recent Northcoders graduate <br />&<br />
            full-stack software engineer wannabe.
          </h2>
          <div id="bottom-of-home"></div>
        </div>
      </section>

      <div class="see-through-background"></div>

      <section id="who">
        <h2 class="subheadings">Who am I?</h2>
        <div class="who-text">
          <p>
            I began my journey into coding in January 2021 as I started dabbling
            with HTML and CSS. I made some interesting (read: hideous) basic
            sites. Then in October 2021 I took the plunge, quit my insurance
            job, and took on a 3 month full-stack coding bootcamp. I've since
            been working towards getting started in the tech world, hoping to
            broaden and deepen my skills in this exciting new industry.
          </p>
          <p>
            I've recently finished off a dynamic React weather application using
            an API. I've also started dabbling in PHP and am interested to dig
            deeper into this. I'm also potentially looking to start a new
            project expanding my JavaScript knowledge by dipping into TypeScript
            and Angular eventually.
          </p>
          <p>
            In my down time I like mindfulness practices; such as meditation and
            qi gong. I like to keep active, often out cycling, hiking (when
            North Western weather permits), and generally keeping healthy. Some
            major interests include classic literature; especially 19/20th
            century horror, science, world affairs, wildlife, cinema, gaming,
            and trying to stop my plants from dying.
          </p>
        </div>
        <div id="bottom-of-who"></div>
      </section>

      <div class="see-through-background"></div>

      <section id="work">
        <h2 class="subheadings">My Projects</h2>
        <br />
        <section class="screenshots">
          <a href="todo.html">
            <div class="single-screenshot">
              <img
                src="Media/Photos/React Native/To Do List/React-Native-todo.png"
              />
              <h4>React Native Todo list</h4>
            </div>
          </a>
          <a href="naturely.html">
            <div class="single-screenshot">
              <img src="Media/Photos/React Native/Naturely/Landing-page.jpg" />
              <h4>React Native team project, Naturely.</h4>
            </div>
          </a>
          <a href="weather.html">
            <div class="single-screenshot">
              <img src="Media/Photos/React/weather-rain.png" />
              <h4>React Weather forecast app.</h4>
            </div>
          </a>
          <a href="calculator.html">
            <div class="single-screenshot">
              <img src="Media/Photos/React/React Calculator.png" />
              <h4>React Calculator</h4>
            </div>
          </a>
          <a href="games-server.html">
            <div class="single-screenshot">
              <img src="Media/Photos/Back-end/games-server-api.png" />
              <h4>Node.js, PostgresQL & Express API server.</h4>
            </div>
          </a>
          <a href="react-game-reviews.html">
            <div class="single-screenshot">
              <img src="Media/Photos/React/React-landing-page.png" />
              <h4>React front-end site, used to access the API server.</h4>
            </div>
          </a>
        </section>
      </section>

      <div class="see-through-background"></div>

      <section id="what">
        <h2 class="subheadings">What can I do?</h2>
        <p>
          I studied with a 13-week full-stack bootcamp.
          <u>ReactJS</u> was the main front-end framework, but I also got
          experience of <u>React Native</u>. On the back-end we covered
          <u>Node.js</u> and <u>PostgresQL</u>, along with other packages like
          <u>Express, dotenv, and testing using Jest and Supertest.</u>
          We also made use of <u>Firebase</u> for our final project and spiked
          tech like <u>Mongoose and Flutter</u> briefly. I am experienced in
          <u>TDD and Agile</u>
          work practices; including kanban and stand-ups. Have worked as a solo
          dev and also have experience of pair programming and as being part of
          a team of developers.
        </p>
      </section>

      <div class="see-through-background"></div>

      <section id="where">
        <h2 class="subheadings">Where am I?</h2>
        <br />
        <p>Physically?</p>
        <h4>Manchester, UK.</h4>
        <br />
        <p>Digitally?</p>
        <div class="links">
          <a href="https://github.com/CodingStunts" target="_blank">
            <img src="Media/Photos/logos-icons/GitHub-Mark-64px.png" />
          </a>
          <a href="mailto:jayhayes13@hotmail.co.uk" target="_blank">
            <img src="Media/Photos/logos-icons/email-icon.png" />
          </a>
          <a href="https://linkedin.com/in/jay-hayes-codes" target="_blank">
            <img src="Media/Photos/logos-icons/LI-In-Bug.png" />
          </a>
        </div>
      </section>

      <div class="see-through-background"></div>
    </div>
  </body>
</html>