improved the top image on accusonus' page

src/accusonus.html

@@ -170,11 +170,10 @@ <h5 class="offcanvas-title bigger-4" id="offcanvasNavbarLabel">Μenu</h5>
 
     <section>
 
-      <!-- <div class="row-fluid mt-lg-5 pt-5 minHeight80vh anim01" style="opacity: 1;">
-        <div class="col-12 col-xl-10 col-md-11 mx-auto text-center position-relative" style="">
-          <img src="img/misc/elements/ogma-dribble-shot.png" alt="OgmaCast background image" class="img-fluid border-radius position-absolute top-50 start-0 translate-middle-y mx-auto" style="margin-top: 23vh;clip-path: inset(80px 0px 290px 0px);">
-          <div class="row">
-            <div style="background-color: rgba(255, 251, 245, 0.3); backdrop-filter: blur(10px); opacity: 1;" class="col-12 offset-md-1 col-xl-8 border-radius p-5 anim02 text-start mt-5">
+      <div style="opacity: 1;" class="row-fluid mt-lg-5 pt-5 minHeight75vh anim01">
+        <div style="background-image: url('img/misc/elements/ogma-dribble-shot.png'); background-repeat: no-repeat; background-size: cover; background-position-y: ;" class="col-12 col-md-10 mx-auto text-center position-relative py-5 border-radius shadow-sm">
+          <div class="row pb-5 mb-5">
+            <div style="background-color: rgba(255, 251, 245, 0.3); backdrop-filter: blur(10px); opacity: 1;" class="col-12 offset-lg-1 col-xl-8 border-radius p-5 anim02 text-start my-5">
               <div class="opacity-100">
                 <img src="img/misc/logos/accusonus-logo.svg" alt="accusonus logo" class="img-fluid anim03" style="max-width: 114px; opacity: 1;">
                 <h1 class="lh-base mt-4 anim04" style="opacity: 1;">Make <mark>online calls</mark> better with <mark>Spotify</mark> and voice tweaks.</h1>
@@ -183,10 +182,10 @@ <h1 class="lh-base mt-4 anim04" style="opacity: 1;">Make <mark>online calls</mar
             </div>
           </div>
         </div>
-      </div> -->
+      </div>
 
 
-      <div class="row-fluid mt-lg-5 pt-5 minHeight80vh anim01" style="background-image: url('img/misc/elements/ogma-dribble-shot.png'); background-repeat: no-repeat; background-size: cover; background-position-y: 40px;">
+      <!-- <div class="row-fluid mt-lg-5 pt-5 minHeight80vh anim01" style="background-image: url('img/misc/elements/ogma-dribble-shot.png'); background-repeat: no-repeat; background-size: cover; background-position-y: 40px;">
         <div class="container mt-5 pt-5">
           <div class="row position-relative">
             <div class="col-12 col-xl-8 border-radius p-5 anim02" style="background-color: rgba(255, 251, 245, 0.3); backdrop-filter: blur(10px);">
@@ -198,8 +197,8 @@ <h1 class="lh-base mt-4 anim04">Make <mark>online calls</mark> better with <mark
             </div>
           </div>
         </div>
+      </div> -->
 
-      </div>
     </section>
 
     <section>
@@ -243,7 +242,7 @@ <h1 class="lh-base mt-4 anim04">Make <mark>online calls</mark> better with <mark
 
              <div class="col-12 col-md-6 col-lg-4 mb-4">
               <p class="mb-2 font-weight-bold text-uppercase">Tools</p>
-              <p>Figma, Typeform, Maze & Calendly</p>
+              <p>Figma, HTML/CSS & JS</p>
             </div>
 
              <div class="col-12 col-md-6 col-lg-4 mb-4">
@@ -1019,9 +1018,9 @@ <h2 class="section-title">Prototype</h2>
 
               <div class="col-12">
                 <h2 class="section-title">Iteration based on user feedback</h2>
-                <p class="mt-4">One of the things that really hit the spot when it comes to user research, is the way ideas and implementation is challenged. When designing things within a closed circle of people, no matter how experienced its members are, there’s always the possibility of something escaping from the team’s perception.</p>
+                <p class="mt-4">One of the things that really hit the spot when it comes to user research, is the way ideas and implementation is challenged. When designing things within a closed circle of people, no matter how experienced its members are, there's always the possibility of something escaping from the team's perception.</p>
 
-                <p>This time around, was the size of the window and its architecture. Why was it so big? Why did we think that the users would want it to be in landscape orientation? I was the one to blame really; I hadn’t visualized it properly in context but thankfully, after the user interviews, it occurred to me.</p>
+                <p>This time around, was the size of the window and its architecture. Why was it so big? Why did we think that the users would want it to be in landscape orientation? I was the one to blame really; I hadn't visualized it properly in context but thankfully, after the user interviews, it occurred to me.</p>
 
                 <p>I redesigned the app in a way more simplified way and presented it to the team of stakeholders and explained why it was important. They all bought in.</p>
 
