darkicewolf50/personal_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(next): started porting over from dioxus to nextjs

Browse Source
This commit is contained in:
darkicewolf50
2025-05-08 17:19:55 -06:00
parent 4f5eff6cdb
commit 0c1bd5218b
63 changed files with 11485 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
old dioxus/assets/styling/blog.css Normal file
View File

@ -0,0 +1,36 @@
#blog {
margin-top: 50px;
}
#blog a {
color: #ffffff;
margin-top: 50px;
}
#blogs {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 80svh;
}
#blogs h1 {
border-bottom: var(--underlineTitle);
border-radius: var(--underlineTitleBorderRadius);
}
#blogs button {
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
border: none;
color: #ffffff;
font-size: xx-large;
padding: 1rem;
}
#blogs a {
text-decoration: none;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
}

101
old dioxus/assets/styling/contact.css Normal file
View File

@ -0,0 +1,101 @@
#contact {
display: flex;
flex-direction: row;
gap: 2svw;
align-items: center;
justify-content: center;
}
#contact img {
border-radius: 100%;
max-height: 250px;
display: block;
background-color: var(--card-background-color);
padding: 0.5rem;
}
#contact div {
display: flex;
justify-content: center;
/* flex: 0 0 48%; */
}
#contact div div {
display: flex;
flex-direction: column;
flex-basis: auto;
}
#contact div ul {
display: flex;
flex-direction: column;
}
#contact div ul div {
display: flex;
flex-direction: row;
}
#contact a {
text-decoration: none;
color: inherit;
}
#contact h4 {
text-align: center;
margin-bottom: 0px;
}
#contact div ul {
list-style-type: none;
gap: 1svh;
padding: 0px;
}
#contact div ul li {
/* display: flex;
justify-content: flex-start; */
/* text-wrap: nowrap; */
padding-right: 1svw;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
/* border: 1px solid whitesmoke; */
padding: 0.5svh 1svw;
}
#contact div ul li a {
display: flex;
flex-direction: row;
align-items: center;
}
#contact div ul li a div {
display: flex;
flex-direction: column;
}
#contact ul li p {
padding: 0px;
margin: 0px;
}
#contact ul li img {
height: var(--img-width);
width: var(--img-height);
object-fit: contain;
border-radius: 0px;
background-color: transparent;
filter: invert() hue-rotate(180deg);
}
@media only screen and (max-width: 500px) {
#contact ul li img {
display: none;
}
#contact img {
border-radius: 100%;
max-width: 100%;
max-height: 250px;
display: block;
}
}

111
old dioxus/assets/styling/contactme.css Normal file
View File

@ -0,0 +1,111 @@
#ContactMe {
display: flex;
flex-flow: row wrap;
column-gap: 2svw;
row-gap: 4svh;
min-height: 70svh;
margin-top: 4svh;
justify-content: space-evenly;
}
#ContactMe div {
display: flex;
flex-grow: 1;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
flex-direction: column;
justify-content: center;
}
#ContactMe p {
margin: 2svh 2svw;
padding: 0svh 2svw;
}
#contact-me {
display: flex;
justify-content: center;
flex-direction: column;
background-color: transparent;
border-radius: 0px;
margin: 2svh 0.5svw;
padding: 0svh 1svw;
}
#contact-me input {
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
border-color: rgba(245, 245, 245, 0.5);
border-width: 2px;
padding: 1svh 0svw;
margin: 1svh 0.5svw;
color: inherit;
align-items: start;
}
#contact-me textarea {
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
border-color: rgba(245, 245, 245, 0.4);
border-width: 2px;
padding: 1svh 0svw;
margin: 1svh 0.5svw;
color: inherit;
align-items: start;
min-height: 25svh;
}
#contact-me button {
border-radius: var(--card-border-radius);
border-color: rgba(245, 245, 245, 0.5);
padding: 1svh 0svw;
margin: 1svh 0.5svw;
color: inherit;
align-items: start;
background-color: rgba(0, 128, 0, 0.6);
border-color: transparent;
}
#ContactMe form {
display: flex;
justify-content: center;
flex-direction: column;
background-color: transparent;
border-radius: 0px;
margin: 2svh 0.5svw;
padding: 0svh 1svw;
}
#ContactMe input {
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
border-color: rgba(245, 245, 245, 0.5);
border-width: 2px;
padding: 1svh 0svw;
margin: 1svh 0.5svw;
color: inherit;
align-items: start;
}
#ContactMe textarea {
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
border-color: rgba(245, 245, 245, 0.4);
border-width: 2px;
padding: 1svh 0svw;
margin: 1svh 0.5svw;
color: inherit;
align-items: start;
min-height: 25svh;
}
#ContactMe button {
border-radius: var(--card-border-radius);
border-color: rgba(245, 245, 245, 0.5);
padding: 1svh 0svw;
margin: 1svh 0.5svw;
color: inherit;
align-items: start;
background-color: rgba(0, 128, 0, 0.6);
border-color: transparent;
}

