├── .gitignore ├── demo ├── darkDemo.webp └── lightDemo.webp ├── assets ├── images │ ├── PHP.png │ ├── RBTS.png │ ├── Sass.png │ ├── Vite.png │ ├── css3.png │ ├── git.png │ ├── npm.png │ ├── Docker.png │ ├── Figma.png │ ├── Linux.png │ ├── Prompt.png │ ├── Python.png │ ├── favico.png │ ├── html5.png │ ├── pet-5.webp │ ├── react.png │ ├── Arduino.png │ ├── Ducky-1.webp │ ├── bootstrap.png │ ├── caraie.webp │ ├── command.png │ ├── jammer-4.webp │ ├── photoshop.png │ ├── tailwind.png │ ├── vs-code.png │ ├── BTCPrice-2.webp │ ├── duckyScript.png │ ├── javascript.png │ ├── about-banner.webp │ ├── hero-banner.webp │ ├── hero-banner-md.webp │ ├── hero-banner-sm.webp │ ├── passwordManager-3.webp │ ├── stats-card_icon-1.png │ ├── stats-card_icon-2.png │ └── stats-card_icon-3.png ├── font │ └── Vazir-Regular.ttf ├── js │ └── script.js └── css │ └── style.css ├── cv ├── assets │ ├── images │ │ ├── profile.png │ │ ├── logo-en.svg │ │ ├── logo.svg │ │ ├── logo-text-en.svg │ │ └── logo-text.svg │ ├── fonts │ │ ├── Vazirmatn-RD-Bold.woff2 │ │ ├── Vazirmatn-RD-Medium.woff2 │ │ ├── Vazirmatn-RD-Regular.woff2 │ │ ├── Vazirmatn-RD[wght].woff2 │ │ └── Vazirmatn-RD-SemiBold.woff2 │ ├── js │ │ ├── main.min.js │ │ └── main.js │ └── css │ │ └── main.min.css ├── index.html └── en │ └── index.html ├── sitemap.xml ├── LICENSE ├── README.md ├── Languages.json ├── gallery.html ├── galleryEN.html ├── galleryGER.html └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /demo/darkDemo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/demo/darkDemo.webp -------------------------------------------------------------------------------- /demo/lightDemo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/demo/lightDemo.webp -------------------------------------------------------------------------------- /assets/images/PHP.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/PHP.png -------------------------------------------------------------------------------- /assets/images/RBTS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/RBTS.png -------------------------------------------------------------------------------- /assets/images/Sass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/Sass.png -------------------------------------------------------------------------------- /assets/images/Vite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/Vite.png -------------------------------------------------------------------------------- /assets/images/css3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/css3.png -------------------------------------------------------------------------------- /assets/images/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/git.png -------------------------------------------------------------------------------- /assets/images/npm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/npm.png -------------------------------------------------------------------------------- /assets/images/Docker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/Docker.png -------------------------------------------------------------------------------- /assets/images/Figma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/Figma.png -------------------------------------------------------------------------------- /assets/images/Linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/Linux.png -------------------------------------------------------------------------------- /assets/images/Prompt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/Prompt.png -------------------------------------------------------------------------------- /assets/images/Python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/Python.png -------------------------------------------------------------------------------- /assets/images/favico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/favico.png -------------------------------------------------------------------------------- /assets/images/html5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/html5.png -------------------------------------------------------------------------------- /assets/images/pet-5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/pet-5.webp -------------------------------------------------------------------------------- /assets/images/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/react.png -------------------------------------------------------------------------------- /assets/images/Arduino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/Arduino.png -------------------------------------------------------------------------------- /assets/images/Ducky-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/Ducky-1.webp -------------------------------------------------------------------------------- /assets/images/bootstrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/bootstrap.png -------------------------------------------------------------------------------- /assets/images/caraie.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/caraie.webp -------------------------------------------------------------------------------- /assets/images/command.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/command.png -------------------------------------------------------------------------------- /assets/images/jammer-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/jammer-4.webp -------------------------------------------------------------------------------- /assets/images/photoshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/photoshop.png -------------------------------------------------------------------------------- /assets/images/tailwind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/tailwind.png -------------------------------------------------------------------------------- /assets/images/vs-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/vs-code.png -------------------------------------------------------------------------------- /assets/font/Vazir-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/font/Vazir-Regular.ttf -------------------------------------------------------------------------------- /assets/images/BTCPrice-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/BTCPrice-2.webp -------------------------------------------------------------------------------- /assets/images/duckyScript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/duckyScript.png -------------------------------------------------------------------------------- /assets/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/javascript.png -------------------------------------------------------------------------------- /cv/assets/images/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/cv/assets/images/profile.png -------------------------------------------------------------------------------- /assets/images/about-banner.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/about-banner.webp -------------------------------------------------------------------------------- /assets/images/hero-banner.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/hero-banner.webp -------------------------------------------------------------------------------- /assets/images/hero-banner-md.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/hero-banner-md.webp -------------------------------------------------------------------------------- /assets/images/hero-banner-sm.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/hero-banner-sm.webp -------------------------------------------------------------------------------- /assets/images/passwordManager-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/passwordManager-3.webp -------------------------------------------------------------------------------- /assets/images/stats-card_icon-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/stats-card_icon-1.png -------------------------------------------------------------------------------- /assets/images/stats-card_icon-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/stats-card_icon-2.png -------------------------------------------------------------------------------- /assets/images/stats-card_icon-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/assets/images/stats-card_icon-3.png -------------------------------------------------------------------------------- /cv/assets/fonts/Vazirmatn-RD-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/cv/assets/fonts/Vazirmatn-RD-Bold.woff2 -------------------------------------------------------------------------------- /cv/assets/fonts/Vazirmatn-RD-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/cv/assets/fonts/Vazirmatn-RD-Medium.woff2 -------------------------------------------------------------------------------- /cv/assets/fonts/Vazirmatn-RD-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/cv/assets/fonts/Vazirmatn-RD-Regular.woff2 -------------------------------------------------------------------------------- /cv/assets/fonts/Vazirmatn-RD[wght].woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/cv/assets/fonts/Vazirmatn-RD[wght].woff2 -------------------------------------------------------------------------------- /cv/assets/fonts/Vazirmatn-RD-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zephinax/portfolio/HEAD/cv/assets/fonts/Vazirmatn-RD-SemiBold.woff2 -------------------------------------------------------------------------------- /sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | https://zephinax.ir/ 5 | 2023-05-01 6 | weekly 7 | 1.0 8 | 9 | 10 | https://zephinax.ir/#about 11 | 2023-05-01 12 | monthly 13 | 0.8 14 | 15 | 16 | https://zephinax.ir/#skills 17 | 2023-05-01 18 | monthly 19 | 0.8 20 | 21 | 22 | https://zephinax.ir/gallery 23 | 2023-05-01 24 | weekly 25 | 0.9 26 | 27 | 28 | https://zephinax.ir/#contact 29 | 2023-05-01 30 | monthly 31 | 0.7 32 | 33 | 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Zephinax 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /cv/assets/images/logo-en.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | 10 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /cv/assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Portfolio Website - v1.2
3 | Click Here To Show Demo 4 |

