ada-c17 · mm-diana · May 20, 2022 · May 20, 2022 · May 20, 2022 · May 20, 2022
diff --git a/docs b/docs
@@ -0,0 +1 @@
+pages
diff --git a/images/adagrams.jpg b/images/adagrams.jpg
diff --git a/images/palmtrees_a.jpg b/images/palmtrees_a.jpg
diff --git a/images/palmtrees_b.jpg b/images/palmtrees_b.jpg
diff --git a/images/swap_meet.jpg b/images/swap_meet.jpg
diff --git a/images/task_list.jpg b/images/task_list.jpg
diff --git a/images/viewing_party.jpg b/images/viewing_party.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+   <title>Placeholder</title>
+  <meta http-equiv="refresh" content="0; url=https://arantxax28.github.io/personal-portfolio-site/pages/index.html">
+  </head>
+  <body>
+    <p>Test</p>
+  </body>
+  </html>
diff --git a/pages/about.html b/pages/about.html
@@ -4,9 +4,53 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>About</title>
+  <link rel="stylesheet" href="../styles/style.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
 </head>
 <body>
-
+  <header>
+    <nav class="nav-bar">
+      <a href="index.html"><i class="fa fa-home fa-lg"></i></a>
+      <ul class="nav-links">
+        <li class="nav-item"><a href="about.html">About Me</a></li>
+        <li class="nav-item"><a href="portfolio.html">Projects</a></li>
+      </ul>
+    </nav>
+  </header>
+  <div class="about-grid">
+    <section class="about-grid-left">
+    </section>
+    <section class="about-grid-name">
+      <p id="first-p">Diana</p>
+      <p>Martinez</p>
+    </section>
+    <section class="about-grid-side">
+      <div class="line"></div>
+      <h4>Welcome</h4>
+    </section>
+    <img class="trees-a about-grid-middle" src="../images/palmtrees_a.jpg" alt="palm trees on a rainy day">
+    <img class="trees-b about-grid-middle" src="../images/palmtrees_b.jpg" alt="palm trees on a sunny day">
+    <section class="about-grid-right">
+        <h2 class="about-me">
+          hey, there.
+        </h2>
+        <h3 class="about-me">
+          I am studying full stack software development at Ada Developers Academy. 
+          In my free time I like to read, hike and spend time with my family.
+        </h3>
+      <a href="portfolio.html" class="page_buttons">Projects</a>
+    </section>
+  </div>
+  <hr>
+  <footer>
+    <nav class="nav-footer">
+      <ul class="nav-links">
+        <li class="nav-item"><a href="https://github.com/Arantxax28"><i class="fa fa-github"></i></a></li>
+        <li class="nav-item"><a href="https://www.linkedin.com/"><i class="fa fa-linkedin"></i></a></li>
+        <li class="nav-item"><a href="https://www.gmail.com/"><i class="fa fa-envelope"></i></a></li>
+      </ul>
+    </nav>
+  </footer>
 </body>
 </html>
diff --git a/pages/index.html b/pages/index.html
@@ -4,9 +4,69 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>Diana Home</title>
+  <link rel="stylesheet" href="../styles/style.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
 </head>
 <body>
-
+    <header>
+        <nav class="nav-bar">
+          <a href="index.html"><i class="fa fa-home fa-lg"></i></a>
+          <ul class="nav-links">
+            <li class="nav-item"><a href="about.html">About Me</a></li>
+            <li class="nav-item"><a href="portfolio.html">Projects</a></li>
+          </ul>
+        </nav>
+    </header>
+    <section>
+      <div class="intro">
+        <h1>Hi, I'm Diana.</h1>
+        <h3>Los Angeles + Seattle</h3>
+        <a href="about.html" class="page_buttons">Learn More</a>
+      </div>
+    </section>
+    <hr>
+      <div class="collage-flex">
+        <h2>Projects</h2>
+        <div class="collage-grid">
+          <section class="collage-grid-vp">
+            <img class="grayscale collage-grid-vp" src="../images/viewing_party.jpg" alt="popcorn and clapperboard">
+            <div class="img_name">Viewing Party</div>
+          </section>
+          <section class="collage-grid-ag">
+            <img class="grayscale" src="../images/adagrams.jpg" alt="coffee, a magazine and scrabble letters">
+            <div class="img_name">Adagrams</div>
+          </section>
+          <section class="collage-grid-sm">
+            <img class="grayscale" src="../images/swap_meet.jpg" alt="colorful jacket">
+            <div class="img_name">Swap Meet</div>
+          </section>
+          <section class="collage-grid-tl">
+            <img class="grayscale" src="../images/task_list.jpg" alt="a to do list">
+            <div class="img_name">Task List</div>
+          </section>
+        </div>
+        <a href="portfolio.html" id="page-buttons">View More</a>
+      </div>
+    <hr>
+      <footer>
+        <nav class="nav-footer">
+          <ul class="nav-links">
+            <li class="nav-item"><a href="https://github.com/Arantxax28"><i class="fa fa-github"></i></a></li>
+            <li class="nav-item"><a href="https://www.linkedin.com/"><i class="fa fa-linkedin"></i></a></li>
+            <li class="nav-item"><a href="https://www.gmail.com/"><i class="fa fa-envelope"></i></a></li>
+          </ul>
+        </nav>
+      </footer>
 </body>
