From 217b396f32715cfaf7dec57ef10e18cc85196d6f Mon Sep 17 00:00:00 2001
From: "Amir.H Khademi" <avvampier@gmail.com>
Date: Wed, 3 Jan 2024 10:54:28 +0330
Subject: [PATCH] complete hesam theme

---
 .../ContactInfoItemTemplate.razor             | 25 +++++----
 .../ItemTemplate/ExperienceItemTemplate.razor |  2 +-
 .../ItemTemplate/ProjectItemTemplate.razor    |  6 +--
 .../ItemTemplate/SkillItemTemplate.razor      |  8 +--
 .../ItemTemplate/ToolsItemTemplate.razor      |  8 ++-
 Resume.Blazor/Helpers/ExperienceHelper.cs     | 30 ++++++-----
 Resume.Blazor/Pages/Index.razor               | 41 +++++++++------
 Resume.Blazor/package-lock.json               |  8 +--
 Resume.Blazor/package.json                    |  2 +-
 Resume.Blazor/wwwroot/css/app.output.css      | 52 +++++++++++++------
 10 files changed, 114 insertions(+), 68 deletions(-)

diff --git a/Resume.Blazor/Components/ItemTemplate/ContactInfoItemTemplate.razor b/Resume.Blazor/Components/ItemTemplate/ContactInfoItemTemplate.razor
index 2bbbc5f..e9a92e8 100644
--- a/Resume.Blazor/Components/ItemTemplate/ContactInfoItemTemplate.razor
+++ b/Resume.Blazor/Components/ItemTemplate/ContactInfoItemTemplate.razor
@@ -1,16 +1,18 @@
-<div class="flex flex-row my-5">
-    <div class="bg-[#2E2E48] py-2 px-2.5 rounded-full">
+<a href="@Link">
+    <div class="flex flex-row my-5">
+        <div class="bg-[#2E2E48] py-2 px-2.5 rounded-full">
 
-        <svg width="25" height="25" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="@SvgPath" fill="#E2E6EE" />
-        </svg>
+            <svg width="25" height="25" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="@SvgPath" fill="#E2E6EE" />
+            </svg>
 
+        </div>
+        <div class="mx-4">
+            <p class="text-gray-400">@Title</p>
+            <p class="text-white -mt-1">@Detail</p>
+        </div>
     </div>
-    <div class="mx-4">
-        <p class="text-gray-400">@Title</p>
-        <p class="text-white -mt-1">@Detail</p>
-    </div>
-</div>
+</a>
 
 @code {
     [Parameter]
@@ -21,4 +23,7 @@
 
     [Parameter]
     public string SvgPath { get; set; }
+
+    [Parameter]
+    public string Link { get; set; }
 }
\ No newline at end of file
diff --git a/Resume.Blazor/Components/ItemTemplate/ExperienceItemTemplate.razor b/Resume.Blazor/Components/ItemTemplate/ExperienceItemTemplate.razor
index 32f9520..b93e7a9 100644
--- a/Resume.Blazor/Components/ItemTemplate/ExperienceItemTemplate.razor
+++ b/Resume.Blazor/Components/ItemTemplate/ExperienceItemTemplate.razor
@@ -3,7 +3,7 @@
     <div class="text-gray-400">
       <p>@Period</p>
       <div class="flex flex-row">
-        <img src="@ImageSrc" class="w-[3.5rem] my-2 h-[3.5rem] rounded-md" />
+        <img src="@ImageSrc" class="w-[3.5rem] my-2 h-[3.5rem] rounded-full" />
         <div class="mx-3 my-auto">
           <p class="text-white">@CompanyName</p>
           <div class="flex flex-wrap my-2 -mx-1">
diff --git a/Resume.Blazor/Components/ItemTemplate/ProjectItemTemplate.razor b/Resume.Blazor/Components/ItemTemplate/ProjectItemTemplate.razor
index 98d4fb7..dc65d0e 100644
--- a/Resume.Blazor/Components/ItemTemplate/ProjectItemTemplate.razor
+++ b/Resume.Blazor/Components/ItemTemplate/ProjectItemTemplate.razor
@@ -3,7 +3,7 @@
     <MudCardContent>
 
         <MudStack Justify="Justify.SpaceBetween">
