diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css index 91641c3..dd89f9c 100644 --- a/htdocs/assets/style.css +++ b/htdocs/assets/style.css @@ -809,10 +809,6 @@ video { margin-top: 2.2rem; } -.mb-2 { - margin-bottom: 0.5rem; -} - .flex { display: flex; } @@ -926,10 +922,6 @@ video { width: 100vw; } -.w-\[252px\] { - width: 252px; -} - .rotate-\[15deg\] { --tw-rotate: 15deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1021,8 +1013,8 @@ video { border-radius: 0.125rem; } -.rounded { - border-radius: 0.25rem; +.border-\[1px\] { + border-width: 1px; } .border-\[2px\] { @@ -1033,14 +1025,6 @@ video { border-width: 5px; } -.border-\[1px\] { - border-width: 1px; -} - -.border-2 { - border-width: 2px; -} - .border-b-\[2px\] { border-bottom-width: 2px; } @@ -1062,18 +1046,13 @@ video { border-color: rgba(56, 189, 248, 0.30); } -.border-accent_secondary_transparent { - border-color: rgba(255, 255, 255, 0.30); -} - .border-accent_secondary { --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity)); } -.border-bg_primary { - --tw-border-opacity: 1; - border-color: rgb(15 23 42 / var(--tw-border-opacity)); +.border-accent_secondary_transparent { + border-color: rgba(255, 255, 255, 0.30); } .border-accent_three { @@ -1115,48 +1094,22 @@ video { background-color: rgb(30 41 59 / var(--tw-bg-opacity)); } -.bg-\[rgba\(0\2c 0\2c 0\2c 0\)\] { - background-color: rgba(0,0,0,0); -} - .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } -.bg-gradient-to-l { - background-image: linear-gradient(to left, var(--tw-gradient-stops)); -} - .from-accent_secondary_transparent { --tw-gradient-from: rgba(255, 255, 255, 0.30) var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-accent_primary { - --tw-gradient-from: #38BDF8 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(56 189 248 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - .from-bg_third { --tw-gradient-from: #26334A var(--tw-gradient-from-position); --tw-gradient-to: rgb(38 51 74 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-bg_primary { - --tw-gradient-from: #0F172A var(--tw-gradient-from-position); - --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.from-accent_secondary { - --tw-gradient-from: #FFFFFF var(--tw-gradient-from-position); - --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - .p-10 { padding: 2.5rem; } @@ -1219,21 +1172,16 @@ video { padding-bottom: 1.25rem; } -.py-\[0\.30rem\] { - padding-top: 0.30rem; - padding-bottom: 0.30rem; -} - -.py-\[0\.20rem\] { - padding-top: 0.20rem; - padding-bottom: 0.20rem; -} - .py-\[0\.15rem\] { padding-top: 0.15rem; padding-bottom: 0.15rem; } +.py-\[0\.30rem\] { + padding-top: 0.30rem; + padding-bottom: 0.30rem; +} + .font-cormorant { font-family: "Cormorant Upright", serif; } @@ -1286,6 +1234,10 @@ video { line-height: 1rem; } +.font-\[300\] { + font-weight: 300; +} + .font-bold { font-weight: 700; } @@ -1298,10 +1250,6 @@ video { font-weight: 400; } -.font-\[300\] { - font-weight: 300; -} - .text-\[\#38BDF8\] { --tw-text-opacity: 1; color: rgb(56 189 248 / var(--tw-text-opacity)); @@ -1368,10 +1316,6 @@ video { opacity: 0.75; } -.opacity-0 { - opacity: 0; -} - .shadow-\[0px_0px_100px_10px\] { --tw-shadow: 0px 0px 100px 10px; --tw-shadow-colored: 0px 0px 100px 10px var(--tw-shadow-color); @@ -1442,26 +1386,14 @@ video { transition-duration: 150ms; } -.transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - .transition-\[border-width\] { transition-property: border-width; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } -.transition-\[background-image\] { - transition-property: background-image; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-\[opacity\] { - transition-property: opacity; +.transition-all { + transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -1478,10 +1410,6 @@ video { transition-duration: 500ms; } -.duration-200 { - transition-duration: 200ms; -} - .last\:mb-3:last-child { margin-bottom: 0.75rem; } @@ -1492,24 +1420,12 @@ video { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.hover\:transform:hover { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.hover\:rounded-lg:hover { - border-radius: 0.5rem; -} - .hover\:rounded:hover { border-radius: 0.25rem; } -.hover\:border-2:hover { - border-width: 2px; -} - -.hover\:border-\[5px\]:hover { - border-width: 5px; +.hover\:rounded-lg:hover { + border-radius: 0.5rem; } .hover\:border-\[3px\]:hover { @@ -1521,11 +1437,6 @@ video { border-color: rgb(56 189 248 / var(--tw-border-opacity)); } -.hover\:border-accent_secondary:hover { - --tw-border-opacity: 1; - border-color: rgb(255 255 255 / var(--tw-border-opacity)); -} - .hover\:bg-accent_secondary:hover { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -1536,12 +1447,6 @@ video { background-color: rgb(38 51 74 / var(--tw-bg-opacity)); } -.hover\:from-accent_primary:hover { - --tw-gradient-from: #38BDF8 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(56 189 248 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - .hover\:text-accent_secondary:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -1553,12 +1458,6 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.hover\:shadow:hover { - --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .hover\:shadow-accent_primary_transparent:hover { --tw-shadow-color: rgba(56, 189, 248, 0.30); --tw-shadow: var(--tw-shadow-colored); @@ -1569,18 +1468,6 @@ video { --tw-shadow: var(--tw-shadow-colored); } -.hover\:transition:hover { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.hover\:duration-500:hover { - transition-duration: 500ms; -} - .group:hover .group-hover\:flex { display: flex; } @@ -1589,41 +1476,11 @@ video { width: 100%; } -.group:hover .group-hover\:transform { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .group:hover .group-hover\:bg-accent_secondary { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.group:hover .group-hover\:bg-gradient-to-r { - background-image: linear-gradient(to right, var(--tw-gradient-stops)); -} - -.group:hover .group-hover\:from-bg_third { - --tw-gradient-from: #26334A var(--tw-gradient-from-position); - --tw-gradient-to: rgb(38 51 74 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - -.group:hover .group-hover\:opacity-100 { - opacity: 1; -} - -.group:hover .group-hover\:transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.group:hover .group-hover\:duration-500 { - transition-duration: 500ms; -} - @media (min-width: 1024px) { .lg\:bottom-\[-6rem\] { bottom: -6rem; diff --git a/htdocs/projects.php b/htdocs/projects.php index 32366ef..22eae25 100644 --- a/htdocs/projects.php +++ b/htdocs/projects.php @@ -20,6 +20,13 @@ function fetch_projects_by_year($conn, $year) { $result = $conn -> query($sql); return $result; } + +//function to fetch top 2 featured projects for sidebar +function fetch_featured_projects_sidebar($conn) { + $sql = "SELECT * FROM featured_projects LIMIT 2"; + $result = $conn -> query($sql); + return $result; +} ?> @@ -138,22 +145,26 @@ function fetch_projects_by_year($conn, $year) {
Featured Projects
-
- - fantasywalls -
-
- - prourl -
+ num_rows > 0){ + while($featured_item = $featured_projects -> fetch_assoc()) { + echo " +
+ + ".strtolower($featured_item[ +
+ "; + } + } + + ?>
Currently Working On