this repo has no description
www.baileykane.co/
Revamp! Add more explainer info, separate into two columns
+84
-20
+84
-20
pages/index.js
+84
-20
pages/index.js
···
2
2
import BaseLayout from "../components/BaseLayout";
3
3
import SectionList from "../components/SectionList";
4
4
import { importCSVDataAsJson } from "../lib/sheetsConnector";
5
+
import Link from "next/link";
5
6
6
7
export default function Home({ sectionsList }) {
7
8
return (
8
9
<BaseLayout navbarVisible={false} className="">
9
-
<div className="w-full flex flex-col items-center relative z-10">
10
-
<div className="h-full w-full max-w-md space-y-4">
11
-
<h1>Hello hello, this is Bailey speaking.</h1>
12
-
<div className="prose prose-stone dark:prose-invert">
13
-
Welcome to the home of my many interests, half-baked projects, and
14
-
digital representations of myself.
15
-
<br />
16
-
<br />
17
-
Hope you enjoy.
10
+
<div className="max-w-5xl mx-auto w-full grid grid-cols-1 sm:grid-cols-2 gap-6">
11
+
<div>
12
+
<h1 className="mb-2">Hello hello, this is Bailey speaking.</h1>
13
+
<div className="prose prose-stone dark:prose-invert prose-a:no-underline">
14
+
<p>
15
+
I help small business owners{" "}
16
+
<b>solve problems with technology,</b> so they can{" "}
17
+
<b>reclaim their time</b> and{" "}
18
+
<b>focus on the things that matter</b>. Contact me at{" "}
19
+
<a href="mailto:bailey.orion.kane@gmail.com" target="_blank">
20
+
<code className="underline">bailey.orion.kane@gmail.com</code>
21
+
</a>
22
+
.
23
+
</p>
24
+
<p>Some things I do:</p>
25
+
<ul className="list-disc list-inside">
26
+
<li>
27
+
<b>Build websites</b> for marketing, portfolios, or other
28
+
information
29
+
</li>
30
+
<li>
31
+
<b>Create bespoke tools</b> and systems to work more efficiently
32
+
</li>
33
+
<li>
34
+
<b>Connect systems</b> and tools together
35
+
</li>
36
+
</ul>
37
+
<div className="mx-auto not-prose">
38
+
<Link href={"/projects"} className="rounded-lg">
39
+
<p
40
+
className="w-full text-center px-4 py-2 font-semibold text-stone-900 dark:text-white
41
+
bg-gradient-to-r from-purple-200 to-orange-100 dark:from-purple-500 dark:to-orange-300
42
+
border border-stone-800 dark:border-stone-200 rounded-lg group transition hover:scale-105"
43
+
>
44
+
Example projects →
45
+
</p>
46
+
</Link>
47
+
</div>
48
+
<p>
49
+
I enjoy working with <b>small business owners and individuals</b>.
50
+
Even more fun if they work in{" "}
51
+
<span className="underline decoration-green-700 dark:decoration-green-400">
52
+
climate
53
+
</span>
54
+
,{" "}
55
+
<span className="underline decoration-purple-700 dark:decoration-purple-400">
56
+
arts
57
+
</span>
58
+
,{" "}
59
+
<span className="underline decoration-orange-600 dark:decoration-orange-400">
60
+
music
61
+
</span>
62
+
, or{" "}
63
+
<span className="underline decoration-blue-700 dark:decoration-blue-400">
64
+
education
65
+
</span>
66
+
.
67
+
</p>
68
+
<p>
69
+
If this sounds like you and you might have a project to work on
70
+
together, or you just want to say hi, please get in touch.
71
+
</p>
72
+
<p>Talk to you soon 👋</p>
18
73
</div>
19
-
<SectionList className="item-list flex flex-col">
20
-
{sectionsList.data.map((section, k) => (
21
-
<HomeSectionItem
22
-
link={section.link ? section.link : section.name.toLowerCase()}
23
-
name={section.name}
24
-
description={section.description}
25
-
emoji={section.emoji}
26
-
key={k}
27
-
/>
28
-
))}
29
-
</SectionList>
74
+
</div>
75
+
<div className="py-6 px-2 sm:px-4 rounded-lg bg-stone-100 dark:bg-stone-800 w-full flex flex-col relative z-10">
76
+
<h3 className="text-stone-600 dark:text-stone-400 mb-2 border-b border-b-stone-400 dark:border-b-stone-500">
77
+
Please, take a gander
78
+
</h3>
79
+
<div className="h-full w-full items-center space-y-4">
80
+
<SectionList className="item-list flex flex-col">
81
+
{sectionsList.data.map((section, k) => (
82
+
<HomeSectionItem
83
+
link={
84
+
section.link ? section.link : section.name.toLowerCase()
85
+
}
86
+
name={section.name}
87
+
description={section.description}
88
+
emoji={section.emoji}
89
+
key={k}
90
+
/>
91
+
))}
92
+
</SectionList>
93
+
</div>
30
94
</div>
31
95
</div>
32
96
</BaseLayout>