5 |
6 |
Dark Demo Image 7 | Light Demo Image
8 |
9 |
10 | 11 | [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)   12 | [![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)](https://forthebadge.com)   13 | [![forthebadge](https://forthebadge.com/images/badges/open-source.svg)](https://forthebadge.com)   14 | 15 |
16 | 17 |

18 | 🔹 19 | Report Bug     20 | 🔹 21 | Request Feature 22 |

23 | 24 | ## How to use? 25 | 26 | 1 - Fork this repo to modify and make changes of your own. 27 | 28 | 2 - To active form, go to [Web3forms](https://web3forms.com) and click on [ Create Your Access Key ] 29 | and enter your email to generate your access key, then search for [ hidden ] in index.html and change vaule with your access key 30 | 31 | 3 - You can use github pages to host this website 32 | 33 | ## Features 34 | 35 | - 📱 Fully Responsive 36 | 37 | - 🖇️ Working Contact Form 38 | 39 | - 📖 Multi-Page Layout 40 | 41 | - 🔅 Dark & Light Mode 42 | 43 | - 💄 Fully Customizable 44 | 45 | Give a ⭐ if you like this project! 46 | 47 | ## Authors 48 | 49 | - [@Zephinax](https://github.com/Zephinax) 50 | 51 | Please give me proper credit by linking back to [Me](https://github.com/Zephinax), Thanks! 52 | -------------------------------------------------------------------------------- /cv/assets/js/main.min.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function () { 2 | var e, t, o, l, n, c, d, a, s; 3 | function r() { 4 | document.documentElement.classList.contains('dark') 5 | ? (document.documentElement.classList.remove('dark'), 6 | (localStorage.theme = 'light'), 7 | (t.style.display = 'block'), 8 | (o.style.display = 'none')) 9 | : (document.documentElement.classList.add('dark'), 10 | (localStorage.theme = 'dark'), 11 | (o.style.display = 'block'), 12 | (t.style.display = 'none')); 13 | } 14 | (e = document.querySelector('#toggleDarkMode')), 15 | (t = document.querySelector('#moonIcon')), 16 | (o = document.querySelector('#sunIcon')), 17 | (l = document.querySelector('#mobileMenu')), 18 | (toggleMenuBtn = document.querySelector('#toggleMenu')), 19 | (n = document.querySelector('#closeIcon')), 20 | (c = document.querySelector('#menuIcon')), 21 | (d = document.querySelectorAll('.btn-modal')), 22 | (a = document.querySelectorAll('.modal')), 23 | (s = document.querySelectorAll('.btn-close')), 24 | 'dark' === localStorage.theme 25 | ? (o.style.display = 'block') 26 | : (t.style.display = 'block'), 27 | e.addEventListener('click', r), 28 | toggleMenuBtn.addEventListener('click', function () { 29 | 'false' == toggleMenuBtn.dataset.toggle 30 | ? ((toggleMenuBtn.dataset.toggle = !0), 31 | (l.style.display = 'block'), 32 | (c.style.display = 'none'), 33 | (n.style.display = 'flex')) 34 | : ((toggleMenuBtn.dataset.toggle = !1), 35 | (l.style.display = 'none'), 36 | (c.style.display = 'block'), 37 | (n.style.display = 'none')); 38 | }), 39 | window.addEventListener('keydown', function (e) { 40 | if ('n' === e.key.toLowerCase()) r(); 41 | }); 42 | for (var i = 0; i < d.length; i++) 43 | d[i].onclick = function (e) { 44 | e.preventDefault(), 45 | (document.querySelector( 46 | e.target.getAttribute('data-href') 47 | ).style.display = 'block'); 48 | }; 49 | for (i = 0; i < s.length; i++) 50 | s[i].onclick = function () { 51 | for (var e in a) void 0 !== a[e].style && (a[e].style.display = 'none'); 52 | }; 53 | window.onclick = function (e) { 54 | if (e.target.classList.contains('modal-area')) 55 | for (var t in a) void 0 !== a[t].style && (a[t].style.display = 'none'); 56 | }; 57 | }); 58 | -------------------------------------------------------------------------------- /cv/assets/images/logo-text-en.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | 10 | 12 | 17 | 22 | 27 | 32 | 37 | 38 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /cv/assets/js/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function () { 2 | // Variables 3 | var toggleDarkModeBtn, 4 | moonIcon, 5 | sunIcon, 6 | mobileMenu, 7 | closeIcon, 8 | menuIcon, 9 | btn, 10 | modals, 11 | closeBtns; 12 | 13 | toggleDarkModeBtn = document.querySelector('#toggleDarkMode'); 14 | moonIcon = document.querySelector('#moonIcon'); 15 | sunIcon = document.querySelector('#sunIcon'); 16 | mobileMenu = document.querySelector('#mobileMenu'); 17 | toggleMenuBtn = document.querySelector('#toggleMenu'); 18 | closeIcon = document.querySelector('#closeIcon'); 19 | menuIcon = document.querySelector('#menuIcon'); 20 | btn = document.querySelectorAll('.btn-modal'); 21 | modals = document.querySelectorAll('.modal'); 22 | closeBtns = document.querySelectorAll('.btn-close'); 23 | 24 | // Methods 25 | function toggleDarkMode() { 26 | if (document.documentElement.classList.contains('dark')) { 27 | document.documentElement.classList.remove('dark'); 28 | localStorage.theme = 'light'; 29 | moonIcon.style.display = 'block'; 30 | sunIcon.style.display = 'none'; 31 | } else { 32 | document.documentElement.classList.add('dark'); 33 | localStorage.theme = 'dark'; 34 | sunIcon.style.display = 'block'; 35 | moonIcon.style.display = 'none'; 36 | } 37 | } 38 | 39 | function toggleMenu() { 40 | if (toggleMenuBtn.dataset.toggle == 'false') { 41 | toggleMenuBtn.dataset.toggle = true; 42 | mobileMenu.style.display = 'block'; 43 | menuIcon.style.display = 'none'; 44 | closeIcon.style.display = 'flex'; 45 | } else { 46 | toggleMenuBtn.dataset.toggle = false; 47 | mobileMenu.style.display = 'none'; 48 | menuIcon.style.display = 'block'; 49 | closeIcon.style.display = 'none'; 50 | } 51 | } 52 | 53 | function keyShortcuts(e) { 54 | switch (e.key.toLowerCase()) { 55 | case 'n': 56 | toggleDarkMode(); 57 | break; 58 | default: 59 | break; 60 | } 61 | } 62 | 63 | // Initializes & Event Listerner 64 | if (localStorage.theme === 'dark') { 65 | sunIcon.style.display = 'block'; 66 | } else { 67 | moonIcon.style.display = 'block'; 68 | } 69 | 70 | toggleDarkModeBtn.addEventListener('click', toggleDarkMode); 71 | toggleMenuBtn.addEventListener('click', toggleMenu); 72 | window.addEventListener('keydown', keyShortcuts); 73 | 74 | for (var i = 0; i < btn.length; i++) { 75 | btn[i].onclick = function (e) { 76 | e.preventDefault(); 77 | var modal = document.querySelector(e.target.getAttribute('data-href')); 78 | modal.style.display = 'block'; 79 | }; 80 | } 81 | 82 | for (var i = 0; i < closeBtns.length; i++) { 83 | closeBtns[i].onclick = function () { 84 | for (var index in modals) { 85 | if (typeof modals[index].style !== 'undefined') 86 | modals[index].style.display = 'none'; 87 | } 88 | }; 89 | } 90 | 91 | window.onclick = function (e) { 92 | if (e.target.classList.contains('modal-area')) { 93 | for (var index in modals) { 94 | if (typeof modals[index].style !== 'undefined') 95 | modals[index].style.display = 'none'; 96 | } 97 | } 98 | }; 99 | }); 100 | -------------------------------------------------------------------------------- /cv/assets/images/logo-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Languages.json: -------------------------------------------------------------------------------- 1 | { 2 | "Fa": { 3 | "home": "خانه", 4 | "aboutMe": "درباره من", 5 | "skills": "مهارت ها", 6 | "tools": "ابزار ها", 7 | "gallery": "گالری پروژه ها", 8 | "contact": "ارتباط با من", 9 | "homeContent": "جایی که داستان من شروع شد", 10 | "aboutTitle": "با من بیشتر آشنا شو", 11 | "aboutContent": "امیرعلی هستم. یک گیک، وب دولوپر، علاقه مند به لینوکس و نرم افزار آزاد، برنامه نویس سخت افزار و نرم افزار و عاشق یادگیری و به اشتراک گذاشتن چیز‌ها. همچنین فعال در حوزه [ دیزاین UI & UX ،هوش مصنوعی ،امنیت، اینترنت اشیاء، گجت ها، موبایل، کامپیوتر و لپتاپ ] و یکی از اعضای تیم زیکادو. تقریبا مسلط به زبان انگلیسی. از کار های چالش برانگیز مثل نصب و توسعه کاستوم رام برای گوشی های اندرویدی و نصب هکینتاش خوشم میاد و سعی میکنم چیز های زیادی از طریق حل مشکلات و چالش های این کار ها یاد بگیرم.", 12 | "downloadCv": "دانلود رزومه", 13 | "skillsTitle": "مهارت های من شامل چه چیزایی میشه؟", 14 | "skillsSubTitle": "مهارت های من", 15 | "skillsContent": "برای اینکه بتونم ایده های توی ذهنم رو به واقعیت تبدیل کنم باید چیزهای مختلف زیادی یاد میگرفتم که هنوزم تموم نشده و ادامه داره :)", 16 | "contactTitle": "میخوای باهام صحبت کنی؟", 17 | "contactContent": "اگه فکر میکنی پروژه ای تو ذهنت داری که ممکنه ازش خوشم بیاد یا باهام کاری داشتی فقط کافیه فرمو پر کنی تا باهام صحبت کنی یا میتونی تو یکی از شبکه های اجتماعی پیام بدی.", 18 | "email": "ایمیل", 19 | "linkedin": "لینکدین", 20 | "instagram": "اینستاگرام", 21 | "telegram": "تلگرام", 22 | "github": "گیت هاب", 23 | "nameLastName": "نام و نام خانوادگی", 24 | "nameLastNamePlaceHolder": "فلانی فلانیان", 25 | "emailPlaceHolder": "felani@mail.com", 26 | "phoneNumber": "شماره تماس", 27 | "phoneNumberPlaceHolder": "09123456789", 28 | "message": "متن پیام", 29 | "messagePlaceHolder": "هنوز که چیزی ننوشتی...", 30 | "sendMsg": "ارسال پیام", 31 | "footerContent": "با کلیک بر روی این متن میتونید در توسعه این وبسایت مشارکت کنید" 32 | }, 33 | "En": { 34 | "home": "Home", 35 | "aboutMe": "About Me", 36 | "skills": "Skills", 37 | "tools": "Tools", 38 | "gallery": "Projects Gallery", 39 | "contact": "Contact Me", 40 | "homeContent": "Where my story began", 41 | "aboutTitle": "Get to know me more", 42 | "aboutContent": "I am Amirali, a geek, web developer, interested in Linux and open-source software, hardware and software programmer, passionate about learning and sharing things. I am also active in the field of [UI & UX design, artificial intelligence, security, Internet of Things, gadgets, mobile, computer and laptop] and a member of the XeCudo team. Almost fluent in English. I enjoy challenging tasks like installing and developing coustom roms for Android phones and installing Hackintosh, and I try to learn a lot through solving problems and challenges of these tasks.", 43 | "downloadCv": "Download Cv", 44 | 45 | "skillsTitle": "What skills do I have?", 46 | "skillsSubTitle": "My skills", 47 | "skillsContent": "To bring the ideas in my mind to reality, I had to learn many different things that are still ongoing and continuing :)", 48 | "contactTitle": "Do you want to talk to me?", 49 | "contactContent": "If you think you have a project in mind that I might like or if you have work with me, just fill out the form to talk to me or you can message me on one of the social networks.", 50 | "email": "E-mail", 51 | "linkedin": "LinkedIn", 52 | "instagram": "Instagram", 53 | "telegram": "Telegram", 54 | "github": "GitHub", 55 | "nameLastName": "Name and Last Name", 56 | "nameLastNamePlaceHolder": "John Doe", 57 | "emailPlaceHolder": "johndoe@mail.com", 58 | "phoneNumber": "Phone Number", 59 | "phoneNumberPlaceHolder": "09123456789", 60 | "message": "Message", 61 | "messagePlaceHolder": "You haven't written anything yet...", 62 | "sendMsg": "Send message", 63 | "footerContent": "By clicking on this text, you can participate in the development of this website" 64 | }, 65 | "Ger": { 66 | "home": "Zuhause", 67 | "aboutMe": "Über mich", 68 | "skills": "Fähigkeiten", 69 | "tools": "Werkzeug", 70 | "gallery": "Projektgalerie", 71 | "contact": "Kontaktiere mich", 72 | "homeContent": "Wo meine Geschichte begann", 73 | "aboutTitle": "Lerne mich besser kennen", 74 | "aboutContent": "Ich bin Amirali, ein Geek, Webentwickler, interessiert an Linux und Open-Source-Software, Hardware- und Softwareprogrammierer, leidenschaftlich daran, Dinge zu lernen und zu teilen. Ich bin auch aktiv auf dem Gebiet [UI & UX Design, künstliche Intelligenz, Sicherheit, Internet der Dinge, Gadgets, Mobilgeräte, Computer und Laptop] und ein Mitglied des Xecudo-Teams. Fast fließend in Englisch. Ich genieße herausfordernde Aufgaben wie das Installieren und Entwickeln von benutzerdefinierten ROMs für Android-Telefone und das Installieren von Hackintosh, und ich versuche viel zu lernen, indem ich Probleme und Herausforderungen dieser Aufgaben löse.", 75 | "downloadCv": "Lebenslauf herunterladen", 76 | "skillsTitle": "Welche Fähigkeiten habe ich?", 77 | "skillsSubTitle": "meine Fähigkeiten", 78 | "skillsContent": "Um die Ideen in meinem Kopf in die Realität umzusetzen, musste ich viele verschiedene Dinge lernen, die noch im Gange sind und weitergehen :)", 79 | "contactTitle": "Möchtest du mit mir sprechen?", 80 | "contactContent": "Wenn du denkst, dass du ein Projekt im Kopf hast, das mir gefallen könnte, oder wenn du mit mir arbeiten möchtest, fülle einfach das Formular aus, um mit mir zu sprechen, oder du kannst mir in einem der sozialen Netzwerke eine Nachricht senden.", 81 | "email": "E-Mail", 82 | "linkedin": "LinkedIn", 83 | "instagram": "Instagram", 84 | "telegram": "Telegram", 85 | "github": "GitHub", 86 | "nameLastName": "Vor- und Nachname", 87 | "nameLastNamePlaceHolder": "Max Mustermann", 88 | "emailPlaceHolder": "max.mustermann@mail.de", 89 | "phoneNumber": "Telefonnummer", 90 | "phoneNumberPlaceHolder": "09123456789", 91 | "message": "Nachricht", 92 | "messagePlaceHolder": "Du hast noch nichts geschrieben...", 93 | "sendMsg": "Nachricht senden", 94 | "footerContent": "Durch Klicken auf diesen Text können Sie sich an der Entwicklung dieser Website beteiligen" 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /gallery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Zephinax | Gallery 8 | 9 | 13 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
32 |

33 | Zephinax. 34 |

35 |
36 | 40 | 47 |
48 | 58 | 101 |
102 |
103 | 104 |
105 | 231 |
232 | 233 | 234 | 235 | 250 | 251 | 254 | 257 | 258 | 259 | 260 | -------------------------------------------------------------------------------- /galleryEN.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Zephinax | Gallery 8 | 9 | 10 | 14 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 29 | 34 | 35 | 36 | 37 | 38 |
39 |
40 |

41 | Zephinax. 42 |

43 | 44 |
45 | 52 |
53 | 54 | 64 | 65 | 110 |
111 |
112 |
113 | 243 |
244 | 245 | 246 | 247 | 263 | 264 | 267 | 270 | 271 | 272 | 273 | -------------------------------------------------------------------------------- /galleryGER.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Zephinax | Gallery 8 | 9 | 10 | 14 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 29 | 34 | 35 | 36 | 37 | 38 |
39 |
40 |

41 | Zephinax. 42 |

43 | 44 |
45 | 52 |
53 | 54 | 64 | 65 | 110 |
111 |
112 |
113 | 243 |
244 | 245 | 246 | 247 | 263 | 264 | 267 | 270 | 271 | 272 | 273 | -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const fetchData = async () => { 4 | try { 5 | const response = await fetch('Languages.json'); 6 | const data = await response.json(); 7 | return data; 8 | } catch (error) { 9 | console.error('Error loading JSON file:', error); 10 | } 11 | }; 12 | 13 | const selectElement = (id) => { 14 | return document.getElementById(id); 15 | }; 16 | 17 | const elemToggleFunc = function (elem) { 18 | elem.classList.toggle('active'); 19 | }; 20 | 21 | const header = document.querySelector('[data-header]'); 22 | const navHome = selectElement('navHome'); 23 | const navAboutMe = selectElement('navAboutMe'); 24 | const navSkills = selectElement('navSkills'); 25 | const navGallery = selectElement('navGallery'); 26 | const navContact = selectElement('navContact'); 27 | const homeContent = selectElement('homeContent'); 28 | const homeBtn = selectElement('homeBtn'); 29 | const instaToolTip = selectElement('instaToolTip'); 30 | const teleToolTip = selectElement('teleToolTip'); 31 | const linkedToolTip = selectElement('linkedToolTip'); 32 | const aboutSubTitle = selectElement('aboutSubTitle'); 33 | const aboutTitle = selectElement('aboutTitle'); 34 | const aboutContent = selectElement('aboutContent'); 35 | const galleryBtn = selectElement('galleryBtn'); 36 | const downloadCvBtn = selectElement('downloadCvBtn'); 37 | const skillsSubTitle = selectElement('skillsSubTitle'); 38 | const skillsTitle = selectElement('skillsTitle'); 39 | const skillsContent = selectElement('skillsContent'); 40 | const skillsTool = selectElement('skillsTool'); 41 | const skillsSkill = selectElement('skillsSkill'); 42 | const skillsToggle = selectElement('skillsToogle'); 43 | const contactSubTitle = selectElement('contactSubTitle'); 44 | const contactTitle = selectElement('contactTitle'); 45 | const contactContent = selectElement('contactContent'); 46 | const contactList = selectElement('contactList'); 47 | const email = selectElement('email'); 48 | const linkedin = selectElement('linkedin'); 49 | const telins = selectElement('telins'); 50 | const github = selectElement('github'); 51 | const contactForm = selectElement('contactForm'); 52 | const nameLastName = selectElement('formNameLastName'); 53 | const nameInput = selectElement('name'); 54 | const formEmail = selectElement('formEmail'); 55 | const emailInput = selectElement('email'); 56 | const formNumber = selectElement('formNumber'); 57 | const formMassage = selectElement('formMassage'); 58 | const formMessageInput = selectElement('message'); 59 | const footerContent = selectElement('footerContent'); 60 | const languageOptions = selectElement('languageOptions'); 61 | const languageSelector = selectElement('lang'); 62 | const navList = selectElement('navList'); 63 | const body = selectElement('body'); 64 | const formSubmitBtn = selectElement('subBtn'); 65 | const directionNeeded = [ 66 | homeBtn, 67 | aboutTitle, 68 | aboutContent, 69 | skillsTitle, 70 | skillsContent, 71 | contactTitle, 72 | contactContent, 73 | contactList, 74 | contactForm, 75 | navList, 76 | ]; 77 | 78 | const toggleLanguage = (language) => { 79 | const data = fetchData().then((data) => { 80 | if (language == 'Fa') { 81 | directionNeeded.map((elem) => { 82 | elem.style.direction = 'rtl'; 83 | elem.parentElement.style.flexDirection = 'row'; 84 | }); 85 | localStorage.setItem('language', 'Fa'); 86 | body.style.fontFamily = 'Vazir'; 87 | homeBtn.parentElement.style.paddingBottom = '8px'; 88 | galleryBtn.style.paddingBottom = '8px'; 89 | galleryBtn.setAttribute('href', './gallery.html'); 90 | downloadCvBtn.style.paddingBottom = '8px'; 91 | downloadCvBtn.setAttribute('href', './cv/index.html'); 92 | skillsToggle.classList.remove('skill-toggle-english'); 93 | skillsToggle.classList.remove('skill-toggle-germany'); 94 | navHome.innerHTML = data.Fa.home; 95 | navAboutMe.innerHTML = data.Fa.aboutMe; 96 | navSkills.innerHTML = data.Fa.skills; 97 | navGallery.innerHTML = data.Fa.gallery; 98 | navContact.innerHTML = data.Fa.contact; 99 | homeContent.innerHTML = data.Fa.homeContent; 100 | homeBtn.innerHTML = data.Fa.contact; 101 | instaToolTip.innerHTML = data.Fa.instagram; 102 | teleToolTip.innerHTML = data.Fa.telegram; 103 | linkedToolTip.innerHTML = data.Fa.linkedin; 104 | aboutSubTitle.innerHTML = data.Fa.aboutMe; 105 | aboutTitle.innerHTML = data.Fa.aboutTitle; 106 | aboutContent.innerHTML = data.Fa.aboutContent; 107 | galleryBtn.innerHTML = data.Fa.gallery; 108 | downloadCvBtn.innerHTML = data.Fa.downloadCv; 109 | skillsSubTitle.innerHTML = data.Fa.skillsSubTitle; 110 | skillsTitle.innerHTML = data.Fa.skillsTitle; 111 | skillsContent.innerHTML = data.Fa.skillsContent; 112 | skillsTool.innerHTML = data.Fa.tools; 113 | skillsSkill.innerHTML = data.Fa.skills; 114 | contactSubTitle.innerHTML = data.Fa.contact; 115 | contactTitle.innerHTML = data.Fa.contactTitle; 116 | contactContent.innerHTML = data.Fa.contactContent; 117 | email.innerHTML = data.Fa.email; 118 | linkedin.innerHTML = data.Fa.linkedin; 119 | telins.innerHTML = `${data.Fa.telegram} & ${data.Fa.instagram}`; 120 | github.innerHTML = data.Fa.github; 121 | nameLastName.innerHTML = data.Fa.nameLastName; 122 | nameInput.placeholder = data.Fa.nameLastNamePlaceHolder; 123 | formEmail.innerHTML = data.Fa.email; 124 | emailInput.placeholder = data.Fa.emailPlaceHolder; 125 | formNumber.innerHTML = data.Fa.phoneNumber; 126 | formMassage.innerHTML = data.Fa.message; 127 | formMessageInput.placeholder = data.Fa.messagePlaceHolder; 128 | footerContent.innerHTML = data.Fa.footerContent; 129 | formSubmitBtn.innerHTML = data.Fa.sendMsg; 130 | } else if (language == 'En') { 131 | directionNeeded.map((elem) => { 132 | elem.style.direction = 'ltr'; 133 | elem.parentElement.style.flexDirection = 'row-reverse'; 134 | }); 135 | localStorage.setItem('language', 'En'); 136 | body.style.fontFamily = 'roboto'; 137 | homeBtn.parentElement.style.paddingBottom = '6px'; 138 | galleryBtn.style.paddingBottom = '6px'; 139 | galleryBtn.setAttribute('href', './galleryEN.html'); 140 | downloadCvBtn.style.paddingBottom = '6px'; 141 | downloadCvBtn.setAttribute('href', './cv/en/index.html'); 142 | formSubmitBtn.style.paddingBottom = '6px'; 143 | skillsToggle.classList.remove('skill-toggle-germany'); 144 | skillsToggle.classList.add('skill-toggle-english'); 145 | navHome.innerHTML = data.En.home; 146 | navAboutMe.innerHTML = data.En.aboutMe; 147 | navSkills.innerHTML = data.En.skills; 148 | navGallery.innerHTML = data.En.gallery; 149 | navContact.innerHTML = data.En.contact; 150 | homeContent.innerHTML = data.En.homeContent; 151 | homeBtn.innerHTML = data.En.contact; 152 | instaToolTip.innerHTML = data.En.instagram; 153 | teleToolTip.innerHTML = data.En.telegram; 154 | linkedToolTip.innerHTML = data.En.linkedin; 155 | aboutSubTitle.innerHTML = data.En.aboutMe; 156 | aboutTitle.innerHTML = data.En.aboutTitle; 157 | aboutContent.innerHTML = data.En.aboutContent; 158 | galleryBtn.innerHTML = data.En.gallery; 159 | downloadCvBtn.innerHTML = data.En.downloadCv; 160 | skillsSubTitle.innerHTML = data.En.skillsSubTitle; 161 | skillsTitle.innerHTML = data.En.skillsTitle; 162 | skillsContent.innerHTML = data.En.skillsContent; 163 | skillsTool.innerHTML = data.En.tools; 164 | skillsSkill.innerHTML = data.En.skills; 165 | contactSubTitle.innerHTML = data.En.contact; 166 | contactTitle.innerHTML = data.En.contactTitle; 167 | contactContent.innerHTML = data.En.contactContent; 168 | email.innerHTML = data.En.email; 169 | linkedin.innerHTML = data.En.linkedin; 170 | telins.innerHTML = `${data.En.telegram} & ${data.En.instagram}`; 171 | github.innerHTML = data.En.github; 172 | nameLastName.innerHTML = data.En.nameLastName; 173 | nameInput.placeholder = data.En.nameLastNamePlaceHolder; 174 | formEmail.innerHTML = data.En.email; 175 | emailInput.placeholder = data.En.emailPlaceHolder; 176 | formNumber.innerHTML = data.En.phoneNumber; 177 | formMassage.innerHTML = data.En.message; 178 | formMessageInput.placeholder = data.En.messagePlaceHolder; 179 | footerContent.innerHTML = data.En.footerContent; 180 | formSubmitBtn.innerHTML = data.En.sendMsg; 181 | } else if (language == 'Ger') { 182 | directionNeeded.map((elem) => { 183 | elem.style.direction = 'ltr'; 184 | elem.parentElement.style.flexDirection = 'row-reverse'; 185 | }); 186 | localStorage.setItem('language', 'Ger'); 187 | body.style.fontFamily = 'roboto'; 188 | homeBtn.parentElement.style.paddingBottom = '6px'; 189 | galleryBtn.style.paddingBottom = '6px'; 190 | galleryBtn.setAttribute('href', './galleryGER.html'); 191 | downloadCvBtn.style.paddingBottom = '6px'; 192 | downloadCvBtn.setAttribute('href', './cv/en/index.html'); 193 | formSubmitBtn.style.paddingBottom = '6px'; 194 | skillsToggle.classList.remove('skill-toggle-germany'); 195 | skillsToggle.classList.add('skill-toggle-germany'); 196 | navHome.innerHTML = data.Ger.home; 197 | navAboutMe.innerHTML = data.Ger.aboutMe; 198 | navSkills.innerHTML = data.Ger.skills; 199 | navGallery.innerHTML = data.Ger.gallery; 200 | navContact.innerHTML = data.Ger.contact; 201 | homeContent.innerHTML = data.Ger.homeContent; 202 | homeBtn.innerHTML = data.Ger.contact; 203 | instaToolTip.innerHTML = data.Ger.instagram; 204 | teleToolTip.innerHTML = data.Ger.telegram; 205 | linkedToolTip.innerHTML = data.Ger.linkedin; 206 | aboutSubTitle.innerHTML = data.Ger.aboutMe; 207 | aboutTitle.innerHTML = data.Ger.aboutTitle; 208 | aboutContent.innerHTML = data.Ger.aboutContent; 209 | galleryBtn.innerHTML = data.Ger.gallery; 210 | downloadCvBtn.innerHTML = data.Ger.downloadCv; 211 | skillsSubTitle.innerHTML = data.Ger.skillsSubTitle; 212 | skillsTitle.innerHTML = data.Ger.skillsTitle; 213 | skillsContent.innerHTML = data.Ger.skillsContent; 214 | skillsTool.innerHTML = data.Ger.tools; 215 | skillsSkill.innerHTML = data.Ger.skills; 216 | contactSubTitle.innerHTML = data.Ger.contact; 217 | contactTitle.innerHTML = data.Ger.contactTitle; 218 | contactContent.innerHTML = data.Ger.contactContent; 219 | email.innerHTML = data.Ger.email; 220 | linkedin.innerHTML = data.Ger.linkedin; 221 | telins.innerHTML = `${data.Ger.telegram} & ${data.Ger.instagram}`; 222 | github.innerHTML = data.Ger.github; 223 | nameLastName.innerHTML = data.Ger.nameLastName; 224 | nameInput.placeholder = data.Ger.nameLastNamePlaceHolder; 225 | formEmail.innerHTML = data.Ger.email; 226 | emailInput.placeholder = data.Ger.emailPlaceHolder; 227 | formNumber.innerHTML = data.Ger.phoneNumber; 228 | formMassage.innerHTML = data.Ger.message; 229 | formMessageInput.placeholder = data.Ger.messagePlaceHolder; 230 | footerContent.innerHTML = data.Ger.footerContent; 231 | formSubmitBtn.innerHTML = data.Ger.sendMsg; 232 | } 233 | }); 234 | }; 235 | 236 | window.addEventListener('scroll', () => { 237 | if (window.scrollY >= 10) { 238 | header.classList.add('active'); 239 | languageOptions.classList.add('language-options-active'); 240 | } else { 241 | header.classList.remove('active'); 242 | languageOptions.classList.remove('language-options-active'); 243 | } 244 | }); 245 | 246 | const navToggleBtn = document.querySelector('[data-nav-toggle-btn]'); 247 | const navbar = document.querySelector('[data-navbar]'); 248 | 249 | function toggleNav() { 250 | elemToggleFunc(navToggleBtn); 251 | elemToggleFunc(navbar); 252 | elemToggleFunc(document.body); 253 | } 254 | 255 | const toggleBtnBox = document.querySelector('[data-toggle-box]'); 256 | const toggleBtns = document.querySelectorAll('[data-toggle-btn]'); 257 | const skillsBox = document.querySelector('[data-skills-box]'); 258 | 259 | for (let i = 0; i < toggleBtns.length; i++) { 260 | toggleBtns[i].addEventListener('click', () => { 261 | elemToggleFunc(toggleBtnBox); 262 | for (let i = 0; i < toggleBtns.length; i++) { 263 | elemToggleFunc(toggleBtns[i]); 264 | } 265 | elemToggleFunc(skillsBox); 266 | }); 267 | } 268 | 269 | const themeToggleBtn = document.querySelector('[data-theme-btn]'); 270 | 271 | themeToggleBtn.addEventListener('click', () => { 272 | elemToggleFunc(themeToggleBtn); 273 | 274 | if (themeToggleBtn.classList.contains('active')) { 275 | document.body.classList.remove('dark_theme'); 276 | document.body.classList.add('light_theme'); 277 | 278 | localStorage.setItem('theme', 'light_theme'); 279 | } else { 280 | document.body.classList.add('dark_theme'); 281 | document.body.classList.remove('light_theme'); 282 | 283 | localStorage.setItem('theme', 'dark_theme'); 284 | } 285 | }); 286 | 287 | if (localStorage.getItem('theme') === 'light_theme') { 288 | themeToggleBtn.classList.add('active'); 289 | document.body.classList.remove('dark_theme'); 290 | document.body.classList.add('light_theme'); 291 | } else { 292 | themeToggleBtn.classList.remove('active'); 293 | document.body.classList.remove('light_theme'); 294 | document.body.classList.add('dark_theme'); 295 | } 296 | 297 | if (localStorage.getItem('language') === 'En') { 298 | toggleLanguage('En'); 299 | } else if (localStorage.getItem('language') === 'Ger') { 300 | toggleLanguage('Ger'); 301 | } 302 | 303 | function subFrm() { 304 | const frm = document.getElementById('contactForm'); 305 | setTimeout(() => { 306 | frm.reset(); 307 | return false; 308 | }, 3000); 309 | } 310 | -------------------------------------------------------------------------------- /cv/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cv 9 | 10 | 11 | 18 | 19 | 20 | 23 |
24 |
25 |
26 | 65 | 84 |
87 | 127 | 128 |

EN

129 | 130 |
131 |
132 | 148 |
149 |
152 | 281 |
284 |
285 |
288 | 300 | 301 | 302 | 303 | 304 |

بیوگرافی

305 |
306 |

307 | امیرعلی هستم. یک گیک، وب دولوپر، علاقه مند به لینوکس و نرم افزار 308 | آزاد، برنامه نویس سخت افزار و نرم افزار و عاشق یادگیری و به اشتراک 309 | گذاشتن چیز‌ها. همچنین فعال در حوزه [ دیزاین UI & UX ،هوش مصنوعی 310 | ،امنیت، اینترنت اشیاء، گجت ها، موبایل، کامپیوتر و لپتاپ ] و یکی از 311 | اعضای تیم زیکادو. تقریبا مسلط به زبان انگلیسی. از کار های چالش 312 | برانگیز مثل نصب و توسعه کاستوم رام برای گوشی های اندرویدی و نصب 313 | هکینتاش خوشم میاد و سعی میکنم چیز های زیادی از طریق حل مشکلات و 314 | چالش های این کار ها یاد بگیرم. 315 |

316 |
317 |
318 |
321 | 333 | 334 | 335 | 336 | 337 | 338 | 339 |

سوابق تحصیلی

340 |
341 |
    342 |
  • 343 |
    344 |
    347 | هنرجوی پایه ۱۲ مکاترونیک 348 |
    349 |
    ۱۴۰۱ — ۱۴۰۳
    350 |

    351 | مهندسی مکاترونیک (به انگلیسی: mechatronics engineering) 352 | (مکانیزم و الکترونیک)، ترکیبی از هفت رشتهٔ مهندسی مکانیک، 353 | مهندسی الکترونیک، مهندسی کنترل، مهندسی مخابرات، مهندسی 354 | پروژه، مهندسی کامپیوتر و مهندسی مولکولی است. این رشته سعی بر 355 | آن دارد تا نگاهی یکپارچه به سیستم‌های تشکیل شده از اجزای 356 | مکانیکی، الکترونیکی، کنترلی و نرم‌افزار داشته باشد 357 |

    358 |
    359 |
    • 360 |
361 |
362 |
363 |
366 | 378 | 379 | 380 |

مهارت ها

381 |
382 |
383 | زبان ها و فریمورک های برنامه نویسی : [ Html, Css, Tailwind Css, 386 | Sass , javascript , Arduino , Pyhton , React ] 387 | 388 |
389 |
390 | مهارت های دیگر : [ Photoshop, Premiere, مونتاژ قطعات SMD ] 393 | 394 |
395 |
396 |
397 |
400 | 412 | 413 | 414 | 417 | 418 |

زبان ها

419 |
420 |
421 |
422 | انگلیسی 426 |
    427 |
  • 428 |
  • 429 |
  • 430 |
  • 431 |
  • 432 |
433 |
434 |
435 | فارسی 439 |
    440 |
  • 441 |
  • 442 |
  • 443 |
  • 444 |
  • 445 |
446 |
447 |
448 |
449 | 450 |
451 |
454 | 466 | 469 | 470 |

471 | علاقه ها 472 |

473 |
474 |
475 | تجربه های چالش بر انگیز 476 | موسیقی 477 | رباتیک 478 | کار تیمی 479 | خلاقیت 480 |
481 |
482 |
483 |
484 | 489 |
490 | 491 | 492 | 493 | -------------------------------------------------------------------------------- /cv/en/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cv - En 9 | 10 | 11 | 18 | 19 | 20 | 23 |
24 |
25 |
26 | 65 | 84 |
87 | 127 | 128 |

فا

129 | 130 |
131 |
132 | 148 |
149 |
152 | 282 |
285 |
286 |
289 | 301 | 302 | 303 | 304 | 305 |

Biography

306 |
307 |

308 | I am Amir Ali. A geek, web developer, interested in Linux and 309 | software Freelancer, hardware and software programmer and lover of 310 | learning and sharing putting things Also active in the field of UI 311 | & UX design, artificial intelligence , security, Internet of 312 | things, gadgets, mobile, computer and laptop] and one of Xecudo 313 | team members. Almost fluent in English. From the work of the 314 | challenge Inspiring like installation and development of custom 315 | ROM for Android phones and installation I like Hackintosh and I 316 | try many things through solving problems and Learn the challenges 317 | of these jobs. 318 |