-            <Video Source="@VideoSrc" pre Poster="@ImageSrc"></Video>
+            <Video Source="@VideoSrc"  Poster="@ImageSrc"></Video>
 
             @* <video controls preload="none"  poster="@ImageSrc">
                 <source src="@VideoSrc" type="video/mp4">
@@ -16,8 +16,8 @@
             <p class="text-gray-400">
             @Detail
             </p> *@
-            <div class="flex flex-wrap space-x-1 mt-0">
-
+            <p class="font-bold">@Name</p>
+            <div class="flex flex-wrap space-x-1 -mt-2">
                 @foreach (var feild in Feilds)
                 {
                     <div class="bg-[#232339] px-3 py-1 mt-1 h-auto rounded-md text-[0.7rem] ">
diff --git a/Resume.Blazor/Components/ItemTemplate/SkillItemTemplate.razor b/Resume.Blazor/Components/ItemTemplate/SkillItemTemplate.razor
index 0deff64..734ced0 100644
--- a/Resume.Blazor/Components/ItemTemplate/SkillItemTemplate.razor
+++ b/Resume.Blazor/Components/ItemTemplate/SkillItemTemplate.razor
@@ -4,9 +4,10 @@
       <MudStack AlignItems="AlignItems.Center">
         <img src="@ImageSrc" class="w-16 h-16 rounded-md" />
         <MudText Typo="Typo.subtitle2" Align="Align.Center" class="text-white">
-          <p>@Name</p>
+            <p>@Name</p>
         </MudText>
-        <p class="text-gray-400 text-[0.8rem]">@ExperiencePeriod Years Experience</p>
+        <MudRating class="mt-1 " Disabled="true" ReadOnly="true" Color="Color.Info" SelectedValue="@ExperiencePeriod" />
+        @* <p class="text-gray-400 text-[0.8rem]">@ExperiencePeriod Years Experience</p> *@
       </MudStack>
     </MudHidden>
     <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
@@ -14,7 +15,8 @@
         <img src="@ImageSrc" class="w-12 h-12 rounded-md" />
         <div class="my-auto ml-2">
           <p class="text-white">@Name</p>
-          <p class="text-gray-400 text-[0.8rem]">@ExperiencePeriod Years Experience</p>
+            @* <p class="text-gray-400 text-[0.8rem]">@ExperiencePeriod Years Experience</p> *@
+                    <MudRating class="mt-1 " Disabled="true" ReadOnly="true" Color="Color.Info" SelectedValue="@ExperiencePeriod" />
         </div>
       </MudStack>
     </MudHidden>
diff --git a/Resume.Blazor/Components/ItemTemplate/ToolsItemTemplate.razor b/Resume.Blazor/Components/ItemTemplate/ToolsItemTemplate.razor
index 3effd9b..48f8e37 100644
--- a/Resume.Blazor/Components/ItemTemplate/ToolsItemTemplate.razor
+++ b/Resume.Blazor/Components/ItemTemplate/ToolsItemTemplate.razor
@@ -1,8 +1,12 @@
 <div class="bg-[#2E2E48] justify-center py-7 px-5 rounded-md h-full">
     <img src="@ImageSrc" class="mb-4 mx-auto w-16 h-16 rounded-md" />
-    <div class="my-auto ml-2">
+    <div class="my-auto">
         <p class="text-center text-white">@Name</p>
-        <p class="text-center text-gray-400 text-[0.8rem]">@ExperiencePeriod Years Experience</p>
+        @* <p class="text-center text-gray-400 text-[0.8rem]">@ExperiencePeriod Years Experience</p> *@
+    </div>
+    <div class="mx-auto items-center content-center w-fit">
+        
+        <MudRating class="mt-2 mx-auto" Disabled="true" ReadOnly="true" Color="Color.Info" SelectedValue="@ExperiencePeriod" />
     </div>
 </div>
 @code
diff --git a/Resume.Blazor/Helpers/ExperienceHelper.cs b/Resume.Blazor/Helpers/ExperienceHelper.cs
index 70f65b9..2778ba4 100644
--- a/Resume.Blazor/Helpers/ExperienceHelper.cs
+++ b/Resume.Blazor/Helpers/ExperienceHelper.cs
@@ -585,32 +585,36 @@ public static class ExperienceHelper
         Detail="The Terrace Management software is a personal software for managing the Terrace cafe and restaurant located in the city of Kermanshah, which provides accounting, menu management, and customer management sections for this establishment."},
         
     };
