-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
204 lines (180 loc) · 12.8 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/k.icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
<header>
<div style="display:flex; align-items:center;">
<img src="img/K.png" alt="" style="width:63px; margin-right:7px; margin-bottom:8px;">
<p><b>Portfolio.</b></p>
</div>
<nav>
<a href="index.html" class="active">Home</a>
<a href="#about">About</a>
<a href="#project">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>
<section id="home">
<div>
<h1>Hi!<span class="nr">👋</span></h1> <h2><b>I'm</b><span class="nr"><b> Nermeen Kamal</b></span></h2>
<span class="nr">─────────────────── </span> <span class="writer"> Web developer</span>
<p id="summary" style="line-height:1.5;">A passionate Computer Science student, <br>deeply immersed in the world of AI, <br>web development, Software development.</p>
<button type="button" class="btn1" onclick="window.location.href='https://www.linkedin.com/in/nirmn-kamal/'">Hire Me <i class="fa fa-telegram" style="font-size:14px;color:white"></i></button>
<button type="button" name="button" onclick="window.location.href='#project'" class="btn">View Projects</button>
</div><img src="img/Untitled design.png" alt="Nermeen Kamal">
</section>
<section id="about">
<img src="img/Untitled design (2).png" alt="">
<div class="nn">
<h2 class="nr">About Me</h2>
<p id="summary" style="margin-bottom:28px;" class="line"><b>As the Founder of <span class="nr" style="font-size:20px;">TechVerse</span> <span style="font-size:20px;">🤖</span>, I'm dedicated to democratizing <br> innovation
through coding and creating engaging web experiences. <br> With victories in competitions like <span class="nr" style="font-size:20px;"> NASA Space Apps 🏆</span><br>
I excel at solving intricate challenges and pushing boundaries. <br>Beyond coding, I'm passionate about mentoring,
volunteering, <br> and indulging in creative pursuits like photography 📷 and design 🎨.</b></p>
<div class="b2">
<button type="button" name="button" class="btn1" onclick="window.location.href='https://drive.google.com/file/d/1cTTOltPh8ECvpxeZQcIIAP24NVGmTD2v/view?usp=drive_link'">Download CV <i class="fa fa-file-text-o"></i></button>
<button type="button" onclick="window.location.href='mailto:nermeenkamal92@gmail.com'" name="button" class="btn">Email Me</button>
</div>
</div>
</section>
<section id="project">
<h2 style="text-align:center; padding-top: 87px;" class="nr">Selected Projects</h2>
<div class="p1">
<iframe src="https://www.behance.net/embed/project/199021535?ilo0=1" height="316" width="404" allowfullscreen lazyload frameborder="0" allow="clipboard-write" refererPolicy="strict-origin-when-cross-origin"></iframe> <div class="p">
<h3>Ecommerce ChanZel Website</h3>
<p class="pp" style="margin-bottom:28px; line-height:1.5;">Crafting a website with HTML, CSS and Bootstrap 4.6 for a responsive e-commerce.<br> styling and includes various sections showcasing different products, collections, <br> and categories.
simplifying their shopping experience and enhancing service quality. <br> By facilitating effortless interactions, it benefits both sellers and buyers.</p>
<button type="button" style="margin-right:10px;" name="button"class="btn1" onclick="window.location.href='https://github.com/NermeenKamal/Ecommerce-Website-ChanZel'">View Project On GitHub <i class="fa fa-github"></i></button>
</div></div>
<p style="margin-top: 87px;
margin-bottom: 87px;
text-align: center; -webkit-text-security: disc; background: linear-gradient(to right, #b26ceb 50%,#de6bbd 20%,#fe6c65 38%,#fe6f64 38%,#ff9c51 89%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;">───────────</p>
<div class="p2">
<iframe src="https://www.behance.net/embed/project/199019369?ilo0=1" height="316" width="404" allowfullscreen lazyload frameborder="0" allow="clipboard-write" refererPolicy="strict-origin-when-cross-origin"></iframe><div class="p">
<h3>Food4You Website</h3>
<p class="pp" style="margin-bottom:28px; line-height:1.5;">Crafted a Website using Frontend development. <br>
It is built using HTML and CSS and includes multiple pages <br> such as home, about, and products.<br>
The website is about an online food store.</p>
<button type="button" style="margin-right:10px;" name="button"class="btn1" onclick="window.location.href='https://github.com/NermeenKamal/Food4you'">View Project On GitHub <i class="fa fa-github"></i></button>
</div></div>
<p style="margin-top: 87px;
margin-bottom: 87px;
text-align: center; -webkit-text-security: disc; background: linear-gradient(to right, #b26ceb 50%,#de6bbd 20%,#fe6c65 38%,#fe6f64 38%,#ff9c51 89%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;">───────────</p>
<div class="p1">
<iframe src="https://www.behance.net/embed/project/191058961?ilo0=1" height="316" width="404" allowfullscreen lazyload frameborder="0" allow="clipboard-write" refererPolicy="strict-origin-when-cross-origin"></iframe>
<div class="p">
<h3>Flower Store Website</h3>
<p class="pp" style="margin-bottom:28px; line-height:1.5;">Crafting a website with HTML, CSS, and JavaScript, <br> the project aims to seamlessly connect customers with stores, <br>
simplifying their shopping experience and enhancing service quality. <br> By facilitating effortless interactions, it benefits both sellers and buyers.</p>
<button type="button" style="margin-right:10px;" name="button"class="btn1" onclick="window.location.href='https://github.com/NermeenKamal/Flower-Store'">View Project On GitHub <i class="fa fa-github"></i></button>
</div></div>
<p style="margin-top: 87px;
margin-bottom: 87px;
text-align: center; -webkit-text-security: disc; background: linear-gradient(to right, #b26ceb 50%,#de6bbd 20%,#fe6c65 38%,#fe6f64 38%,#ff9c51 89%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;">───────────</p>
<div class="p2">
<iframe src="https://www.behance.net/embed/project/178804555?ilo0=1" height="316" width="404" allowfullscreen lazyload frameborder="0" allow="clipboard-write" refererPolicy="strict-origin-when-cross-origin"></iframe>
<div class="p">
<h3>TechVerse Startup Website</h3>
<p class="pp" style="margin-bottom:28px; line-height:1.5;">Creating a mobile application design using UI/UX principles <br> for educational and informative Startup on behance,
<br> and Crafted a Website using Frontend development using HTML and CSS.</p>
<button type="button" style="margin-right:10px;" name="button"class="btn1" onclick="window.location.href='https://github.com/NermeenKamal/TechVerse'">View Project On GitHub <i class="fa fa-github"></i></button>
</div>
</div>
<p style="margin-top: 87px;
margin-bottom: 87px;
text-align: center; -webkit-text-security: disc; background: linear-gradient(to right, #b26ceb 50%,#de6bbd 20%,#fe6c65 38%,#fe6f64 38%,#ff9c51 89%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;">───────────</p>
<div class="p1">
<iframe src="https://www.behance.net/embed/project/199022497?ilo0=1" height="316" width="404" allowfullscreen lazyload frameborder="0" allow="clipboard-write" refererPolicy="strict-origin-when-cross-origin"></iframe> <div class="p">
<h3>AI ART Website</h3>
<p class="pp" style="margin-bottom:28px; line-height:1.5;">Crafting a website with HTML and CSS. <br> it offers a platform for artists to display and sell their digital artworks. <br>
It provides various categories of art, including animal art, fantasy art, and more.
<br> Users can also draw and download artworks, purchase art pieces, <br> and share them with friends.</p>
<button type="button" style="margin-right:10px;" name="button"class="btn1" onclick="window.location.href='https://github.com/NermeenKamal/AI-ART-Website'">View Project On GitHub <i class="fa fa-github"></i></button>
</div></div>
<p style="margin-top: 87px;
margin-bottom: 87px;
text-align: center; -webkit-text-security: disc; background: linear-gradient(to right, #b26ceb 50%,#de6bbd 20%,#fe6c65 38%,#fe6f64 38%,#ff9c51 89%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;">───────────</p>
<div class="p2 po">
<iframe class="last-iframe" src="https://www.behance.net/embed/project/188887587?ilo0=1" height="316" width="404" allowfullscreen lazyload frameborder="0" allow="clipboard-write" refererPolicy="strict-origin-when-cross-origin"></iframe>
<div class="p">
<h3>ChanZel Mobile App Prototype</h3>
<p class="pp" style="margin-bottom:28px; line-height:1.5;">Creating a mobile application design using UI/UX principles, <br>
Wireframes, user flow, card sort, competitors review and other design processes.</p>
<button type="button" style="margin-right:10px;" name="button"class="btn1" onclick="window.location.href='https://www.behance.net/gallery/188887587/Chanzel-Mobile-App-Prototype'">View Project On Behance <i class="fa fa-behance-square"></i></button>
</div></div>
</section>
<footer id="contact">
<h2 class="nr" style="margin-bottom: 50px;">Contact</h2>
<div class="j">
<button style="cursor:pointer;" id="bb" onclick="window.open('https://www.facebook.com/NermeenKamalEldin?mibextid=ZbWKwL', '_blank')"><i class="fa fa-facebook-f"></i></button>
<button style="cursor:pointer;" id="bb" onclick="window.open('https://www.instagram.com/nermeen_kamaleldin?igsh=MW90Y2lxeXpsbnM0eA==', '_blank')"><i class="fa fa-instagram"></i></button>
<button style="cursor:pointer;" id="bb" onclick="window.open('https://www.linkedin.com/in/nirmn-kamal/', '_blank')"><i class="fa fa-linkedin"></i></button>
<button style="cursor:pointer;" id="bb" onclick="window.open('https://github.com/NermeenKamal', '_blank')"><i class="fa fa-github"></i></button>
<button style="cursor:pointer;" id="bb" onclick="window.open('https://www.behance.net/Nermeen_Kamal?fbclid=PAAabRlchLNjOGUrEnlNvCG33JgKDlNgS3ZEuuQ-dwGdGfccwHX7Uz3VRnPcs', '_blank')"><i class="fa fa-behance"></i></button>
</div>
</div>
</footer>
<script>document.addEventListener('DOMContentLoaded',function(event){
// array with texts to type in typewriter
var dataText = [ "Web Developer", "UI/UX Designer", "Freelancer", "Software Developer"];
// type one text in the typwriter
// keeps calling itself until the text is finished
function typeWriter(text, i, fnCallback) {
// chekc if text isn't finished yet
if (i < (text.length)) {
// add next character to h1
document.querySelector(".writer").innerHTML = text.substring(0, i+1) +'<h4 aria-hidden="true"></h4>';
// wait for a while and call this function again for next character
setTimeout(function() {
typeWriter(text, i + 1, fnCallback)
}, 100);
}
// text finished, call callback if there is a callback function
else if (typeof fnCallback == 'function') {
// call callback after timeout
setTimeout(fnCallback, 700);
}
}
// start a typewriter animation for a text in the dataText array
function StartTextAnimation(i) {
if (typeof dataText[i] == 'undefined'){
setTimeout(function() {
StartTextAnimation(0);
}, 20000);
}
// check if dataText[i] exists
if (i < dataText[i].length) {
// text exists! start typewriter animation
typeWriter(dataText[i], 0, function(){
// after callback (and whole text has been animated), start next text
StartTextAnimation(i + 1);
});
}
}
// start the text animation
StartTextAnimation(0);
});</script>
</body>
</html>