FullstackAcademy · nvila-iso · Jul 23, 2025 · Jul 23, 2025 · Jul 23, 2025 · Jul 24, 2025
diff --git a/about.html b/about.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nick Vila: About</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <nav>
+        <h1><a href="index.html">Nick Vila</a></h1>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="about.html">About</a></li>
+          <li><a href="portfolio.html">Portfolio</a></li>
+          <li><a href="contact.html">Contact</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <div class="list-view">
+        <div class="card" id="post">
+          <h2>Post-Production</h2>
+          <iframe
+            width="400"
+            height="300"
+            src="https://www.youtube.com/embed/JXM3QSHRElk?si=69mGsmkw9PW0kwlN"
+            title="YouTube video player"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            referrerpolicy="strict-origin-when-cross-origin"
+            allowfullscreen
+          ></iframe>
+          <p>
+            One of my favorite hobbies, video post-production using tools like
+            Adobe Premiere and After Affects. I was fortunate enough to work
+            with LI Joe, the FGC's most favorite underdog and EVO host for the
+            past 5 years. Together we were capable of a high view count and a
+            rapid growth in followers.
+          </p>
+        </div>
+        <div class="card" id="vhs">
+          <h2>VHS Tapes</h2>
+          <iframe
+            width="400"
+            height="300"
+            src="https://www.youtube.com/embed/KxQU_E3Gdng?si=FEf34UcPDNeXxZt7&amp;start=7020"
+            title="YouTube video player"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            referrerpolicy="strict-origin-when-cross-origin"
+            allowfullscreen
+          ></iframe>
+          <p>
+            One CRT, one VCR and over 500+ VHS tapes. Some may call it a problem
+            but I call it a good time. It started off as a simple hobby but the
+            hunt for a good flick rapidly became an addiction for more
+            nostalgia. In the video above, my favorite podcast group read an
+            email I wrote to them discussing my hobby. I couldn't have been more
+            happier!
+          </p>
+        </div>
+        <div class="card" id="hydro">
+          <h2>Hydroponic Gardening</h2>
+          <img
+            src="https://i.redd.it/h7nkc4m2uoy81.jpg"
+            alt="Hydroponic Tower"
+          />
+          <p>
+            Easily the most practical hobby I've ever picked up in my life. I'm
+            fascinated by the science behind hydroponics. It's efficient, safe
+            and incredibly therapeutic. I started this around 2019 - thank you
+            COVID? 3D printed my own hydroponics tower and taught myself how to
+            sustain healthy vegetables through much trial and error.
+          </p>
+        </div>
+        <div class="card" id="music">
+          <h2>Music</h2>
+          <img
+            src="https://i.scdn.co/image/ab67616d00001e02b006f089af4d18d351f06c60"
+            alt="Mahal by Glass Beams"
+          />
+          <p id="album-name"><em>"Mahal"</em> by Glass Beams</p>
+          <p>
+            My father raised me to have an appreciation for music - no matter
+            the genre. Teaching me various instruments and even taking me to see
+            live music on occasion. Unfortunately my interests in playing music
+            didn't last as long as I wish but my desire to find good tunes only
+            grows stronger the older I get.
+          </p>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/contact.html b/contact.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nick Vila: Contact</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <nav>
+        <h1><a href="index.html">Nick Vila</a></h1>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="about.html">About</a></li>
+          <li><a href="portfolio.html">Portfolio</a></li>
+          <li><a href="contact.html">Contact</a></li>
+        </ul>
+      </nav>
+    </header>
+    <div class="contact-box">
+      <div class="contact-img">
+        <img src="imgs/contact.jpg" alt="" />
+        <p>Got something you wanna say!?</p>
+        <p>Please leave your contact info below and leave a message!</p>
+        <p>I'll get back to you as soon as possible.</p>
+      </div>
+
+      <form action="">
+        <input
+          type="text"
+          id="fname"
+          name="fname"
+          placeholder="Full Name"
+          required
+        />
+        <br />
+        <input
+          type="email"
+          name="email"
+          id="email"
+          placeholder="Email Address"
+          required
+        />
+        <br />
+        <textarea
+          name="message"
+          placeholder="Leave a message!"
+          rows="5"
+        ></textarea>
+        <br />
+        <input class="submit-button" type="submit" value="Submit" />
+      </form>
+    </div>
+  </body>
+</html>
diff --git a/imgs/IMG_3333.JPEG b/imgs/IMG_3333.JPEG
diff --git a/imgs/contact.jpg b/imgs/contact.jpg
diff --git a/imgs/session-zero.png b/imgs/session-zero.png
diff --git a/imgs/thisislijoe.png b/imgs/thisislijoe.png
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nick Vila: Home</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <nav>
+        <h1><a href="index.html">Nick Vila</a></h1>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="about.html">About</a></li>
+          <li><a href="portfolio.html">Portfolio</a></li>
+          <li><a href="contact.html">Contact</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <div class="profile">
+        <h2>Nerd, Designer, Developer</h2>
+        <img src="imgs/IMG_3333.JPEG" alt="Weird looking dude" />
+        <p>
+          Always eager to learn new things. I've acquired a number of skills
+          through hobby and hope to make them all part of my profession. I
+          aspire to work with like minded people within the video game realm and
+          genres alike.
+        </p>
+        <img
+          id="metal-gear"
+          src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExNm96d3QzZjlpbXpjNXE5eDVsZW1tc25ndGlvaHIwZDlvdWdiMjFleiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/oePrmT6c3fNsY/giphy.gif"
+          alt=""
+        />
+        <p id="quote">
+          "Nothing is worse than having an itch you can never scratch."<br /><span
+            >- Leon Kowalski</span
+          >
+        </p>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Nick Vila: Portfolio</title>
+  </head>
+  <body>
+    <header>
+      <nav>
+        <h1><a href="index.html">Nick Vila</a></h1>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="about.html">About</a></li>
+          <li><a href="portfolio.html">Portfolio</a></li>
+          <li><a href="contact.html">Contact</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <div class="list-view">
+        <div class="card" id="dnd-session-zero">
+          <h2>DnD Session Zero</h2>
+          <a href="https://dnd-session-zero.com" target="_blank"
+            ><img
+              src="imgs/session-zero.png"
+              alt="AI Generated Logo for Session Zero"
+          /></a>
+          <a href="https://dnd-session-zero.com">dnd-session-zero.com</a>
+          <p>
+            In Dungeon and Dragons terms, 'session zero' implies the part where
+            the player creates their characters. While most D&D players leave
+            this part up to their imagination, others like to have some visual
+            guide to help feed their imaginations. In this application I use AI
+            to help me generate the art style so I can focus on the
+            functionality. It forces me to work heavily with JavaScript.
+          </p>
+        </div>
+        <div class="card">
+          <h2>Youtube - @thisislijoe</h2>
+          <a href="https://www.youtube.com/@thisislijoe" target="_blank"
+            ><img src="imgs/thisislijoe.png" alt="thisislijoe youtube logo"
+          /></a>
+          <a href="https://www.youtube.com/@thisislijoe"
+            >youtube.com/@thisislijoe</a
+          >
+          <p>
+            One of my closets friends Youtube channels. I helped manage, produce
+            and upload to youtube weekly for a while. Working together with
+            friend was a great experience for me. Together we were able to
+            achieve a lot. While he was the face of the channel I was the behind
+            the scenes (preferably). It gave me the oppurtunity to learn about
+            Youtube'system and more importantly how to expand on tools such as
+            the Adobe Suite (Photoshop / Premiere / After Effects) Most content
+            on his page related to Street Fighter 6 is my handy work.
+          </p>
+        </div>
+        <div class="card">
+          <h2>AI Voice Work</h2>
+          <iframe width="400" height="300" src="https://www.youtube.com/embed/q0cSg2crGUo?si=co1JuUqwlNN3K2da" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+          <p>To further exercise my production skills I decided to make a quick video for a role-playing game called Mutant Crawl Classics. I used creative common (CC) footage and art, along with an AI generated voice over to piece these together. Sadly it never went anywhere but this was only for practice and to earn some more experience with AI tools.</p>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1 @@
+console.log(`Hey, I'm Nick Vila!`);