FullstackAcademy · xMistryx · Jul 24, 2025 · Jul 24, 2025 · Jul 25, 2025 · Jul 25, 2025
diff --git a/Bakery.png b/Bakery.png
diff --git a/Dino.png b/Dino.png
diff --git a/Furniture.png b/Furniture.png
diff --git a/Jaxx.jpg b/Jaxx.jpg
diff --git a/about.css b/about.css
@@ -0,0 +1,129 @@
+html {
+    background-color: #4f4964;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    background-color: #635e74;
+    color:#F5EFFF;
+    box-shadow: 0px 0px 10px 10px #393644;
+    font-family: Georgia, Times, 'Times New Roman', serif;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+header {
+    background-color: #302B3D;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    padding-inline: 10px;
+    position: fixed;
+    left: 0;
+    right: 0;
+}
+
+.name {
+    font-size: 2rem;
+}
+
+nav {
+    display: flex;
+    gap: 30px;
+}
+
+nav :hover{
+    color: #9D6BFF ;
+}
+
+a {
+    color: #F5EFFF;
+    text-decoration: none;
+    font-size: 1.5rem;
+    transition-duration: 0.4s;
+}
+
+main {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    align-items: center;
+    padding-block: 100px;
+    margin-block: 20px;
+    gap: 20px;
+}
+
+section {
+    background-color: #7e7894;
+    border: 3px solid #4f4964;
+    border-radius: 10px;
+    width: 80%;
+    padding-left: 20px;
+}
+
+section p {
+        text-align: center;
+        padding-top: 10px;
+} 
+
+img {
+    width: 15rem;
+    float: right; 
+    margin: 0 20px 24px 5px;
+}
+
+footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #302B3D;
+    height: 100px;
+    font-size: 1.5rem;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+@media (max-width: 600px) {
+    header {
+        flex-direction: row;
+        align-items: center;
+        text-align: center;
+    }
+
+    .name {
+    font-size: 1.5rem;
+    }
+
+    a {
+    font-size: 1rem;
+    }
+
+    nav {
+        flex-direction: row;
+        gap: 10px;
+    }
+
+    section {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-inline: 10px;
+    }
+
+    section h2, p {
+        text-align: center;
+    }
+
+    img {
+        max-width: 60%;
+        margin: 0;
+    }
+
+    footer {
+        font-size: 1rem;
+        height: 75px;
+    }
+}
diff --git a/about.html b/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="about.css">
+</head>
+<body>
+    <header>
+        <p class="name">Jaxx Mistry</p>
+        <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>
+        </nav>
+    </header>
+    <main>
+        <section>
+            <h2>What I'm Working With Right Now</h2>
+            <img src="https://tinyurl.com/37ska7v6" alt="A laptop with code" />
+            <ul>
+                <li>HTML, CSS, and JavaScript</li>
+                <li>Responsive web design</li>
+                <li>Git & GitHub</li>
+            </ul>
+            <p>I enjoy exploring both front-end and back-end development as I grow, and I’m especially interested in creating accessible, intuitive interfaces.</p>
+        </section>
+        <section>
+            <h2>Looking Ahead</h2>
+            <img src="https://tinyurl.com/2ehc9wrk" alt="A notebook with a plan on it" />
+            <p>My goal is to keep building real-world applications, deepen my understanding of software engineering principles, and eventually contribute to impactful projects — ones that are useful, thoughtful, and make a difference.</p>
+        </section>
+        <section>
+            <h2>Outside of Code</h2>
+            <img src="https://tinyurl.com/yc46885v" alt="A forest" />
+            <p>When I’m not coding, you can usually find me:</p>
+            <ul>
+                <li>Playing cozy video games</li>
+                <li>Watching something or listening to music</li>
+                <li>Reading everything from novels to comics</li>
+                <li>Wandering through nature with animals and fresh air</li>
+                <li>Enjoying all kinds of food and drinks</li>
+                <li>Doing all kinds of crafts and hobbies</li>
+                <li>Enjoying anything that has to do with dinosaurs</li>
+            </ul>
+        </section>
+    </main>
+    <footer>Look out for my work</footer>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/contact.css b/contact.css
@@ -0,0 +1,128 @@
+html {
+    background-color: #4f4964;
+}
+
+body {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background-color: #635e74;
+    color:#F5EFFF;
+    box-shadow: 0px 0px 10px 10px #393644;
+    font-family: Georgia, Times, 'Times New Roman', serif;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+header {
+    background-color: #302B3D;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    padding-inline: 10px;
+    position: fixed;
+    left: 0;
+    right: 0;
+}
+
+.name {
+    font-size: 2rem;
+}
+
+nav {
+    display: flex;
+    gap: 30px;
+}
+
+nav :hover{
+    color: #9D6BFF ;
+}
+
+a {
+    color: #F5EFFF;
+    text-decoration: none;
+    font-size: 1.5rem;
+    transition-duration: 0.4s;
+}
+
+main {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-block: 100px;
+}
+
+section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: #7e7894;
+    border: 3px solid #4f4964;
+    border-radius: 10px;
+    padding: 20px;
+    padding-bottom: 25px;
+}
+
+ section p, h1 {
+    text-align: center;
+    margin: 10px;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+}
+
+input, textarea, button {
+    background-color: #4f4964;
+    border: 2px solid #3d394d;
+    margin-bottom: 15px;
+    color: #F5EFFF;
+}
+
+footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #302B3D;
+    height: 100px;
+    font-size: 1.5rem;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+@media (max-width: 600px) {
+    header {
+        flex-direction: row;
+        align-items: center;
+        text-align: center;
+    }
+
+    .name {
+    font-size: 1.5rem;
+    }
+
+    a {
+    font-size: 1rem;
+    }
+
+    nav {
+        flex-direction: row;
+        gap: 10px;
+    }
+
+    section {
+        max-width: 70%;
+    }
+
+    footer {
+        font-size: 1rem;
+        height: 75px;
+    }
+}
diff --git a/contact.html b/contact.html
@@ -0,0 +1,37 @@
+<!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="contact.css">
+</head>
+<body>
+    <header>
+        <p class="name">Jaxx Mistry</p>
+        <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>
+        </nav>
+    </header>
+    <main>
+        <section>
+        <h1>Send a Message</h1>
+        <p>Have feedback, an interesting idea, or just want to say hello? I’d love to hear from you.</p>
+        <form>
+            <label for="name">Name:</label>
+            <input id="name" type="text" name="name" placeholder="Enter your name" required></input>
+            <label for="email">Email:</label>
+            <input id="email" type="email" name="email" placeholder="Enter your email" required></input>
+            <label for="message">Type your message here:</label>
+            <textarea id="message" name="message" placeholder="Enter your message" required></textarea>
+            <button type="submit">Submit</button>
+        </section>
+        </form>
+    </main>
+    <footer>Look out for my work</footer>
+    <script src="index.js"></script>
+</body>
+</html>