314 lines
22 KiB
Plaintext
314 lines
22 KiB
Plaintext
@page "/"
|
|
@using Resume.Blazor.Components.ItemTemplate
|
|
|
|
<MudContainer MaxWidth="MaxWidth.ExtraExtraLarge">
|
|
|
|
<MudGrid>
|
|
|
|
<MudItem xs="0" md="3" class="bg-transparent">
|
|
<div class="m-8">
|
|
<img src="https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/hesamProfile.png"
|
|
class="rounded-md" />
|
|
@* <mud class="text-white font-extrabold font-outfit-black text-4xl mt-8"> Amir Hossein Khademi </p> *@
|
|
<MudText class="text-white font-extrabold font-outfit-black text-4xl mt-8" Typo="Typo.h1">
|
|
Hesam Masoumi
|
|
</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">
|
|
Editor & Motion Graphics
|
|
</MudText>
|
|
<p class="mb-4 text-justify">
|
|
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 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 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
|
|
5.93869L6.56224 5.9813C7.01133 6.18933 7.48793 6.33187 7.97751 6.40452C8.18177 6.43484 8.33341 6.61024 8.33341
|
|
6.81674V7.91662C8.33341 8.14674 8.14641 8.33328 7.91629 8.33328L7.9157 8.33329Z" />
|
|
|
|
|
|
<ContactInfoItemTemplate Title="Address" Detail="Iran, Tehran, Aghdasie" SvgPath="M4.99992 8.74996C4.47364 8.30106 3.98583 7.80893 3.54159 7.27871C2.87492 6.48246 2.08325 5.29663 2.08325
|
|
4.16663C2.08266 2.98644 2.79336 1.92221 3.8837 1.47054C4.97404 1.01888 6.22911 1.26881 7.06325 2.10371C7.61178 2.6498
|
|
7.91905 3.39262 7.9166 4.16663C7.9166 5.29663 7.12492 6.48246 6.45825 7.27871C6.01401 7.80893 5.5262 8.30106 4.99992
|
|
8.74996ZM4.99992 2.91663C4.55334 2.91663 4.14068 3.15488 3.91739 3.54163C3.6941 3.92838 3.6941 4.40488 3.91739
|
|
4.79163C4.14068 5.17838 4.55334 5.41663 4.99992 5.41663C5.69028 5.41663 6.24992 4.85698 6.24992 4.16663C6.24992 3.47627
|
|
5.69028 2.91663 4.99992 2.91663Z" />
|
|
|
|
<div class="h-[0.1rem] bg-white opacity-10"></div>
|
|
<p class="my-5 text-gray-400">Socials</p>
|
|
|
|
<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">
|
|
<rect y="0.5" width="16" height="16" rx="8" fill="url(#paint0_radial_357_1266)" />
|
|
<rect y="0.5" width="16" height="16" rx="8" fill="url(#paint1_radial_357_1266)" fill-opacity="0.2" />
|
|
<path d="M6.33373 8.5002C6.33373 7.57972 7.07972 6.83333 8.0002 6.83333C8.92068 6.83333 9.66707 7.57972 9.66707 8.5002C9.66707
|
|
9.42068 8.92068 10.1671 8.0002 10.1671C7.07972 10.1671 6.33373 9.42068 6.33373 8.5002ZM5.43266 8.5002C5.43266 9.91826
|
|
6.58214 11.0677 8.0002 11.0677C9.41826 11.0677 10.5677 9.91826 10.5677 8.5002C10.5677 7.08214 9.41826 5.93266 8.0002
|
|
5.93266C6.58214 5.93266 5.4327 7.08206 5.4327 8.5002H5.43266ZM10.0694 5.83085C10.0694 5.94953 10.1045 6.06555 10.1704
|
|
6.16425C10.2363 6.26295 10.33 6.33989 10.4396 6.38535C10.5492 6.43081 10.6698 6.44274 10.7863 6.41964C10.9027 6.39653
|
|
11.0096 6.33943 11.0935 6.25554C11.1775 6.17166 11.2347 6.06477 11.2579 5.94839C11.2811 5.832 11.2692 5.71135 11.2239
|
|
5.6017C11.1785 5.49204 11.1016 5.3983 11.003 5.33233C10.9043 5.26635 10.7883 5.23112 10.6697 5.23107H10.6694C10.5104
|
|
5.23114 10.3578 5.29435 10.2453 5.40681C10.1328 5.51927 10.0695 5.67178 10.0694 5.83085ZM5.98012 12.5703C5.49262 12.5481
|
|
5.22765 12.4669 5.05156 12.3983C4.81811 12.3074 4.65155 12.1992 4.47642 12.0243C4.30129 11.8494 4.19289 11.683 4.1024
|
|
11.4495C4.03376 11.2735 3.95256 11.0085 3.9304 10.521C3.90616 9.9939 3.90132 9.83557 3.90132 8.50028C3.90132 7.16499
|
|
3.90656 7.0071 3.9304 6.4796C3.9526 5.9921 4.0344 5.72757 4.1024 5.55104C4.19329 5.31759 4.30153 5.15103 4.47642
|
|
4.9759C4.65131 4.80077 4.81771 4.69237 5.05156 4.60188C5.22757 4.53324 5.49262 4.45204 5.98012 4.42988C6.50718 4.40564
|
|
6.66551 4.4008 8.0002 4.4008C9.33489 4.4008 9.49338 4.40596 10.0209 4.42996C10.5084 4.45216 10.7729 4.53396 10.9494
|
|
4.60196C11.1829 4.69245 11.3495 4.80109 11.5246 4.97598C11.6997 5.15087 11.8077 5.31767 11.8986 5.55112C11.9672 5.72713
|
|
12.0484 5.99218 12.0706 6.47968C12.0948 7.00718 12.0997 7.16507 12.0997 8.50036C12.0997 9.83565 12.0948 9.99354 12.0706
|
|
10.521C12.0484 11.0085 11.9668 11.2735 11.8986 11.4496C11.8077 11.683 11.6995 11.8496 11.5246 12.0243C11.3497 12.1991
|
|
11.1829 12.3075 10.9494 12.3984C10.7734 12.467 10.5084 12.5482 10.0209 12.5704C9.49382 12.5946 9.33549 12.5994 8.0002
|
|
12.5994C6.66491 12.5994 6.50702 12.5946 5.98012 12.5704V12.5703ZM5.93872 3.53028C5.40642 3.55452 5.04268 3.63893 4.72503
|
|
3.76253C4.39626 3.89018 4.11756 4.06142 3.83927 4.33927C3.56098 4.61713 3.39018 4.89586 3.26253 5.22503C3.13893 5.54288
|
|
3.05452 5.90642 3.03028 6.43872C3.00564 6.97186 3 7.14231 3 8.5002C3 9.8581 3.00564 10.0285 3.03028 10.5617C3.05452
|
|
11.094 3.13893 11.4575 3.26253 11.7754C3.39018 12.1041 3.56102 12.3834 3.83927 12.6611C4.11752 12.9389 4.39586 13.1099
|
|
4.72503 13.2379C5.04328 13.3615 5.40642 13.4459 5.93872 13.4701C6.47214 13.4944 6.64231 13.5004 8.0002 13.5004C9.35809
|
|
13.5004 9.52854 13.4948 10.0617 13.4701C10.594 13.4459 10.9575 13.3615 11.2754 13.2379C11.6041 13.1099 11.8828 12.939
|
|
12.1611 12.6611C12.4394 12.3833 12.6099 12.1041 12.7379 11.7754C12.8615 11.4575 12.9463 11.094 12.9701 10.5617C12.9944
|
|
10.0281 13 9.8581 13 8.5002C13 7.14231 12.9944 6.97186 12.9701 6.43872C12.9459 5.90638 12.8615 5.54268 12.7379
|
|
5.22503C12.6099 4.89626 12.439 4.61757 12.1611 4.33927C11.8833 4.06098 11.6041 3.89018 11.2758 3.76253C10.9575 3.63893
|
|
10.594 3.55412 10.0621 3.53028C9.52886 3.50592 9.3585 3.5 8.0008 3.5C6.64311 3.5 6.47234 3.50564 5.93892 3.53028"
|
|
fill="white" />
|
|
<defs>
|
|
<radialGradient id="paint0_radial_357_1266" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(1.0355 16.1495) scale(20.3141)">
|
|
<stop offset="0.09" stop-color="#FA8F21" />
|
|
<stop offset="0.78" stop-color="#D82D7E" />
|
|
</radialGradient>
|
|
<radialGradient id="paint1_radial_357_1266" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(8 16) scale(12.5)">
|
|
<stop offset="0.713542" stop-color="#8C3AAA" stop-opacity="0" />
|
|
<stop offset="1" stop-color="#8C3AAA" />
|
|
</radialGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
<div class="mx-4">
|
|
<p class="text-gray-400 text-sm -mb-1">Instagram</p>
|
|
<a class="text-white -mt-1" target="_blank" href="https://Instagram.com/hesamit97">hesamit97</a>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a target="_blank" href="https://t.me/hesamit97">
|
|
<div class="flex flex-row my-5">
|
|
<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">Telegram</p>
|
|
<a class="text-white -mt-1" target="_blank" href="https://t.me/hesamit97">hesamit97</a>
|
|
</div>
|
|
</div>
|
|
</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" target="_blank" href="https://Hesamit97#3149">#3149</a>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<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">
|
|
|
|
<img class="w-7 h-7 rounded-full"
|
|
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LinkedIn_logo_initials.png/800px-LinkedIn_logo_initials.png" />
|
|
|
|
</div>
|
|
<div class="mx-4">
|
|
<p class="text-gray-400 text-sm -mb-1">Linkdin</p>
|
|
<a class="text-white -mt-1">hesamit97</a>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</MudItem>
|
|
<MudItem xs="12" md="9" class="bg-transparent">
|
|
<MudStack Row="true" AlignItems="AlignItems.Center">
|
|
<div class="bg-[#2E2E48] w-10 h-10 rounded-full">
|
|
<div class="bg-[#C696FC] w-3 h-3 rounded-full m-3.5"></div>
|
|
</div>
|
|
<p class="text-white text-2xl font-bold">Experience</p>
|
|
</MudStack>
|
|
<div class="flex ml-5 flex-row">
|
|
@* <div class="w-0.5 bg-[#2E2E48] h-auto collapse md:visible"></div> *@
|
|
|
|
<MudGrid class="md:ml-5 my-5">
|
|
|
|
<MudItem sm="6">
|
|
|
|
<ExperienceItemTemplate Period="October 2020 - Now"
|
|
Feilds="@(new string[] {"Editor" , "Motion Graphics" , "Videography"})" HasLeftBorder="true"
|
|
ImageSrc="https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Experience/Kelid%20Studio.png"
|
|
CompanyName="Kelid Studio"
|
|
Detail="Since October 2020, I've also been actively working at Kelid Studio as a specialist in editing, motion graphics, and videography within the production team. This engagement continues to date." />
|
|
</MudItem>
|
|
|
|
<MudItem sm="6">
|
|
<ExperienceItemTemplate Period="February 2020 - October 2020" Feilds="@(new string[] {"Editor" , "Motion Graphics"})"
|
|
ImageSrc="https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Experience/Fekrane%20Media.png"
|
|
HasLeftBorder="false"
|
|
CompanyName="Fekraneh Media"
|
|
Detail="Since February 2020, I have been working as a video editing and motion graphics specialist at the Fekraneh Media." />
|
|
</MudItem>
|
|
|
|
<MudItem sm="6">
|
|
<ExperienceItemTemplate Period="September 2019 - January 2020"
|
|
Feilds="@(new string[] {"Editor"})"
|
|
ImageSrc="https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Experience/Daneshjoo.png"
|
|
CompanyName="Student News Network"
|
|
Detail="Since September 2019, due to the transfer of the socio-political working group team from Nasim Online News Agency to Student News Network Agency, I had to change my workplace. There, I continued my work as a video editor." />
|
|
</MudItem>
|
|
|
|
<MudItem sm="6">
|
|
<ExperienceItemTemplate Period="June 2019 - September 2019"
|
|
Feilds="@(new string[] {"Editor"})"
|
|
ImageSrc="https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Experience/Nasim%20Online.png"
|
|
HasLeftBorder="false"
|
|
CompanyName="Nasim Online News"
|
|
Detail="From June 2019, I worked as a video editor for the socio-political working group team at Nasim Online News Agency on a project basis." />
|
|
</MudItem>
|
|
|
|
|
|
<MudItem sm="6">
|
|
<ExperienceItemTemplate Period="June 2017 - September 2019"
|
|
Feilds="@(new string[] {"Editor" , "Motion Graphics"})"
|
|
ImageSrc="https://s3.ir-thr-at1.arvanstorage.ir/resume-contents/Images/Icones/Experience/Blue%20Window.png"
|
|
CompanyName="Panjere Abi Copmany"
|
|
Detail="Since July 2017, when I began my activity in video editing and motion graphics, I started as an intern at Panjere Abi Company. After 6 months, I joined the company as one of their team members." />
|
|
</MudItem>
|
|
|
|
</MudGrid>
|
|
</div>
|
|
|
|
<MudStack Row="true" AlignItems="AlignItems.Center">
|
|
<div class="bg-[#2E2E48] w-10 h-10 rounded-full">
|
|
<div class="bg-[#C696FC] w-3 h-3 rounded-full m-3.5"></div>
|
|
</div>
|
|
<MudText class=" text-white text-2xl font-bold">
|
|
<p>Latest Projects</p>
|
|
</MudText>
|
|
</MudStack>
|
|
<div>
|
|
@* <div class="w-0.5 mr-5 bg-[#2E2E48] h-auto collapse md:visible"></div> *@
|
|
<div>
|
|
<div class="flex relative w-full overflow-x-auto ml-5 justify-items-stretch py-3">
|
|
<div class="flex relative w-full overflow-x-auto">
|
|
<MudChipSet SelectedChipChanged="CategorySelectedChange" Filter="true">
|
|
@foreach (var item in ProjectCategoryItemModels)
|
|
{
|
|
if (categoryChipCounter == 0)
|
|
{
|
|
<MudChip Default="true" Value="@item" SelectedColor="Color.Primary"> <p>@item.Name</p> </MudChip>
|
|
}else
|
|
{
|
|
<MudChip Value="@item" SelectedColor="Color.Primary"> <p>@item.Name</p> </MudChip>
|
|
}
|
|
categoryChipCounter++;
|
|
}
|
|
</MudChipSet>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="flex relative w-full overflow-x-auto ml-5 justify-items-stretch py-3">
|
|
<div class="flex relative w-full overflow-x-auto">
|
|
@foreach (var item in ProjectItemModels)
|
|
{
|
|
<div class="mb-3">
|
|
<ProjectItemTemplate VideoSrc="@item.VideoSrc" Name="@item.Name" Detail="@item.Detail" ImageSrc="@item.ImageSrc"
|
|
ShowButton="@item.ShowButton" Link="@item.Link" Feilds="@item.Feilds" ButtonText="@item.ButtonText" />
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<MudStack Row="true" AlignItems="AlignItems.Center">
|
|
<div class="bg-[#2E2E48] w-10 h-10 rounded-full">
|
|
<div class="bg-[#C696FC] w-3 h-3 rounded-full m-3.5"></div>
|
|
</div>
|
|
<p class="my-auto mx-5 text-white text-2xl font-bold">Skills</p>
|
|
</MudStack>
|
|
<MudStack Row="true" class="md:ml-5">
|
|
@* <div class="w-0.5 collapse md:visible md:mr-10 bg-[#2E2E48] h-auto"></div> *@
|
|
<MudGrid class="my-5" Spacing="1">
|
|
@foreach (var item in SkillItemModels)
|
|
{
|
|
<MudItem xs="6" sm="4" md="4" lg="3">
|
|
<SkillItemTemplate Name="@item.Name" ExperiencePeriod="@item.ExperiencePeriod" ImageSrc="@item.ImageSrc" />
|
|
</MudItem>
|
|
}
|
|
|
|
</MudGrid>
|
|
</MudStack>
|
|
|
|
|
|
|
|
|
|
<MudStack Row="true" AlignItems="AlignItems.Center">
|
|
<div class="bg-[#2E2E48] w-10 h-10 rounded-full">
|
|
<div class="bg-[#C696FC] w-3 h-3 rounded-full m-3.5"></div>
|
|
</div>
|
|
<p class="my-auto mx-5 text-white text-2xl font-bold">Tools</p>
|
|
</MudStack>
|
|
<MudStack Row="true" class="md:ml-15">
|
|
<div class="w-0.5 collapse md:mr-10 bg-[#2E2E48] h-auto"></div>
|
|
<MudGrid class="my-5" Spacing="1" Justify="Justify.Center">
|
|
@foreach (var item in ToolsItemModels)
|
|
{
|
|
<MudItem xs="6" sm="4" md="4" lg="2">
|
|
<ToolsItemTemplate Name="@item.Name" ExperiencePeriod="@item.ExperiencePeriod" ImageSrc="@item.ImageSrc" />
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
</MudStack>
|
|
|
|
|
|
</MudItem>
|
|
|
|
</MudGrid>
|
|
</MudContainer>
|
|
|
|
@code
|
|
{
|
|
|
|
[Parameter] public List<SkillItemModel> SkillItemModels { get; set; } = ExperienceHelper.SkillItemModels;
|
|
[Parameter] public List<SkillItemModel> ToolsItemModels { get; set; } = ExperienceHelper.ToolsItemModels;
|
|
|
|
[Parameter] public List<ProjectItemModel> ProjectItemModels { get; set; } = new();
|
|
[Parameter] public List<ProjectCategoryItemModel> ProjectCategoryItemModels { get; set; } = ExperienceHelper.ProjectCategoryItemModels;
|
|
|
|
private int categoryChipCounter = 0;
|
|
|
|
private void CategorySelectedChange(MudChip obj)
|
|
{
|
|
if (obj.Value is ProjectCategoryItemModel category)
|
|
{
|
|
ProjectItemModels = new List<ProjectItemModel>();
|
|
ProjectItemModels.AddRange(category.Projects);
|
|
}
|
|
}
|
|
}
|