More design work and a new card

This commit is contained in:
Jessi McKissick
2026-06-16 00:24:04 -07:00
parent 41e1ab64fc
commit 0a8a091585
4 changed files with 212 additions and 128 deletions
+173 -11
View File
@@ -1,15 +1,177 @@
/* @import "tailwindcss";
@import "tailwindcss";
@theme {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
body{
padding: 0px;
margin: 0px;
background-color: rgb(231, 235, 237);
overflow-x: hidden;
}
html,
body {
@apply bg-white dark:bg-gray-950;
@media (prefers-color-scheme: dark) {
color-scheme: dark;
#Header{
color: white;
/* padding: 10px; */
background-color: rgb(43, 46, 208);
display: grid;
grid-template-columns: 70% 30%;
#title{
padding: 10px;
font-size: 2.7em;
}
} */
#main_nav{
text-align: center;
ul{
height: 100%;
display: grid;
/* grid-template-rows: 33% 33% 33%; */
grid-template-columns: 33% 33% 33%;
li{
grid-row: 2;
padding: 5px;
}
}
}
}
#content{
/* padding: 10px; */
#hero{
}
#sales_plate{
h3{
font-weight: bold;
}
padding: 1.2em;
text-align: center;
}
#info_shelf{
padding: 1em;
margin: 10px 0px 10px 0px;
#exec_summary{
background-color: rgb(255, 255, 255);
border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.26);
border: 2px solid black;
padding: 8px;
margin: 2px;
}
#engineering_dive{
background-color: rgb(255, 255, 255);
border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.26);
border: 2px solid black;
padding: 8px;
margin: 2px;
margin-top: 10px;
}
}
#service_plate{
#web_cms_plate{
display: grid;
grid-template-columns: 50% 50%;
/* background-color: aliceblue; */
/* border-radius: 5px; */
}
#alt_service_plate{
/* background-color: gainsboro; */
/* border-radius: 5px; */
margin-top: 10px;
display: grid;
grid-template-columns: 50% 50%;
}
.pricing{
font-weight: 500;
}
h3{
width: 100%;
font-size: 1.2em;
font-weight: bold;
padding-left: 0.2em;
}
padding: 1em;
#service_carousel{
display: grid;
grid-template-columns: 30% 30% 30% 30%;
overflow-x: scroll;
overflow-y: hidden;
align-items: center;
align-content: center;
text-align: center;
@media screen and (width <= 800px) {
display: inline;
}
div{
width: 90%;
margin: 0.2em;
height: 100%;
@media screen and (width <= 800px) {
width: 100%;
}
}
#bespoke_service_plate{
border-radius: 5px;
margin: 0.2em;
background-color: aliceblue;
align-items: center;
text-align: center;
padding: 1em;
h4{
font-weight: bold;
}
}
#CMS_service_plate{
border-radius: 5px;
margin: 0.2em;
background-color: aliceblue;
align-items: center;
text-align: center;
padding: 1em;
h4{
font-weight: bold;
}
}
#consulting_service_plate{
border-radius: 5px;
background-color: gainsboro;
margin: 0.2em;
text-align: center;
align-items: center;
padding: 1em;
}
#general_infotech_service_plate{
border-radius: 5px;
background-color: gainsboro;
margin: 0.2em;
text-align: center;
align-items: center;
padding: 1em;
}
h4{
font-weight: bold;
}
img{
border-radius: 5px;
}
}
}
.npo_info{
font-style: italic;
font-size: 0.83em;
}
}
img{
width: 100%;
}
+2 -2
View File
@@ -2,9 +2,9 @@
export default function Header(){
return(
<header>
<header id="Header">
<h1 id="title">J.M. Technical Services</h1>
<nav>
<nav id="main_nav">
<ul>
<li className="navitem">HOME</li>
<li className="navitem">ABOUT</li>
+24 -10
View File
@@ -14,7 +14,7 @@ export default function Home() {
<div id="app">
<Header />
<div id="content">
<img id="hero" alt="Hero Image"/>
<img id="hero" alt="Hero Image" src="https://placehold.co/1200x400/blue/gray?text=Hero+image+placeholder"/>
<hr />
<div id="sales_plate">
<h3>High performance web application architecture and custom CMS solutions. Over 10 years of experience delivering speed, security, and scale.</h3>
@@ -22,7 +22,7 @@ export default function Home() {
Lorem Ipsum Dolor sit amet blah blah
</p>
</div>
<div id="info shelf">
<div id="info_shelf">
<h3>Why my services?</h3>
<div id="exec_summary">
<h3>Business</h3>
@@ -50,26 +50,40 @@ export default function Home() {
<p>This site itself is a custom React application served via Node.js, built with Vite and Tailwind CSS.</p>
</div>
</div>
<hr />
<div id="service_plate">
<h3>Services</h3>
<div id="web_cms_plate">
{/* plates for bespoke services and CMS services. side by side*/}
<div id="service_carousel">
<div id="bespoke_service_plate">
<img alt="Bespoke Web Applications" />
<img alt="Bespoke Web Applications" src="https://placehold.co/600x600"/>
<h4>Bespoke Web Applications</h4>
<p>End-to-end fully custom application development for when off-the-shelf solutions don't cut it. <br />Engineered for scale, security, and complex business logic to ensure a perfect fit.</p>
<h5 className="pricing">Starting at $45/h</h5>
<p className="npo_info"><i>Discounted services are available for 501(c)(3) non-profit organizations.</i></p>
</div>
<div id="CMS_service plate">
<img alt="Advanced CMS services" />
<div id="CMS_service_plate">
<img alt="Advanced CMS services" src="https://placehold.co/600x600"/>
<h4>Comprehensive CMS solutions</h4>
<p>High performance sites built on platforms of your choice.
<br />Optimized for core vitals, SEO, and effortless management by your team after launch.</p>
<h5 className="pricing">Starting at $25/h</h5>
<p className="npo_info"><i>Discounted services are available for 501(c)(3) non-profit organizations.</i></p>
</div>
<div id="consulting_service_plate">
<img alt="consulting services" src="https://placehold.co/600x600"/>
<h4>Consulting Services</h4>
<p>Consulting services across various information technology topics including general I.T., software development, web development, tutoring, and beyond.</p>
<h5 className="pricing">Starting at $20/h</h5>
<p className="npo_info"><i>Discounted services are available for 501(c)(3) non-profit organizations.</i></p>
</div>
<div id="general_infotech_service_plate">
<img alt="General information technology services" src="https://placehold.co/600x600"/>
<h4>Generalist Services</h4>
<p>General information technology related services including but not limited to DNS configuration, VPS setup and hardening, security services, etc.</p>
<h5 className="pricing">Starting at $25/h</h5>
<p className="npo_info"><i>Discounted services are available for 501(c)(3) non-profit organizations.</i></p>
</div>
<div id="alt_service_plate">
{/* plates for secondary services like consultation, design, refactors, etc. */}
</div>
</div>
</div>
+12 -104
View File
@@ -55,6 +55,7 @@
"integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.29.7",
"@babel/generator": "^7.29.7",
@@ -487,29 +488,6 @@
"node": ">=6.9.0"
}
},
"node_modules/@emnapi/core": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
"integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
"dev": true,
"license": "MIT",
"optional": true,
"dependencies": {
"@emnapi/wasi-threads": "1.2.1",
"tslib": "^2.4.0"
}
},
"node_modules/@emnapi/runtime": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
"integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
"dev": true,
"license": "MIT",
"optional": true,
"dependencies": {
"tslib": "^2.4.0"
}
},
"node_modules/@emnapi/wasi-threads": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
@@ -1165,6 +1143,7 @@
"resolved": "https://registry.npmjs.org/@react-router/serve/-/serve-7.15.1.tgz",
"integrity": "sha512-x9rON/OtmfVKsc4OxZI0GzgZBVBhKvtJ2N1CuembFhH4c1lmZyK0kk7+rHUkVboM3vSevqxnLWs+SMRsp26xaw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@mjackson/node-fetch-server": "^0.2.0",
"@react-router/express": "7.15.1",
@@ -1285,9 +1264,6 @@
"arm64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1305,9 +1281,6 @@
"arm64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1325,9 +1298,6 @@
"ppc64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1345,9 +1315,6 @@
"s390x"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1365,9 +1332,6 @@
"x64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1385,9 +1349,6 @@
"x64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1566,9 +1527,6 @@
"arm"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1583,9 +1541,6 @@
"arm"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1600,9 +1555,6 @@
"arm64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1617,9 +1569,6 @@
"arm64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1634,9 +1583,6 @@
"loong64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1651,9 +1597,6 @@
"loong64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1668,9 +1611,6 @@
"ppc64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1685,9 +1625,6 @@
"ppc64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1702,9 +1639,6 @@
"riscv64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1719,9 +1653,6 @@
"riscv64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1736,9 +1667,6 @@
"s390x"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1753,9 +1681,6 @@
"x64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1770,9 +1695,6 @@
"x64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1996,9 +1918,6 @@
"arm64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -2016,9 +1935,6 @@
"arm64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -2036,9 +1952,6 @@
"x64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -2056,9 +1969,6 @@
"x64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -2171,6 +2081,7 @@
"integrity": "sha512-dyh/xO2Fh5bYrfWaaqGrRQQGkNdmYw6AmaAUvYeUMNTWQtvb796ikLdmTchRmOlOiIJ1TDXfWgVx1QkUlQ6Hew==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"undici-types": "~6.21.0"
}
@@ -2181,6 +2092,7 @@
"integrity": "sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"csstype": "^3.2.2"
}
@@ -2333,6 +2245,7 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.10.12",
"caniuse-lite": "^1.0.30001782",
@@ -2774,6 +2687,7 @@
"resolved": "https://registry.npmjs.org/express/-/express-4.22.2.tgz",
"integrity": "sha512-IuL+Elrou2ZvCFHs18/CIzy2Nzvo25nZ1/D2eIZlz7c+QUayAcYoiM2BthCjs+EBHVpjYjcuLDAiCWgeIX3X1Q==",
"license": "MIT",
"peer": true,
"dependencies": {
"accepts": "~1.3.8",
"array-flatten": "1.1.1",
@@ -3094,6 +3008,7 @@
"integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
"dev": true,
"license": "MIT",
"peer": true,
"bin": {
"jiti": "lib/jiti-cli.mjs"
}
@@ -3137,6 +3052,7 @@
"integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
"dev": true,
"license": "MPL-2.0",
"peer": true,
"dependencies": {
"detect-libc": "^2.0.3"
},
@@ -3274,9 +3190,6 @@
"arm64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MPL-2.0",
"optional": true,
"os": [
@@ -3298,9 +3211,6 @@
"arm64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MPL-2.0",
"optional": true,
"os": [
@@ -3322,9 +3232,6 @@
"x64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MPL-2.0",
"optional": true,
"os": [
@@ -3346,9 +3253,6 @@
"x64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MPL-2.0",
"optional": true,
"os": [
@@ -3814,6 +3718,7 @@
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.6.tgz",
"integrity": "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==",
"license": "MIT",
"peer": true,
"dependencies": {
"scheduler": "^0.27.0"
},
@@ -3836,6 +3741,7 @@
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.15.1.tgz",
"integrity": "sha512-R8rl9HhgikFYoPJymnUtPXWbnDb3oget6lQnfIoupbt61aT9aOhRkDsY2XRhZRyX1Z/8a5sL74fXmFNm3NRK5A==",
"license": "MIT",
"peer": true,
"dependencies": {
"cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0"
@@ -4254,6 +4160,7 @@
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"devOptional": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -4348,6 +4255,7 @@
"integrity": "sha512-s4BJJ+5y1pYL6Otw51FHhVJQhPnuRinKig64g/1+EUNaJsd3gCKdD31IPFvswUgW9/60QT9oFHbZHbQK5imcxw==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"lightningcss": "^1.32.0",
"picomatch": "^4.0.4",