kai-blt · kai-blt · Sep 3, 2020 · Sep 3, 2020 · Sep 3, 2020 · Sep 3, 2020
diff --git a/ReadMe.md b/ReadMe.md
@@ -23,32 +23,32 @@ Portfolio websites are a great way to show off your work to friends, family, and
 
 Follow these steps to set up and work on your project:
 
-- [ ] Create a forked copy of this project.
-- [ ] Add your Team Lead as collaborator on Github.
-- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!).
-- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
-- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
-- [ ] Push commits: git push origin `<firstName-lastName>`.
+- [x] Create a forked copy of this project.
+- [x] Add your Team Lead as collaborator on Github.
+- [x] Clone your OWN version of the repository (Not Lambda's by mistake!).
+- [x] Create a new branch: git checkout -b `<firstName-lastName>`.
+- [x] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
+- [x] Push commits: git push origin `<firstName-lastName>`.
 
 ### Task 2: Minimum Viable Product
 
 Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements:
 
-- [ ]  A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages
-- [ ]  Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you
-- [ ]  Information about you in place of the given placeholder
-- [ ]  A `My Projects` button that links to the projects page
-- [ ]  A `Contact Me` button that links to the contact page
-- [ ]  Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page
+- [x]  A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages
+- [x]  Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you
+- [x]  Information about you in place of the given placeholder
+- [x]  A `My Projects` button that links to the projects page
+- [x]  A `Contact Me` button that links to the contact page
+- [x]  Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page
 
 ### Task 3: Stretch Goals
 
 The following goals are designed to stretch your knowledge and may require additional research beyond what was learned in class today.
 
-- [ ] Make your webpage work at different browser widths, including mobile
-- [ ] Add CSS animations
+- [x] Make your webpage work at different browser widths, including mobile
+- [x] Add CSS animations
 - [ ] Design and execute your own wireframe for `About`, `Projects`, and `Contact` pages
-- [ ] Host your website on Netlify.com
+- [x] Host your website on Netlify.com
 
 ## FAQs
 
@@ -70,6 +70,6 @@ The following goals are designed to stretch your knowledge and may require addit
 
 Follow these steps for completing your project.
 
-- [ ] Submit a pull request to merge <firstName-lastName> Branch into master (student's  Repo). **Please don't merge your own pull request**
-- [ ] Add your Team Lead as a reviewer on the pull request
-- [ ] Your Team Lead will count the project as complete by merging the branch back into master
+- [x] Submit a pull request to merge <firstName-lastName> Branch into master (student's  Repo). **Please don't merge your own pull request**
+- [x] Add your Team Lead as a reviewer on the pull request
+- [x] Your Team Lead will count the project as complete by merging the branch back into master
diff --git a/about.html b/about.html
@@ -3,9 +3,42 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" type="text/css" href="style/index.css">
+    <title>Brendan Lai-Tong: About</title>
 </head>
 <body>
-    <h1> ABOUT </h1>
+    <div class="container">
+        <header>
+            <h1>ABOUT</h1>
+            <nav>
+                <a href="index.html" class="btn">Home</a>
+                <a href="about.html" class="btn">About</a>
+                <a href="contact.html" class="btn">Contact</a>
+                <a href="projects.html" class="btn">Projects</a>
+            </nav>
+            <div>
+                <h2>Dynamic Heading</h2>
+                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+            </div>
+        </header>
+        <section>
+
+        </section>
+        <section>
+
+        </section>
+    </div>
+
+    <!--Footer-->
+    <footer class="footer-flex">
+        <div></div>
+        <div>
+            <a href="https://www.linkedin.com/in/brendan-lai-tong-26111b15/" target="_blank"><img src="/assets/LinkedIn-Logos/LI-In-Bug.png" class="LinkedIn"></a>
+        </div>
+        <div>
+            <a href="contact.html" class="btn footer-btn">Contact Me</a>
+        </div>       
+        <div></div>          
+    </footer>
 </body>
 </html>
diff --git a/assets/LinkedIn-Logos/LI-In-Bug.png b/assets/LinkedIn-Logos/LI-In-Bug.png
diff --git a/assets/LinkedIn-Logos/LI-Logo.png b/assets/LinkedIn-Logos/LI-Logo.png
diff --git a/assets/recordplayer.jpg b/assets/recordplayer.jpg
diff --git a/contact.html b/contact.html
@@ -2,10 +2,43 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=    <h1> ABOUT </h1>, initial-scale=1.0">
-    <title>Document</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="style/index.css">
+    <title>Brendan Lai-Tong: Contact</title>
 </head>
 <body>
-    <h1> CONTACT </h1>
+    <div class="container">
+        <header>
+            <h1>CONTACT</h1>
+            <nav>
+                <a href="index.html" class="btn">Home</a>
+                <a href="about.html" class="btn">About</a>
+                <a href="contact.html" class="btn">Contact</a>
+                <a href="projects.html" class="btn">Projects</a>
+            </nav>
+            <div>
+                <h2>Dynamic Heading</h2>
+                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+            </div>
+        </header>
+        <section>
+
+        </section>
+        <section>
+
+        </section>
+    </div>
+
+    <!--Footer-->
+    <footer class="footer-flex">
+        <div></div>
+        <div>
+            <a href="https://www.linkedin.com/in/brendan-lai-tong-26111b15/" target="_blank"><img src="/assets/LinkedIn-Logos/LI-In-Bug.png" class="LinkedIn"></a>
+        </div>
+        <div>
+            <a href="contact.html" class="btn footer-btn">Contact Me</a>
+        </div>       
+        <div></div>          
+    </footer>
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -3,9 +3,61 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" type="text/css" href="style/index.css">
+    <title>Brendan Lai-Tong: Full Stack Developer</title>
 </head>
 <body>
-
+    <div class="container">
+        <!--Header-->
+        <header>              
+            <h1>BRENDAN LAI-TONG</h1>          
+            <nav>
+                <a href="index.html" class="btn">Home</a>
+                <a href="about.html" class="btn">About</a>
+                <a href="contact.html" class="btn">Contact</a>
+                <a href="projects.html" class="btn">Projects</a>
+            </nav>
+            <div>
+                <h2>Full Stack Developer - Musician</h2>
+                <p>I just started my journey the Lambda School August 2020. My previous experience is in the field of Email Marketing and Graphics Design and I'm comfortable working with HTML/CSS, Adobe Photoshop, GIMP, and various ESP platforms (Bronto, Cheetahmail, Mailchimp).
+                Additionally, I am a trombonist and music educator, born in Johannesburg, South Africa. I'm an appreciator of all things that create sound and have performed with a myriad of Bay Area ensembles spanning multiple genres including - classical, contemporary avant-garde, rock, jazz & reggae.
+                I'm a member of the San Francisco Contemporary Music Players.</p>
+            </div>
+            <div class="hero"></div>
+        </header>
+
+        <!--Project Gallery-->
+        <section class="project-flex">
+            <div class="project">
+                <h3>Project 1</h3>
+            </div>
+            <div class="project"> 
+                <h3>Project 2</h3>
+            </div>
+            <div class="project">
+                <h3>Project 3</h3>
+            </div>
+            <div class="project">
+                <h3>Project 4<h3>
+            </div>
+            <div class="project_info">
+                <p>Here are some of the projects I'm most proud of. These will be updated on a regular basis utilizing the newest or most interesting technologies available. React and Python projects coming soon                   
+                </p>
+                <a href="projects.html" class="btn projects-btn">My Projects -></a>
+            </div>
+        </section>
+    </div>
+
+    <!--Footer-->
+    <footer class="footer-flex">
+        <div></div>
+        <div>
+            <a href="https://www.linkedin.com/in/brendan-lai-tong-26111b15/" target="_blank"><img src="/assets/LinkedIn-Logos/LI-In-Bug.png" class="LinkedIn"></a>
+        </div>
+        <div>
+            <a href="contact.html" class="btn footer-btn">Contact Me</a>
+        </div>       
+        <div></div>          
+    </footer>
 </body>
 </html>
diff --git a/projects.html b/projects.html
@@ -3,9 +3,43 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" type="text/css" href="style/index.css">
+    <title>Brendan Lai-Tong: Projects</title>
 </head>
 <body>
-    <h1> PROJECTS </h1>
+    <header>
+        <div class="container">
+            <header>
+                <h1>PROJECTS</h1>
+                <nav>
+                    <a href="index.html" class="btn">Home</a>
+                    <a href="about.html" class="btn">About</a>
+                    <a href="contact.html" class="btn">Contact</a>
+                    <a href="projects.html" class="btn">Projects</a>
+                </nav>
+                <div>
+                    <h2>Dynamic Heading</h2>
+                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+                </div>
+            </header>
+            <section>
+
+            </section>
+            <section>
+
+            </section>
+        </div>
+
+            <!--Footer-->
+        <footer class="footer-flex">
+            <div></div>
+            <div>
+                <a href="https://www.linkedin.com/in/brendan-lai-tong-26111b15/" target="_blank"><img src="/assets/LinkedIn-Logos/LI-In-Bug.png" class="LinkedIn"></a>
+            </div>
+            <div>
+                <a href="contact.html" class="btn footer-btn">Contact Me</a>
+            </div>       
+            <div></div>          
+        </footer>
 </body>
 </html>