diff --git a/.github/PULL_REQUEST_TEMPLATE b/.github/PULL_REQUEST_TEMPLATE index 0342fd1e4..a569f22d4 100644 --- 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 new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index 933cd500b..86aed2cd2 100644 --- 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 index 7803065e9..2411324ff 100644 --- 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 new file mode 100644 index 000000000..853a9b891 Binary files /dev/null and b/images/adagrams.png differ diff --git a/images/adagrams2.png b/images/adagrams2.png new file mode 100644 index 000000000..070cf63c1 Binary files /dev/null and b/images/adagrams2.png differ diff --git a/images/attempt-gif.gif b/images/attempt-gif.gif new file mode 100644 index 000000000..90c6fb411 Binary files /dev/null and b/images/attempt-gif.gif differ diff --git a/images/ezgif-4-cbe5863d24.gif b/images/ezgif-4-cbe5863d24.gif new file mode 100644 index 000000000..e4f5b1423 Binary files /dev/null and b/images/ezgif-4-cbe5863d24.gif differ diff --git a/images/facegif.gif b/images/facegif.gif new file mode 100644 index 000000000..b26a7c83b Binary files /dev/null and b/images/facegif.gif differ diff --git a/images/facegif2.gif b/images/facegif2.gif new file mode 100644 index 000000000..e4f5b1423 Binary files /dev/null and b/images/facegif2.gif differ diff --git a/images/homepagepic.png b/images/homepagepic.png new file mode 100644 index 000000000..52350a945 Binary files /dev/null and b/images/homepagepic.png differ diff --git a/images/swap-meet.png b/images/swap-meet.png new file mode 100644 index 000000000..923982521 Binary files /dev/null and b/images/swap-meet.png differ diff --git a/images/task-list-api.png b/images/task-list-api.png new file mode 100644 index 000000000..21287b9bd Binary files /dev/null and b/images/task-list-api.png differ diff --git a/images/teeth.gif b/images/teeth.gif new file mode 100644 index 000000000..eaaa51952 Binary files /dev/null and b/images/teeth.gif differ diff --git a/images/teethv2.gif b/images/teethv2.gif new file mode 100644 index 000000000..dc5132eeb Binary files /dev/null and b/images/teethv2.gif differ diff --git a/images/viewing-party.png b/images/viewing-party.png new file mode 100644 index 000000000..62eb17878 Binary files /dev/null and b/images/viewing-party.png differ diff --git a/images/x-rayv2.png b/images/x-rayv2.png new file mode 100644 index 000000000..c85a0c9e2 Binary files /dev/null and b/images/x-rayv2.png differ diff --git a/pages/about.html b/pages/about.html index b4ae215c4..27fb59d4c 100644 --- a/pages/about.html +++ b/pages/about.html @@ -1,3 +1,5 @@ + + @@ -5,8 +7,36 @@ Document + - +
+

about

+ +
+
+
+

jae clayton: about me

+

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.

+
+
+ main-photo +
+
+ \ No newline at end of file diff --git a/pages/index.html b/pages/index.html index b4ae215c4..ce1584ea5 100644 --- a/pages/index.html +++ b/pages/index.html @@ -4,9 +4,34 @@ - Document + index + - +
+

jae clayton

+ +
+
+ main-photo + + + +
+ \ No newline at end of file diff --git a/pages/portfolio.html b/pages/portfolio.html index b4ae215c4..e6341e064 100644 --- a/pages/portfolio.html +++ b/pages/portfolio.html @@ -1,12 +1,66 @@ + + - Document + my portfolio + + - +
+

portfolio

+ +
+
+
+
+ swap-meet-photo +
+

swap-meet

+

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!

+
+
+
+
+
+ task-list-photo +
+

task-list api

+

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!

+
+
+
+
+
+ viewing-party-photo +
+

viewing-party

+

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!

+
+
+
+
+ \ No newline at end of file diff --git a/style/about.css b/style/about.css new file mode 100644 index 000000000..6d58b5b27 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/style/hme-trial.css b/style/hme-trial.css new file mode 100644 index 000000000..adaeaf5ef --- /dev/null +++ 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; + } \ No newline at end of file diff --git a/style/portfolio-2.css b/style/portfolio-2.css new file mode 100644 index 000000000..6c7a29a44 --- /dev/null +++ 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; + } \ No newline at end of file