@@ -1032,7 +1031,7 @@ <h2 class="section-title">Iteration based on user feedback</h2>
                 <div class="col-12">
                   <div class="col-12 bg-gray-50 border-radius d-flex align-items-center justify-content-start p-2">
                     <img src="img/misc/icons/icons8-bulb-64.png" alt="Question mark icon" class="img-fluid mx-3" style="width: 22px;" />
-                    <p class="mb-0 smaller-3 ps-3">User testing ensures that the end product aligns seamlessly with user needs and expectations. "You’ve got to start with the customer experience and work backward to the technology." —Steve Jobs</p>
+                    <p class="mb-0 smaller-3 ps-3">User testing ensures that the end product aligns seamlessly with user needs and expectations. "You've got to start with the customer experience and work backward to the technology." —Steve Jobs</p>
                   </div>
                 </div>
               </div>
@@ -1131,11 +1130,11 @@ <h2 class="section-title">Prototype</h2>
 
                       <p>The way anyone can quickly create one and add all sorts of animations, effects, sticky sections and all that is stunning.</p>
 
-                      <p>Building a prototype with HTML may be somewhat harder and more time-consuming to create, but in the end of the day, they’re better in conveying a true sense of the final product. They’re a lot better in helping the team see even clearer possible pitfalls and shortcomings of the design.</p>
+                      <p>Building a prototype with HTML may be somewhat harder and more time-consuming to create, but in the end of the day, they're better in conveying a true sense of the final product. They're a lot better in helping the team see even clearer possible pitfalls and shortcomings of the design.</p>
 
-                      <p>That’s why I really like working on HTML prototypes using Bootstrap. I love validating the UX and the UI of the app in depth.</p>
+                      <p>That's why I really like working on HTML prototypes using Bootstrap. I love validating the UX and the UI of the app in depth.</p>
 
-                      <p>Here’s the HTML prototype of OgmaCast, check it out!</p>
+                      <p>Here's the HTML prototype of OgmaCast, check it out!</p>
 
                     </div>
 
@@ -1156,11 +1155,11 @@ <h2 class="section-title">Prototype</h2>
              <div id="suddendeath" class="row my-lg-5 py-lg-5">
               <div class="col-12 ">
                 <h2 class="section-title">Sudden death</h2>
-                <p class="mt-4">Before having a chance to really polish the UI and the app production ready, the company was acquired by Meta and blocked further development of this app.</p>
-                <p>Would it have turned into a solid competitor to Krisp.ai? I think so! It’s a shame we didn’t get to find out. Either way the next steps would have been to:</p>
+                <p class="mt-4">Before having a chance to really polish the UI and make the app production ready, the company was acquired by Meta and blocked further development of this app.</p>
+                <p>Would it have turned into a solid competitor to Krisp.ai? I think so! It's a shame we didn't get to find out. Either way the next steps would have been to:</p>
 
                 <ol class="list-group list-group-numbered">
-                  <li class="list-group-item bg-background border-0">Polish the UI to reflect brand’s identity but awesomeness too in dark and light theme</li>
+                  <li class="list-group-item bg-background border-0">Polish the UI to reflect brand's identity but awesomeness too in dark and light theme</li>
                   <li class="list-group-item bg-background border-0">Add new components and update the design system accordingly</li>
                   <li class="list-group-item bg-background border-0">Conduct usability tests to ensure ease of use</li>
                   <li class="list-group-item bg-background border-0">Learn, improve and take the experience to the next level by identifying new features</li>

src/microsoft.html

@@ -1349,6 +1349,7 @@ <h2 class="section-title">Next project</h2>
                   <p class="font-weight-bold pt-2">Senior UX designer (full-time) <span class="badge bg-background the-border text-primary font-weight-normal smaller-4 ms-1">2021</span> <span class="badge bg-background the-border text-primary font-weight-normal smaller-4">2022</span>
                   </p>
                   <p class="mt-4">With OgmaCast you can make online calls better with Spotify and voice tweaks.</p>
+                  <p>Check this out to find out how I led this greenfield project and designed a new product from scratch!</p>
                   <p class="mt-5">
                     <a href="accusonus.html" class="btn btn-primary rounded-pill py-2 px-3 btn-lg" title="Click to view project page">View project
                     </a>

src/profile.html

@@ -771,10 +771,12 @@ <h2 class="section-title sticky-top top-10 mb-5">A decade of workspaces</h2>
             </div>
 
             <div class="col-12 col-lg-5 d-none d-xl-block position-absolute top-50 start-100 translate-middle" style="margin-left: -250px">
-              <video width="100%" height="500" autoplay loop muted style="object-fit: cover;" class="border-radius large-shadow">
-                <source src="video/creativity-purpose-low.mp4" type="video/mp4">
-                Your browser does not support the video tag.
-              </video>
+              <div class="col-12 p-2 bg-background border-radius">
+                <video width="100%" height="500" autoplay loop muted style="object-fit: cover;" class="border-radius large-shadow">
+                  <source src="video/creativity-purpose-low.mp4" type="video/mp4">
+                  Your browser does not support the video tag.
+                </video>
+              </div>
             </div>
 
           </div>