319 |
320 |
321 |
324 | 336 | 337 | 338 | 339 | 340 | 341 | 342 |

Education

343 |
344 |
    345 |
  • 346 |
    347 |
    350 | 12th grade mechatronics student 351 |
    352 |
    2021 — 2024
    353 |

    354 | Mechatronics engineering (in English: mechatronics 355 | engineering) (mechanism and electronics), a combination of 356 | seven fields of mechanical engineering, Electronic 357 | engineering, control engineering, telecommunication 358 | engineering, engineering The project is computer engineering 359 | and molecular engineering. This field is trying It takes a 360 | holistic view of systems made up of components have 361 | mechanical, electronic, control and software 362 |

    363 |
    364 |
    • 365 |
366 |
367 |
368 |
371 | 383 | 384 | 385 |

Skills

386 |
387 |
388 | Programming languages and frameworks : [ Html, Css, Tailwind 391 | Css, Sass , javascript , Arduino , Pyhton , React ] 392 | 393 |
394 |
395 | 398 | Other skills : [ Photoshop, Premiere, Soldering SMD Parts ] 399 | 400 |
401 |
402 |
403 |
406 | 418 | 419 | 420 | 423 | 424 |

Languages

425 |
426 |
427 |
428 | English 432 |
    433 |
  • 434 |
  • 435 |
  • 436 |
  • 437 |
  • 438 |
439 |
440 |
441 | Persian 445 |
    446 |
  • 447 |
  • 448 |
  • 449 |
  • 450 |
  • 451 |
452 |
453 |
454 |
455 |
456 |
459 | 471 | 474 | 475 |

476 | Favorites 477 |

