diff --git a/ReadMe.md b/ReadMe.md index a90bf3172..b83ccd40a 100644 --- 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 ``. -- [ ] Implement the project on your newly created `` branch, committing changes regularly. -- [ ] Push commits: git push origin ``. +- [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 ``. +- [x] Implement the project on your newly created `` branch, committing changes regularly. +- [x] Push commits: git push origin ``. ### 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 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 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 index df1043036..5f2b780dc 100644 --- a/about.html +++ b/about.html @@ -3,9 +3,42 @@ - Document + + Brendan Lai-Tong: About -

ABOUT

+
+
+

ABOUT

+ +
+

Dynamic Heading

+

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.

+
+
+
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git a/assets/LinkedIn-Logos/LI-In-Bug.png b/assets/LinkedIn-Logos/LI-In-Bug.png new file mode 100644 index 000000000..8bc2d53ce Binary files /dev/null and b/assets/LinkedIn-Logos/LI-In-Bug.png differ diff --git a/assets/LinkedIn-Logos/LI-Logo.png b/assets/LinkedIn-Logos/LI-Logo.png new file mode 100644 index 000000000..72bb8a006 Binary files /dev/null and b/assets/LinkedIn-Logos/LI-Logo.png differ diff --git a/assets/recordplayer.jpg b/assets/recordplayer.jpg new file mode 100644 index 000000000..f0dd6c20a Binary files /dev/null and b/assets/recordplayer.jpg differ diff --git a/contact.html b/contact.html index 7c293bd11..6d9a16051 100644 --- a/contact.html +++ b/contact.html @@ -2,10 +2,43 @@ - - Document + + + Brendan Lai-Tong: Contact -

CONTACT

+
+
+

CONTACT

+ +
+

Dynamic Heading

+

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.

+
+
+
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git a/index.html b/index.html index d01f779ff..870edc75c 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,61 @@ - Document + + Brendan Lai-Tong: Full Stack Developer - +
+ +
+

BRENDAN LAI-TONG

+ +
+

Full Stack Developer - Musician

+

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.

+
+
+
+ + +
+
+

Project 1

+
+
+

Project 2

+
+
+

Project 3

+
+
+

Project 4

+

+
+

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 +

+ My Projects -> +
+
+
+ + + \ No newline at end of file diff --git a/projects.html b/projects.html index 266e620b0..5b41d9df5 100644 --- a/projects.html +++ b/projects.html @@ -3,9 +3,43 @@ - Document + + Brendan Lai-Tong: Projects -

PROJECTS

+
+
+
+

PROJECTS

+ +
+

Dynamic Heading

+

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.

+
+
+
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..417d1a97e 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,247 @@ -/* Add CSS styling here */ \ No newline at end of file +@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Prata&display=swap'); + +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + + +/*----Color Palette---- +335c67 - accent +fff3b0 - lightest +e09f3e - lighter +9e2a2b - mids +540b0e - dark +----Color Palette----*/ + + +/*----Base CSS Begin----*/ +* { + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +body { + font-family: 'Montserrat', sans-serif; + font-size: 1.8rem; + font-weight: 300; + letter-spacing: 1px; + line-height: 1.7; +} + +header { + margin: 2% 0; +} + +nav { + display: flex; + flex-flow: row wrap; + justify-content: center; + margin: 2% 0; +} + +section { + margin: 2% 0; +} + +footer { + height: 40vh; + background-color: #2e2e2e; +} + +h1, h2, h3, h4, h5, h6 { + font-family: 'Prata', serif; + font-weight: 700; + margin: 0 2%; + color: #335c67; +} + +h1 { + font-size: 8rem; + text-align: center; +} + +h2 { + font-size: 2.5rem; +} + +h3 { + font-size: 2.5rem; + margin: 8% 8%; + color: #fff; + text-shadow: .2rem .2rem #000; +} + +p { + margin: 0 2%; +} + +a { + text-decoration: none; + display: inline-block; + color: #fff3b0; +} + +span { + font-weight: 900; +} + +/*----Structure----*/ +.container { + max-width: 100%; + margin: 4% auto; +} + +.hero { + background: url('/assets/recordplayer.jpg'); + height: 30vh; + background-attachment: fixed; + background-size: cover; + margin: 4% 0; + box-shadow: inset 20px 20px 40px #101214; +} + +.project-flex { + display: flex; + flex-flow: row wrap; +} + + +.project { + color: #fff; + height: 40vh; + flex-grow: 1; + margin-right: 4%; + margin-top: 4%; + margin-left: 1%; + background: url('https://picsum.photos/400/800'); + background-size: cover; + background-repeat: no-repeat; + filter: grayscale(0%); + box-shadow: inset 5px 5px 40px #101214; +} + + +.project:hover { + transition: 2s; + flex-grow: 4; + filter: grayscale(100%); + box-shadow: 15px 15px 40px #000; +} + +.project_info { + flex-grow: 2; + width: 40%; + margin: 4% 0; +} + +.footer-flex { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; +} + +.footer-flex div { + width: 20%; + height: 10%; + flex-grow: 1; + margin: 0 2%; +} + + + +/*----Buttons----*/ +.btn { + font-size: 2.5rem; + letter-spacing: .2rem; + border: 1px solid #540b0e; + width: 15rem; + padding: .5% 1%; + color: #9e2a2b; + background-color: #fff3b0; + text-align: center; +} + +.btn:hover{ + transition: 1s; + transform: rotateX(180deg); + background-color: #540b0e; +} + +.btn:first-of-type { + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; +} + +.btn:last-of-type { + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; +} + +.footer-btn { + font-size: 2rem; + padding: 4%; + flex-grow: 3; +} + +.projects-btn { + font-size: 2.5rem; + width: 24rem; + padding: 1% 1%; +} + + + +/*----Images/Logos----*/ +.LinkedIn { + width: 20%; + flex-grow: 2; +} \ No newline at end of file