AdaGold · jaekerrclayton · May 18, 2022 · May 19, 2022 · May 21, 2022 · May 23, 2022
diff --git a/.github/PULL_REQUEST_TEMPLATE b/.github/PULL_REQUEST_TEMPLATE
@@ -11,3 +11,5 @@ What was the most challenging piece of this assignment? |
 Describe one area that you gained more clarity on when completing this assignment |
 **Optional** |
 Did you deploy to GitHub Pages? If so, what is the URL to your website? |
+
+
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1,5 +1,8 @@
 # Personal Portfolio Site
 
+LINK TO REPO: https://github.com/jaekerrclayton/personal-portfolio-site.git
+
+
 ## Introduction
 
 It is common for developers to create a website to show off their web-dev skills and document their work and interests. These sites often feature things like:

diff --git a/feedback.md b/feedback.md
@@ -8,7 +8,7 @@ Appropriate Git Usage |
 Answered comprehension questions |
 Page fully loads |
 No broken links (regular or images) |
-Includes at least 4 pages and styling |
+Includes at least 3 pages and styling |
 **HTML** |
 Uses the high-level tags for organization: `header, footer, main` |
 Appropriately using semantic tags: `section, article`, etc. |

diff --git a/images/adagrams.png b/images/adagrams.png
diff --git a/images/adagrams2.png b/images/adagrams2.png
diff --git a/images/attempt-gif.gif b/images/attempt-gif.gif
diff --git a/images/ezgif-4-cbe5863d24.gif b/images/ezgif-4-cbe5863d24.gif
diff --git a/images/facegif.gif b/images/facegif.gif
diff --git a/images/facegif2.gif b/images/facegif2.gif
diff --git a/images/homepagepic.png b/images/homepagepic.png
diff --git a/images/swap-meet.png b/images/swap-meet.png
diff --git a/images/task-list-api.png b/images/task-list-api.png
diff --git a/images/teeth.gif b/images/teeth.gif
diff --git a/images/teethv2.gif b/images/teethv2.gif
diff --git a/images/viewing-party.png b/images/viewing-party.png
diff --git a/images/x-rayv2.png b/images/x-rayv2.png
diff --git a/pages/about.html b/pages/about.html
@@ -1,12 +1,42 @@
+<!-- some information about you; interests, background or similar -->
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <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>
+  <link href="/style/about.css" rel="stylesheet"> 
 </head>
 <body>
-
+  <header>
+    <h1>about</h1>
+      <nav>
+        <ul>
+          <li><a href="/pages/index.html">home</a></li>
+          <li><a href="/pages/portfolio.html">portfolio</a></li>
+          <li><a href="/pages/about.html">about</a></li>
+        </ul>
+      </nav>
+  </header>
+  <main>
+    <section>
+      <h2>jae clayton: about me</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id volutpat lacus laoreet non. Magna etiam tempor orci eu lobortis. Morbi tristique senectus et netus et malesuada. Quis blandit turpis cursus in hac habitasse platea dictumst. Donec enim diam vulputate ut. Quis varius quam quisque id diam. Ultricies tristique nulla aliquet enim tortor at auctor urna. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Dolor sit amet consectetur adipiscing elit ut. Ut pharetra sit amet aliquam id diam maecenas ultricies mi. Amet porttitor eget dolor morbi non. Consequat mauris nunc congue nisi vitae suscipit tellus mauris. Ullamcorper dignissim cras tincidunt lobortis feugiat. Duis ut diam quam nulla porttitor massa id. Ultrices eros in cursus turpis. Commodo ullamcorper a lacus vestibulum sed. Tincidunt eget nullam non nisi est sit amet. Erat imperdiet sed euismod nisi porta. Elit pellentesque habitant morbi tristique senectus et netus et.</p>
+    </section>
+    <section>
+      <img src="/images/attempt-gif.gif" alt='main-photo'/>
+    </section>
+  </main>
+  <footer>
+      <nav id="footer-nav">
+        <ul>
+          <li><a href="https://github.com/jaekerrclayton">github</a></li>
+          <li><a href="https://www.linkedin.com/">linked in</a></li>
+          <li><a href="mailto:[email protected]">email</a></li>
+        </ul>
+      </nav>
+  </footer>
 </body>
 </html>