478 |
479 |
480 | Challenging experiences 481 | Music 482 | Robotic 483 | Team work 484 | Creativity 485 |
486 |
487 |
488 |
489 | 494 |
495 | 496 | 497 | 498 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: Vazir; 3 | src: url(./../font/Vazir-Regular.ttf); 4 | } 5 | input::-webkit-outer-spin-button, 6 | input::-webkit-inner-spin-button { 7 | -webkit-appearance: none; 8 | margin: 0; 9 | } 10 | 11 | input[type='number'] { 12 | -moz-appearance: textfield; 13 | } 14 | 15 | :root { 16 | --main-color: hsl(342, 61%, 55%); 17 | --black: hsl(0, 0%, 0%); 18 | --white: hsl(0, 0%, 100%); 19 | --ff-saira-stencil-one: 'Saira Stencil One', sans-serif; 20 | --ff-poppins: 'Poppins', sans-serif; 21 | --ff-roboto: 'Roboto', sans-serif; 22 | --fs-1: 2rem; 23 | --fs-2: calc(1.813rem + 1vw); 24 | --fs-3: calc(1.313rem + 1vw); 25 | --fs-4: 1.4rem; 26 | --fs-5: 1rem; 27 | --fs-6: 0.813rem; 28 | --fs-7: 0.75rem; 29 | --fw-400: 400; 30 | --fw-700: 700; 31 | --transition-1: 0.25s ease-in-out; 32 | --section-padding: 50px; 33 | --radius-4: 4px; 34 | --radius-12: 12px; 35 | } 36 | 37 | body.dark_theme { 38 | --bg-primary: hsl(209, 33%, 16%); 39 | --bg-secondary: hsl(207, 26%, 19%); 40 | --color-primary: hsl(207, 26%, 100%); 41 | --color-secondary: hsl(207, 26%, 62%); 42 | --card-shadow: hsla(207, 26%, 0%, 0.4); 43 | --input-bg: hsl(207, 26%, 16%); 44 | --shadow-1: 10px 10px 40px var(--card-shadow); 45 | } 46 | 47 | body.light_theme { 48 | --bg-primary: hsl(210, 50%, 80%); 49 | --bg-secondary: hsl(210, 50%, 90%); 50 | --color-primary: hsl(210, 50%, 12%); 51 | --color-secondary: hsl(210, 50%, 37%); 52 | --card-shadow: hsla(210, 50%, 0%, 0.1); 53 | --input-bg: hsl(210, 50%, 93%); 54 | --shadow-1: 10px 10px 40px var(--card-shadow); 55 | } 56 | 57 | *, 58 | *::before, 59 | *::after { 60 | margin: 0; 61 | padding: 0; 62 | box-sizing: border-box; 63 | } 64 | 65 | li { 66 | list-style: none; 67 | } 68 | 69 | a { 70 | text-decoration: none; 71 | } 72 | 73 | a, 74 | img, 75 | time, 76 | span, 77 | input, 78 | label, 79 | select, 80 | button, 81 | textarea, 82 | ion-icon { 83 | display: block; 84 | } 85 | 86 | input, 87 | button, 88 | select, 89 | textarea { 90 | background: none; 91 | border: none; 92 | font: inherit; 93 | } 94 | 95 | button, 96 | select { 97 | cursor: pointer; 98 | } 99 | 100 | input, 101 | textarea { 102 | width: 100%; 103 | } 104 | 105 | ion-icon { 106 | pointer-events: none; 107 | display: inline-block; 108 | } 109 | 110 | :is(a, button, select) { 111 | outline-color: var(--scarlet); 112 | outline-offset: 3px; 113 | } 114 | 115 | ::-moz-selection { 116 | background: var(--color-primary); 117 | color: var(--bg-primary); 118 | } 119 | 120 | ::selection { 121 | background: var(--color-primary); 122 | color: var(--bg-primary); 123 | } 124 | 125 | html { 126 | font-family: Vazir, var(--ff-roboto); 127 | scroll-behavior: smooth; 128 | -webkit-tap-highlight-color: transparent; 129 | } 130 | 131 | body { 132 | background: var(--bg-primary); 133 | transition: var(--transition-1); 134 | } 135 | 136 | body.active { 137 | overflow: hidden; 138 | } 139 | 140 | .container { 141 | padding-inline: 10px; 142 | } 143 | 144 | .h1 { 145 | font-size: var(--fs-1); 146 | line-height: 1.2; 147 | font-weight: 400; 148 | } 149 | 150 | .h2, 151 | .h3, 152 | .h4 { 153 | color: var(--color-primary); 154 | font-family: inherit; 155 | line-height: 1.2; 156 | } 157 | 158 | .h2 { 159 | font-size: var(--fs-2); 160 | } 161 | 162 | .h3 { 163 | font-size: var(--fs-3); 164 | } 165 | 166 | .h4 { 167 | font-size: var(--fs-5); 168 | } 169 | 170 | .w-100 { 171 | width: 100%; 172 | } 173 | 174 | .btn { 175 | max-width: -moz-max-content; 176 | max-width: max-content; 177 | color: var(--color-primary); 178 | text-transform: uppercase; 179 | letter-spacing: 0.5px; 180 | padding: 8px 18px; 181 | display: flex; 182 | justify-content: center; 183 | align-items: center; 184 | gap: 8px; 185 | border: 1px solid transparent; 186 | border-radius: var(--radius-12); 187 | transition: var(--transition-1); 188 | } 189 | 190 | .bx-phone-call { 191 | font-size: 24px; 192 | margin-bottom: 4px; 193 | } 194 | 195 | .btn-primary { 196 | border-color: var(--color-primary); 197 | } 198 | 199 | .btn-primary:is(:hover, :focus) { 200 | background: var(--color-primary); 201 | color: var(--bg-primary); 202 | box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 203 | } 204 | 205 | .btn-secondary { 206 | background: var(--main-color); 207 | border-color: var(--main-color); 208 | color: var(--bg-primary); 209 | } 210 | 211 | .btn-secondary:is(:hover, :focus) { 212 | background: var(--bg-primary); 213 | color: var(--main-color); 214 | } 215 | 216 | .section-subtitle { 217 | position: relative; 218 | color: var(--color-secondary); 219 | text-transform: uppercase; 220 | padding-bottom: 5px; 221 | margin-bottom: 20px; 222 | } 223 | 224 | .section-subtitle::after { 225 | content: ''; 226 | position: absolute; 227 | top: 100%; 228 | right: 0; 229 | width: 60px; 230 | height: 2px; 231 | background: var(--color-secondary); 232 | } 233 | 234 | .section-title { 235 | margin-bottom: 30px; 236 | } 237 | 238 | .section-text { 239 | color: var(--color-secondary); 240 | line-height: 1.8; 241 | margin-bottom: 30px; 242 | } 243 | 244 | .tooltip { 245 | position: absolute; 246 | top: -40px; 247 | background: var(--main-color); 248 | min-width: -moz-max-content; 249 | min-width: max-content; 250 | color: var(--white); 251 | font-size: 15px; 252 | font-weight: var(--fw-700); 253 | padding: 5px 10px; 254 | border-radius: var(--radius-4); 255 | box-shadow: var(--shadow-1); 256 | transform: translateY(-10px); 257 | opacity: 0; 258 | pointer-events: none; 259 | transition: var(--transition-1); 260 | z-index: 1; 261 | } 262 | 263 | /* ------Header------ */ 264 | .header { 265 | padding-block: 15px; 266 | position: fixed; 267 | top: 0; 268 | left: 0; 269 | width: 100%; 270 | transition: var(--transition-1); 271 | z-index: 4; 272 | } 273 | 274 | .header.active { 275 | padding-block: 12px; 276 | background: var(--bg-secondary); 277 | box-shadow: var(--shadow-1); 278 | } 279 | 280 | .header .container { 281 | display: flex; 282 | justify-content: space-between; 283 | align-items: center; 284 | gap: 10px; 285 | } 286 | 287 | .logo { 288 | position: relative; 289 | min-width: 77px; 290 | z-index: 2; 291 | } 292 | 293 | .logo a { 294 | color: var(--color-primary); 295 | font-family: var(--ff-saira-stencil-one); 296 | } 297 | 298 | .logo span { 299 | display: inline-block; 300 | color: var(--main-color); 301 | margin-left: 2px; 302 | } 303 | 304 | .navbar-actions { 305 | display: flex; 306 | align-items: center; 307 | gap: 25px; 308 | margin-left: auto; 309 | } 310 | 311 | .language-selector { 312 | width: 28px; 313 | height: 28px; 314 | position: relative; 315 | } 316 | 317 | .language-options { 318 | display: none; 319 | border-radius: 0px 0px 10px 10px; 320 | position: absolute; 321 | border-left: 1px dashed var(--main-color); 322 | border-right: 1px dashed var(--main-color); 323 | border-bottom: 1px dashed var(--main-color); 324 | color: var(--color-primary); 325 | padding-top: 8px; 326 | margin-top: -10px; 327 | text-align: center; 328 | left: -24px; 329 | transition: var(--transition-1); 330 | } 331 | 332 | .language-options-active { 333 | background: var(--bg-secondary); 334 | padding-top: 20px; 335 | border: none; 336 | } 337 | 338 | .language-icon:hover + .language-options, 339 | .language-icon:focus + .language-options { 340 | display: block; 341 | animation: scale-up-ver-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; 342 | } 343 | 344 | .language-selector:hover + .language-options, 345 | .language-selector:focus + .language-options, 346 | .language-options:hover { 347 | display: block; 348 | } 349 | 350 | .language-options li { 351 | padding: 0px 10px 14px 10px; 352 | cursor: pointer; 353 | transition: all 0.15s linear; 354 | animation: scale-up-ver-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; 355 | -webkit-touch-callout: none; 356 | -webkit-user-select: none; 357 | -khtml-user-select: none; 358 | -moz-user-select: none; 359 | -ms-user-select: none; 360 | user-select: none; 361 | } 362 | 363 | .language-selector:hover + .language-options { 364 | display: block; 365 | } 366 | 367 | @keyframes scale-up-ver-top { 368 | 0% { 369 | -webkit-transform: scaleY(0.4); 370 | transform: scaleY(0.4); 371 | -webkit-transform-origin: 100% 0%; 372 | transform-origin: 100% 0%; 373 | } 374 | 100% { 375 | -webkit-transform: scaleY(1); 376 | transform: scaleY(1); 377 | -webkit-transform-origin: 100% 0%; 378 | transform-origin: 100% 0%; 379 | } 380 | } 381 | 382 | .language-options li:hover { 383 | color: var(--main-color); 384 | } 385 | 386 | .language-icon { 387 | stroke: var(--color-primary); 388 | cursor: pointer; 389 | transition: all 0.15s linear; 390 | } 391 | 392 | .language-icon:hover, 393 | .language-icon:focus { 394 | stroke: var(--main-color); 395 | } 396 | 397 | .theme-btn { 398 | padding: 4px; 399 | width: 48px; 400 | background: var(--bg-secondary); 401 | border-radius: 100px; 402 | transition: var(--transition-1); 403 | } 404 | 405 | .header.active .theme-btn { 406 | background: var(--bg-primary); 407 | } 408 | 409 | .theme-btn .icon { 410 | position: relative; 411 | left: 0; 412 | width: 20px; 413 | height: 20px; 414 | border-radius: 50px; 415 | box-shadow: inset 9px -6px var(--color-primary); 416 | transition: var(--transition-1); 417 | } 418 | 419 | .theme-btn.active .icon { 420 | left: 20px; 421 | box-shadow: inset 20px -20px var(--main-color); 422 | } 423 | 424 | .nav-toggle-btn { 425 | position: relative; 426 | transition: var(--transition-1); 427 | z-index: 2; 428 | } 429 | 430 | .nav-toggle-btn.active { 431 | transform: rotate(-45deg); 432 | } 433 | 434 | .nav-toggle-btn span { 435 | width: 20px; 436 | height: 2px; 437 | background: var(--color-primary); 438 | margin: 5px; 439 | transition: var(--transition-1); 440 | } 441 | 442 | .nav-toggle-btn :is(.one, .three) { 443 | width: 10px; 444 | } 445 | 446 | .nav-toggle-btn .one { 447 | margin-left: auto; 448 | transform-origin: left; 449 | } 450 | 451 | .nav-toggle-btn .three { 452 | transform-origin: right; 453 | } 454 | 455 | .nav-toggle-btn.active .one { 456 | transform: rotate(90deg) translateX(-3px); 457 | } 458 | 459 | .nav-toggle-btn.active .three { 460 | transform: rotate(90deg) translateX(3px); 461 | } 462 | 463 | .navbar { 464 | position: fixed; 465 | background: var(--bg-secondary); 466 | top: 100%; 467 | left: 0; 468 | width: 100%; 469 | height: 100%; 470 | display: grid; 471 | place-items: center; 472 | visibility: hidden; 473 | transition: 0.5s cubic-bezier(0.71, 0.01, 0.24, 0.99); 474 | z-index: 1; 475 | } 476 | 477 | .navbar.active { 478 | top: 0; 479 | visibility: visible; 480 | } 481 | 482 | .navbar-list > li { 483 | margin-block: 20px; 484 | padding-inline: 50px; 485 | overflow: hidden; 486 | display: flex; 487 | align-items: center; 488 | justify-content: center; 489 | } 490 | 491 | .navbar-link { 492 | position: relative; 493 | width: -moz-max-content; 494 | width: max-content; 495 | margin-inline: auto; 496 | color: var(--color-primary); 497 | font-family: inherit; 498 | font-size: var(--fs-1); 499 | padding: 10px; 500 | display: flex; 501 | align-items: center; 502 | gap: 5px; 503 | transform: translateY(50px); 504 | transition: 0.15s ease-out; 505 | } 506 | 507 | .navbar.active .navbar-link { 508 | transform: translateY(0); 509 | font-size: 1.5rem; 510 | } 511 | 512 | .navbar-link:is(:hover, :focus) { 513 | color: var(--main-color); 514 | } 515 | 516 | /* ------Hero------ */ 517 | main { 518 | overflow-x: hidden; 519 | } 520 | 521 | .hero { 522 | min-height: 100vh; 523 | display: flex; 524 | flex-direction: column; 525 | justify-content: center; 526 | align-items: center; 527 | padding-top: 100px; 528 | } 529 | 530 | .hero-banner { 531 | max-width: 500px; 532 | width: 125%; 533 | margin-bottom: 30px; 534 | } 535 | 536 | :is(.hero-social-list, .scroll-down) { 537 | display: none; 538 | } 539 | 540 | .hero-content { 541 | max-width: 450px; 542 | } 543 | 544 | .hero-title { 545 | text-align: center; 546 | margin-bottom: 30px; 547 | } 548 | 549 | .hero .btn-primary { 550 | margin-inline: auto; 551 | } 552 | 553 | /* ------About------ */ 554 | .about { 555 | padding-block: 5px; 556 | } 557 | 558 | .about-banner { 559 | max-width: 400px; 560 | margin-inline: auto; 561 | margin-bottom: 80px; 562 | } 563 | 564 | .about .btn { 565 | max-width: unset; 566 | width: 100%; 567 | } 568 | 569 | .about .btn-secondary { 570 | margin-bottom: 10px; 571 | } 572 | 573 | /* ------Skills------ */ 574 | .skills { 575 | padding-block: var(--section-padding); 576 | padding-top: 80px; 577 | } 578 | 579 | .skills-content { 580 | margin-bottom: 50px; 581 | height: 275px; 582 | } 583 | 584 | .skills-toggle { 585 | background: var(--bg-secondary); 586 | position: relative; 587 | width: -moz-max-content; 588 | width: max-content; 589 | margin-inline: auto; 590 | display: flex; 591 | align-items: center; 592 | padding: 5px; 593 | border-radius: 100px; 594 | box-shadow: var(--shadow-1); 595 | z-index: 1; 596 | } 597 | 598 | .skills-toggle::before { 599 | content: ''; 600 | position: absolute; 601 | top: 5px; 602 | left: 5px; 603 | bottom: 5px; 604 | width: 93px; 605 | background: var(--main-color); 606 | border-radius: 100px; 607 | transition: var(--transition-1); 608 | z-index: -1; 609 | } 610 | 611 | .skills-toggle.active::before { 612 | left: 110px; 613 | width: 94px; 614 | } 615 | 616 | .skill-toggle-english.active::before { 617 | left: 89px; 618 | } 619 | 620 | .skill-toggle-english::before { 621 | width: 75px; 622 | } 623 | .skill-toggle-germany.active::before { 624 | width: 110px; 625 | left: 148px; 626 | } 627 | 628 | .skill-toggle-germany::before { 629 | width: 120px; 630 | } 631 | 632 | .toggle-btn { 633 | color: var(--color-primary); 634 | font-family: inherit; 635 | padding: 5px 25px; 636 | display: flex; 637 | align-items: center; 638 | justify-content: center; 639 | text-align: center; 640 | transition: var(--transition-1); 641 | } 642 | 643 | .skills-box.active .skills-list, 644 | .skills-box .tools-list { 645 | display: none; 646 | } 647 | 648 | .skills-box .skills-list, 649 | .skills-box.active .tools-list { 650 | display: flex; 651 | flex-wrap: wrap; 652 | justify-content: center; 653 | align-items: center; 654 | gap: 15px; 655 | animation: fadeIn 0.5s ease-out forwards; 656 | } 657 | 658 | @keyframes fadeIn { 659 | 0% { 660 | opacity: 0; 661 | } 662 | 100% { 663 | opacity: 1; 664 | } 665 | } 666 | .skill-card { 667 | position: relative; 668 | background: var(--bg-secondary); 669 | width: 80px; 670 | height: 80px; 671 | display: grid; 672 | place-items: center; 673 | border-radius: var(--radius-12); 674 | box-shadow: var(--shadow-1); 675 | cursor: pointer; 676 | } 677 | 678 | .skill-card:hover .tooltip { 679 | transform: translateY(0); 680 | opacity: 1; 681 | } 682 | 683 | /* ------Projects------ */ 684 | .project { 685 | padding: 80px 10px; 686 | direction: rtl; 687 | } 688 | 689 | .project-list > li { 690 | margin-bottom: 25px; 691 | } 692 | 693 | .project-card { 694 | position: relative; 695 | overflow: hidden; 696 | border-radius: var(--radius-12); 697 | box-shadow: 2px 4px 6px hsla(0, 0%, 0%, 0.2); 698 | } 699 | 700 | .project-card::after { 701 | content: ''; 702 | position: absolute; 703 | inset: 0; 704 | border-radius: inherit; 705 | transition: var(--transition-1); 706 | } 707 | 708 | .project-card:is(:hover, :focus)::after { 709 | background: hsla(0, 0%, 0%, 0.2); 710 | } 711 | 712 | .project-card .card-content { 713 | position: absolute; 714 | bottom: 0; 715 | left: 0; 716 | width: 100%; 717 | padding: 20px; 718 | } 719 | 720 | .project-card .card-title { 721 | margin-bottom: 10px; 722 | } 723 | 724 | .project-card :is(.card-title, .publish-date) { 725 | background: var(--bg-primary); 726 | padding: 6px 12px; 727 | width: -moz-max-content; 728 | width: max-content; 729 | box-shadow: var(--shadow-1); 730 | transform: translateY(20px); 731 | opacity: 0; 732 | border-radius: 10px; 733 | transition: var(--transition-1); 734 | } 735 | 736 | .project-card .publish-date { 737 | font-size: var(--fs-6); 738 | color: var(--color-primary); 739 | transition-delay: 0s; 740 | } 741 | 742 | .project-card:is(:hover, :focus) :is(.card-title, .publish-date) { 743 | transform: translateY(0); 744 | opacity: 1; 745 | } 746 | 747 | .project-card:is(:hover, :focus) .publish-date { 748 | transition-delay: 0.1s; 749 | } 750 | 751 | .load-more { 752 | font-size: var(--fs-4); 753 | color: var(--main-color); 754 | /* text-decoration: underline; */ 755 | margin-inline: auto; 756 | } 757 | 758 | /* ------Contact------ */ 759 | .contact { 760 | padding-block: var(--section-padding); 761 | padding-bottom: 80px; 762 | } 763 | 764 | .contact-content { 765 | margin-bottom: 50px; 766 | } 767 | 768 | .contact-list-item { 769 | display: flex; 770 | align-items: flex-start; 771 | gap: 15px; 772 | margin-bottom: 20px; 773 | } 774 | 775 | .contact-item-title::after { 776 | content: ' :'; 777 | } 778 | 779 | .contact-item-icon { 780 | font-size: 25px; 781 | color: var(--color-primary); 782 | } 783 | 784 | .contact-item-icon ion-icon { 785 | --ionicon-stroke-width: 40px; 786 | } 787 | 788 | .contact-item-title { 789 | margin-bottom: 10px; 790 | } 791 | 792 | .contact-list-item .contact-info { 793 | color: var(--color-secondary); 794 | font-style: normal; 795 | line-height: 1.6; 796 | transition: var(--transition-1); 797 | } 798 | 799 | .contact-info:not(address):is(:hover, :focus) { 800 | color: var(--color-primary); 801 | } 802 | 803 | .contact-form { 804 | background: var(--bg-secondary); 805 | padding: 20px; 806 | border-radius: var(--radius-12); 807 | box-shadow: var(--shadow-1); 808 | } 809 | 810 | .form-wrapper { 811 | margin-bottom: 25px; 812 | } 813 | 814 | .form-label { 815 | color: var(--color-primary); 816 | font-size: var(--fs-7); 817 | font-family: inherit; 818 | margin-bottom: 8px; 819 | margin-left: 5px; 820 | } 821 | 822 | .input-wrapper { 823 | position: relative; 824 | } 825 | 826 | .input-field { 827 | background: var(--input-bg); 828 | color: var(--main-color); 829 | padding: 10px; 830 | padding-left: 40px; 831 | border-radius: var(--radius-12); 832 | transition: var(--transition-1); 833 | } 834 | 835 | .input-wrapper ion-icon { 836 | position: absolute; 837 | top: 10px; 838 | left: 10px; 839 | color: var(--color-secondary); 840 | font-size: 20px; 841 | transition: var(--transition-1); 842 | } 843 | 844 | textarea.input-field { 845 | min-height: 60px; 846 | height: 120px; 847 | max-height: 200px; 848 | resize: vertical; 849 | resize: none; 850 | } 851 | 852 | .input-field:focus { 853 | outline: 1px solid; 854 | } 855 | 856 | .input-field:focus + ion-icon { 857 | color: var(--main-color); 858 | } 859 | 860 | .contact .btn-primary { 861 | max-width: unset; 862 | width: 100%; 863 | background: var(--color-primary); 864 | color: var(--bg-primary); 865 | } 866 | 867 | /* ------Footer------ */ 868 | .footer { 869 | background: var(--bg-secondary); 870 | padding-block: 20px; 871 | text-align: center; 872 | box-shadow: var(--shadow-1); 873 | } 874 | 875 | .footer .logo { 876 | margin-bottom: 15px; 877 | } 878 | 879 | .copyright { 880 | color: var(--color-secondary); 881 | line-height: 1.6; 882 | } 883 | 884 | .copyright a { 885 | display: inline-block; 886 | color: var(--main-color); 887 | } 888 | 889 | .copyright a:hover { 890 | text-decoration: underline; 891 | } 892 | 893 | @media (min-width: 550px) { 894 | .contact-list { 895 | display: grid; 896 | grid-template-columns: 1fr 1fr; 897 | } 898 | .container { 899 | max-width: 550px; 900 | margin-inline: auto; 901 | } 902 | .project-list { 903 | -moz-column-count: 2; 904 | column-count: 2; 905 | -moz-column-gap: 25px; 906 | column-gap: 25px; 907 | } 908 | .project-list > li:first-child { 909 | -moz-column-span: all; 910 | column-span: all; 911 | } 912 | } 913 | @media (min-width: 768px) { 914 | .container { 915 | max-width: 720px; 916 | } 917 | .stats-list { 918 | grid-template-columns: 1fr 1fr; 919 | } 920 | .btn-group { 921 | display: flex; 922 | justify-content: flex-start; 923 | align-items: center; 924 | gap: 20px; 925 | } 926 | .about .btn { 927 | max-width: -moz-max-content; 928 | max-width: max-content; 929 | } 930 | .about .btn-secondary { 931 | margin-bottom: 0; 932 | } 933 | .contact-form { 934 | max-width: 450px; 935 | margin-inline: auto; 936 | } 937 | } 938 | @media (min-width: 992px) { 939 | :root { 940 | --fs-2: 3rem; 941 | --section-padding: 100px; 942 | } 943 | .container { 944 | max-width: 980px; 945 | } 946 | .section-content { 947 | position: relative; 948 | padding-left: 40px; 949 | } 950 | .section-subtitle { 951 | position: absolute; 952 | top: 0; 953 | left: 0; 954 | transform: rotate(0.75turn) translateX(-100%); 955 | transform-origin: left top; 956 | margin-bottom: 0; 957 | } 958 | .section-subtitle::after { 959 | top: 15px; 960 | left: auto; 961 | right: calc(100% + 20px); 962 | } 963 | .header { 964 | padding-block: 30px; 965 | } 966 | .header.active { 967 | padding-block: 15px; 968 | } 969 | .navbar-actions { 970 | order: 1; 971 | margin-left: 0; 972 | } 973 | .nav-toggle-btn { 974 | display: none; 975 | } 976 | .navbar { 977 | all: unset; 978 | } 979 | .navbar-link { 980 | transform: translateY(0) !important; 981 | font-size: unset !important; 982 | padding-inline: 5px; 983 | } 984 | .navbar-list > li { 985 | margin: 0; 986 | padding: 0; 987 | overflow: visible; 988 | } 989 | .navbar-list { 990 | display: flex; 991 | justify-content: center; 992 | align-items: center; 993 | gap: 20px; 994 | } 995 | .navbar-link::before { 996 | height: 2px; 997 | } 998 | .hero { 999 | position: relative; 1000 | padding-top: 0; 1001 | height: 100vh; 1002 | } 1003 | .hero-banner { 1004 | max-width: unset; 1005 | height: 100%; 1006 | margin-bottom: 0; 1007 | } 1008 | .hero img { 1009 | height: 100%; 1010 | width: auto; 1011 | margin-inline: auto; 1012 | } 1013 | .hero-content { 1014 | --color-primary: var(--white); 1015 | position: absolute; 1016 | top: 50%; 1017 | filter: drop-shadow(2px 4px 10px var(--black)); 1018 | } 1019 | .hero .btn-primary:is(:hover, :focus) { 1020 | color: hsl(0, 0%, 12%); 1021 | } 1022 | .hero-social-list { 1023 | display: block; 1024 | position: absolute; 1025 | bottom: 92px; 1026 | left: -30px; 1027 | } 1028 | .hero-social-list::after { 1029 | content: ''; 1030 | position: absolute; 1031 | bottom: -40px; 1032 | left: 13px; 1033 | width: 2px; 1034 | height: 30px; 1035 | background: var(--color-secondary); 1036 | } 1037 | .hero-social-link { 1038 | position: relative; 1039 | color: var(--color-secondary); 1040 | margin-block: 5px; 1041 | padding: 5px; 1042 | font-size: 18px; 1043 | transition: var(--transition-1); 1044 | } 1045 | .hero-social-link:is(:hover, :focus) { 1046 | color: var(--color-primary); 1047 | } 1048 | .hero-social-link .tooltip { 1049 | --trans-x: 10px; 1050 | left: calc(100% + 10px); 1051 | top: 50%; 1052 | transform: translateY(-50%) translateX(var(--trans-x)); 1053 | } 1054 | .hero-social-link:is(:hover, :focus) .tooltip { 1055 | --trans-x: 0; 1056 | opacity: 1; 1057 | } 1058 | .scroll-down { 1059 | display: block; 1060 | position: absolute; 1061 | bottom: 80px; 1062 | right: -30px; 1063 | color: var(--color-secondary); 1064 | font-size: 1.125rem; 1065 | text-transform: uppercase; 1066 | transform: rotate(90deg); 1067 | transform-origin: top right; 1068 | } 1069 | .bx-chevron-right { 1070 | border: 1px solid var(--color-secondary); 1071 | border-radius: 20px; 1072 | } 1073 | .scroll-down::after { 1074 | content: ''; 1075 | position: absolute; 1076 | top: 8px; 1077 | right: -50px; 1078 | width: 30px; 1079 | height: 2px; 1080 | background: var(--color-secondary); 1081 | } 1082 | .about { 1083 | display: grid; 1084 | grid-template-columns: 1fr 1fr; 1085 | align-items: center; 1086 | gap: 30px; 1087 | } 1088 | .about-banner { 1089 | margin-bottom: 0; 1090 | } 1091 | .skills { 1092 | display: grid; 1093 | grid-template-columns: 1fr 1fr; 1094 | align-items: center; 1095 | gap: 50px; 1096 | } 1097 | .skills-content { 1098 | margin-bottom: 0; 1099 | } 1100 | .skills-toggle { 1101 | margin-inline: 0; 1102 | } 1103 | .project { 1104 | padding-top: 110px; 1105 | } 1106 | .project-list { 1107 | -moz-column-count: 3; 1108 | column-count: 3; 1109 | } 1110 | .project-list > li:first-child { 1111 | -moz-column-span: unset; 1112 | column-span: unset; 1113 | margin: 25px; 1114 | margin-left: 0; 1115 | } 1116 | .contact { 1117 | display: grid; 1118 | grid-template-columns: 1fr 1fr; 1119 | gap: 30px; 1120 | } 1121 | .contact-content { 1122 | margin-bottom: 0; 1123 | } 1124 | .contact-form { 1125 | width: 100%; 1126 | } 1127 | .contact-list { 1128 | margin-left: -40px; 1129 | } 1130 | .footer .container { 1131 | display: flex; 1132 | justify-content: space-between; 1133 | align-items: center; 1134 | } 1135 | } 1136 | @media (min-width: 1200px) { 1137 | .container { 1138 | max-width: 1150px; 1139 | } 1140 | .hero-social-list { 1141 | left: -80px; 1142 | } 1143 | .scroll-down { 1144 | right: -80px; 1145 | } 1146 | .about-banner { 1147 | max-width: 450px; 1148 | } 1149 | } 1150 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 13 | 14 | Zephinax 15 | 16 | 20 | 25 | 26 | 31 | 32 | 33 | 34 | 37 | 70 | 71 | 72 | 73 |
74 | 158 |
159 |
160 |
161 | 162 |
163 |
164 | 165 | 168 | 171 | A man in a blue shirt with a happy expression 175 | 176 |
177 |
178 |