-</html>
+</html>
+
+
+<!-- Updated image names for easy access but links to images are below
+adagrams: https://unsplash.com/photos/rUeFrm7NV6E
+palmtrees_a: https://unsplash.com/photos/25ELwHMxxzc
+palmtress_b: https://unsplash.com/photos/3XUijzqLOV8
+swap_meet: https://unsplash.com/photos/qyy6pmM2Hg8
+task_list:  https://unsplash.com/photos/Ki0-ea-Hgx4
+viewing_party: https://unsplash.com/photos/q8P8YoR6erg
+ -->
diff --git a/pages/portfolio.html b/pages/portfolio.html
@@ -4,9 +4,81 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>Portfolio</title>
+  <link rel="stylesheet" href="../styles/style.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
 </head>
 <body>
-
+  <header>
+    <nav class="nav-bar">
+      <a href="index.html"><i class="fa fa-home fa-lg"></i></a>
+      <ul class="nav-links">
+        <li class="nav-item"><a href="about.html">About Me</a></li>
+        <li class="nav-item"><a href="portfolio.html">Projects</a></li>
+      </ul>
+    </nav>
+</header>
+<section class="project-section">
+  <h1 class="project-page-title">Projects</h1>
+  <div class="projects-flex">
+    <div class="project-items">
+      <a href="https://github.com/Arantxax28/viewing-party">
+        <img src="../images/viewing_party.jpg" alt="popcorn and clapperboard">
+      </a>
+      <span>
+        <a href="https://github.com/Arantxax28/viewing-party">Viewing Party</a>
+      </span>
+      <p class="project-info">
+        Given lists representing movies watched, favorited and to watch, 
+        updated the lists by adding or removing items. 
+        Created recommendations from the given data.
+      </p>
+    </div>
+    <div class="project-items">
+      <a href="https://github.com/Arantxax28/adagrams-py">
+        <img src="../images/adagrams.jpg" alt="coffee, a magazine and scrabble letters">
+      </a>
+      <span>
+        <a href="https://github.com/Arantxax28/adagrams-py">Adagrams</a>
+      </span>
+      <p class="project-info">
+        Built a game with a partner that draws letters from a given pool and validates player input.
+        The program scores each word and returns the highest scoring word.
+      </p>
+    </div>
+    <div class="project-items">
+      <a href="https://github.com/Arantxax28/swap-meet">
+        <img src="../images/swap_meet.jpg" alt="colorful jacket">
+      </a>
+      <span>
+        <a href="https://github.com/Arantxax28/swap-meet">Swap Meet</a>
+      </span>
+      <p class="project-info">Created a set of classes with attributes and instance methods. 
+        Used the classes to help vendors swap the items by conditions and category.
+      </p>
+    </div>
+    <div class="project-items">
+      <a href="https://github.com/Arantxax28/task-list-api">
+        <img src="../images/task_list.jpg" alt="a to do list">
+      </a>
+      <span>
+        <a href="https://github.com/Arantxax28/task-list-api">Task List</a>
+      </span>
+      <p class="project-info">Built an API that can create, read, update and delete tasks. 
+        Upon completion of a task it sends a message via a Slack bot.
+      </p>
+    </div>
+  </div>
+</section>
+<hr>
+<footer>
+  <nav class="nav-footer">
+    <ul class="nav-links">
+      <li class="nav-item"><a href="https://github.com/Arantxax28"><i class="fa fa-github"></i></a></li>
+      <li class="nav-item"><a href="https://www.linkedin.com/"><i class="fa fa-linkedin"></i></a></li>
+      <li class="nav-item"><a href="https://www.gmail.com/"><i class="fa fa-envelope"></i></a></li>
+    </ul>
+  </nav>
+</footer>
 </body>
 </html>