Skip to content

Commit 9375d8c

Browse files
johnpatekjohnpatek
committed
trying again
1 parent 90dcef8 commit 9375d8c

File tree

6 files changed

+152
-47
lines changed

6 files changed

+152
-47
lines changed

‎index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
76
<title>Vite + React</title>
87
</head>

‎src/App.css‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
#root {
2-
max-width: 1280px;
3-
margin: 0 auto;
2+
margin: 0;
43
padding: 2rem;
5-
text-align: center;
4+
width: 100%;
65
}
76

87
.logo {
@@ -11,32 +10,35 @@
1110
will-change: filter;
1211
transition: filter 300ms;
1312
}
14-
.logo:hover {
15-
filter: drop-shadow(0 0 2em #646cffaa);
16-
}
17-
.logo.react:hover {
18-
filter: drop-shadow(0 0 2em #61dafbaa);
19-
}
20-
21-
@keyframes logo-spin {
22-
from {
23-
transform: rotate(0deg);
24-
}
25-
to {
26-
transform: rotate(360deg);
27-
}
28-
}
2913

30-
@media (prefers-reduced-motion: no-preference) {
31-
a:nth-of-type(2) .logo {
32-
animation: logo-spin infinite 20s linear;
33-
}
14+
.logo-container {
15+
display: flex;
16+
justify-content: center;
17+
gap: 1rem; /* spacing between img and text */
3418
}
3519

3620
.card {
3721
padding: 2em;
22+
text-align: left;
3823
}
3924

40-
.read-the-docs {
41-
color: #888;
25+
.container * {
26+
text-align: left;
4227
}
28+
29+
.container {
30+
display: flex;
31+
justify-content: center;
32+
gap: 1rem;
33+
padding: 1rem;
34+
align-items: flex-start;
35+
}
36+
37+
.box {
38+
flex: 1;
39+
min-width: 250px;
40+
padding: 1rem;
41+
border: 1px solid #ccc;
42+
border-radius: 8px;
43+
text-align: left; /* ensures text in each box is left-aligned */
44+
}

‎src/App.jsx‎

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,40 @@
1-
import { useState } from 'react'
2-
import reactLogo from './assets/react.svg'
3-
import viteLogo from '/vite.svg'
1+
import ContactForm from './ContactForm';
2+
import ProjectList from './ProjectList';
3+
import maxtekLogo from './assets/logo.jpeg'
44
import './App.css'
55

66
function App() {
7-
const [count, setCount] = useState(0)
87

98
return (
109
<>
11-
<div>
12-
<a href="https://vite.dev" target="_blank">
13-
<img src={viteLogo} className="logo" alt="Vite logo" />
14-
</a>
15-
<a href="https://react.dev" target="_blank">
16-
<img src={reactLogo} className="logo react" alt="React logo" />
17-
</a>
10+
<title>Maxtek Consulting</title>
11+
<div className="logo-container">
12+
<img src={maxtekLogo} className="logo" alt="Maxtek logo" />
13+
<h1>Maxtek Consulting</h1>
1814
</div>
19-
<h1>Vite + React</h1>
20-
<div className="card">
21-
<button onClick={() => setCount((count) => count + 1)}>
22-
count is {count}
23-
</button>
24-
<p>
25-
Edit <code>src/App.jsx</code> and save to test HMR
26-
</p>
15+
16+
<div className="container">
17+
<div className="box">
18+
<h2>Items</h2>
19+
<p>We can provide expertise in the following areas:</p>
20+
<ul>
21+
<li>C, C++, and Go</li>
22+
<li>CMake build systems</li>
23+
<li>Linux kernel development</li>
24+
<li>Embedded systems</li>
25+
<li>Open source projects</li>
26+
<li>CI/CD integration</li>
27+
</ul>
2728
</div>
28-
<p className="read-the-docs">
29-
Click on the Vite and React logos to learn more
30-
</p>
29+
<div className="box">
30+
<h2>Projects</h2>
31+
<p>Here are some of our active projects:</p>
32+
<ProjectList />
33+
</div>
34+
<div className="box">
35+
<ContactForm />
36+
</div>
37+
</div>
3138
</>
3239
)
3340
}

‎src/ContactForm.jsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { useState } from 'react';
2+
3+
function ContactForm() {
4+
const [form, setForm] = useState({ name: '', email: '', message: '' });
5+
const [submitting, setSubmitting] = useState(false);
6+
const [status, setStatus] = useState('');
7+
8+
const handleChange = (e) => {
9+
setForm({ ...form, [e.target.name]: e.target.value });
10+
};
11+
12+
const isComplete = form.name && form.email && form.message;
13+
14+
const handleSubmit = async (e) => {
15+
e.preventDefault();
16+
setSubmitting(true);
17+
setStatus('');
18+
19+
try {
20+
const response = await fetch('https://script.google.com/macros/s/AKfycby8qBWrMlQ-uJ3uItcoKy5_E38E9mUsOKv6m1bNQ4sG6sZHiVq1ymY8ZLhfbPGGgVW5Fg/exec', {
21+
method: 'POST',
22+
redirect: "follow",
23+
headers: { 'Content-Type': 'text/plain;charset=utf-8' },
24+
body: JSON.stringify(form),
25+
});
26+
if (response.ok) {
27+
setStatus('Thanks for contacting us!');
28+
setForm({ name: '', email: '', message: '' });
29+
} else {
30+
setStatus('Submission failed.');
31+
}
32+
} catch (error) {
33+
console.error(error);
34+
setStatus('Something went wrong.');
35+
} finally {
36+
setSubmitting(false);
37+
}
38+
};
39+
40+
return (
41+
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '400px' }}>
42+
<h2>Contact</h2>
43+
<p>For help with custom software or open source development.</p>
44+
<input
45+
type="text"
46+
name="name"
47+
placeholder="Your Name"
48+
value={form.name}
49+
onChange={handleChange}
50+
required
51+
/>
52+
<input
53+
type="email"
54+
name="email"
55+
placeholder="Your Email"
56+
value={form.email}
57+
onChange={handleChange}
58+
required
59+
/>
60+
<textarea
61+
name="message"
62+
placeholder="How can we help you?"
63+
value={form.message}
64+
onChange={handleChange}
65+
required
66+
/>
67+
<button type="submit" disabled={!isComplete || submitting}>
68+
Submit
69+
</button>
70+
{status && <p>{status}</p>}
71+
</form>
72+
);
73+
}
74+
75+
export default ContactForm;

‎src/ProjectList.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { useState } from 'react';
2+
3+
4+
const projects = {
5+
"sigfn": "bind functions to signals.",
6+
"threadpool": "maxtek threadpool library.",
7+
"hyperpage": "Fast and efficient solution for storing static content."
8+
};
9+
10+
function ProjectList() {
11+
return (
12+
<ul>
13+
{Object.entries(projects).map(([name, description]) => (
14+
<li key={name}>
15+
<a href={`https://github.com/maxtek6/${name}`}>{name}</a>: {description}
16+
</li>
17+
))}
18+
</ul>
19+
);
20+
}
21+
22+
export default ProjectList;

‎src/assets/logo.jpeg‎

23.3 KB
Loading

0 commit comments

Comments
 (0)