SowinskiBraeden/.profile
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

update about me page styles

Browse Source
This commit is contained in:
SowinskiBraeden committed 2025-02-01 15:35:02 -08:00
1 parent 276095ff49
commit 0ebcf0f67f
6 files changed
+115 -124
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+1 -1
View File
@@ -1,4 +1,4 @@
<h1 align="center">Hey there!<img src="https://github.com/wervlad/wervlad/assets/24524555/766d336d-b87d-44ba-807c-c51de2bc6b4d" width="28px" alt="👋"></h1> <h1 align="center">Hey there!<img src="https://github.com/wervlad/wervlad/assets/24524555/766d336d-b87d-44ba-807c-c51de2bc6b4d" width="28pt" alt="👋"></h1>
<p align="center"> <p align="center">
<br> <br>
about.html
+5 -4
View File
@@ -96,6 +96,7 @@
<li><a href="https://www.python.org/" target="_blank">Python 3+</a></li> <li><a href="https://www.python.org/" target="_blank">Python 3+</a></li>
<li><a href="https://nodejs.org/en" target="_blank">Node.js</a></li> <li><a href="https://nodejs.org/en" target="_blank">Node.js</a></li>
<li><a href="https://go.dev/" target="_blank">Go</a></li> <li><a href="https://go.dev/" target="_blank">Go</a></li>
<li>Java</li>
<li>C</li> <li>C</li>
<li>Markdown</li> <li>Markdown</li>
<li>System Administration</li> <li>System Administration</li>
@@ -105,8 +106,7 @@
</section> </section>
</div> </div>
<div class="right-content"> <section class="about" id="about">
<section id="about">
<h3 class="title">About me</h3> <h3 class="title">About me</h3>
<p class="text"> <p class="text">
Hello there, Hello there,
@@ -121,7 +121,8 @@
will accomplish by quickly adapting to a new setting. will accomplish by quickly adapting to a new setting.
</p> </p>
</section> </section>
<section id="honors">
<section class="honors" id="honors">
<h3 class="title">Honors & Awards</h3> <h3 class="title">Honors & Awards</h3>
<dl> <dl>
@@ -140,6 +141,7 @@
— Exceeding expectationg in Software Engineering 11/12</dd> — Exceeding expectationg in Software Engineering 11/12</dd>
</dl> </dl>
</section> </section>
<footer class="footer flex-container"> <footer class="footer flex-container">
<p>Get in touch with me!</p> <p>Get in touch with me!</p>
<div class="social-icons"> <div class="social-icons">
@@ -175,7 +177,6 @@
</div> </div>
</footer> </footer>
</div> </div>
</div>
<!-- Import Mobile.js for mobile nav menu --> <!-- Import Mobile.js for mobile nav menu -->
<script src="./public/scripts/mobile.js"></script> <script src="./public/scripts/mobile.js"></script>
index.html
+2 -2
View File
@@ -78,10 +78,10 @@
<div id="main-wrapper" class="svg-wrapper"> <div id="main-wrapper" class="svg-wrapper">
<svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" class="shape" height="60" width="320" /> <rect x="0" y="0" class="shape" height="60" width="320" />
<h2 style="margin-top: 2px;" class="name">Braeden Sowinski</h2> <h2 style="margin-top: 2pt;" class="name">Braeden Sowinski</h2>
</svg> </svg>
</div> </div>
<h2 style="margin-top: 2px;" class="mobile-name">Braeden Sowinski</h2> <h2 style="margin-top: 2pt;" class="mobile-name">Braeden Sowinski</h2>
<span class="des">Software Engineer & System Administrator</span> <span class="des">Software Engineer & System Administrator</span>
<div class="social-icons"> <div class="social-icons">
<a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target=_blank rel="noopener noreferrer me" <a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target=_blank rel="noopener noreferrer me"
public/css/about.css
+43 -53
View File
@@ -2,33 +2,44 @@
.container { .container {
display: grid; display: grid;
grid-template-columns: 1fr 2fr; grid-template-areas:
gap: 24px; "pro about about about about about"
padding: 24px; "pro other other other other other"
padding-bottom: 0px; "footer footer footer footer footer footer";
/* border: 1px solid pink; */ gap: 24pt;
padding: 24pt;
}
.left-content {
grid-area: pro;
}
.about {
grid-area: about;
}
.honors {
grid-area: other;
}
.footer {
grid-area: footer;
} }
section { section {
transition: .8s; transition: .8s;
padding: 24px; padding: 24pt;
background-color: var(--menu-text-bg); background-color: var(--menu-text-bg);
border-radius: 12px; border-radius: 12pt;
margin-bottom: 24px;
} }
section h3 { section h3 {
margin-top: -5px; margin-top: -5pt;
}
.flex-container {
display: flex;
justify-content: space-between;
} }
.social-icons { .social-icons {
margin-top: 6px; margin-top: 6pt;
margin-right: 24px; margin-right: 24pt;
} }
#profile { #profile {
@@ -37,84 +48,63 @@ section h3 {
} }
#profile img { #profile img {
border: 6px solid var(--primary); border: 6pt solid var(--primary);
transition: .8s; transition: .8s;
} }
.profile-sub { .profile-sub {
background-color: rgba(0, 0, 0, .7); background-color: rgba(0, 0, 0, .7);
padding: 12px; padding: 12pt;
border-radius: 12px; border-radius: 12pt;
} }
dt { dt {
margin-top: 12px; margin-top: 12pt;
} }
.text { .text {
margin-right: 24px; margin-right: 24pt;
font-family: "Ubuntu", serif; font-family: "Ubuntu", serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
transition: .8s; transition: .8s;
} }
section ul {
margin-left: 20px;
}
footer { footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
transition: .8s; transition: .8s;
padding: 8px; padding: 8pt;
background-color: var(--menu-text-bg); background-color: var(--menu-text-bg);
border-radius: 12px; border-radius: 12pt;
} }
footer p { footer p {
margin-left: 12px; margin-left: 12pt;
font-family: "Ubuntu", serif; font-family: "Ubuntu", serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} margin-top: 20pt;
.social-icons {
margin-top: 6px;
margin-right: 24px;
}
#profile, #skills {
min-width: 275px;
} }
#profile { #profile {
border-bottom-right-radius: 0px; border-bottom-right-radius: 0pt;
border-bottom-left-radius: 0px; border-bottom-left-radius: 0pt;
margin-bottom: 0px; margin-bottom: 0pt;
} }
#skills { #skills {
border-top-right-radius: 0px; border-top-left-radius: 0pt;
border-top-left-radius: 0px; border-top-right-radius: 0pt;
margin-top: 0px;
} }
#about { @media only screen and (max-width: 740pt) {
min-height: 300px;
}
#honors {
min-height: 218px;
}
@media only screen and (max-width: 740px) {
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
#skills { #skills {
margin-bottom: 0px; margin-bottom: 0pt;
} }
} }
public/css/projects.css
+29 -29
View File
@@ -13,33 +13,33 @@
transition: 0.8s; transition: 0.8s;
width: 54vh; width: 54vh;
height: auto; height: auto;
margin: 30px; margin: 30pt;
padding: 20px; padding: 20pt;
background-color: var(--menu-text-bg); background-color: var(--menu-text-bg);
border-radius: 24px; border-radius: 24pt;
display: flex; display: flex;
} }
.box { .box {
transition: 0.8s; transition: 0.8s;
background-color: var(--theme); background-color: var(--theme);
border-radius: 12px; border-radius: 12pt;
padding-top: 12px; padding-top: 12pt;
padding-left: 12px; padding-left: 12pt;
padding-right: 12px; padding-right: 12pt;
} }
.content { .content {
transition: 0.8s; transition: 0.8s;
margin-left: 18px; margin-left: 18pt;
margin-right: 18px; margin-right: 18pt;
align-items: stretch; align-items: stretch;
} }
.content h2 { .content h2 {
transition: 0.8s; transition: 0.8s;
font-size: 275%; font-size: 275%;
margin-top: 5px; margin-top: 5pt;
font-family: "Sixtyfour Convergence", serif; font-family: "Sixtyfour Convergence", serif;
font-optical-sizing: auto; font-optical-sizing: auto;
font-weight: 400; font-weight: 400;
@@ -49,8 +49,8 @@
"SCAN" 0, "SCAN" 0,
"XELA" 0, "XELA" 0,
"YELA" 0; "YELA" 0;
margin-bottom: 0px; margin-bottom: 0pt;
text-shadow: 1px 1px 2px red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary); text-shadow: 1pt 1pt 2pt red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
min-width: 2.75cm; min-width: 2.75cm;
} }
@@ -60,7 +60,7 @@
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
text-transform: uppercase; text-transform: uppercase;
margin-top: 20px; margin-top: 20pt;
margin-left: 0.75cm; margin-left: 0.75cm;
} }
@@ -75,11 +75,11 @@
.content a { .content a {
background-color: var(--secondary); background-color: var(--secondary);
padding: 8px; padding: 8pt;
border-radius: 8px; border-radius: 8pt;
position: relative; position: relative;
box-shadow: 1px 1px 2px red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary); box-shadow: 1pt 1pt 2pt red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
margin-bottom: 15px; margin-bottom: 15pt;
} }
.content-head { .content-head {
@@ -98,9 +98,9 @@
} }
.content-body a { .content-body a {
margin-bottom: 15px; margin-bottom: 15pt;
text-align: center; text-align: center;
max-width: 100px; max-width: 100pt;
} }
.content-body #links { .content-body #links {
@@ -109,9 +109,9 @@
} }
#links a { #links a {
margin-bottom: 15px; margin-bottom: 15pt;
text-align: center; text-align: center;
width: 100px; width: 100pt;
} }
/* prevents it changing color */ /* prevents it changing color */
@@ -123,10 +123,10 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
transition: .8s; transition: .8s;
padding: 8px; padding: 8pt;
background-color: var(--menu-text-bg); background-color: var(--menu-text-bg);
border-radius: 12px; border-radius: 12pt;
margin-bottom: 24px; margin-bottom: 24pt;
width: 80vw; width: 80vw;
} }
@@ -134,20 +134,20 @@
font-family: "Ubuntu", serif; font-family: "Ubuntu", serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
margin-left: 12px; margin-left: 12pt;
} }
.social-icons { .social-icons {
margin-top: 6px; margin-top: 6pt;
margin-right: 24px; margin-right: 24pt;
} }
.content-body a:hover { .content-body a:hover {
background-color: #e4a295; background-color: #e4a295;
} }
@media only screen and (max-width: 544px) { @media only screen and (max-width: 544pt) {
.content-head h2 { .content-head h2 {
margin-top: 24px; margin-top: 24pt;
} }
} }
public/css/style.css
+35 -35
View File
@@ -58,21 +58,21 @@ ul {
ul li::before { ul li::before {
content: ''; content: '';
position: absolute; position: absolute;
margin-top: 42px; margin-top: 42pt;
width: 0; width: 0;
background-color: var(--secondary); background-color: var(--secondary);
z-index: 9999; z-index: 9999;
height: 3px; height: 3pt;
transition: 0.8s all; transition: 0.8s all;
} }
ul li#home-link:hover::before, ul li#home-link:hover::before,
ul li#about-link:hover::before { ul li#about-link:hover::before {
width: 45px; width: 45pt;
} }
ul li#projects-link:hover::before { ul li#projects-link:hover::before {
width: 58px; width: 58pt;
} }
a { a {
@@ -97,10 +97,10 @@ ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
max-width: calc(1024px + 24px * 2); max-width: calc(1024pt + 24pt * 2);
margin-inline-start: auto; margin-inline-start: auto;
margin-inline-end: auto; margin-inline-end: auto;
line-height: 60px; line-height: 60pt;
} }
.nav a { .nav a {
@@ -110,7 +110,7 @@ ul {
.logo, .logo,
#menu { #menu {
display: flex; display: flex;
margin: auto 24px; margin: auto 24pt;
} }
.logo { .logo {
@@ -127,8 +127,8 @@ ul {
vertical-align: middle; vertical-align: middle;
pointer-events: none; pointer-events: none;
transform: translate(0, -10%); transform: translate(0, -10%);
border-radius: 6px; border-radius: 6pt;
margin-inline-end: 8px margin-inline-end: 8pt
} }
#menu { #menu {
@@ -139,11 +139,11 @@ ul {
} }
#menu li+li { #menu li+li {
margin-inline-start: 24px; margin-inline-start: 24pt;
} }
#menu a { #menu a {
font-size: 16px font-size: 16px;
} }
#menu .active { #menu .active {
@@ -158,15 +158,15 @@ ul {
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 50%; width: 50%;
padding: 10px; padding: 10pt;
color: var(--primary); color: var(--primary);
} }
.svg-wrapper { .svg-wrapper {
margin: 0 auto; margin: 0 auto;
width: 320px; width: 320pt;
position: relative; position: relative;
height: 64px; height: 64pt;
overflow-y: hidden; overflow-y: hidden;
} }
@@ -174,14 +174,14 @@ ul {
z-index: 9999; z-index: 9999;
stroke-dasharray: 140 540; stroke-dasharray: 140 540;
stroke-dashoffset: -474; stroke-dashoffset: -474;
stroke-width: 8px; stroke-width: 8pt;
fill: transparent; fill: transparent;
stroke: var(--secondary); stroke: var(--secondary);
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s; transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
} }
.svg-wrapper:hover .shape { .svg-wrapper:hover .shape {
stroke-width: 2px; stroke-width: 2pt;
stroke-dashoffset: 0; stroke-dashoffset: 0;
stroke-dasharray: 760; stroke-dasharray: 760;
} }
@@ -190,8 +190,8 @@ ul {
transition: 0.8s; transition: 0.8s;
font-size: 30px; font-size: 30px;
font-weight: 900; font-weight: 900;
margin-bottom: 10px; margin-bottom: 10pt;
transform: translate(0, -64px); transform: translate(0, -64pt);
} }
.name:hover { .name:hover {
@@ -214,23 +214,23 @@ ul {
} }
.profile { .profile {
width: 190px; width: 190pt;
height: 190px; height: 190pt;
border-radius: 50%; border-radius: 50%;
transition: 0.8s; transition: 0.8s;
} }
.social-icons { .social-icons {
padding: 12px 0; padding: 12pt 0;
} }
.social-icons a:not(:last-of-type) { .social-icons a:not(:last-of-type) {
margin-inline-end: 12px; margin-inline-end: 12pt;
} }
.social-icons a svg { .social-icons a svg {
height: 26px; height: 26pt;
width: 26px; width: 26pt;
} }
.social-icons a { .social-icons a {
@@ -251,7 +251,7 @@ ul {
} }
#theme-toggle svg { #theme-toggle svg {
height: 18px; height: 18pt;
} }
button#theme-toggle { button#theme-toggle {
@@ -259,7 +259,7 @@ button#theme-toggle {
border: none; border: none;
color: var(--primary); color: var(--primary);
font-size: 26px; font-size: 26px;
margin: auto 4px; margin: auto 4pt;
transition: 0.8s; transition: 0.8s;
} }
@@ -319,7 +319,7 @@ body:not(.light) #sun {
.overlay a { .overlay a {
color: white; color: white;
text-decoration: none; text-decoration: none;
padding: 15px; padding: 15pt;
font-size: 36px; font-size: 36px;
display: block; display: block;
transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
@@ -332,8 +332,8 @@ body:not(.light) #sun {
.overlay .close { .overlay .close {
position: absolute; position: absolute;
top: 20px; top: 20pt;
right: 45px; right: 45pt;
font-size: 60px; font-size: 60px;
color: #edf0f1; color: #edf0f1;
cursor: pointer; cursor: pointer;
@@ -351,18 +351,18 @@ body:not(.light) #sun {
cursor: default; cursor: default;
} }
@media screen and (max-width:768px) { @media screen and (max-width:768pt) {
.profile img { .profile img {
transform: scale(.85); transform: scale(.85);
} }
.profile { .profile {
width: 128px; width: 128pt;
height: auto; height: auto;
} }
.first-entry { .first-entry {
min-height: 260px; min-height: 260pt;
} }
.archive-month { .archive-month {
@@ -370,15 +370,15 @@ body:not(.light) #sun {
} }
.archive-year { .archive-year {
margin-top: 20px; margin-top: 20pt;
} }
.footer { .footer {
padding: calc((60 - 24px - 10px)/2)24px; padding: calc((60 - 24pt - 10pt)/2)24pt;
} }
} }
@media only screen and (max-width: 740px) { @media only screen and (max-width: 740pt) {
.nav__links li a, .nav__links li a,
.svg-wrapper#main-wrapper { .svg-wrapper#main-wrapper {