+
+
     public static List<SkillItemModel> ToolsItemModels = new List<SkillItemModel>
     {
-        new SkillItemModel{ExperiencePeriod = 7 , Name = "Adobe After Effects" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Tools/After%20Effects.png"},
-        new SkillItemModel{ExperiencePeriod = 7 , Name = "Adobe Premiere" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Tools/Premiere.png"},
-        new SkillItemModel{ExperiencePeriod = 5 , Name = "Adobe Illustrator" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Tools/Illustrator.png"},
-        new SkillItemModel{ExperiencePeriod = 5 , Name = "Adobe Photoshop" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Tools/Photoshope.png"},
+        new SkillItemModel{ExperiencePeriod = 5 , Name = "Adobe After Effects" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Tools/After%20Effects.png"},
+        new SkillItemModel{ExperiencePeriod = 5 , Name = "Adobe Premiere" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Tools/Premiere.png"},
+        new SkillItemModel{ExperiencePeriod = 3 , Name = "Adobe Illustrator" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Tools/Illustrator.png"},
+        new SkillItemModel{ExperiencePeriod = 3 , Name = "Adobe Photoshop" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Tools/Photoshope.png"},
         new SkillItemModel{ExperiencePeriod = 3 , Name = "Adobe Audition" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Tools/Audition.png"},
-        new SkillItemModel{ExperiencePeriod = 5 , Name = "Maxone Cinama 4D" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Tools/Cinama%204D.png"},
+        new SkillItemModel{ExperiencePeriod = 4 , Name = "Maxone Cinama 4D" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Tools/Cinama%204D.png"},
         new SkillItemModel{ExperiencePeriod = 3 , Name = "Unreal Engine" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Tools/Unreal%20Engine.png"},
         new SkillItemModel{ExperiencePeriod = 5 , Name = "Microsoft Office Word" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Tools/Word.png"},
         new SkillItemModel{ExperiencePeriod = 5 , Name = "Microsoft Office Execl" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Tools/Excel.png"},
         new SkillItemModel{ExperiencePeriod = 5 , Name = "Microsoft Office PowerPoint" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Tools/Power%20Point.png"},
     };
 
+
+
     public static List<SkillItemModel> SkillItemModels = new List<SkillItemModel>
     {
-        new SkillItemModel{ExperiencePeriod = 7 , Name = "Editing Video" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Editing%20Video.png"},
-        new SkillItemModel{ExperiencePeriod = 7 , Name = "Motion Graphics" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Motion%20Graphics.png"},
-        new SkillItemModel{ExperiencePeriod = 6 , Name = "Making Teaser" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Making%20Teaser.png"},
-        new SkillItemModel{ExperiencePeriod = 5 , Name = "Director" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Director.png"},
+        new SkillItemModel{ExperiencePeriod = 5 , Name = "Editing Video" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Editing%20Video.png"},
+        new SkillItemModel{ExperiencePeriod = 5 , Name = "Motion Graphics" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Motion%20Graphics.png"},
+        new SkillItemModel{ExperiencePeriod = 4 , Name = "Making Teaser" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Making%20Teaser.png"},
+        new SkillItemModel{ExperiencePeriod = 4 , Name = "Director" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Director.png"},
         new SkillItemModel{ExperiencePeriod = 3 , Name = "Scenario Writer" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/scenario%20writer.png"},
         new SkillItemModel{ExperiencePeriod = 3 , Name = "Model Maker" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/model%20maker.png"},
-        new SkillItemModel{ExperiencePeriod = 5 , Name = "Filming" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Filming.png"},
-        new SkillItemModel{ExperiencePeriod = 4 , Name = "Aerial Photography" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Aerial%20Photography.png"},
-        new SkillItemModel{ExperiencePeriod = 4 , Name = "Stage Design" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Stage%20Design.png"},
-        new SkillItemModel{ExperiencePeriod = 5 , Name = "Sound Editing" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Sound%20Editing.png"},
+        new SkillItemModel{ExperiencePeriod = 4 , Name = "Filming" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Filming.png"},
+        new SkillItemModel{ExperiencePeriod = 3 , Name = "Aerial Photography" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Aerial%20Photography.png"},
+        new SkillItemModel{ExperiencePeriod = 3 , Name = "Stage Design" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Stage%20Design.png"},
+        new SkillItemModel{ExperiencePeriod = 4 , Name = "Sound Editing" , ImageSrc = "https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Skills/Sound%20Editing.png"},
     };
 
 }
diff --git a/Resume.Blazor/Pages/Index.razor b/Resume.Blazor/Pages/Index.razor
index 90297ea..04a9c5f 100644
--- a/Resume.Blazor/Pages/Index.razor
+++ b/Resume.Blazor/Pages/Index.razor
@@ -15,21 +15,21 @@
                 </MudText>
                 <MudText Typo="Typo.h2" class="bg-clip-text font-extrabold font-outfit-black text-3xl text-transparent bg-gradient-to-r mb-8 from-pink-500
 to-violet-500">
-                    Software Engineer
+                    Editor & Motion Graphics
                 </MudText>
                 <p class="mb-4 text-justify">
-                    About me: I am a video editor and motion graphic designer with over 5 years of work experience. My educational background is in computer engineering, specializing in information technology. I am passionate about creating clips, teasers, and captivating motion graphics. Over these years, I've participated in various projects, collaborating with diverse teams, and have been able to enhance my personal skills. Moving forward, I will introduce my professional and personal capabilities more comprehensively.
+                   I am a video editor and motion graphic designer with over 5 years of work experience. My educational background is in computer engineering, specializing in information technology. I am passionate about creating clips, teasers, and captivating motion graphics. Over these years, I've participated in various projects, collaborating with diverse teams, and have been able to enhance my personal skills. Moving forward, I will introduce my professional and personal capabilities more comprehensively.
                 </p>
                 <div class="h-[0.1rem] bg-white opacity-10"></div>
                 <p class="my-5 text-gray-400">Contact Info</p>
                 
 
-                <ContactInfoItemTemplate Title="Email" Detail="hes.mas2248@gmail.com" SvgPath="M8.33325 8.33329H1.66659C1.20635 8.33329 0.833252 7.9602 0.833252 7.49996V2.46371C0.852672 2.01769 1.22014
+                <ContactInfoItemTemplate Link="mailto:hes.mas2248@gmail.com" Title="Email" Detail="hes.mas2248@gmail.com" SvgPath="M8.33325 8.33329H1.66659C1.20635 8.33329 0.833252 7.9602 0.833252 7.49996V2.46371C0.852672 2.01769 1.22014
 1.6662 1.66659 1.66663H8.33325C8.79349 1.66663 9.16659 2.03972 9.16659 2.49996V7.49996C9.16659 7.9602 8.79349 8.33329
 8.33325 8.33329ZM1.66659 3.27829V7.49996H8.33325V3.27829L4.99992 5.49996L1.66659 3.27829ZM1.99992 2.49996L4.99992
 4.49996L7.99992 2.49996H1.99992Z" />
 
-                <ContactInfoItemTemplate Title="Phone" Detail="(+98) 901 309 9752" SvgPath="M7.9157 8.33329C4.36086 8.33833 1.66295 5.60808 1.66675 2.08434C1.66675 1.85422 1.8533 1.66663 2.08342
+                <ContactInfoItemTemplate Link="tel:09013099752" Title="Phone" Detail="(+98) 901 309 9752" SvgPath="M7.9157 8.33329C4.36086 8.33833 1.66295 5.60808 1.66675 2.08434C1.66675 1.85422 1.8533 1.66663 2.08342
 1.66663H3.18315C3.38964 1.66663 3.56505 1.81835 3.59537 2.0226C3.66804 2.51212 3.81057 2.9887 4.01862 3.43775L4.06143
 3.53017C4.12097 3.65867 4.08061 3.81135 3.96536 3.89366C3.62479 4.13687 3.49463 4.62644 3.75995 5.00844C4.09291 5.48781
 4.5126 5.90742 4.99186 6.24022C5.37384 6.50546 5.86333 6.37532 6.10654 6.03481C6.1889 5.9195 6.34167 5.87913 6.47025
@@ -47,7 +47,7 @@ to-violet-500">
                 <div class="h-[0.1rem] bg-white opacity-10"></div>
                 <p class="my-5 text-gray-400">Socials</p>
 
-                <a href="https://Instagram.com/hesamit97">
+                <a target="_blank" href="https://Instagram.com/hesamit97">
                     <div class="flex flex-row my-5">
                         <div>
                             <svg width="40" height="40" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -97,27 +97,36 @@ to-violet-500">
                         </div>
                         <div class="mx-4">
                             <p class="text-gray-400 text-sm -mb-1">Instagram</p>
-                            <a class="text-white -mt-1" href="instagram.com/mr.mohande3">hesamit97</a>
+                            <a class="text-white -mt-1" href="instagram.com/hesamit97">hesamit97</a>
                         </div>
                     </div>
                 </a>
 
-                @* <a href="https://Instagram.com/hesamit97">
+                <a target="_blank" href="https://t.me/hesamit97">
                     <div class="flex flex-row my-5">
-                        <div class="p-1 bg-[#00ACEE] my-auto rounded-full">
-
-                            <img class="w-7 h-7"
-                                 src="https://png.pngtree.com/png-vector/20221018/ourmid/pngtree-twitter-social-media-round-icon-png-image_6315985.png" />
-
+                        <div>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 48 48"><path fill="#29b6f6" d="M24 4A20 20 0 1 0 24 44A20 20 0 1 0 24 4Z" /><path fill="#fff" d="M33.95,15l-3.746,19.126c0,0-0.161,0.874-1.245,0.874c-0.576,0-0.873-0.274-0.873-0.274l-8.114-6.733 l-3.97-2.001l-5.095-1.355c0,0-0.907-0.262-0.907-1.012c0-0.625,0.933-0.923,0.933-0.923l21.316-8.468 c-0.001-0.001,0.651-0.235,1.126-0.234C33.667,14,34,14.125,34,14.5C34,14.75,33.95,15,33.95,15z" /><path fill="#b0bec5" d="M23,30.505l-3.426,3.374c0,0-0.149,0.115-0.348,0.12c-0.069,0.002-0.143-0.009-0.219-0.043 l0.964-5.965L23,30.505z" /><path fill="#cfd8dc" d="M29.897,18.196c-0.169-0.22-0.481-0.26-0.701-0.093L16,26c0,0,2.106,5.892,2.427,6.912 c0.322,1.021,0.58,1.045,0.58,1.045l0.964-5.965l9.832-9.096C30.023,18.729,30.064,18.416,29.897,18.196z" /></svg>
                         </div>
                         <div class="mx-4">
-                            <p class="text-gray-400 text-sm -mb-1">Twitter</p>
-                            <a class="text-white">Hesam Masoumi</a>
+                            <p class="text-gray-400 text-sm -mb-1">Telegram</p>
+                            <a class="text-white -mt-1" href="rm.me/hesamit97">hesamit97</a>
                         </div>
                     </div>
-                </a> *@
+                </a>
+                
+                <a target="_blank" href="https://Hesamit97#3149">
+                    <div class="flex flex-row my-5">
+                        <div>
+                            <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="40px" height="40px"><radialGradient id="La9SoowKGoEUHOnYdJMSEa" cx="24" cy="10.009" r="32.252" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8c9eff"/><stop offset=".368" stop-color="#889af8"/><stop offset=".889" stop-color="#7e8fe6"/><stop offset="1" stop-color="#7b8ce1"/></radialGradient><path fill="url(#La9SoowKGoEUHOnYdJMSEa)" d="M40.107,12.15c-0.065-0.102-0.139-0.182-0.236-0.255c-0.769-0.578-4.671-3.339-9.665-3.875	c-0.01-0.001-0.048-0.003-0.057-0.003c-0.098,0-0.183,0.057-0.224,0.14l-0.269,0.538c0,0-0.001,0-0.001,0	c-0.017,0.033-0.026,0.071-0.026,0.111c0,0.109,0.07,0.202,0.168,0.236c0.006,0.002,0.048,0.011,0.063,0.014	c4.267,1.028,6.863,2.89,9.149,4.945c-4.047-2.066-8.044-4.001-15.009-4.001s-10.961,1.936-15.009,4.001	c2.286-2.055,4.882-3.917,9.149-4.945c0.015-0.004,0.057-0.012,0.063-0.014c0.098-0.034,0.168-0.127,0.168-0.236	c0-0.04-0.009-0.078-0.026-0.111c0,0-0.001,0-0.001,0l-0.269-0.538c-0.041-0.083-0.125-0.14-0.224-0.14	c-0.009,0-0.048,0.002-0.057,0.003c-4.994,0.536-8.896,3.297-9.665,3.875c-0.097,0.073-0.17,0.153-0.236,0.255	c-0.708,1.107-5.049,8.388-5.892,21.632c-0.009,0.142,0.04,0.289,0.135,0.395c4.592,5.144,11.182,5.752,12.588,5.823	c0.167,0.008,0.327-0.065,0.427-0.199l1.282-1.709c0.1-0.134,0.046-0.322-0.111-0.379c-2.705-0.986-5.717-2.7-8.332-5.706	C11.231,34.457,16.12,37,24,37s12.769-2.543,16.009-4.993c-2.616,3.006-5.627,4.719-8.332,5.706	c-0.157,0.057-0.211,0.245-0.111,0.379l1.282,1.709c0.101,0.134,0.26,0.208,0.427,0.199c1.407-0.072,7.996-0.679,12.588-5.823	c0.095-0.106,0.144-0.253,0.135-0.395C45.156,20.538,40.815,13.257,40.107,12.15z"/><ellipse cx="30.5" cy="26" opacity=".05" rx="4.5" ry="5"/><ellipse cx="30.5" cy="26" opacity=".05" rx="4" ry="4.5"/><ellipse cx="30.5" cy="26" fill="#fff" rx="3.5" ry="4"/><ellipse cx="17.5" cy="26" opacity=".05" rx="4.5" ry="5"/><ellipse cx="17.5" cy="26" opacity=".05" rx="4" ry="4.5"/><ellipse cx="17.5" cy="26" fill="#fff" rx="3.5" ry="4"/></svg>
+                            </div>
+                        <div class="mx-4">
+                            <p class="text-gray-400 text-sm -mb-1">Discord</p>
+                            <a class="text-white -mt-1" href="Hesamit97#3149">#3149</a>
+                        </div>
+                    </div>
+                </a>
 
-                <a target="_blank" href="https://instagram.com/hesamit97">
+                <a target="_blank" href="http://linkedin.com/in/hesamit">
                     <div class="flex flex-row my-5">
                         <div class="p-1 bg-[#0077B5] my-auto rounded-full">
 
diff --git a/Resume.Blazor/package-lock.json b/Resume.Blazor/package-lock.json
index dfb59c3..6dbf83d 100644
--- a/Resume.Blazor/package-lock.json
+++ b/Resume.Blazor/package-lock.json
@@ -12,7 +12,7 @@
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.31",
         "postcss-cli": "^10.1.0",
-        "tailwindcss": "^3.3.5"
+        "tailwindcss": "^3.4.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -1186,9 +1186,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.3.5",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
-      "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",
+      "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
diff --git a/Resume.Blazor/package.json b/Resume.Blazor/package.json
index d8a17b3..f5c033e 100644
--- a/Resume.Blazor/package.json
+++ b/Resume.Blazor/package.json
@@ -13,6 +13,6 @@
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
-    "tailwindcss": "^3.3.5"
+    "tailwindcss": "^3.4.0"
   }
 }
diff --git a/Resume.Blazor/wwwroot/css/app.output.css b/Resume.Blazor/wwwroot/css/app.output.css
index 65f7b26..6408590 100644
--- a/Resume.Blazor/wwwroot/css/app.output.css
+++ b/Resume.Blazor/wwwroot/css/app.output.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -44,12 +46,14 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -121,8 +125,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -131,8 +137,12 @@ samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  font-size: 1em;
+  font-feature-settings: normal;
   /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
 }
 
 /*
@@ -649,10 +659,6 @@ video {
   margin-right: 1.25rem;
 }
 
-.mt-0 {
-  margin-top: 0px;
-}
-
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -766,6 +772,15 @@ video {
   width: 100%;
 }
 
+.w-auto {
+  width: auto;
+}
+
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -774,6 +789,14 @@ video {
   flex-wrap: wrap;
 }
 
+.content-center {
+  align-content: center;
+}
+
+.items-center {
+  align-items: center;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -796,6 +819,10 @@ video {
   overflow-x: auto;
 }
 
+.text-nowrap {
+  text-wrap: nowrap;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -813,11 +840,6 @@ video {
   background-color: rgb(0 119 181 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#00ACEE\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 172 238 / var(--tw-bg-opacity));
-}
-
 .bg-\[\#232339\] {
   --tw-bg-opacity: 1;
   background-color: rgb(35 35 57 / var(--tw-bg-opacity));