add contact info w/ clipboardmain

3 files changed, 53 insertions, 7 deletions

diff --git a/src/static/js/clipboard.js b/src/static/js/clipboard.js
new file mode 100644
index 0000000..5cbad5d
--- /dev/null
+++ b/src/static/js/clipboard.js
@@ -0,0 +1,16 @@
+const copyToClipboard = (v) => {
+  navigator.clipboard.writeText(v)
+    .then(alert("text copied to clipboard!"));
+}
+
+const clickEventHandler = (e) => {
+  e.preventDefault()
+  const raw = e.target.getAttributeNode("x-content");
+  const content = atob(raw.value);
+  copyToClipboard(content);
+}
+
+const copyables = document.getElementsByClassName("copyable");
+for (const c of copyables) {
+  c.onclick = clickEventHandler;
+}
diff --git a/src/static/stylesheets/index.css b/src/static/stylesheets/index.css
index 316daee..ea520fb 100644
--- a/src/static/stylesheets/index.css
+++ b/src/static/stylesheets/index.css
@@ -21,6 +21,14 @@
     gap: 4px;
 }
 
+.copyable {
+    cursor: pointer;
+}
+
+.copyable:hover, .copyable:focus {
+    text-decoration: underline;
+}
+
 #basenamering {
     justify-content: start;
     gap: 30px;
@@ -38,6 +46,11 @@
     padding: 20px;
 }
 
+#random-img {
+    padding: 20px;
+    max-width: 250px;
+}
+
 .button {
     image-rendering: auto;
     image-rendering: crisp-edges;
diff --git a/src/templates/index.html b/src/templates/index.html
index 1dc1826..c64df91 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -18,18 +18,21 @@
 
         <p>
         I'm a full stack developer that tends to focus on random
-        projects for fun rather than full works.
+        projects for fun rather than full projects.
         </p>
 
         <p>
         currently, I have a good chunk of my code hosted on either
-        github or codeberg, and I aim to migrate to my own self-hosted
-        git server.
+        github or codeberg, and I aim to migrate to my own 
+        <a href="https://git.emmatech.dev">self-hosted git server.</a>
         </p>
 
-        <p>
-        be careful on this website, it's a little slippery at the moment!
-        <em>it's a work in progress!</em>
+        <p class="contact-info">
+	      matrix: <span class="copyable" x-content="QGVtbWF0ZWNoOm1hdHJpeC5vcmc=">[at] emmatech [colon] matrix [dot] org</span>
+        </p>
+
+        <p class="contact-info">
+        email: <span class="copyable" x-content="ZW1tYUBlbW1hdGVjaC5kZXY=">emma [at] emmatech [dot] dev</span>
         </p>
 
         <span id="profile-links" class="flex-row">
@@ -65,13 +68,27 @@
             discrete trans wallpaper and fanart of konata I found on <a href="https://www.pixiv.net/en/artworks/1068449">pixiv</a>.
             </p>
         </span>
+
+        <span>
+            <p><b>Is this website open source?</b></p>
+            <p>
+            yes, if you so desire to check out the code for this website, it's accessible
+            <a href="https://git.emmatech.dev/website.git">here</a>. the code is licensed under
+            the bsd 3-clause license, so feel free to use chunks and pieces of the website as
+            you see fit.
+            </p>
+        </span>
     </div>
 
-    <div class="container" style="padding: 20px;">
+    <div id="random-img" class="container" style="padding: 20px;">
         <h3>random image of the day</h3>
 
         <img src="/static/assets/pfps/2.jpg" width="225" />
+
+        <p>this is a placeholder until I get some images</p>
     </div>
 </div>
 
+<script lang="js" src="/static/js/clipboard.js"></script>
+
 {% endblock %}