1     <div class="flex flex-col relative bg-[#0f111b] overflow-y-hidden">
  2       <.line_background class="line-background" />
  3       <div class="min-h-screen main flex flex-col items-stretch w-full h-full">
  4         <div class="flex-grow relative z-10 h-full bg-opacity-0 bg-transparent">
  5           <!-- Header/Navbar -->
  6           <div id="header" class="flex flex-col justify-center py-10 bg-transparent gap-2">
  7             <div class="typewriter">
  8               <h1 class="text-center text-white text-3xl">Ethan Lau</h1>
  9               <h4 class="text-center text-white text-xl">
 10                 CS @ University of Maryland, College Park
 11               </h4>
 12               <div class="flex flex-wrap justify-center my-2">
 13                 <a href="https://github.com/FoundedNahte">
 14                   <div class="flex justify-center">
 15                     <div class="middle-align w-10 h-10">
 16                       <.image_asset asset="github" class="h-6" />
 17                     </div>
 18                     <h6 class="text-white hover:underline hover:text-[#5ccc96]">
 19                       Github
 20                     </h6>
 21                   </div>
 22                 </a>
 23                 <p class="text-white mx-2">|</p>
 24                 <a href="https://www.linkedin.com/in/ethan-lau-036596228/">
 25                   <div class="flex justify-center">
 26                     <div class="middle-align w-10 h-10">
 27                       <.image_asset asset="linkedin" class="h-6" />
 28                     </div>
 29                     <h6 class="text-white hover:underline hover:text-[#5ccc96]">
 30                       Linkedin
 31                     </h6>
 32                   </div>
 33                 </a>
 34                 <p class="text-white mx-2">|</p>
 35                 <div phx-click="get_resume">
 36                   <h6 class="text-white cursor-pointer hover:underline hover:text-[#5ccc96]">
 37                     Resume
 38                   </h6>
 39                 </div>
 40                 <p class="right-border text-white mx-2">|</p>
 41                 <div>
 42                   <h6 class="text-white">eclau2003@gmail.com</h6>
 43                 </div>
 44               </div>
 45             </div>
 46           </div>
 47           <!-- Body -->
 48           <div id="body-container" class="pb-16 bg-transparent">
 49             <div id="bio" class="flex flex-col p-10 items-center justify-evenly">
 50               <img
 51                 alt="Picture of Ethan Lau"
 52                 class="mx-5 my-10 sm:w-1/3 object-fill rounded-xl"
 53                 src="/images/mugshot.png"
 54               />
 55               <div id="bio-text" class="bg-[#0f111b] bg-opacity-0 w-1/2 text-center justify-center">
 56                 <p class="text-white leading-loose text-xl">
 57                 </p>
 58               </div>
 59             </div>
 60             <div id="experience-container">
 61               <div id="projects-title" class="flex justify-center">
 62                 <h1 class="text-[#3deb97] text-4xl p-12 font-mono bg-[#0f111b] bg-opacity-0 underline">
 63                   Experience
 64                 </h1>
 65               </div>
 66               <div id="experiences" class="flex justify-center">
 67                 <%= for experience <- @experiences do %>
 68                   <.experience
 69                     class="w-80 sm:w-auto bg-[#30365F] bg-opacity-60 p-3 border-[#ecf0c1] border-2 rounded-2xl border-opacity-50"
 70                     name={experience.name}
 71                     role={experience.role}
 72                     time_range={experience.time_range}
 73                     description={experience.description}
 74                     tools={experience.tools}
 75                   />
 76                 <% end %>
 77               </div>
 78             </div>
 79             <div id="projects-container" class="py-16" x-data="filter">
 80               <div id="projects-title" class="flex justify-center">
 81                 <h1 class="text-[#3deb97] text-4xl p-12 font-mono underline">Projects</h1>
 82               </div>
 83               <div id="language-filter" class="flex-wrap flex justify-center gap-1 py-4">
 84                 <%= for language <- @languages do %>
 85                   <input
 86                     id={"filter-#{language.short}"}
 87                     type="checkbox"
 88                     class="absolute invisible bg-opacity-0"
 89                     x-on:click={"add_remove_filter('#{language.short}')"}
 90                   />
 91                   <label
 92                     for={"filter-#{language.short}"}
 93                     class="hover:text-[#3deb97] cursor-pointer transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-100 duration-300 bg-[#30365F] bg-opacity-60 px-5 flex items-center border-[#0f111b] border-2 rounded-2xl"
 94                   >
 95                     <div class="w-10 h-10">
 96                       <.image_asset asset={language.short} class="h-full" />
 97                     </div>
 98                     <h1 class="text-white px-2 text-lg font-semibold">
 99                       <%= language.display_name %>
