Skip to content

Commit

Permalink
Redesign (#2)
Browse files Browse the repository at this point in the history 
* groundwork for big changes

* progress on style changes

* Many style changes

* resdesign ready for stage 1

* updated responsive styles

---------

Co-authored-by: Isaiah Leach <[email protected]>
  • Loading branch information
@IsaiahPetrichor
IsaiahPetrichor and IsaiahPetrichor authored Jun 13, 2023
1 parent c61d864 commit 8ad389d
Show file tree
Hide file tree
Showing 6 changed files with 262 additions and 108 deletions.
4 changes: 0 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,6 @@ Welcome to my Development Portfolio. I am a Software Development Engineer, alway

Running this project locally is simple. Clone the directory, open it in VSCode and launch it using the Live Server extension.

## TODO

- Update Responsive Styles

## Projects Featured

---
Expand Down
136 changes: 69 additions & 67 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,71 +252,73 @@ <h3>Find Your Hat</h3>
>
</p>
</div>
<div class="calc project">
<p id="output">0</p>
<table class="buttons">
<tr>
<td colspan="2">
<button class="button" id="clearAll">C</button>
</td>
<td>
<button class="button" id="divide">/</button>
</td>
<td>
<button class="button" id="multiply">*</button>
</td>
</tr>
<tr>
<td>
<button class="button" id="in7">7</button>
</td>
<td>
<button class="button" id="in8">8</button>
</td>
<td>
<button class="button" id="in9">9</button>
</td>
<td>
<button class="button" id="subtract">-</button>
</td>
</tr>
<tr>
<td>
<button class="button" id="in4">4</button>
</td>
<td>
<button class="button" id="in5">5</button>
</td>
<td>
<button class="button" id="in6">6</button>
</td>
<td>
<button class="button" id="add">+</button>
</td>
</tr>
<tr>
<td>
<button class="button" id="in1">1</button>
</td>
<td>
<button class="button" id="in2">2</button>
</td>
<td>
<button class="button" id="in3">3</button>
</td>
<td rowspan="2">
<button class="button" id="equals">=</button>
</td>
</tr>
<tr>
<td colspan="2">
<button class="button" id="in0">0</button>
</td>
<td>
<button class="button" id="inDecimal">.</button>
</td>
</tr>
</table>
<div class="project">
<div class="calc">
<p id="output">0</p>
<table class="buttons">
<tr>
<td colspan="2">
<button class="button" id="clearAll">C</button>
</td>
<td>
<button class="button" id="divide">/</button>
</td>
<td>
<button class="button" id="multiply">*</button>
</td>
</tr>
<tr>
<td>
<button class="button" id="in7">7</button>
</td>
<td>
<button class="button" id="in8">8</button>
</td>
<td>
<button class="button" id="in9">9</button>
</td>
<td>
<button class="button" id="subtract">-</button>
</td>
</tr>
<tr>
<td>
<button class="button" id="in4">4</button>
</td>
<td>
<button class="button" id="in5">5</button>
</td>
<td>
<button class="button" id="in6">6</button>
</td>
<td>
<button class="button" id="add">+</button>
</td>
</tr>
<tr>
<td>
<button class="button" id="in1">1</button>
</td>
<td>
<button class="button" id="in2">2</button>
</td>
<td>
<button class="button" id="in3">3</button>
</td>
<td rowspan="2">
<button class="button" id="equals">=</button>
</td>
</tr>
<tr>
<td colspan="2">
<button class="button" id="in0">0</button>
</td>
<td>
<button class="button" id="inDecimal">.</button>
</td>
</tr>
</table>
</div>
<h3>Calculator</h3>
<ul>
<li>HTML</li>
Expand All @@ -325,7 +327,7 @@ <h3>Calculator</h3>
</ul>
<p class="links">
<a
href="https://github.com/IsaiahPetrichor/Portfolio/blob/main/resources/projects/JS/calculator.js"
href="https://github.com/IsaiahPetrichor/portfolio/blob/main/resources/javascript/calculator.js"
rel="noopener"
target="_blank"
>View Code</a
Expand All @@ -346,7 +348,7 @@ <h3>Autumn Procurement and Services LLC</h3>
</ul>
<p class="links">
<a href="http://www.autumnpsllc.com/" rel="noopener" target="_blank">View Project</a>
<a href="" rel="noopener" target="_blank">View Code</a>
<a href="#projects" rel="" target=""><strike>View Code</strike></a>
</p>
</div>
</div>
Expand Down
72 changes: 41 additions & 31 deletions resources/css/about.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
position: absolute;
margin: 0 auto;
top: 0;
right: 18%;
right: 35px;
filter: grayscale(40%) brightness(60%);
z-index: -1;
max-width: 500px;
Expand Down Expand Up @@ -66,64 +66,74 @@ a.contact:hover {
}

/* Media Queries */
@media only screen and (max-width: 2380px) {
.about .profile {
right: 12%;
@media only screen and (min-width: 1024px) and (max-width: 1440px) {
.about {
margin-top: 25px;
}
}

@media only screen and (max-width: 2100px) {
.about .profile {
right: 8%;
.about div {
width: 70%;
}
}

@media only screen and (max-width: 1850px) {
.about .profile {
right: 4%;
.about h2 {
font-size: 3rem;
}
}

@media only screen and (max-width: 1700px) {
.about .profile {
right: 25px;
.about p {
width: 70%;
}
}

@media only screen and (max-width: 1250px) {
.about {
margin-top: 50px;
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.about .profile {
max-width: 300px;
}

.about div {
width: 70%;
width: 90%;
}

.about h2 {
font-size: 3rem;
font-size: 2rem;
}

.about p {
width: 70%;
}
}

@media only screen and (max-width: 1025px) {
@media only screen and (max-width: 767px) {
.about {
margin-top: 25px;
margin-top: 40px;
}

.about .profile {
max-width: 400px;
.about div {
max-width: 100%;
}
}

@media only screen and (max-width: 725px) {
.about .profile {
max-width: 300px;
width: 80%;
right: 10%;
left: 10%;
filter: grayscale(60%) brightness(40%);
}

.about div {
width: 70%;
.about h2 {
font-size: 2rem;
text-align: center;
}

.about p {
width: 100%;
}

.about map {
display: none;
}
}

@media only screen and (max-width: 500px) {
.about h2 {
font-size: 2rem;
font-size: 1.5rem;
}
}
41 changes: 41 additions & 0 deletions resources/css/footer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,44 @@ select:-webkit-autofill:focus {
font-weight: 600;
font-family: 'Raleway', Arial, Helvetica, sans-serif;
}

.footer-content form button:hover {
background-color: var(--footer);
cursor: pointer;
}

footer nav ul {
display: flex;
justify-content: center;
margin-top: 0;
}

footer ul li {
margin: 0 20px;
}

@media only screen and (max-width: 767px) {
.footer-content form input,
.footer-content form textarea {
width: 80%;
margin-inline: 10%;
}

.footer-content form button {
width: 40%;
margin-inline: auto;
}
}

@media only screen and (max-width: 500px) {
.footer-content form input,
.footer-content form textarea {
width: 100%;
margin-inline: auto;
}

.footer-content form button {
width: 60%;
margin-inline: auto;
}
}
37 changes: 35 additions & 2 deletions resources/css/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ h1 a:active {
color: var(--neutral);
}

nav {
header nav {
max-width: 600px;
}

nav ul {
header nav ul {
display: flex;
justify-content: space-evenly;
flex-wrap: nowrap;
Expand All @@ -27,3 +27,36 @@ nav ul {
nav ul li {
list-style: none;
}

@media only screen and (max-width: 767px) {
header {
flex-wrap: wrap;
padding: 10px;
}

header h1 {
white-space: nowrap;
}

header nav {
position: absolute;
right: 0;
}

header nav ul {
width: fit-content;
flex-direction: column;
margin: 0;
padding: 0;
}
}

@media only screen and (max-width: 500px) {
header nav {
top: 90px;
}

header nav ul {
flex-direction: row;
}
}
Loading

0 comments on commit 8ad389d

Please sign in to comment.