179 | جایی که داستان من شروع شد 180 |

181 | 182 | 183 | ارتباط با من 184 | 185 | 186 |
187 | 211 | 214 |
215 | 216 |
217 |
218 | A man in a alice blue shirt with a thinking expression 222 |
223 |
224 |

درباره من

225 |

226 | با من بیشتر آشنا شو... 227 |

228 |

229 | امیرعلی هستم. یک گیک، وب دولوپر، علاقه مند به لینوکس و نرم افزار 230 | آزاد، برنامه نویس سخت افزار و نرم افزار و عاشق یادگیری و به اشتراک 231 | گذاشتن چیز‌ها. همچنین فعال در حوزه [ دیزاین UI & UX ،هوش مصنوعی 232 | ،امنیت، اینترنت اشیاء، گجت ها، موبایل، کامپیوتر و لپتاپ ] و یکی از 233 | اعضای تیم 234 | زیکادو. تقریبا مسلط به زبان انگلیسی. از کار های چالش برانگیز مثل نصب و 239 | توسعه 240 | کاستوم رام 245 | برای گوشی های اندرویدی و نصب 246 | هکینتاش 251 | خوشم میاد و سعی میکنم چیز های زیادی از طریق حل مشکلات و چالش های 252 | این کار ها یاد بگیرم. 253 |

254 |
255 | گالری پروژه ها 262 | 267 | دانلود رزومه 268 | 269 |
270 |
271 |
272 | 273 |
274 |
275 |

مهارت های من

276 |

277 | مهارت های من شامل چه چیزایی میشه؟ 278 |

279 |

