diff --git a/static/js/obfuscate_email.js b/static/js/obfuscate_email.js
new file mode 100644
index 0000000..f5bc692
--- /dev/null
+++ b/static/js/obfuscate_email.js
@@ -0,0 +1,25 @@
+function obfuscateEmail(item) {
+	let href = item.href;
+	let innerHTML = item.innerHTML;
+	item.onmouseover = (_this) => {
+		const elt = _this.target;
+		const b64email = elt.href.match('[^/]*$').pop();
+		elt.href = 'mailto:' + atob(b64email);
+		elt.innerHTML = 'E-mail: ' + atob(b64email);
+	}
+	item.onmouseout = (_this) => {
+		_this.target.href = href;
+		_this.target.innerHTML = innerHTML;
+	}
+
+}
+
+function init() {
+	const elts = []
+	const query = document.getElementsByClassName("obfuscated_email")
+	for (let i = 0; i < query.length; i++) {
+		obfuscateEmail(query[i]);
+	}
+}
+
+window.onload = init
diff --git a/templates/base.html b/templates/base.html
index 9d2b9a6..6781b59 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -80,6 +80,7 @@
     }
   });
   </script>
+  <script type="text/javascript" src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/obfuscate_email.js"></script>
 </body>
 
 </html>
diff --git a/templates/partials/basics.html b/templates/partials/basics.html
index 292f369..ffde66f 100644
--- a/templates/partials/basics.html
+++ b/templates/partials/basics.html
@@ -1,86 +1,43 @@
 {% set basics = page.resume.basics %}
  {% if basics %}
-	<header id="header" class="clear">
-		{% if basics.image_b64 %}
-		<img class="image" src="data:image/jpeg;base64,{{ basics.image_b64 | safe }}" alt="{{ basics.name }}" />
-		<div class="middle">
-			<h1 class="name">{{ basics.name }}</h1>
-			<h2 class="label">{{ basics.label }}</h2>
-		</div>
-		{% else %}
-		<div>
-			<h1 class="name">{{ basics.name }}</h1>
-			<h2 class="label">{{ basics.label }}</h2>
-		</div>
-		{% endif %}
+  <header id="header" class="clear">
+    {% if basics.image_b64 %}
+    <img class="image" src="data:image/jpeg;base64,{{ basics.image_b64 | safe }}" alt="{{ basics.name }}" />
+    <div class="middle">
+      <h1 class="name">{{ basics.name }}</h1>
+      <h2 class="label">{{ basics.label }}</h2>
+    </div>
+    {% else %}
+    <div>
+      <h1 class="name">{{ basics.name }}</h1>
+      <h2 class="label">{{ basics.label }}</h2>
+    </div>
+    {% endif %}
 
-		{% if basics.location %}
-		<span class="location">
-			{% if basics.location.city %}
-			<span class="city">{{ basics.location.city }},</span>
-			{% endif %}
-			{% if basics.location.region %}
-			<span class="region">{{ basics.location.region }}</span>
-			{% endif %}
-			{% if basics.location.countryCode %}
-			<span class="countryCode {{ basics.location.countryCode }}"></span>
-			{% endif %}
-		</span>
-		{% endif %}
+    {% if basics.location %}
+    <span class="location">
+      {% if basics.location.city %}
+      <span class="city">{{ basics.location.city }},</span>
+      {% endif %}
+      {% if basics.location.region %}
+      <span class="region">{{ basics.location.region }}</span>
+      {% endif %}
+      {% if basics.location.countryCode %}
+      <span class="countryCode {{ basics.location.countryCode }}"></span>
+      {% endif %}
+    </span>
+    {% endif %}
 
-		{% if basics.birth %}
-		{{ basics.birth }}
-		{% endif %}
-
-		<div id="contact">
-			{% if basics.url %}
-			<div class="website">
-				<span class="fas fa-external-link-alt"></span>
-				<a href="{{ basics.url }}">{{ basics.url }}</a>
-			</div>
-			{% endif %}
-			{% if basics.email %}
-			<div class="email">
-				<span class="far fa-envelope"></span>
-				<a href="mailto:{{ basics.email }}">{{ basics.email }}</a>
-			</div>
-			{% endif %}
-			{% if basics.phone %}
-			<div class="phone">
-				<span class="fas fa-mobile-alt"></span>
-				<a href="tel:{{ basics.phone }}">{{ basics.phone }}</a>
-			</div>
-			{% endif %}
-		</div>
-
-		{% if basics.profiles %}
-		<div id="profiles">
-			{% for profile in basics.profiles %}
-			<div class="item">
-				{% if profile.network %}
-				<div class="username">
-					<span class="{{ profile.icon | d('fab fa-' + profile.network | replace(' ', '-') | lower) }} {{ profile.network | replace(' ', '-') | lower }} social"></span>
-					{% if profile.url %}
-					<span class="url">
-						<a href="{{ profile.url }}">{{ profile.username }}</a>
-					</span>
-					{% else %}
-					<span>{{ profile.username }}</span>
-					{% endif %}
-				</div>
-				{% endif %}
-			</div>
-			{% endfor %}
-		</div>
-		{% endif %}
-	</header>
-
-	{% if basics.summary %}
-	<section class="section">
-		<section class="main-summary">
-			<div>{{ basics.summary | replace("\r\n", "<br>") | replace("\n", "<br>") | replace("\r", "<br>") }}</div>
-		</section>
-	</section>
-	{% endif %}
+    <div id="contact">
+			<a href="{{ basics.email }}" class="obfuscated_email">E-mail (hover me)</a>
+    </div>
+  </header>
 
+  {% if basics.summary %}
+  <section class="section">
+    <section class="main-summary">
+      <div>{{ basics.summary | replace("\r\n", "<br>") | replace("\n", "<br>") | replace("\r", "<br>") }}</div>
+    </section>
+  </section>
+  {% endif %}
 {% endif %}