100                     </h1>
101                   </label>
102                 <% end %>
103               </div>
104               <div id="projects-with-assets" class="flex flex-wrap justify-center py-12">
105                 <%= for project <- @projects do %>
106                 <%= if project.asset != nil do %>
107                 <template>
108                     <%= if Map.has_key?(project, :link) do %>
109                       <a href={project.link}>
110                         <.project
111                           class="project-clickable transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-100 duration-300 bg-[#30365F] bg-opacity-60 w-64 2xl:w-96 h-80 2xl:h-96 m-1 p-2 rounded-3xl border-2 border-white border-opacity-30"
112                           name={project.name}
113                           languages={project.language}
114                           desc={project.desc}
115                           asset={project.asset}
116                         />
117                       </a>
118                     <% else %>
119                       <.project
120                         class="bg-[#30365F] bg-opacity-60 w-64 h-40 m-1 p-2 rounded-3xl border-2 border-white border-opacity-30"
121                         name={project.name}
122                         languages={project.language}
123                         desc={project.desc}
124                         asset={project.asset}
125                       />
126                     <% end %>
127                   </template>
128                   <% end %>
129                 <% end %>
130               </div>
131               <div id="projects-without-assets" class="flex flex-wrap justify-center">
132                 <%= for project <- @projects do %>
133                 <%= if project.asset == nil do %>
134                   <template>
135                     <%= if Map.has_key?(project, :link) do %>
136                       <a href={project.link}>
137                         <.project
138                           class="project-clickable transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-100 duration-300 bg-[#30365F] bg-opacity-60 w-64 h-52 m-1 p-2 rounded-3xl border-2 border-white border-opacity-30"
139                           name={project.name}
140                           languages={project.language}
141                           desc={project.desc}
142                           asset={project.asset}
143                         />
144                       </a>
145                     <% else %>
146                       <.project
147                         class="bg-[#30365F] bg-opacity-60 w-64 h-52 m-1 p-2 rounded-3xl border-2 border-white border-opacity-30"
148                         name={project.name}
149                         languages={project.language}
150                         desc={project.desc}
151                         asset={project.asset}
152                       />
153                     <% end %>
154                   </template>
155                   <% end %>
156                 <% end %>
157               </div>
158             </div>
159           </div>
160           <!-- Footer -->
161           <div
162             id="footer"
163             class="absolute bottom-0 flex flex-col justify-center h-16 w-full text-center bg-[#0f111b] border-t-2 mt-auto"
164           >
165             <h1 class="text-white text-base font-semibold">Ethan Lau, 2023</h1>
166           </div>
167         </div>
168       </div>
169     </div>
170     <div class={@class}>
171       <div class="flex justify-start items-center border-b-2 border-white border-opacity-50 py-1">
172         <%= for language <- @languages do %>
173           <div class="w-10 h-10 mx-1">
174             <.image_asset asset={language} class="h-full" />
175           </div>
176         <% end %>
177         <h1 class="text-white px-1 md:text-xl font-bold leading-tight"><%= @name %></h1>
178       </div>
179       <p class="text-white m-1 font-semibold text-sm"><%= @desc %></p>
180       <%= if @asset != nil do %>
181         <img src={@asset} class="object-fill w-auto h-auto m-auto" />
182       <% end %>
183     </div>
184     <div class={@class}>
185       <div class="flex flex-wrap">
186         <h2 class="text-white text-xl sm:text-2xl sm:mr-2"><%= @role %></h2>
187         <h2 class="text-white invisible sm:visible sm:text-2xl">&#x2022;</h2>
188         <h2 class="text-[#ecf0c1] text-xl sm:text-2xl sm:ml-2"><%= @name %></h2>
189       </div>
190       <h4 class="text-gray-300 text-xl"><%= @time_range %></h4>
191       <div class="w-96">
192         <ul class="list-disc list-inside w-full">
193           <%= for point <- @description do %>
194             <li class="w-3/4 sm:w-full text-white mr-8 sm:ml-8 my-2"><span><%= point %></span></li>
195           <% end %>
196         </ul>
197       </div>
198       <div class="flex flex-wrap justify-start pt-2 w-auto overflow-auto">
199         <%= for tool <- @tools do %>
200           <div class="text-[#3deb97] font-medium bg-[#5ccc96] bg-opacity-20 ml-2 px-3 mt-2 rounded-2xl">
201             <h6 class=""><%= tool %></h6>
202           </div>
203         <% end %>
204       </div>
205     </div>