30
old dioxus/assets/styling/ender.css Normal file
View File

@ -0,0 +1,30 @@
footer {
display: flex;
flex-direction: column;
text-align: center;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
/* background-color: #d3d3d3; */
}
footer div {
display: flex;
flex-direction: row;
flex: 1 1 2;
justify-content: space-evenly;
}
footer img {
height: 60px;
filter: invert() hue-rotate(180deg);
}
footer a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: inherit;
}

86
old dioxus/assets/styling/experience.css Normal file
View File

@ -0,0 +1,86 @@
.experience-comp {
display: flex;
flex-direction: column;
flex-wrap: wrap;
/* flex-basis: 50%; */
}
.experience-comp h3 {
display: flex;
/* width: 90%; */
border-bottom: var(--underlineTitle);
border-radius: var(--underlineTitleBorderRadius);
margin: 2svh 2svw;
padding: 0svh 2svw;
padding-bottom: 1svh;
}
.experience-comp table {
border-collapse: separate;
border-spacing: 0svh 0px;
}
.experience-comp td {
position: relative;
margin: 0px;
padding: 0.25svh 2svw;
}
.experience-comp tr:nth-child(even) td {
padding-bottom: 2svh;
}
.postion {
text-wrap: nowrap;
}
.date-location {
text-wrap: nowrap;
}
.symbol {
position: relative;
width: 30px;
text-align: center;
}
.symbol[rowspan]::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background-color: rgb(120, 120, 120);
transform: translateX(-50%);
z-index: 0;
}
.symbol::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
z-index: 1;
}
.dot {
display: inline-block;
background-color: rgb(120, 120, 120);
border-radius: 100%;
width: 16px;
height: 16px;
line-height: 16px;
font-size: 12px;
font-weight: bold;
position: relative;
z-index: 2;
}
tr:nth-child(1) > .symbol::before {
top: 50%;
}
tr:nth-last-child(2) > .symbol::before {
bottom: 50%;
}

53
old dioxus/assets/styling/home.css Normal file
View File

@ -0,0 +1,53 @@
#home-intro {
display: flex;
flex-direction: column;
width: 90%;
margin-top: 2svh;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
}
#home-intro h1 {
border-bottom: var(--underlineTitle);
border-radius: var(--underlineTitleBorderRadius);
display: flex;
margin: 2svh 2svw;
padding: 0svh 2svw;
padding-bottom: 1svh;
}
#home-intro p {
margin: 1svh 4svw;
padding: 0svh 2svw;
padding-bottom: 1svh;
}
.technologies {
display: flex;
flex-direction: column;
}
.technologies-cat {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
column-gap: 1svw;
row-gap: 1svh;
}
#experience {
display: flex;
flex-direction: column;
margin-bottom: 4svh;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
}
#experience div {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
margin: 4svh 0px;
}

58
old dioxus/assets/styling/main.css Normal file
View File

@ -0,0 +1,58 @@
body {
background-color: #0f1116;
color: #ffffff;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
h2 {
border-bottom: var(--underlineTitle);
border-radius: var(--underlineTitleBorderRadius);
display: flex;
margin: 2svh 2svw;
padding: 0svh 2svw;
padding-bottom: 1svh;
}
/*
p {
width: 90%;
margin: 2svh 0px;
margin-left: 2svw;
padding-left: 2svw;
padding-bottom: 1svh;
} */
#hero {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#links {
width: 400px;
text-align: left;
font-size: x-large;
color: white;
display: flex;
flex-direction: column;
}
#links a {
color: white;
text-decoration: none;
margin-top: 20px;
margin: 10px 0px;
border: white 1px solid;
border-radius: 5px;
padding: 10px;
}
#links a:hover {
background-color: #1f1f1f;
cursor: pointer;
}
#header {
max-width: 1200px;
}

16
old dioxus/assets/styling/navbar.css Normal file
View File

