Skip to content

Commit

Permalink
Add portfolio card
Browse files Browse the repository at this point in the history 
* Also adjust scaling of font and images throughout the whole page
  • Loading branch information
@tedgravlin
tedgravlin committed Apr 24, 2024
1 parent c314212 commit 80c8b57
Show file tree
Hide file tree
Showing 4 changed files with 250 additions and 23 deletions.
Binary file added assets/images/What-Should-I-Eat.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/neural-domain-validator.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
177 changes: 156 additions & 21 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
font-family: Arial;
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
--page-width: 65vw;
--page-width: calc(825px + 0.390625vw);
--body-bg-color: #0f0f0f;
--card-bg-color: #222;
--accent-color: #448D44;
Expand All @@ -22,27 +22,27 @@
/* ----- Body ----- */
body {
overflow: scroll;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 0;
margin: 0;
background-color: var(--body-bg-color);
background-image: radial-gradient(var(--accent-color), 1px, transparent 1px);
background-size: 5vh 5vh;
background-size: calc(30px + 0.390625vw) calc(30px + 0.390625vw);
}

main {
display: grid;
grid-template-columns: 100vw;
height: 100vh;
}

/* ----- Header ----- */
header {
font-family: productsans;
width: var(--page-width);
margin: auto auto 1em auto;
margin: 5.5em auto 1em auto;
color: white;
}

