FullstackAcademy · AlexKT1022 · Jul 23, 2025 · Jul 23, 2025 · Jul 24, 2025 · Jul 24, 2025
diff --git a/about.html b/about.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>About</title>
+    <link rel="stylesheet" href="./css/style.css" />
+    <link rel="stylesheet" href="./css/about.css" />
+  </head>
+  <body>
+    <header>
+      <div class="header-logo">Alex Takamizawa</div>
+      <div class="header-nav">
+        <a href="./index.html">Home</a>
+        <a href="./about.html">About</a>
+        <a href="./portfolio.html">Portfolio</a>
+        <a href="./contact.html">Contact</a>
+      </div>
+    </header>
+    <main>
+      <h1>About</h1>
+      <div>
+        <h2>Who I am:</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+      </div>
+      <h2>Some things I like doing:</h2>
+      <div class="hobby-container">
+        <h3>Cooking</h3>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <img
+          src="https://thewoksoflife.com/wp-content/uploads/2019/02/three-cup-chicken-8.jpg"
+          alt="My go-to recipe is three-cup chicken."
+        />
+      </div>
+      <hr />
+      <div class="hobby-container-reverse">
+        <h3>Video Games</h3>
+        <img
+          src="https://1000logos.net/wp-content/uploads/2020/09/Final-Fantasy-XIV-Logo.png"
+          alt="I currently mostly play Final Fantasy XIV in my free time."
+        />
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+      </div>
+      <hr />
+      <div class="hobby-container">
+        <h3>Reading</h3>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <img
+          src="https://m.media-amazon.com/images/I/81aS9JndklL.jpg"
+          alt="One of my favorite recent reads is Crying in H Mart."
+        />
+      </div>
+    </main>
+    <footer>
+      <img
+        class="footer-icon"
+        src="./assets/icons/fa-envelope.svg"
+        alt="email"
+      />
+      <a
+        href="https://github.com/AlexKT1022"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          class="footer-icon"
+          src="./assets/icons/fa-github.svg"
+          alt="github"
+        />
+      </a>
+      <a
+        href="https://www.linkedin.com/in/alex-takamizawa-a8793b206/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          class="footer-icon"
+          src="./assets/icons/fa-linkedin.svg"
+          alt="lnkedin"
+        />
+      </a>
+    </footer>
+  </body>
+</html>
diff --git a/assets/icons/fa-envelope.svg b/assets/icons/fa-envelope.svg
diff --git a/assets/icons/fa-github.svg b/assets/icons/fa-github.svg
diff --git a/assets/icons/fa-linkedin.svg b/assets/icons/fa-linkedin.svg
diff --git a/assets/images/amazon-but-scuffed.png b/assets/images/amazon-but-scuffed.png
diff --git a/assets/images/broodl.png b/assets/images/broodl.png
diff --git a/assets/images/react-jobs.png b/assets/images/react-jobs.png
diff --git a/contact.html b/contact.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Contact</title>
+    <link rel="stylesheet" href="./css/style.css" />
+  </head>
+  <body>
+    <header>
+      <div class="header-logo">Alex Takamizawa</div>
+      <div class="header-nav">
+        <a href="./index.html">Home</a>
+        <a href="./about.html">About</a>
+        <a href="./portfolio.html">Portfolio</a>
+        <a href="./contact.html">Contact</a>
+      </div>
+    </header>
+    <main>
+      <h1>Contact</h1>
+      <h2>Say Hello!</h2>
+      <div>
+        <h3>Subject:</h3>
+        <input type="text" />
+        <h3>Body:</h3>
+        <input type="text" />
+      </div>
+      <button>Submit</button>
+    </main>
+    <footer>
+      <img
+        class="footer-icon"
+        src="./assets/icons/fa-envelope.svg"
+        alt="email"
+      />
+      <a
+        href="https://github.com/AlexKT1022"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          class="footer-icon"
+          src="./assets/icons/fa-github.svg"
+          alt="github"
+        />
+      </a>
+      <a
+        href="https://www.linkedin.com/in/alex-takamizawa-a8793b206/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          class="footer-icon"
+          src="./assets/icons/fa-linkedin.svg"
+          alt="lnkedin"
+        />
+      </a>
+    </footer>
+  </body>
+</html>
diff --git a/css/about.css b/css/about.css
@@ -0,0 +1,39 @@
+.hobby-container {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+
+  p {
+    grid-column: 1;
+  }
+
+  img {
+    height: 10%;
+    grid-column: 2;
+    height: 25vh;
+  }
+}
+
+.hobby-container-reverse {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+
+  p {
+    grid-column: 2;
+  }
+
+  img {
+    height: 10%;
+    grid-column: 1;
+    height: 25vh;
+  }
+}
+
+@media (width < 600px) {
+  body {
+    margin: 0;
+  }
+
+  main img {
+    display: none;
+  }
+}
diff --git a/css/contact.css b/css/contact.css
diff --git a/css/home.css b/css/home.css
@@ -0,0 +1,28 @@
+main {
+  display: grid;
+  grid-template-rows: 2;
+  grid-template-columns: 2;
+}
+
+h1 {
+  grid-row: 1;
+  grid-column: 1 / -1;
+}
+
+p {
+  grid-row: 2;
+  grid-column: 1;
+}
+
+img {
+  grid-row: 2;
+  grid-column: 2;
+}
+
+.quote {
+  grid-row: 3;
+  grid-column: 1 / -1;
+}
+
+@media (width < 600px) {
+}
diff --git a/css/portfolio.css b/css/portfolio.css
@@ -0,0 +1,28 @@
+.portfolio-card {
+  display: grid;
+  grid-template-columns: 2;
+  grid-template-rows: 3;
+  width: 80vh;
+}
+
+.card-banner {
+  grid-column: 1 / 3;
+  grid-row: 1;
+  width: 100%;
+}
+
+.project-title {
+  grid-column: 1 / 3;
+  grid-row: 2;
+  text-decoration: none;
+}
+
+.project-description {
+  grid-column: 1;
+  grid-row: 3;
+}
+
+.project-stack {
+  grid-column: 2;
+  grid-row: 3;
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,85 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-size: 20px;
+}
+
+body {
+  background-color: #c8d5b9;
+  margin-left: 100px;
+  margin-right: 100px;
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  background-color: #8fc0a9;
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+
+  a {
+    color: black;
+    text-decoration: none;
+  }
+}
+
+main {
+  background-color: #faf3dd;
+  flex-grow: 1;
+  padding-top: 100px;
+  padding-bottom: 100px;
+}
+
+footer {
+  background-color: #8fc0a9;
+  height: 50px;
+  text-align: center;
+  display: flex;
+  justify-content: space-around;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+div {
+  margin: 5px;
+  padding: 5px;
+}
+
+hr {
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.header-nav {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.footer-icon {
+  height: 50px;
+}
+
+@media (width < 600px) {
+  body {
+    margin: 0;
+  }
+
+  main img {
+    display: none;
+  }
+}