diff --git a/pages/index.html b/pages/index.html
@@ -4,9 +4,34 @@
   <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>index</title>
+  <link href="/style/about.css" rel="stylesheet"> 
 </head>
 <body>
-
+  <header>
+    <h1>jae clayton</h1>
+      <nav>
+          <ul>
+            <li><a href="/pages/index.html">home</a></li>
+            <li><a href="/pages/portfolio.html">portfolio</a></li>
+            <li><a href="/pages/about.html">about</a></li>
+          </ul>
+      </nav>
+  </header>
+  <main>
+    <img id="main-photo" src="/images/homepagepic.png" alt='main-photo'/>
+    <!-- <section> -->
+    <!-- <img id="main-photo" src="/images/homepagepic.png"/> -->
+    <!-- </section> -->
+  </main>
+  <footer>
+    <nav id="footer-nav">
+      <ul>
+        <li><a href="https://github.com/jaekerrclayton">github</a></li>
+        <li><a href="https://www.linkedin.com/">linked in</a></li>
+        <li><a href="mailto:[email protected]">email</a></li>
+      </ul>
+    </nav>
+  </footer>  
 </body>
 </html>
diff --git a/pages/portfolio.html b/pages/portfolio.html
@@ -1,12 +1,66 @@
+<!-- must include information about several projects 
+  you have completed at Ada (or elsewhere) with links 
+  to the GitHub repo (if available), descriptions, 
+  images, etc. -->
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <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>my portfolio</title>
+  <!-- <link href="/style/style.css" rel="stylesheet">  -->
+  <link href="/style/about.css" rel="stylesheet"> 
 </head>
 <body>
-
+  <header>
+    <h1>portfolio</h1>
+        <nav>
+          <ul>
+            <li><a href="/pages/index.html">home</a></li>
+            <li><a href="/pages/portfolio.html">portfolio</a></li>
+            <li><a href="/pages/about.html">about</a></li>
+          </ul>
+        </nav>
+  </header>
+  <main>
+    <section>
+      <div class='container'>
+        <a href="https://github.com/jaekerrclayton/swap-meet"><img src="/images/ezgif-4-cbe5863d24.gif" alt='swap-meet-photo'/></a>
+        <div class ='content'>
+          <h3>swap-meet</h3>
+          <p>a brief description of how I did the project and what and like also how i feel aout things languages were worked in and other stuff of the group project!</p>
+        </div>
+      </div>
+    </section>
+    <section>
+      <div class='container'>
+        <a href="https://github.com/jaekerrclayton/task-list-api"><img src="/images/facegif.gif" alt='task-list-photo'/></a>
+        <div class ='content'>
+          <h3>task-list api</h3>
+          <p>a brief description of how I did the project and what and like also how i feel aout things languages were worked in and other stuff of the group project!</p>
+        </div>
+      </div>
+    </section>
+    <section>
+      <div class='container'>
+        <a href="https://github.com/jaekerrclayton/viewing-party"><img src="/images/teethv2.gif" alt='viewing-party-photo'/></a>
+        <div class ='content'>
+          <h3>viewing-party</h3>
+          <p>a brief description of how I did the project and what and like also how i feel aout things languages were worked in and other stuff of the group project!</p>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer>
+    <nav id="footer-nav">
+      <ul>
+        <li><a href="https://github.com/jaekerrclayton">github</a></li>
+        <li><a href="https://www.linkedin.com/">linked in</a></li>
+        <li><a href="mailto:[email protected]">email</a></li>
+      </ul>
+    </nav>
+  </footer>
 </body>
 </html>
