FullstackAcademy · batuAybak · Jul 24, 2025 · Jul 25, 2025 · Jul 25, 2025 · Jul 25, 2025
diff --git a/images/batu.jpg b/images/batu.jpg
diff --git a/images/github-mark.png b/images/github-mark.png
diff --git a/images/linkedin.svg b/images/linkedin.svg
diff --git a/images/rusty.JPG b/images/rusty.JPG
diff --git a/index.html b/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Personal Website</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Ephesis&family=Sacramento&family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <header> <!-- header section-->
+      <img class="my-picture" src="images/batu.jpg" alt="my picture" />
+
+      <nav>
+        <!-- navigation links-->
+        <a href="index.html">Home</a>
+        <div class="separator">|</div>
+        <a href="pages/about.html">About</a>
+        <div class="separator">|</div>
+        <a href="pages/portfolio.html">Portfolio</a>
+      </nav>
+    </header>
+
+    <main> <!-- middle section  -->
+      <h1>Hi! I'm Batuhan</h1>
+      <h2>A Software Developer</h2>
+      <h3>Feel free to look around, and contact me via the form or social links below. Cheers!</h3>
+    </main>
+
+    <form>  <!-- Contact me section  -->
+        <h2>Get In Touch</h2>
+        <input type="text" name="fname" placeholder="Full Name">
+        <input type="text" name="email" placeholder="E-mail Address">
+        <textarea name="message" rows="5" cols="50" placeholder="What is the message you want to deliver?"></textarea> 
+        <button class="button button:hover">Submit</button>
+
+    </form>
+
+    <footer> <!-- sticky footer -->
+      <a class="sacramento-regular" href="https://www.linkedin.com/">LinkedIn</a>
+      <img class="media-link" src="images/linkedin.svg" alt="Linkedin"/>
+      <div class="separator">|</div>
+      <a href="https://www.github.com/">Github</a>
+      <img class="media-link" src="images/github-mark.png" alt="Github"/>
+    </footer>
+  </body>
+</html>
diff --git a/pages/about.html b/pages/about.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Personal Website</title>
+    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="../fonts.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Ephesis&family=Sacramento&family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <header> <!-- header section-->
+      <img class="my-picture" src="../images/batu.jpg" alt="my picture" />
+
+      <nav>
+        <!-- navigation links-->
+        <a href="../index.html">Home</a>
+        <div class="separator">|</div>
+        <a href="about.html">About</a>
+        <div class="separator">|</div>
+        <a href="portfolio.html">Portfolio</a>
+      </nav>
+    </header>
+
+    <main> <!-- middle section  -->
+      <h2>ABOUT ME ?</h2>
+      <h3>I'm a Software Developer with a background in Software Quality Assurance and Cybersecurity. I’m passionate about building secure, high-quality systems that are reliable, efficient, and built to last.</h3>
+      <h3>Are you interested in my work? Check out my <a style="color: #6dbf71;" href="portfolio.html">Portfolio</a>!</h3>
+    </main>
+
+    <main> <!-- middle section  -->
+      <h2>WHAT DO I LIKE ?</h2>
+      <h3>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In laboriosam delectus aperiam deleniti quas ullam! Quasi laudantium provident perspiciatis dignissimos eos alias rerum ex tempora sint, quo consectetur corrupti amet.</h3>
+      <img src="https://images.unsplash.com/photo-1557456170-0cf4f4d0d362?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="lake view">
+      <img src="../images/rusty.JPG" alt="animals">
+      <img src="https://images.unsplash.com/photo-1574623452334-1e0ac2b3ccb4?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="basketball">
+    </main>
+
+
+    <footer> <!-- sticky footer -->
+      <a class="sacramento-regular" href="https://www.linkedin.com/">LinkedIn</a>
+      <img class="media-link" src="../images/linkedin.svg" alt="Linkedin"/>
+      <div class="separator">|</div>
+      <a href="https://www.github.com/">Github</a>
+      <img class="media-link" src="../images/github-mark.png" alt="Github"/>
+    </footer>
+  </body>
+</html>
diff --git a/pages/portfolio.html b/pages/portfolio.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Personal Website</title>
+    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="../fonts.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Ephesis&family=Sacramento&family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <header> <!-- header section-->
+      <img class="my-picture" src="../images/batu.jpg" alt="my picture" />
+
+      <nav>
+        <!-- navigation links-->
+        <a href="../index.html">Home</a>
+        <div class="separator">|</div>
+        <a href="about.html">About</a>
+        <div class="separator">|</div>
+        <a href="portfolio.html">Portfolio</a>
+      </nav>
+    </header>
+
+    <main> <!-- middle section  -->
+      <h2>MY MOST RECENT PROJECTS</h2>
+    </main>
+
+    <main> <!-- middle section  -->
+      <h2>PROJECT 1</h2>
+      <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis obcaecati ea eius provident a ex? Labore illo vel quam consequatur ipsam, dolores, commodi eaque omnis assumenda eum modi fugit at?</h3>
+    </main>
+
+
+    <main> <!-- middle section   -->
+      <h2>PROJECT 2</h2>
+      <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis obcaecati ea eius provident a ex? Labore illo vel quam consequatur ipsam, dolores, commodi eaque omnis assumenda eum modi fugit at?</h3>
+    </main>
+
+    <main> <!-- middle section   -->
+      <h2>INTERESTED IN SEEING MORE?</h2>
+      <h3>Please check out my <a style="color: #6dbf71;" href="https://www.github.com/">GitHub</a> page for more.</h3>
+    </main>
+
+
+    <footer> <!-- sticky footer -->
+      <a class="sacramento-regular" href="https://www.linkedin.com/">LinkedIn</a>
+      <img class="media-link" src="../images/linkedin.svg" alt="Linkedin"/>
+      <div class="separator">|</div>
+      <a href="https://www.github.com/">Github</a>
+      <img class="media-link" src="../images/github-mark.png" alt="Github"/>
+    </footer>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,173 @@
+body {
+  background-color: #5e936c;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 10%;
+}
+
+header {
+  background-color: #3e5f44;
+  box-shadow: 1px 1px 20px black;
+
+  display: flex;
+  justify-content: space-around;
+}
+
+/* navigation buttons */
+nav {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+/* navigation links */
+nav > a {
+  text-decoration: none;
+  color: #93da97;
+  font-size: 1.4rem;
+  font-family: "Sansation", sans-serif;
+  font-weight: 300;
+}
+
+main {
+  background-color: #3e5f44;
+  text-align: center;
+  margin: 5% 10vw;
+  box-shadow: 1px 1px 20px black;
+  height: auto;
+}
+
+/* images under main */
+main > img {
+  border-radius: 10px;
+  width: 20%;
+  height: auto;
+  box-shadow: 1px 3px 19px black;
+  margin-bottom: 3%;
+  margin-left: 1%;
+}
+
+form {
+  background-color: #3e5f44;
+  text-align: center;
+  margin: 5% 10vw;
+  box-shadow: 1px 1px 20px black;
+  height: auto;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+input,
+textarea {
+  width: 45%;
+  background-color: #5e936c;
+  color: #93da97;
+  border-radius: 4px;
+  border-style: double;
+  font-size: 1.2rem;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: #93da97;
+}
+
+
+/* Submit button */
+button { 
+  margin-bottom: 3%;
+  background-color: #93da97;
+  border-radius: 10px;
+  border-style: outset;
+  color: #3e5f44;
+  padding: 7px 17px;
+  font-size: 16px;
+  transition-duration: 0.4s;
+}
+
+.button:hover {
+  background-color: green;
+}
+
+footer {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+  background-color: #3e5f44;
+  box-shadow: 1px 1px 20px black;
+  position: fixed;
+  bottom: 0;
+  padding: 2% 0;
+  width: 100vw;
+}
+
+h1 {
+  font-family: "Sacramento", cursive;
+  font-size: 4rem;
+  color: #6dbf71;
+  font-weight: 300;
+  margin-top: 40px;
+  padding-top: 40px;
+}
+
+h2 {
+  color: #6dbf71;
+  font-family: "Sansation", sans-serif;
+  font-size: 2rem;
+  font-weight: normal;
+}
+
+h3 {
+  color: #6dbf71;
+  font-family: "Sansation", sans-serif;
+  font-size: 1.7rem;
+  font-weight: lighter;
+  padding: 40px 40px;
+  width: inherit;
+}
+
+/* footer links */
+footer a {
+  text-decoration: none;
+  color: #93da97;
+  font-size: 1.3rem;
+  font-family: "Sansation", sans-serif;
+  font-weight: 300;
+}
+
+/* social media icons */
+.media-link {
+  width: 3%;
+}
+
+.my-picture {
+  border-radius: 50%;
+  width: 10%;
+  box-shadow: 1px 3px 19px black;
+}
+
+/* separator between links */
+.separator {
+  font-size: 2rem;
+  color: #e8ffd7;
+}
+
+/* hover behavior for all links */
+a:hover {
+  color: #e8ffd7;
+}
+
+/* rearrange content for bigger screens */
+@media (width > 1700px) {
+  body,
+  footer {
+    width: 50vw;
+  }
+  body {
+    padding-left: 25%;
+  }
+}