280 | برای اینکه بتونم ایده های توی ذهنم رو به واقعیت تبدیل کنم باید 281 | چیزهای مختلف زیادی یاد میگرفتم که هنوزم تموم نشده و ادامه داره :) 282 |

283 |
284 | 287 | 295 |
296 |
297 |
298 |
    299 |
  • 300 |
    301 |
    HTML5
    302 |
    303 | HTML5 304 |
    305 |
    306 |
    • 307 |
  • 308 |
    309 |
    CSS3
    310 | 311 |
    312 | CSS3 313 |
    314 |
    315 |
    • 316 |
  • 317 |
    318 |
    JavaScript
    319 | 320 |
    321 | JavaScript 324 |
    325 |
    326 |
    • 327 |
  • 328 |
    329 |
    Tailwind Css
    330 | 331 |
    332 | JavaScript 333 |
    334 |
    335 |
    • 336 |
  • 337 |
    338 |
    Bootstrap
    339 | 340 |
    341 | Bootstrap 342 |
    343 |
    344 |
    • 345 |
  • 346 |
    347 |
    PHP
    348 |
    349 | PHP 350 |
    351 |
    352 |
    • 353 |
  • 354 |
    355 |
    Python
    356 | 357 |
    358 | Python 359 |
    360 |
    361 |
    • 362 |
  • 363 |
    364 |
    React
    365 | 366 |
    367 | React 368 |
    369 |
    370 |
    • 371 |
  • 372 |
    373 |
    React Bootstrap
    374 |
    375 | React Bootstrap 376 |
    377 |
    378 |
    • 379 |
  • 380 |
    381 |
    Ducky Script
    382 |
    383 | duckyScript 386 |
    387 |
    388 |
    • 389 |
  • 390 |
    391 |
    Prompt Engineering
    392 |
    393 | Prompt Engineering 396 |
    397 |
    398 |
    • 399 |
  • 400 |
    401 |
    SASS
    402 | 403 |
    404 | SASS 405 |
    406 |
    407 |
    • 408 |
409 |
    410 |
  • 411 |
    412 |
    Git
    413 |
    414 | Git 415 |
    416 |
    417 |
    • 418 |
  • 419 |
    420 |
    Npm
    421 |
    422 | Npm 423 |
    424 |
    425 |
    • 426 |
  • 427 |
    428 |
    Command Line
    429 |
    430 | Command Line 431 |
    432 |
    433 |
    • 434 |
  • 435 |
    436 |
    VS Code
    437 |
    438 | VS Code 439 |
    440 |
    441 |
    • 442 |
  • 443 |
    444 |
    Arduino
    445 |
    446 | Arduino 447 |
    448 |
    449 |
    • 450 |
  • 451 |
    452 |
    Docker
    453 |
    454 | Docker 455 |
    456 |
    457 |
    • 458 |
  • 459 |
    460 |
    Photoshop
    461 |
    462 | Photoshop 463 |
    464 |
    465 |
    • 466 |
  • 467 |
    468 |
    Figma
    469 |
    470 | Figma 471 |
    472 |
    473 |
    • 474 |
  • 475 |
    476 |
    Vite
    477 |
    478 | Vite 479 |
    480 |
    481 |
    • 482 |
  • 483 |
    484 |
    Linux
    485 |
    486 | Linux 487 |
    488 |
    489 |
    • 490 |
491 |
492 |
493 | 494 |
495 |
496 |

ارتباط با من

497 |

498 | میخوای باهام صحبت کنی؟ 499 |

500 |

501 | اگه فکر میکنی پروژه ای تو ذهنت داری که ممکنه ازش خوشم بیاد یا 502 | باهام کاری داشتی فقط کافیه فرمو پر کنی تا باهام صحبت کنی یا میتونی 503 | تو یکی از شبکه های اجتماعی پیام بدی. 504 |

505 |
    506 |
  • 507 |
    508 | 509 |
    510 |
    511 |

    ایمیل

    512 | Zephinax@gmail.com 515 |
    516 |
    • 517 |
  • 518 |
    519 | 520 |
    521 |
    522 |

    لینکدین

    523 | Linkedin.com/in/zephinax 529 |
    530 |
    • 531 |
  • 532 |
    533 | 534 |
    535 |
    536 |

    537 | تلگرام & اینستاگرام 538 |

    539 | @Zephinax 546 |
    547 |
    • 548 |
  • 549 |
    550 | 551 |
    552 |
    553 |

    گیت هاب

    554 | github.com/Zephinax 560 |
    561 |
    • 562 |