diff --git a/style/about.css b/style/about.css
@@ -0,0 +1,147 @@
+body{
+    background-color: black;
+    width: auto; 
+    min-height:100vh;
+    height: 100vh;
+    margin:0;
+    font-family: helvetica;
+    display:grid;
+    flex-direction: column;
+    font-weight: 300;
+    grid-template-columns: .1fr 1fr 1fr 1fr 1fr 1fr .2fr;
+    grid-template-rows: .4 auto .2%;
+    color:#ebecd1; ;
+    justify-content:space-evenly;
+    align-items: center;
+}
+
+h1{
+    font-weight: lighter;
+}
+
+main #main-photo{
+    max-width: 85vw;
+    max-height: 90vh;
+    /* display: flex; */
+        }
+
+header{
+background-color: rgb(0, 0, 0);
+text-align: center;
+margin-top: 0em;
+grid-column: 3/6;
+grid-row: 1/2;
+justify-content: space-evenly;
+}
+
+
+ul{
+display: flex;
+flex-direction: row;
+justify-content:space-evenly;
+align-items: center;
+
+}
+
+header nav li{
+    font-size: 10pt;
+    background-color: #ebecd1; 
+    padding: .3em;
+    border-radius: 15px;
+    text-decoration: none;
+}
+
+
+li{
+    list-style-type: none;
+}
+
+a{
+    text-decoration: none;
+    font-size: 10pt;
+    color: black;
+}
+
+* :visited{
+    color: rgb(10, 3, 3);
+}
+
+
+main{
+    display: flex;
+    grid-column: 2/ 7;
+    grid-row: 2/3;
+    background-color: rgb(0,0,0);
+    /* max-height: 80vh; */
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction:row;
+    justify-content: space-evenly;
+    align-items: flex-end;
+
+}
+
+p{  
+    max-width: 450px;
+    display:inline-flex;
+
+}
+section{
+    justify-content: space-evenly;
+    text-align: center;
+    padding: 3em;
+    width: fit-content;
+    /* min-width: 400px; */
+    display:block;
+}
+
+.container {
+    position:relative;
+    max-height: 100%;
+    max-width: 800px; 
+    max-width: 400px;
+    object-fit: cover; 
+    vertical-align: bottom;
+    justify-content: space-evenly; 
+    margin: 0 auto; 
+
+}
+
+.container img{
+    max-width: 400px;
+    object-fit: cover;
+    /* display:block; */
+    border-radius: 80%;
+    vertical-align: middle;
+
+  }
+
+h3{
+    font-weight: lighter;
+}
+
+
+.container .content {
+    position: absolute; 
+    bottom: 0; 
+    background: rgb(0, 0, 0); 
+    background: rgba(0, 0, 0, 0.5); 
+    color: #ebecd1; 
+    width: 100%;
+    padding: .3em; 
+  }
+
+
+footer {
+    /* position: absolute; */
+    margin: 0%;
+    margin-bottom: 0em;
+    bottom:0;
+    width: 100%;
+    height: 2.5rem; 
+    grid-column: 1/ span7;
+    grid-row: 3/ span 4;
+    margin-top: 4em;
+    margin-bottom: 0em;
+    background-color: #ebecd1; 
+}
diff --git a/style/hme-trial.css b/style/hme-trial.css
@@ -0,0 +1,23 @@
+#box{
+    width: 100vw;
+    height: 100vh;
+}
+#container {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    height: 30%;
+    background-color: red;
+}
+.photo {
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-size:contain;
+}
+
+
+img {
+    max-width: 100%;
+    height: auto;
+  }
diff --git a/style/portfolio-2.css b/style/portfolio-2.css
@@ -0,0 +1,34 @@
+.container {
+    /* these are just an arbitrary widths and heights to look good on our browser */
+    /* width: 30vw;
+    height: 60vh; */
+    display: grid;
+    grid-template: 1fr 1fr 1fr 1fr 1fr/ 1fr 1fr 1fr 1fr;
+
+  }
+
+  .header {
+    background-color: #d55e00;
+    grid-column: 1 / 4;
+    grid-row: 1 / 2
+  }
+
+  .nav {
+    background-color: #f0e442;
+    grid-column: 1 / 4;
+    grid-row: 2 / 3;
+
+  }
+
+  .content {
+    background-color: #009e73;
+    grid-column: 1 / 4;
+    grid-row: 3 / 5;
+  }
+
+  .footer {
+    background-color: #0072b2;
+    background-color: #009e73;
+    grid-column: 1 / 4;
+    grid-row: 3 / 4;
+  }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,3 +11,5 @@ What was the most challenging piece of this assignment? \|
		Describe one area that you gained more clarity on when completing this assignment \|
		Optional \|
		Did you deploy to GitHub Pages? If so, what is the URL to your website? \|