Tastyn's Portfolio!

Projects

South Korea- Aug2025

Texas/Oklahoma- July2025

Arts

Code I Wrote

This website is fully hand-coded by me using HTML, CSS, and JavaScript. Here is a snippet


 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=10.0" />
  <title>Tastyn's Portfolio!</title>
  <link href="https://fonts.googleapis.com/css2?family=Barriecito&family=Fascinate&family=Indie+Flower&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <header>
    <h1>Tastyn Agbonkhese</h1>
    <p>Future Software Engineer - Artist - Genius</p>
  </header>

  <section id="about">
    <h2>About Me</h2>
    <p>Throught my life I have had a passion for technology, whether its playing roblox for hours or writing stories about random things in my head. It has and always will be apart of my life. I believe I will make a great engineer, and that is always why I am devoting time into making this website my passion project. I will be showing you art and photography of mine.</p>
  </section>

  <section id="projects">
    <h2>Projects</h2>

    <div class="project">
      <h3>South Korea- Aug2025</h3>
      <div class="project-content2"></div>

      <div class="image-row2">
        <img src="korea 1.webp" alt="img 1" onclick="openFullscreen(this)">
        <img src="korea 2.webp" alt="img 2" onclick="openFullscreen(this)">
        <img src="korea 3.webp" alt="img 3" onclick="openFullscreen(this)">
        <img src="korea 4.webp" alt="img 4" onclick="openFullscreen(this)">
        <img src="korea 5.webp" alt="img 5" onclick="openFullscreen(this)">
        <img src="korea 6.webp" alt="img 6" onclick="openFullscreen(this)">
        <img src="korea 7.webp" alt="img 7" onclick="openFullscreen(this)">
        <img src="korea 8.webp" alt="img 8" onclick="openFullscreen(this)">
        <img src="korea 9.webp" alt="img 9" onclick="openFullscreen(this)">
        <img src="korea 10.webp" alt="img 10" onclick="openFullscreen(this)">
      </div>
    </div>

    <div class="project1">
      <h3>Texas/Oklahoma- July2025</h3>
      <h3 onclick="toggleProject(this)"></h3>
      <div class="project-content2"></div>

      <div class="image-row2">
        <img src="img1.jpg" alt="img 1" onclick="openFullscreen(this)">
        <img src="img2.jpg" alt="img 2" onclick="openFullscreen(this)">
        <img src="img3.jpg" alt="img 3" onclick="openFullscreen(this)">
        <img src="img4.jpg" alt="img 4" onclick="openFullscreen(this)">
        <img src="img5.jpg" alt="img 5" onclick="openFullscreen(this)">
        <img src="img6.jpg" alt="img 6" onclick="openFullscreen(this)">
        <img src="img7.jpg" alt="img 7" onclick="openFullscreen(this)">
        <img src="img8.jpg" alt="img 8" onclick="openFullscreen(this)">
        <img src="img9.jpg" alt="img 9" onclick="openFullscreen(this)">
      </div>
    </div>

    <div class="project2">
      <h3 onclick="toggleProject(this)">Arts</h3>
      <div class="project-content"></div>

      <div class="image-row3">
        <img src="1.png" alt="png 1" onclick="openFullscreen(this)">
        <img src="2.png" alt="png 2" onclick="openFullscreen(this)">
        <img src="3.png" alt="png 3" onclick="openFullscreen(this)">
        <img src="4.png" alt="png 4" onclick="openFullscreen(this)">
        <img src="5.png" alt="png 5" onclick="openFullscreen(this)">
        <img src="6.png" alt="png 6" onclick="openFullscreen(this)">
        <img src="7.png" alt="png 7" onclick="openFullscreen(this)">
        <img src="8.png" alt="png 8" onclick="openFullscreen(this)">
        <img src="9.png" alt="png 9" onclick="openFullscreen(this)">
      </div>
    </div>

  </section>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Indie Flower", system-ui;
  font-size: 1.5rem;
  line-height: 1.6;
  background-color:#ffe7c8;
  background-size: cover;
  border: 20px solid #841415;
  background-position: center;
  background-repeat: no-repeat;
  color: #870c11;
  padding: 20px;
  text-shadow: 0 0 10px white;
}

header {
  text-align: center;
  margin-bottom: 40px;
}

h1 {
  font-size: 4.5rem;
  color: #870c11;
}

h2 {
  margin-top: 40px;
  color: #870c11;
}

section {
  margin-bottom: 30px;
}

.project {
  border: 6px solid #841415;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background-color: #b17163;
}

.project1 {
  border: 6px solid #841415;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background-color: #b17163;
}

.project2 {
  border: 6px solid #841415;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background-color: #b17163;
}

.image-row2 {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #915649;
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.image-row2 img {
  border: 8px solid transparent;
  border-image-slice: 1;
  border-image-source: linear-gradient(#841415, #ffe7c8);
  border-radius: 10px;
  max-height: 300px;
  object-fit: cover;
  margin-bottom: 20px;
}

.image-row2 img.landscape {
  max-width: 220px;
}

.image-row2 img.portrait {
  max-height: 180px;
}

.image-row3 {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #915649;
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.image-row3 img {
  max-width: 200px;
  border: 8px solid transparent;
  border-image-slice: 1;
  border-image-source: linear-gradient(#841415, #ffe7c8);
  width: 200%;
  height: 200%;
  border-radius: 10px;
}

#code-showcase {
  background-color: #b17163;
  border: 6px solid #841415;
  padding: 30px;
  border-radius: 20px;
  margin-top: 40px;
}

.code-container {
  background-color: #2b2b2b;
  max-width: 1200px;
  height: 300px;
  color: #f8f8f2;
  padding: 20px;
  border-radius: 15px;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: monospace;
  font-size: 14px;
  box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}

pre {
  margin: 0;
}

#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
}

#lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

.image-row3 img:hover {
  transform: translateY(-5px);
  transition: 0.3s ease;
  box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}

.image-row2 img:hover {
  transform: translateY(-5px);
  transition: 0.3s ease;
  box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}
Contact

Email: TastynAgbonkhese@gmail.com
Phone Number: (612) 298-7036
Leave a message!