@ -0,0 +1,16 @@
#navbar {
display: flex;
flex-direction: row;
}
#navbar a {
color: #ffffff;
margin-right: 20px;
text-decoration: none;
transition: color 0.2s ease;
}
#navbar a:hover {
cursor: pointer;
color: #91a4d2;
}

27
old dioxus/assets/styling/notFound.css Normal file
View File

@ -0,0 +1,27 @@
#not-found {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 80svh;
}
#not-found h1 {
border-bottom: var(--underlineTitle);
border-radius: var(--underlineTitleBorderRadius);
}
#not-found button {
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
border: none;
color: #ffffff;
font-size: xx-large;
padding: 1rem;
}
#not-found a {
text-decoration: none;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
}

99
old dioxus/assets/styling/projectCards.css Normal file
View File

@ -0,0 +1,99 @@
.project-section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 1svw;
}
.project-card {
flex: 0 1 30%;
margin-bottom: 3svh;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
}
@media only screen and (max-width: 800px) {
.project-card {
flex: 0 1 auto;
}
}
.project-card img {
max-width: 96%;
max-height: 200px;
justify-self: center;
margin: 0svh 1svw;
padding-top: 1svh;
object-fit: contain;
color: transparent;
display: flex;
}
.project-title-info {
display: flex;
flex-direction: row;
height: 50px;
border-bottom: var(--underlineTitle);
border-radius: var(--underlineTitleBorderRadius);
margin: 0px 2svw;
padding: 0px 2svw;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}
.project-title-info h3 {
margin: 0px;
text-align: start;
white-space: nowrap;
align-self: center;
font-weight: normal;
text-wrap: wrap;
border-radius: var(--underlineTitleBorderRadius);
}
.project-title-info img {
height: var(--img-width);
width: var(--img-height);
margin: 1svh 6px;
padding: 0px;
filter: invert() hue-rotate(180deg);
}
.project-title-info div {
display: flex;
gap: 1svw;
justify-content: flex-end;
border-bottom: none;
}
.project-card div p {
display: flex;
width: 90%;
justify-self: center;
text-align: start;
}
.project-tech-logos {
display: flex;
flex-flow: row wrap;
align-items: center;
align-self: center;
width: 90%;
justify-content: flex-start;
column-gap: 0.5svw;
row-gap: 1svw;
padding-left: 2svw;
padding-bottom: 1svh;
}
.project-tech-logos img {
aspect-ratio: 1;
height: var(--img-width);
width: var(--img-height);
/* flex: 0 1 19%; */
}

8
old dioxus/assets/styling/standardColoursandFonts.css Normal file
View File

@ -0,0 +1,8 @@
:root {
--underlineTitle: 4px solid purple;
--underlineTitleBorderRadius: 4px;
--img-width: 32px;
--img-height: 32px;
--card-background-color: rgba(38, 38, 38, 0.5);
--card-border-radius: 0.5rem;
}

85
old dioxus/assets/styling/techs.css Normal file
View File

@ -0,0 +1,85 @@
:root {
--tech-gap: 4svw;
}
.tech-cat {
/* border: 1px solid salmon; */
padding: 0px 1svw;
padding-bottom: 2svh;
margin-bottom: 3svh;
flex: 1 1 auto;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
}
.tech-cat h3 {
border-bottom: var(--underlineTitle);
border-radius: var(--underlineTitleBorderRadius);
display: flex;
margin: 2svh 2svw;
padding: 0svh 2svw;
padding-bottom: 1svh;
}
.tech-row {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
/* column-gap: 0.5svw; */
row-gap: 1svh;
}
.tech-card {
/* border: 1px solid whitesmoke; */
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
flex: 0 1 70px;
text-decoration: none;
color: inherit;
padding: 0px 0.5svw;
padding-top: 2svh;
padding-bottom: 0.5svh;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
}
.tech-card img {
width: 32px;
height: 32px;
aspect-ratio: 1;
object-fit: contain;
}
.tech-card progress {
width: 90%;
margin-bottom: 0.5svh;
overflow: hidden;
appearance: none;
border-radius: 999px;
justify-self: flex-end;
align-self: center;
}
.tech-card h4 {
margin: 1svh 0.5svw;
width: 80px;
text-align: center;
font-weight: normal;
}
/* for chromium browsers */
.tech-card progress::-webkit-progress-value {
background-color: steelblue;
/* border-radius: 999px; */
}
/* for firefox browsers */
.tech-card progress::-moz-progress-bar {
background-color: steelblue;
/* border-radius: 999px; */
}
/* 48.19 , 68.58*/