-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (103 loc) · 4.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ameerdhe7</title>
<meta property="og:title" content="ameer dheyaa portfolio">
<meta property="og:description" content="full stack web developer, laravel and vue">
<meta property="og:url" content="https://ameerdhi7.github.io/portfolio/">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/style.css">
<link rel="icon" href="assets/icons/ninja.png">
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</head>
<body class="h-full">
<ul class="text-white fixed flex w-full mt-2 justify-center" style="filter: invert(1)">
<li class="lg:mx-16">
<a target="_blank" href="https://www.instagram.com/dev.ameer7/">
<img width="30px" class="icon-hover" src="assets/icons/social/face.svg" alt="">
</a>
</li>
<li class="lg:mx-16">
<a target="_blank" href="https://github.com/ameerdhi7">
<img class="icon-hover" src="assets/icons/social/github.svg" alt="">
</a>
</li>
<li class="lg:mx-16">
<a target="_blank" href="https://www.linkedin.com/in/ameerdhi7/">
<img class="icon-hover" src="assets/icons/social/linkedin.svg" alt="">
</a>
</li>
<li class="lg:mx-16">
<a target="_blank" href="">
<img class="icon-hover" src="assets/icons/social/youtube.svg" alt="">
</a>
</li>
</ul>
<div class="">
<button id="dark-toggle" onclick="handleToggleTheme()" class="p-3 fixed border-white rounded-lg text-white">
<img src="assets/icons/dark-button.svg" alt="" width="30px">
</button>
<main class="flex min-h-screen overflow-hidden primary text-center">
<section style="transition: all;" class="flex flex-col items-center justify-center md:w-1/2 w-full">
<h1 class="text-center md:text-7xl text-5xl font-bold text-white">Hey there!</h1>
<p class="intro-text lg:text-2xl mx-2 my-4 md:my-6 text-base text-white">
Skilled web developer with a stack of Laravel, Vue.Js, React.Js, Tailwind css and Bootstrap.
Overall, I have used Laravel the popular PHP framework and Vue.Js for the most,
started from creating simple management systems plugged-in with MySQL database to develop
and optimize large-scale CRM system for the leading food delivery service in Iraq which has a big reporting aspect
and regional routes definitions that connected to PostgreSQL relational database
, furthermore i have crafted some awesome websites using WordPress CMS.
<strong class="block capitalize">reach me at <code>[email protected]</code></strong>
</p>
<a target="_blank" href="https://resume.io/r/nOBCVDTsC" id="resume-button"
class="border-white capitalize d-inline-block hover:rounded-b-full mb-2 p-3 rounded-lg secondary text-white">open
my resume
</a>
</section>
<section class="justify-center flex-1 flex-col md:w-1/2 secondary w-0" style="
width: 0px;
">
<lottie-player src="https://assets4.lottiefiles.com/packages/lf20_r81jI1.json" background="transparent"
class="lottie" speed="1" loop="" autoplay=""></lottie-player>
<h1 class="text-white text-4xl mb-4 text-center">Ameer Dhyeaa</h1>
</section>
</main>
</div>
<script>
function handleToggleTheme() {
if (localStorage.hasOwnProperty("darkModeEnabled")) {
localStorage.removeItem("darkModeEnabled");
toggleTheme(getThemeChangeableElements(), "remove");
} else {
localStorage.setItem("darkModeEnabled", true);
toggleTheme(getThemeChangeableElements(), "add");
}
}
function getThemeChangeableElements() {
const darkModeButton = document.getElementById("dark-toggle");
const primaryTags = document.getElementsByClassName("primary");
const secondaryTags = document.getElementsByClassName("secondary");
const resumeButton = document.getElementById("resume-button");
return [darkModeButton, primaryTags, secondaryTags, resumeButton];
}
function toggleTheme(elements, actionType, className = "dark") {
for (const element of elements) {
if (element instanceof HTMLCollection) {
for (let tag of element) {
tag.classList[actionType](className);
}
} else {
element.classList[actionType](className);
}
}
}
if (localStorage.hasOwnProperty("darkModeEnabled")) {
toggleTheme(getThemeChangeableElements(), "add")
}
</script>
</body>
</html>