Skip to content

Commit 78f94a6

Browse files
joelpaulkochjoelpaulkoch
committed
Add socials on home page and footer
1 parent 50ab12c commit 78f94a6

File tree

4 files changed

+108
-26
lines changed

4 files changed

+108
-26
lines changed

‎assets/css/footer.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.footer {
2+
--min: 15ch;
23
padding-block: var(--s2);
34
}

‎assets/css/global.css

+5
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,11 @@ a {
7272
&:hover {
7373
text-decoration-thickness: var(--s-5);
7474
}
75+
76+
&:link,
77+
&:visited {
78+
color: var(--text-color);
79+
}
7580
}
7681

7782
img {

‎lib/components.ex

+69-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ defmodule JoelKoch.Dev.Components do
66
def footer(assigns) do
77
~H"""
88
<footer class={["grid | footer", @class]}>
9-
© 2024 Joël Koch
9+
<span>© 2024 Joël Koch</span>
10+
<.socials />
1011
<a href="https://github.com/elixir-tools/tableau">
1112
Built with Tableau
1213
</a>
@@ -47,4 +48,71 @@ defmodule JoelKoch.Dev.Components do
4748
</article>
4849
"""
4950
end
51+
52+
def socials(assigns) do
53+
~H"""
54+
<ul class="cluster" role="list">
55+
<li>
56+
<a class="transitions rotate" href="https://elixirforum.com/u/joelpaulkoch/">
57+
<svg
58+
role="img"
59+
viewBox="0 0 24 24"
60+
xmlns="http://www.w3.org/2000/svg"
61+
class="icon"
62+
width="1.25em"
63+
height="1.25em"
64+
stroke="none"
65+
fill="currentColor"
66+
>
67+
<title>Elixir</title>
68+
<path d="M19.793 16.575c0 3.752-2.927 7.426-7.743 7.426-5.249 0-7.843-3.71-7.843-8.29 0-5.21 3.892-12.952 8-15.647a.397.397 0 0 1 .61.371 9.716 9.716 0 0 0 1.694 6.518c.522.795 1.092 1.478 1.763 2.352.94 1.227 1.637 1.906 2.644 3.842l.015.028a7.107 7.107 0 0 1 .86 3.4z" />
69+
</svg>
70+
</a>
71+
</li>
72+
<li>
73+
<a
74+
class="transitions rotate"
75+
href="https://bsky.app/profile/joelkoch.dev"
76+
style="display: box;"
77+
>
78+
<svg
79+
role="img"
80+
viewBox="0 0 24 24"
81+
xmlns="http://www.w3.org/2000/svg"
82+
class="icon"
83+
width="1.25em"
84+
height="1.25em"
85+
stroke="none"
86+
fill="currentColor"
87+
>
88+
<title>Bluesky</title>
89+
<path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" />
90+
</svg>
91+
</a>
92+
</li>
93+
<li>
94+
<a class="transitions rotate" href="mailto:[email protected]">
95+
<Heroicons.envelope solid class="icon" width="1.25em" height="1.25em" />
96+
</a>
97+
</li>
98+
<li>
99+
<a class="transitions rotate" href="https://www.linkedin.com/in/joelpaulkoch/">
100+
<svg
101+
role="img"
102+
viewBox="0 0 24 24"
103+
xmlns="http://www.w3.org/2000/svg"
104+
class="icon"
105+
width="1.25em"
106+
height="1.25em"
107+
stroke="none"
108+
fill="currentColor"
109+
>
110+
<title>LinkedIn</title>
111+
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
112+
</svg>
113+
</a>
114+
</li>
115+
</ul>
116+
"""
117+
end
50118
end

‎lib/pages/home_page.ex

+33-25
Original file line numberDiff line numberDiff line change
@@ -23,42 +23,50 @@ defmodule JoelKoch.Dev.HomePage do
2323
This is me, Joël
2424
</h1>
2525
<p>
26-
Happy to code for fun and a living.
26+
I really appreciate that I can spend a lot of my time coding, whether it's for fun or to make a living.
27+
So, you'll find coding related content on my website.
2728
</p>
2829
<ol role="list" class="flow">
2930
<li>
31+
<svg
32+
class="icon"
33+
aria-hidden="true"
34+
width="1.25em"
35+
height="1.25em"
36+
stroke="currentColor"
37+
stroke-width="1"
38+
viewBox="0 0 100 100"
39+
xmlns="http://www.w3.org/2000/svg"
40+
>
41+
<path
42+
fill-rule="evenodd"
43+
clip-rule="evenodd"
44+
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
45+
fill="currentColor"
46+
/>
47+
</svg>
3048
<a href="https://github.com/joelpaulkoch">
31-
<svg
32-
class="icon"
33-
aria-hidden="true"
34-
width="1.25em"
35-
height="1.25em"
36-
stroke="currentColor"
37-
stroke-width="1"
38-
viewBox="0 0 100 100"
39-
xmlns="http://www.w3.org/2000/svg"
40-
>
41-
<path
42-
fill-rule="evenodd"
43-
clip-rule="evenodd"
44-
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
45-
fill="currentColor"
46-
/>
47-
</svg>
4849
Checkout my GitHub profile
4950
</a>
5051
</li>
5152
<li>
53+
<Heroicons.document_text
54+
class="icon"
55+
width="1.25em"
56+
height="1.25em"
57+
stroke="currentColor"
58+
stroke-width="2"
59+
/>
5260
<a href="/resume">
53-
<Heroicons.document_text
54-
class="icon"
55-
width="1.25em"
56-
height="1.25em"
57-
stroke="currentColor"
58-
stroke-width="2"
59-
/> ... or what I've done so far
61+
... or my resume
6062
</a>
6163
</li>
64+
<li class="flow">
65+
<p>
66+
Here some ways to contact me
67+
</p>
68+
<.socials />
69+
</li>
6270
</ol>
6371
</div>
6472
</div>

0 commit comments

Comments
 (0)