Expand Down Expand Up @@ -74,25 +74,31 @@ header img {

header h1 {
margin: 0;
font-size: 3.5vw;
font-size: calc(40px + 0.390625vw);
}

.header-name {
color: var(--accent-color);
}

/* ----- About/Project Container ----- */
div.main-content {
div.main-content,
div.portfolio {
width: var(--page-width);
margin: auto;
margin: auto auto 4em auto;
display: grid;
grid-template-columns: 35% 65%;
animation-name: enterFromBottom;
animation-duration: 1.5s;
}

div.portfolio {
grid-template-columns: 1fr;
animation-name: enterFromBottom;
}

div.card {
height: 41vh;
height: calc(290px + 0.390625vw);
border-radius: 32px;
padding: 2em;
background-color: var(--card-bg-color);
Expand All @@ -102,7 +108,7 @@ div.card {

div.card h3 {
margin-top: 0;
font-size: 2.25vh;
font-size: calc(13px + 0.390625vw);
color: var(--accent-color);
}

Expand All @@ -117,6 +123,10 @@ div.card h3 {
animation-duration: 1.5s;
}

.portfolio-section {
height: fit-content !important;
}

@keyframes enterFromLeft {
0% {
translate: -300px 0px 1px;
Expand All @@ -141,8 +151,8 @@ div.card h3 {
div.about-button-container {
display: grid;
grid-template-columns: 0.5fr 0.5fr;
column-gap: 1vh;
row-gap: 1vh;
column-gap: 0.5em;
row-gap: 0.5em;
}

a.button-background {
Expand All @@ -162,6 +172,11 @@ a.button-background {
color: black;
}

a.projects-button:hover {
background-color: var(--accent-color);
color: black;
}

a.button-background:hover img {
filter: var(--accent-filter-inverse);
}
Expand All @@ -174,7 +189,7 @@ div.button-contents {
grid-template-columns: 0.25fr min-content;
align-items: center;
column-gap: 0.25em;
font-size: 1vw;
font-size: calc(8px + 0.390625vw);
font-weight: bold;
}

Expand All @@ -186,17 +201,43 @@ div.button-contents img {
}

p.about-text {
font-size: 2.25vh;
font-size: calc(11px + 0.390625vw);
}

/* ----- Projects Card ----- */
div.project-card-container {
div.project-card-container,
div.portfolio-card-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 1em;
row-gap: 1em;
}

div.portfolio-card-container {
grid-template-columns: repeat(1, 1fr);
}

div.project-card-header {
display: grid;
grid-template-columns: 0.75fr 0.25fr;
width: 100%;
}

a.projects-button {
justify-content: center;
text-decoration: none;
background-color: var(--body-bg-color);
color: var(--accent-color);
border-radius: 24vw;
padding: 0.5em;
font-size: calc(20px + 0.390625vw);
font-weight: bold;
text-align: center;
height: min-content;
transition: background-color 0.25s ease-in;
will-change: background-color;
}

a.project-card {
width: 100%;
height: 100%;
Expand All @@ -205,6 +246,53 @@ a.project-card {
position: relative;
}

a.portfolio-card {
display: grid;
grid-template-columns: 0.35fr 0.65fr;
column-gap: 1em;
border: 2px solid rgba(255, 255, 255, 0.125);
border-radius: 24px;
text-decoration: none;
background-color: var(--body-bg-color);
will-change: transform;
transition: 0.25s;
}

a.portfolio-card h4 {
margin-bottom: 1em;
}

a.portfolio-card p {
margin-top: 0;
}

a.portfolio-card img {
width: 100%;
border-radius: 22px;
}

div.portfolio-card-info * {
color: var(--text-color);
}

div.technology-pill-container {
display: grid;
grid-template-columns: repeat(6, auto);
width: fit-content;
column-gap: 0.5em;
}

div.technology-pill-container p {
width: fit-content;
padding: 0.5em 1em 0.5em 1em;
border: 2px solid;
border-radius: 24px;
font-size: calc(8px + 0.390625vw);
border-color: var(--accent-color);
color: var(--accent-color);
margin: 0;
}

a.project-card img {
border-radius: 24px;
width: 100%;
Expand All @@ -214,7 +302,7 @@ a.project-card img {

a.project-card h4 {
margin-top: 0.5em;
font-size: 1vw;
font-size: calc(8px + 0.390625vw);
}

div.project-overlay {
Expand Down Expand Up @@ -242,12 +330,16 @@ div.project-overlay {
a.project-card:hover div.project-overlay {
opacity: 1;
}

a.portfolio-card:hover {
transform: scale(102%);
}
}

div.project-info {
text-align: center;
padding: 1em;
font-size: 0.9vw;
font-size: calc(7px + 0.390625vw);
}

/* Hide scrollbar for Chrome, Safari and Opera */
Expand All @@ -264,21 +356,30 @@ div.card {
/* Firefox */
}

footer {
text-align: center;
color: var(--accent-color)
}

/* Mobile layout */
@media (max-width: 500px) {
@media (max-width: 700px) {
:root {
--page-width: 90vw;
}

body {
display: block;
background-size: 4vh 4vh;
background-size: calc(35px + 0.390625vw) calc(35px + 0.390625vw);
}

main {
grid-template-columns: 1fr;
}

p.about-text {
font-size: calc(15px + 0.390625vw);
}

div.header-card {
column-gap: 1em;
padding: 1em;
Expand All @@ -295,45 +396,79 @@ div.card {
}

header h1 {
font-size: 6vw;
font-size: calc(25px + 0.390625vw);
}

div.main-content {
grid-template-columns: 1fr;
row-gap: 1em;
will-change: translate;
animation-duration: 1s;
margin-bottom: 0;
}

div.card {
height: fit-content;
}

div.card h3 {
font-size: calc(15px + 0.390625vw);
}

div.project-card-header h3,
div.portfolio-section h3 {
padding-left: 0.5em;
}

.left {
animation-name: enterFromBottom;
animation-duration: 1s;
}

.right {
padding: 2em 1em 2em 1em !important;
margin-left: 0;
margin-bottom: 2em;
animation-duration: 1.25s;
}

div.project-card-container {
div.portfolio-section {
padding: 2em 1em 2em 1em !important;
}

a.portfolio-card {
grid-template-columns: 1fr;
}

div.technology-pill-container p {
font-size: calc(9px + 0.390625vw);
font-weight: bold;
}

div.portfolio-card-info {
padding: 0em 1em 1em 1em;
}

div.project-card-container {
grid-template-columns: 1fr 1fr;
}

div.button-contents {
font-size: calc(11px + 0.390625vw);
}

a.projects-button {
font-size: 3vw;
width: fit-content;
white-space: nowrap;
}

div.button-contents img {
width: 5vw;
}
}

/* Portrait tablet layout */
/* Portrait tablet layout */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
:root {
--page-width: 80vw;
Expand Down
Loading

0 comments on commit 80c8b57

Please sign in to comment.