use icons

assets/css/app.css

@@ -4,6 +4,32 @@
 
 /* This file is for your main application CSS */
 
+/*
+  Layout
+*/
+
+body {
+  @apply font-sans;
+}
+
+#root {
+  margin: 0 auto;
+
+  display: grid;
+  grid-template-columns: 1fr min(1440px,100%) 1fr;
+}
+
+#root > * {
+  grid-column: 2;
+}
+
+.color-box {
+  @apply block w-8 h-8 m-1;
+}
+
+i.icon svg { @apply inline; }
+h2 > i.icon svg { @apply w-6 h-6 stroke-2; }
+
 /* Alerts and form errors used by phx.new */
 .alert {
   @apply rounded;
@@ -111,26 +137,3 @@
   0% { opacity: 1; }
   100% { opacity: 0; }
 }
-
-/*
-  Layout
-*/
-
-body {
-  @apply font-sans;
-}
-
-#root {
-  margin: 0 auto;
-
-  display: grid;
-  grid-template-columns: 1fr min(1440px,100%) 1fr;
-}
-
-#root > * {
-  grid-column: 2;
-}
-
-.color-box {
-  @apply block w-8 h-8 m-1;
-}

lib/homepage_web/templates/resume/index.html.heex

@@ -1,3 +1,10 @@
+<div class="flex">
+<Icons.phone_portrait />
+<Icons.paper_plane />
+<Icons.location />
+
+</div>
+
 <div class="grid grid-cols-2">
 
     <section>

lib/homepage_web/views/resume_view.ex

@@ -1,10 +1,12 @@
 defmodule HomepageWeb.ResumeView do
   use HomepageWeb, :view
 
+  alias HomepageWeb.Icons
+
   def para(assigns) do
     ~H"""
     <div>
-        <h3 class="font-bold text-lg mb-0"><%= @heading %></h3>
+        <h3 class="font-semibold text-lg mb-0"><%= @heading %></h3>
         <%= if assigns[:subheading] do %>
             <h4 class="italic mb-2"><%= @subheading %></h4>
         <% end %>
@@ -18,7 +20,8 @@ defmodule HomepageWeb.ResumeView do
   def article(assigns) do
     ~H"""
     <article>
-        <h2 class="font-['Inter'] font-bold text-xl"><%= @heading %></h2>
+        <h2 class="font-['Inter'] font-semibold text-xl">
+          <%= @heading %></h2>
         <%= render_slot(@inner_block) %>
     </article>
     """