563 |
564 |
569 | 573 |
574 | 577 |
578 | 585 | 586 |
587 |
588 |
589 | 590 |
591 | 598 | 599 |
600 |
601 |
602 | 605 |
606 | 613 | 614 |
615 |
616 |
617 | 620 |
621 | 627 | 628 |
629 |
630 | 637 |
638 |
639 |
640 |
641 | 642 | 656 | 657 | 660 | 663 | 664 | 665 | -------------------------------------------------------------------------------- /cv/assets/css/main.min.css: -------------------------------------------------------------------------------- 1 | /*! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com*/ 2 | *, 3 | :after, 4 | :before { 5 | box-sizing: border-box; 6 | border: 0 solid #e5e7eb; 7 | } 8 | :after, 9 | :before { 10 | --tw-content: ''; 11 | } 12 | html { 13 | line-height: 1.5; 14 | -webkit-text-size-adjust: 100%; 15 | -moz-tab-size: 4; 16 | -o-tab-size: 4; 17 | tab-size: 4; 18 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 19 | Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 20 | Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; 21 | font-feature-settings: normal; 22 | } 23 | body { 24 | margin: 0; 25 | line-height: inherit; 26 | } 27 | hr { 28 | height: 0; 29 | color: inherit; 30 | border-top-width: 1px; 31 | } 32 | abbr:where([title]) { 33 | -webkit-text-decoration: underline dotted; 34 | text-decoration: underline dotted; 35 | } 36 | h1, 37 | h2, 38 | h3, 39 | h4, 40 | h5, 41 | h6 { 42 | font-size: inherit; 43 | font-weight: inherit; 44 | } 45 | a { 46 | color: inherit; 47 | text-decoration: inherit; 48 | } 49 | b, 50 | strong { 51 | font-weight: bolder; 52 | } 53 | code, 54 | kbd, 55 | pre, 56 | samp { 57 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 58 | Liberation Mono, Courier New, monospace; 59 | font-size: 1em; 60 | } 61 | small { 62 | font-size: 80%; 63 | } 64 | sub, 65 | sup { 66 | font-size: 75%; 67 | line-height: 0; 68 | position: relative; 69 | vertical-align: initial; 70 | } 71 | sub { 72 | bottom: -0.25em; 73 | } 74 | sup { 75 | top: -0.5em; 76 | } 77 | table { 78 | text-indent: 0; 79 | border-color: inherit; 80 | border-collapse: collapse; 81 | } 82 | button, 83 | input, 84 | optgroup, 85 | select, 86 | textarea { 87 | font-family: inherit; 88 | font-size: 100%; 89 | font-weight: inherit; 90 | line-height: inherit; 91 | color: inherit; 92 | margin: 0; 93 | padding: 0; 94 | } 95 | button, 96 | select { 97 | text-transform: none; 98 | } 99 | [type='button'], 100 | [type='reset'], 101 | [type='submit'], 102 | button { 103 | -webkit-appearance: button; 104 | background-color: initial; 105 | background-image: none; 106 | } 107 | :-moz-focusring { 108 | outline: auto; 109 | } 110 | :-moz-ui-invalid { 111 | box-shadow: none; 112 | } 113 | progress { 114 | vertical-align: initial; 115 | } 116 | ::-webkit-inner-spin-button, 117 | ::-webkit-outer-spin-button { 118 | height: auto; 119 | } 120 | [type='search'] { 121 | -webkit-appearance: textfield; 122 | outline-offset: -2px; 123 | } 124 | ::-webkit-search-decoration { 125 | -webkit-appearance: none; 126 | } 127 | ::-webkit-file-upload-button { 128 | -webkit-appearance: button; 129 | font: inherit; 130 | } 131 | summary { 132 | display: list-item; 133 | } 134 | blockquote, 135 | dd, 136 | dl, 137 | figure, 138 | h1, 139 | h2, 140 | h3, 141 | h4, 142 | h5, 143 | h6, 144 | hr, 145 | p, 146 | pre { 147 | margin: 0; 148 | } 149 | fieldset { 150 | margin: 0; 151 | } 152 | fieldset, 153 | legend { 154 | padding: 0; 155 | } 156 | menu, 157 | ol, 158 | ul { 159 | list-style: none; 160 | margin: 0; 161 | padding: 0; 162 | } 163 | textarea { 164 | resize: vertical; 165 | } 166 | input::-moz-placeholder, 167 | textarea::-moz-placeholder { 168 | opacity: 1; 169 | color: #9ca3af; 170 | } 171 | input::placeholder, 172 | textarea::placeholder { 173 | opacity: 1; 174 | color: #9ca3af; 175 | } 176 | [role='button'], 177 | button { 178 | cursor: pointer; 179 | } 180 | :disabled { 181 | cursor: default; 182 | } 183 | audio, 184 | canvas, 185 | embed, 186 | iframe, 187 | img, 188 | object, 189 | svg, 190 | video { 191 | display: block; 192 | vertical-align: middle; 193 | } 194 | img, 195 | video { 196 | max-width: 100%; 197 | height: auto; 198 | } 199 | [hidden] { 200 | display: none; 201 | } 202 | @font-face { 203 | font-family: Vazirmatn RD VF; 204 | src: url(../fonts/Vazirmatn-RD%5bwght%5d.woff2) format('woff2'); 205 | font-weight: 400; 206 | font-style: normal; 207 | font-display: swap; 208 | } 209 | @font-face { 210 | font-family: Vazirmatn RD; 211 | src: url(../fonts/Vazirmatn-RD-Regular.woff2) format('woff2'); 212 | font-weight: 400; 213 | font-style: normal; 214 | font-display: swap; 215 | } 216 | @font-face { 217 | font-family: Vazirmatn RD; 218 | src: url(../fonts/Vazirmatn-RD-Medium.woff2) format('woff2'); 219 | font-weight: 500; 220 | font-style: normal; 221 | font-display: swap; 222 | } 223 | @font-face { 224 | font-family: Vazirmatn RD; 225 | src: url(../fonts/Vazirmatn-RD-SemiBold.woff2) format('woff2'); 226 | font-weight: 600; 227 | font-style: normal; 228 | font-display: swap; 229 | } 230 | @font-face { 231 | font-family: Vazirmatn RD; 232 | src: url(../fonts/Vazirmatn-RD-Bold.woff2) format('woff2'); 233 | font-weight: 700; 234 | font-style: normal; 235 | font-display: swap; 236 | } 237 | html { 238 | font-family: Vazirmatn RD, ui-sans-serif, system-ui, -apple-system, 239 | BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, 240 | sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, 241 | Noto Color Emoji; 242 | scroll-behavior: smooth; 243 | } 244 | @supports (font-variation-settings: normal) { 245 | html { 246 | font-family: Vazirmatn RD VF, ui-sans-serif, system-ui, -apple-system, 247 | BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, 248 | sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, 249 | Noto Color Emoji !important; 250 | scroll-behavior: smooth; 251 | } 252 | } 253 | *, 254 | ::backdrop, 255 | :after, 256 | :before { 257 | --tw-border-spacing-x: 0; 258 | --tw-border-spacing-y: 0; 259 | --tw-translate-x: 0; 260 | --tw-translate-y: 0; 261 | --tw-rotate: 0; 262 | --tw-skew-x: 0; 263 | --tw-skew-y: 0; 264 | --tw-scale-x: 1; 265 | --tw-scale-y: 1; 266 | --tw-pan-x: ; 267 | --tw-pan-y: ; 268 | --tw-pinch-zoom: ; 269 | --tw-scroll-snap-strictness: proximity; 270 | --tw-ordinal: ; 271 | --tw-slashed-zero: ; 272 | --tw-numeric-figure: ; 273 | --tw-numeric-spacing: ; 274 | --tw-numeric-fraction: ; 275 | --tw-ring-inset: ; 276 | --tw-ring-offset-width: 0px; 277 | --tw-ring-offset-color: #fff; 278 | --tw-ring-color: #3b82f680; 279 | --tw-ring-offset-shadow: 0 0 #0000; 280 | --tw-ring-shadow: 0 0 #0000; 281 | --tw-shadow: 0 0 #0000; 282 | --tw-shadow-colored: 0 0 #0000; 283 | --tw-blur: ; 284 | --tw-brightness: ; 285 | --tw-contrast: ; 286 | --tw-grayscale: ; 287 | --tw-hue-rotate: ; 288 | --tw-invert: ; 289 | --tw-saturate: ; 290 | --tw-sepia: ; 291 | --tw-drop-shadow: ; 292 | --tw-backdrop-blur: ; 293 | --tw-backdrop-brightness: ; 294 | --tw-backdrop-contrast: ; 295 | --tw-backdrop-grayscale: ; 296 | --tw-backdrop-hue-rotate: ; 297 | --tw-backdrop-invert: ; 298 | --tw-backdrop-opacity: ; 299 | --tw-backdrop-saturate: ; 300 | --tw-backdrop-sepia: ; 301 | } 302 | .icon { 303 | height: 1.5rem; 304 | width: 1.5rem; 305 | --tw-text-opacity: 1; 306 | color: rgb(107 114 128 / var(--tw-text-opacity)); 307 | } 308 | .icon:hover { 309 | --tw-text-opacity: 1; 310 | color: rgb(75 85 99 / var(--tw-text-opacity)); 311 | } 312 | .dark .icon { 313 | --tw-text-opacity: 1; 314 | color: rgb(156 163 175 / var(--tw-text-opacity)); 315 | } 316 | .dark .icon:hover { 317 | --tw-text-opacity: 1; 318 | color: rgb(209 213 219 / var(--tw-text-opacity)); 319 | } 320 | .exp-menu-container { 321 | display: flex; 322 | flex-direction: column-reverse; 323 | border-style: solid; 324 | --tw-border-opacity: 1; 325 | border-color: rgb(203 213 225 / var(--tw-border-opacity)); 326 | } 327 | [dir='ltr'] .exp-menu-container { 328 | margin-left: 0.55rem; 329 | border-left-width: 2px; 330 | padding-left: 0.85rem; 331 | } 332 | [dir='rtl'] .exp-menu-container { 333 | margin-right: 0.55rem; 334 | border-right-width: 2px; 335 | padding-right: 0.85rem; 336 | } 337 | .dark .exp-menu-container { 338 | --tw-border-opacity: 1; 339 | border-color: rgb(51 65 85 / var(--tw-border-opacity)); 340 | } 341 | .exp-menu-item { 342 | margin-bottom: 1rem; 343 | } 344 | .exp-menu-item:before { 345 | position: absolute; 346 | height: 1rem; 347 | width: 1rem; 348 | border-radius: 9999px; 349 | --tw-bg-opacity: 1; 350 | background-color: rgb(0 102 255 / var(--tw-bg-opacity)); 351 | --tw-shadow: 0 0 0 0.1875rem; 352 | --tw-shadow-colored: 0 0 0 0.1875rem var(--tw-shadow-color); 353 | box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), 354 | var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); 355 | --tw-shadow-color: #0066ff40; 356 | --tw-shadow: var(--tw-shadow-colored); 357 | --tw-content: ''; 358 | content: var(--tw-content); 359 | } 360 | [dir='ltr'] .exp-menu-item:before { 361 | content: var(--tw-content); 362 | margin-left: -1.4rem; 363 | } 364 | [dir='rtl'] .exp-menu-item:before { 365 | content: var(--tw-content); 366 | margin-right: -1.4rem; 367 | } 368 | .tag { 369 | margin: 0.25rem; 370 | border-radius: 9999px; 371 | --tw-bg-opacity: 1; 372 | background-color: rgb(31 41 55 / var(--tw-bg-opacity)); 373 | padding: 0.375rem 1rem; 374 | font-size: 0.75rem; 375 | line-height: 1rem; 376 | --tw-text-opacity: 1; 377 | color: rgb(209 213 219 / var(--tw-text-opacity)); 378 | } 379 | .dark .tag { 380 | --tw-bg-opacity: 1; 381 | background-color: rgb(55 65 81 / var(--tw-bg-opacity)); 382 | } 383 | .btn-cta { 384 | width: 100%; 385 | max-width: 16rem; 386 | border-radius: 1rem; 387 | background-image: linear-gradient(to top right, var(--tw-gradient-stops)); 388 | --tw-gradient-from: #176ae5; 389 | --tw-gradient-to: #176ae500; 390 | --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); 391 | --tw-gradient-to: #06f; 392 | padding-top: 1rem; 393 | padding-bottom: 1rem; 394 | text-align: center; 395 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 396 | Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 397 | Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; 398 | font-weight: 500; 399 | --tw-text-opacity: 1; 400 | color: rgb(255 255 255 / var(--tw-text-opacity)); 401 | --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; 402 | --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 403 | 0 4px 6px -4px var(--tw-shadow-color); 404 | box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), 405 | var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); 406 | --tw-shadow-color: #176ae540; 407 | --tw-shadow: var(--tw-shadow-colored); 408 | } 409 | @supports (font-variation-settings: normal) { 410 | .btn-cta { 411 | font-variation-settings: 'wght' 500; 412 | font-weight: 400; 413 | } 414 | } 415 | [dir='rtl'] .btn-cta { 416 | font-family: Vazirmatn RD VF, Vazirmatn RD; 417 | } 418 | .dark .btn-cta { 419 | --tw-shadow-color: #176ae533; 420 | --tw-shadow: var(--tw-shadow-colored); 421 | } 422 | @media (min-width: 640px) { 423 | .btn-cta { 424 | max-width: none; 425 | } 426 | } 427 | .btn-cta { 428 | font-weight: 500; 429 | } 430 | .progress-bar { 431 | border-radius: 9999px; 432 | background-image: linear-gradient(to top right, var(--tw-gradient-stops)); 433 | --tw-gradient-from: #176ae5; 434 | --tw-gradient-to: #176ae500; 435 | --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); 436 | --tw-gradient-to: #0080ff; 437 | padding: 0.25rem; 438 | font-size: 0.75rem; 439 | line-height: 1rem; 440 | --tw-text-opacity: 1; 441 | color: rgb(255 255 255 / var(--tw-text-opacity)); 442 | } 443 | [dir='ltr'] .progress-bar { 444 | text-align: right; 445 | } 446 | [dir='rtl'] .progress-bar { 447 | text-align: left; 448 | } 449 | .dot-container { 450 | direction: ltr; 451 | } 452 | .dot { 453 | margin-left: 0.25rem; 454 | margin-right: 0.25rem; 455 | display: inline-block; 456 | height: 0.75rem; 457 | width: 0.75rem; 458 | border-radius: 9999px; 459 | --tw-bg-opacity: 1; 460 | background-color: rgb(0 102 255 / var(--tw-bg-opacity)); 461 | --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 462 | var(--tw-ring-offset-width) var(--tw-ring-offset-color); 463 | --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 464 | calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); 465 | box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 466 | var(--tw-shadow, 0 0 #0000); 467 | --tw-ring-opacity: 1; 468 | --tw-ring-color: rgb(0 102 255 / var(--tw-ring-opacity)); 469 | --tw-ring-offset-width: 2px; 470 | } 471 | .dark .dot { 472 | --tw-ring-offset-color: #18181bf2; 473 | } 474 | .dot-null { 475 | margin-left: 0.25rem; 476 | margin-right: 0.25rem; 477 | display: inline-block; 478 | height: 0.75rem; 479 | width: 0.75rem; 480 | border-radius: 9999px; 481 | background-color: initial; 482 | --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 483 | var(--tw-ring-offset-width) var(--tw-ring-offset-color); 484 | --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 485 | calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); 486 | box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 487 | var(--tw-shadow, 0 0 #0000); 488 | --tw-ring-opacity: 1; 489 | --tw-ring-color: rgb(0 102 255 / var(--tw-ring-opacity)); 490 | --tw-ring-offset-width: 2px; 491 | } 492 | .dark .dot-null { 493 | --tw-ring-offset-color: #18181bf2; 494 | } 495 | .favorite-item { 496 | margin: 0.25rem; 497 | border-radius: 9999px; 498 | --tw-bg-opacity: 1; 499 | background-color: rgb(30 41 59 / var(--tw-bg-opacity)); 500 | padding: 0.25rem 1rem; 501 | font-size: 0.875rem; 502 | line-height: 1.25rem; 503 | --tw-text-opacity: 1; 504 | color: rgb(241 245 249 / var(--tw-text-opacity)); 505 | } 506 | .dark .favorite-item { 507 | --tw-bg-opacity: 1; 508 | background-color: rgb(19 19 19 / var(--tw-bg-opacity)); 509 | } 510 | .dark .favorite-item:hover { 511 | --tw-text-opacity: 1; 512 | color: rgb(226 232 240 / var(--tw-text-opacity)); 513 | } 514 | .btn-modal:hover { 515 | cursor: pointer; 516 | opacity: 0.75; 517 | } 518 | .rtl { 519 | direction: rtl; 520 | } 521 | .ltr { 522 | direction: ltr; 523 | } 524 | .fixed { 525 | position: fixed; 526 | } 527 | .relative { 528 | position: relative; 529 | } 530 | .inset-0 { 531 | top: 0; 532 | right: 0; 533 | bottom: 0; 534 | left: 0; 535 | } 536 | .top-\[-0\.35rem\] { 537 | top: -0.35rem; 538 | } 539 | .z-20 { 540 | z-index: 20; 541 | } 542 | .z-30 { 543 | z-index: 30; 544 | } 545 | .m-1 { 546 | margin: 0.25rem; 547 | } 548 | .mx-2 { 549 | margin-left: 0.5rem; 550 | margin-right: 0.5rem; 551 | } 552 | .mx-4 { 553 | margin-left: 1rem; 554 | margin-right: 1rem; 555 | } 556 | .mx-auto { 557 | margin-left: auto; 558 | margin-right: auto; 559 | } 560 | .mb-10 { 561 | margin-bottom: 2.5rem; 562 | } 563 | .mb-2 { 564 | margin-bottom: 0.5rem; 565 | } 566 | .mb-4 { 567 | margin-bottom: 1rem; 568 | } 569 | .mb-6 { 570 | margin-bottom: 1.5rem; 571 | } 572 | .mt-4 { 573 | margin-top: 1rem; 574 | } 575 | .block { 576 | display: block; 577 | } 578 | .inline-block { 579 | display: inline-block; 580 | } 581 | .flex { 582 | display: flex; 583 | } 584 | .inline-flex { 585 | display: inline-flex; 586 | } 587 | .table { 588 | display: table; 589 | } 590 | .grid { 591 | display: grid; 592 | } 593 | .hidden { 594 | display: none; 595 | } 596 | .h-5 { 597 | height: 1.25rem; 598 | } 599 | .h-6 { 600 | height: 1.5rem; 601 | } 602 | .h-9 { 603 | height: 2.25rem; 604 | } 605 | .h-full { 606 | height: 100%; 607 | } 608 | .min-h-screen { 609 | min-height: 100vh; 610 | } 611 | .w-1\/2 { 612 | width: 50%; 613 | } 614 | .w-5 { 615 | width: 1.25rem; 616 | } 617 | .w-6 { 618 | width: 1.5rem; 619 | } 620 | .w-auto { 621 | width: auto; 622 | } 623 | .w-full { 624 | width: 100%; 625 | } 626 | .max-w-7xl { 627 | max-width: 80rem; 628 | } 629 | .max-w-\[16rem\] { 630 | max-width: 16rem; 631 | } 632 | .max-w-\[250px\] { 633 | max-width: 250px; 634 | } 635 | .transform { 636 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) 637 | rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) 638 | scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); 639 | } 640 | @keyframes fadeInUp { 641 | 0% { 642 | opacity: 0; 643 | transform: translate3d(0, 5vh, 0); 644 | } 645 | to { 646 | opacity: 1; 647 | transform: translateZ(0); 648 | } 649 | } 650 | .animate-fadeInUp { 651 | animation: fadeInUp 1s ease-in-out; 652 | } 653 | .select-none { 654 | -webkit-user-select: none; 655 | -moz-user-select: none; 656 | user-select: none; 657 | } 658 | .grid-cols-1 { 659 | grid-template-columns: repeat(1, minmax(0, 1fr)); 660 | } 661 | .flex-row-reverse { 662 | flex-direction: row-reverse; 663 | } 664 | .flex-col { 665 | flex-direction: column; 666 | } 667 | .flex-wrap { 668 | flex-wrap: wrap; 669 | } 670 | .items-end { 671 | align-items: flex-end; 672 | } 673 | .items-center { 674 | align-items: center; 675 | } 676 | .justify-center { 677 | justify-content: center; 678 | } 679 | .justify-between { 680 | justify-content: space-between; 681 | } 682 | .gap-5 { 683 | gap: 1.25rem; 684 | } 685 | .gap-x-4 { 686 | -moz-column-gap: 1rem; 687 | column-gap: 1rem; 688 | } 689 | .gap-x-6 { 690 | -moz-column-gap: 1.5rem; 691 | column-gap: 1.5rem; 692 | } 693 | .gap-y-4 { 694 | row-gap: 1rem; 695 | } 696 | .space-x-2 > :not([hidden]) ~ :not([hidden]) { 697 | --tw-space-x-reverse: 0; 698 | margin-right: calc(0.5rem * var(--tw-space-x-reverse)); 699 | margin-left: calc(0.5rem * (1 - var(--tw-space-x-reverse))); 700 | } 701 | .space-y-4 > :not([hidden]) ~ :not([hidden]) { 702 | --tw-space-y-reverse: 0; 703 | margin-top: calc(1rem * (1 - var(--tw-space-y-reverse))); 704 | margin-bottom: calc(1rem * var(--tw-space-y-reverse)); 705 | } 706 | .space-y-6 > :not([hidden]) ~ :not([hidden]) { 707 | --tw-space-y-reverse: 0; 708 | margin-top: calc(1.5rem * (1 - var(--tw-space-y-reverse))); 709 | margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); 710 | } 711 | .overflow-hidden { 712 | overflow: hidden; 713 | } 714 | .overflow-y-auto { 715 | overflow-y: auto; 716 | } 717 | .rounded-3xl { 718 | border-radius: 1.5rem; 719 | } 720 | .rounded-\[2rem\] { 721 | border-radius: 2rem; 722 | } 723 | .rounded-full { 724 | border-radius: 9999px; 725 | } 726 | .rounded-lg { 727 | border-radius: 0.5rem; 728 | } 729 | .rounded-b { 730 | border-bottom-right-radius: 0.25rem; 731 | border-bottom-left-radius: 0.25rem; 732 | } 733 | .rounded-t { 734 | border-top-left-radius: 0.25rem; 735 | border-top-right-radius: 0.25rem; 736 | } 737 | .border-b { 738 | border-bottom-width: 1px; 739 | } 740 | .border-t { 741 | border-top-width: 1px; 742 | } 743 | .border-slate-200 { 744 | --tw-border-opacity: 1; 745 | border-color: rgb(226 232 240 / var(--tw-border-opacity)); 746 | } 747 | .border-slate-700 { 748 | --tw-border-opacity: 1; 749 | border-color: rgb(51 65 85 / var(--tw-border-opacity)); 750 | } 751 | .bg-blue-700 { 752 | --tw-bg-opacity: 1; 753 | background-color: rgb(29 78 216 / var(--tw-bg-opacity)); 754 | } 755 | .bg-primary\/25 { 756 | background-color: #0066ff40; 757 | } 758 | .bg-secondary { 759 | --tw-bg-opacity: 1; 760 | background-color: rgb(22 27 37 / var(--tw-bg-opacity)); 761 | } 762 | .bg-slate-50 { 763 | --tw-bg-opacity: 1; 764 | background-color: rgb(248 250 252 / var(--tw-bg-opacity)); 765 | } 766 | .bg-slate-500 { 767 | --tw-bg-opacity: 1; 768 | background-color: rgb(100 116 139 / var(--tw-bg-opacity)); 769 | } 770 | .bg-transparent { 771 | background-color: initial; 772 | } 773 | .bg-white { 774 | --tw-bg-opacity: 1; 775 | background-color: rgb(255 255 255 / var(--tw-bg-opacity)); 776 | } 777 | .bg-opacity-75 { 778 | --tw-bg-opacity: 0.75; 779 | } 780 | .p-1 { 781 | padding: 0.25rem; 782 | } 783 | .p-1\.5 { 784 | padding: 0.375rem; 785 | } 786 | .p-5 { 787 | padding: 1.25rem; 788 | } 789 | .p-6 { 790 | padding: 1.5rem; 791 | } 792 | .p-8 { 793 | padding: 2rem; 794 | } 795 | .px-2 { 796 | padding-left: 0.5rem; 797 | padding-right: 0.5rem; 798 | } 799 | .px-4 { 800 | padding-left: 1rem; 801 | padding-right: 1rem; 802 | } 803 | .px-5 { 804 | padding-left: 1.25rem; 805 | padding-right: 1.25rem; 806 | } 807 | .py-3 { 808 | padding-top: 0.75rem; 809 | padding-bottom: 0.75rem; 810 | } 811 | .py-4 { 812 | padding-top: 1rem; 813 | padding-bottom: 1rem; 814 | } 815 | .py-8 { 816 | padding-top: 2rem; 817 | padding-bottom: 2rem; 818 | } 819 | .pb-20 { 820 | padding-bottom: 5rem; 821 | } 822 | .pl-2 { 823 | padding-left: 0.5rem; 824 | } 825 | .pt-4 { 826 | padding-top: 1rem; 827 | } 828 | .text-left { 829 | text-align: left; 830 | } 831 | .text-center { 832 | text-align: center; 833 | } 834 | .align-middle { 835 | vertical-align: middle; 836 | } 837 | .align-bottom { 838 | vertical-align: bottom; 839 | } 840 | .font-sans { 841 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 842 | Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 843 | Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; 844 | } 845 | .text-2xl { 846 | font-size: 1.5rem; 847 | line-height: 2rem; 848 | } 849 | .text-base { 850 | font-size: 1rem; 851 | line-height: 1.5rem; 852 | } 853 | .text-lg { 854 | font-size: 1.125rem; 855 | line-height: 1.75rem; 856 | } 857 | .text-sm { 858 | font-size: 0.875rem; 859 | line-height: 1.25rem; 860 | } 861 | .text-xl { 862 | font-size: 1.25rem; 863 | line-height: 1.75rem; 864 | } 865 | .font-\[500\] { 866 | font-weight: 500; 867 | } 868 | .font-black { 869 | font-weight: 900; 870 | } 871 | .font-bold { 872 | font-weight: 700; 873 | } 874 | .font-medium { 875 | font-weight: 500; 876 | } 877 | .font-semibold { 878 | font-weight: 600; 879 | } 880 | .leading-normal { 881 | line-height: 1.5; 882 | } 883 | .leading-relaxed { 884 | line-height: 1.625; 885 | } 886 | .text-slate-200 { 887 | --tw-text-opacity: 1; 888 | color: rgb(226 232 240 / var(--tw-text-opacity)); 889 | } 890 | .text-slate-300 { 891 | --tw-text-opacity: 1; 892 | color: rgb(203 213 225 / var(--tw-text-opacity)); 893 | } 894 | .text-slate-400 { 895 | --tw-text-opacity: 1; 896 | color: rgb(148 163 184 / var(--tw-text-opacity)); 897 | } 898 | .text-slate-500 { 899 | --tw-text-opacity: 1; 900 | color: rgb(100 116 139 / var(--tw-text-opacity)); 901 | } 902 | .text-slate-600 { 903 | --tw-text-opacity: 1; 904 | color: rgb(71 85 105 / var(--tw-text-opacity)); 905 | } 906 | .text-slate-700 { 907 | --tw-text-opacity: 1; 908 | color: rgb(51 65 85 / var(--tw-text-opacity)); 909 | } 910 | .text-slate-900 { 911 | --tw-text-opacity: 1; 912 | color: rgb(15 23 42 / var(--tw-text-opacity)); 913 | } 914 | .text-white { 915 | --tw-text-opacity: 1; 916 | color: rgb(255 255 255 / var(--tw-text-opacity)); 917 | } 918 | .antialiased { 919 | -webkit-font-smoothing: antialiased; 920 | -moz-osx-font-smoothing: grayscale; 921 | } 922 | .shadow-md { 923 | --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; 924 | --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 925 | 0 2px 4px -2px var(--tw-shadow-color); 926 | } 927 | .shadow-md, 928 | .shadow-xl { 929 | box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), 930 | var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); 931 | } 932 | .shadow-xl { 933 | --tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; 934 | --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 935 | 0 8px 10px -6px var(--tw-shadow-color); 936 | } 937 | .transition-all { 938 | transition-property: all; 939 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 940 | transition-duration: 0.15s; 941 | } 942 | .transition-colors { 943 | transition-property: color, background-color, border-color, 944 | text-decoration-color, fill, stroke; 945 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 946 | transition-duration: 0.15s; 947 | } 948 | .transition-opacity { 949 | transition-property: opacity; 950 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 951 | transition-duration: 0.15s; 952 | } 953 | .ease-in { 954 | transition-timing-function: cubic-bezier(0.4, 0, 1, 1); 955 | } 956 | .drag-none { 957 | -webkit-user-drag: none; 958 | -khtml-user-drag: none; 959 | -moz-user-drag: none; 960 | -o-user-drag: none; 961 | } 962 | @supports (font-variation-settings: normal) { 963 | .font-normal { 964 | font-variation-settings: 'wght' 400 !important; 965 | font-weight: 400 !important; 966 | } 967 | .font-medium { 968 | font-variation-settings: 'wght' 500 !important; 969 | font-weight: 400 !important; 970 | } 971 | .font-semibold { 972 | font-variation-settings: 'wght' 600 !important; 973 | font-weight: 400 !important; 974 | } 975 | .font-bold { 976 | font-variation-settings: 'wght' 700 !important; 977 | font-weight: 400 !important; 978 | } 979 | .font-black { 980 | font-variation-settings: 'wght' 900 !important; 981 | font-weight: 400 !important; 982 | } 983 | } 984 | .selection\:bg-\[\#007bff\] ::-moz-selection { 985 | --tw-bg-opacity: 1; 986 | background-color: rgb(0 123 255 / var(--tw-bg-opacity)); 987 | } 988 | .selection\:bg-\[\#007bff\] ::selection { 989 | --tw-bg-opacity: 1; 990 | background-color: rgb(0 123 255 / var(--tw-bg-opacity)); 991 | } 992 | .selection\:text-white ::-moz-selection { 993 | --tw-text-opacity: 1; 994 | color: rgb(255 255 255 / var(--tw-text-opacity)); 995 | } 996 | .selection\:text-white ::selection { 997 | --tw-text-opacity: 1; 998 | color: rgb(255 255 255 / var(--tw-text-opacity)); 999 | } 1000 | .selection\:bg-\[\#007bff\]::-moz-selection { 1001 | --tw-bg-opacity: 1; 1002 | background-color: rgb(0 123 255 / var(--tw-bg-opacity)); 1003 | } 1004 | .selection\:bg-\[\#007bff\]::selection { 1005 | --tw-bg-opacity: 1; 1006 | background-color: rgb(0 123 255 / var(--tw-bg-opacity)); 1007 | } 1008 | .selection\:text-white::-moz-selection { 1009 | --tw-text-opacity: 1; 1010 | color: rgb(255 255 255 / var(--tw-text-opacity)); 1011 | } 1012 | .selection\:text-white::selection { 1013 | --tw-text-opacity: 1; 1014 | color: rgb(255 255 255 / var(--tw-text-opacity)); 1015 | } 1016 | .hover\:cursor-pointer:hover { 1017 | cursor: pointer; 1018 | } 1019 | .hover\:border-slate-700:hover { 1020 | --tw-border-opacity: 1; 1021 | border-color: rgb(51 65 85 / var(--tw-border-opacity)); 1022 | } 1023 | .hover\:bg-blue-800:hover { 1024 | --tw-bg-opacity: 1; 1025 | background-color: rgb(30 64 175 / var(--tw-bg-opacity)); 1026 | } 1027 | .hover\:bg-slate-200:hover { 1028 | --tw-bg-opacity: 1; 1029 | background-color: rgb(226 232 240 / var(--tw-bg-opacity)); 1030 | } 1031 | .hover\:text-slate-100:hover { 1032 | --tw-text-opacity: 1; 1033 | color: rgb(241 245 249 / var(--tw-text-opacity)); 1034 | } 1035 | .hover\:text-slate-900:hover { 1036 | --tw-text-opacity: 1; 1037 | color: rgb(15 23 42 / var(--tw-text-opacity)); 1038 | } 1039 | .focus\:border-slate-700:focus { 1040 | --tw-border-opacity: 1; 1041 | border-color: rgb(51 65 85 / var(--tw-border-opacity)); 1042 | } 1043 | .focus\:outline-none:focus { 1044 | outline: 2px solid #0000; 1045 | outline-offset: 2px; 1046 | } 1047 | .focus\:ring-4:focus { 1048 | --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 1049 | var(--tw-ring-offset-width) var(--tw-ring-offset-color); 1050 | --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 1051 | calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); 1052 | box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 1053 | var(--tw-shadow, 0 0 #0000); 1054 | } 1055 | .focus\:ring-blue-300:focus { 1056 | --tw-ring-opacity: 1; 1057 | --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity)); 1058 | } 1059 | [dir='ltr'] .ltr\:ml-2 { 1060 | margin-left: 0.5rem; 1061 | } 1062 | [dir='ltr'] .ltr\:ml-2\.5 { 1063 | margin-left: 0.625rem; 1064 | } 1065 | [dir='ltr'] .ltr\:ml-auto { 1066 | margin-left: auto; 1067 | } 1068 | [dir='ltr'] .ltr\:mr-2 { 1069 | margin-right: 0.5rem; 1070 | } 1071 | [dir='ltr'] .ltr\:mr-6 { 1072 | margin-right: 1.5rem; 1073 | } 1074 | [dir='ltr'] .ltr\:gap-x-1 { 1075 | -moz-column-gap: 0.25rem; 1076 | column-gap: 0.25rem; 1077 | } 1078 | [dir='ltr'] .ltr\:border-l { 1079 | border-left-width: 1px; 1080 | } 1081 | [dir='ltr'] .ltr\:pl-2 { 1082 | padding-left: 0.5rem; 1083 | } 1084 | [dir='ltr'] .ltr\:pl-4 { 1085 | padding-left: 1rem; 1086 | } 1087 | [dir='ltr'] .ltr\:text-left { 1088 | text-align: left; 1089 | } 1090 | [dir='ltr'] .ltr\:text-right { 1091 | text-align: right; 1092 | } 1093 | [dir='ltr'] .ltr\:focus\:border-l-2:focus, 1094 | [dir='ltr'] .ltr\:hover\:border-l-2:hover { 1095 | border-left-width: 2px; 1096 | } 1097 | [dir='rtl'] .rtl\:ml-2 { 1098 | margin-left: 0.5rem; 1099 | } 1100 | [dir='rtl'] .rtl\:ml-6 { 1101 | margin-left: 1.5rem; 1102 | } 1103 | [dir='rtl'] .rtl\:mr-2 { 1104 | margin-right: 0.5rem; 1105 | } 1106 | [dir='rtl'] .rtl\:mr-2\.5 { 1107 | margin-right: 0.625rem; 1108 | } 1109 | [dir='rtl'] .rtl\:mr-auto { 1110 | margin-right: auto; 1111 | } 1112 | [dir='rtl'] .rtl\:gap-x-2 { 1113 | -moz-column-gap: 0.5rem; 1114 | column-gap: 0.5rem; 1115 | } 1116 | [dir='rtl'] .rtl\:border-r { 1117 | border-right-width: 1px; 1118 | } 1119 | [dir='rtl'] .rtl\:pr-2 { 1120 | padding-right: 0.5rem; 1121 | } 1122 | [dir='rtl'] .rtl\:pr-4 { 1123 | padding-right: 1rem; 1124 | } 1125 | [dir='rtl'] .rtl\:text-left { 1126 | text-align: left; 1127 | } 1128 | [dir='rtl'] .rtl\:text-right { 1129 | text-align: right; 1130 | } 1131 | [dir='rtl'] .rtl\:focus\:border-r-2:focus, 1132 | [dir='rtl'] .rtl\:hover\:border-r-2:hover { 1133 | border-right-width: 2px; 1134 | } 1135 | .dark .dark\:border-slate-600 { 1136 | --tw-border-opacity: 1; 1137 | border-color: rgb(71 85 105 / var(--tw-border-opacity)); 1138 | } 1139 | .dark .dark\:border-slate-700 { 1140 | --tw-border-opacity: 1; 1141 | border-color: rgb(51 65 85 / var(--tw-border-opacity)); 1142 | } 1143 | .dark .dark\:border-zinc-800 { 1144 | --tw-border-opacity: 1; 1145 | border-color: rgb(39 39 42 / var(--tw-border-opacity)); 1146 | } 1147 | .dark .dark\:bg-\[\#131313\] { 1148 | --tw-bg-opacity: 1; 1149 | background-color: rgb(19 19 19 / var(--tw-bg-opacity)); 1150 | } 1151 | .dark .dark\:bg-blue-600 { 1152 | --tw-bg-opacity: 1; 1153 | background-color: rgb(37 99 235 / var(--tw-bg-opacity)); 1154 | } 1155 | .dark .dark\:bg-gray-800 { 1156 | --tw-bg-opacity: 1; 1157 | background-color: rgb(31 41 55 / var(--tw-bg-opacity)); 1158 | } 1159 | .dark .dark\:bg-zinc-900 { 1160 | --tw-bg-opacity: 1; 1161 | background-color: rgb(24 24 27 / var(--tw-bg-opacity)); 1162 | } 1163 | .dark .dark\:bg-zinc-900\/90 { 1164 | background-color: #18181be6; 1165 | } 1166 | .dark .dark\:text-slate-200 { 1167 | --tw-text-opacity: 1; 1168 | color: rgb(226 232 240 / var(--tw-text-opacity)); 1169 | } 1170 | .dark .dark\:text-slate-400 { 1171 | --tw-text-opacity: 1; 1172 | color: rgb(148 163 184 / var(--tw-text-opacity)); 1173 | } 1174 | .dark .dark\:hover\:border-slate-200:hover { 1175 | --tw-border-opacity: 1; 1176 | border-color: rgb(226 232 240 / var(--tw-border-opacity)); 1177 | } 1178 | .dark .dark\:hover\:bg-blue-700:hover { 1179 | --tw-bg-opacity: 1; 1180 | background-color: rgb(29 78 216 / var(--tw-bg-opacity)); 1181 | } 1182 | .dark .dark\:hover\:bg-slate-600:hover { 1183 | --tw-bg-opacity: 1; 1184 | background-color: rgb(71 85 105 / var(--tw-bg-opacity)); 1185 | } 1186 | .dark .dark\:hover\:text-slate-200:hover { 1187 | --tw-text-opacity: 1; 1188 | color: rgb(226 232 240 / var(--tw-text-opacity)); 1189 | } 1190 | .dark .dark\:hover\:text-white:hover { 1191 | --tw-text-opacity: 1; 1192 | color: rgb(255 255 255 / var(--tw-text-opacity)); 1193 | } 1194 | .dark .dark\:focus\:ring-blue-900:focus { 1195 | --tw-ring-opacity: 1; 1196 | --tw-ring-color: rgb(30 58 138 / var(--tw-ring-opacity)); 1197 | } 1198 | @media (min-width: 640px) { 1199 | .sm\:m-0 { 1200 | margin: 0; 1201 | } 1202 | .sm\:mx-6 { 1203 | margin-left: 1.5rem; 1204 | margin-right: 1.5rem; 1205 | } 1206 | .sm\:my-8 { 1207 | margin-top: 2rem; 1208 | margin-bottom: 2rem; 1209 | } 1210 | .sm\:block { 1211 | display: block; 1212 | } 1213 | .sm\:inline-block { 1214 | display: inline-block; 1215 | } 1216 | .sm\:flex { 1217 | display: flex; 1218 | } 1219 | .sm\:hidden { 1220 | display: none; 1221 | } 1222 | .sm\:h-screen { 1223 | height: 100vh; 1224 | } 1225 | .sm\:w-auto { 1226 | width: auto; 1227 | } 1228 | .sm\:w-full { 1229 | width: 100%; 1230 | } 1231 | .sm\:max-w-xl { 1232 | max-width: 36rem; 1233 | } 1234 | .sm\:grid-cols-2 { 1235 | grid-template-columns: repeat(2, minmax(0, 1fr)); 1236 | } 1237 | .sm\:flex-row { 1238 | flex-direction: row; 1239 | } 1240 | .sm\:items-center { 1241 | align-items: center; 1242 | } 1243 | .sm\:justify-around { 1244 | justify-content: space-around; 1245 | } 1246 | .sm\:p-0 { 1247 | padding: 0; 1248 | } 1249 | .sm\:align-middle { 1250 | vertical-align: middle; 1251 | } 1252 | .sm\:items-unset { 1253 | align-items: unset; 1254 | } 1255 | } 1256 | @media (min-width: 1024px) { 1257 | .lg\:sticky { 1258 | position: sticky; 1259 | } 1260 | .lg\:top-8 { 1261 | top: 2rem; 1262 | } 1263 | .lg\:mb-4 { 1264 | margin-bottom: 1rem; 1265 | } 1266 | .lg\:w-\[16rem\] { 1267 | width: 16rem; 1268 | } 1269 | .lg\:grid-cols-3 { 1270 | grid-template-columns: repeat(3, minmax(0, 1fr)); 1271 | } 1272 | .lg\:flex-row { 1273 | flex-direction: row; 1274 | } 1275 | .lg\:flex-col { 1276 | flex-direction: column; 1277 | } 1278 | .lg\:px-10 { 1279 | padding-left: 2.5rem; 1280 | padding-right: 2.5rem; 1281 | } 1282 | .lg\:py-8 { 1283 | padding-top: 2rem; 1284 | padding-bottom: 2rem; 1285 | } 1286 | .lg\:text-2xl { 1287 | font-size: 1.5rem; 1288 | line-height: 2rem; 1289 | } 1290 | } 1291 | --------------------------------------------------------------------------------