-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (122 loc) · 6.63 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Douaa Zouhir</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="loading">
<div id="spinner"></div>
</div>
<div id="magnify">
<h1 onclick="closemagnify()"><i class="fas fa-times"></i></h1>
<div id="img_here"></div>
</div>
<header id="header" class="animated slideInDown" style="animation-delay:1.8s;">
<table>
<tr>
<td id="logo">Douaa Zouhir</td>
<td id="navigation">
<a href="#work">work</a>
<a href="#bio">about</a>
<a href="">blog</a>
<a href="#contact">contact</a>
</td>
</tr>
</table>
</header>
<table id="top_part">
<tr>
<td id="about" class="animated slideInLeft" style="animation-delay:2s;">
<h1>I am a fullstack developper and mixed media artist.</h1>
<button class="btn_one">Hire Me</button><br>
<table>
<tr>
<td class="animated zoomIn" style="animation-delay:2.2s;"><a class="social"><i class="fab fa-facebook"></i></a></td>
<td class="animated zoomIn" style="animation-delay:2.4s;"><a class="social"><i class="fab fa-twitter"></i></a></td>
<td class="animated zoomIn" style="animation-delay:2.6s;"><a class="social"><i class="fab fa-instagram"></i></a></td>
<td class="animated zoomIn" style="animation-delay:2.8s;"><a class="social"><i class="fab fa-dribbble"></i></a></td>
<td class="animated zoomIn" style="animation-delay:3.0s;"><a class="social"><i class="fab fa-medium"></i></a></td>
</tr>
</table>
</td>
<td id="rightImage" class="animated jackInTheBox" style="animation-delay:2.2s;"></td>
</tr>
</table>
<div id="work">
<h1>work</h1>
<div id="photos">
<img onclick="magnify($(this).attr('src'))" src="p1.png">
<img onclick="magnify($(this).attr('src'))" src="p2.png">
<img onclick="magnify($(this).attr('src'))" src="p3.png">
<img onclick="magnify($(this).attr('src'))" src="p8.png">
<img onclick="magnify($(this).attr('src'))" src="p7.png">
<img onclick="magnify($(this).attr('src'))" src="p6.png">
<img onclick="magnify($(this).attr('src'))" src="p5.png">
<img onclick="magnify($(this).attr('src'))" src="p4.png">
</video>
</div>
</div>
<div id="bio">
<h1>about</h1>
<p>
Welcome to my portfolio! I'm Douaa Zouhir, a computer science student at NYU Shanghai. With a focus on creative coding and problem-solving, I've enhanced IT systems efficiency and revitalized website design during internships. My projects, like "Casablanca Reimagined" and an AI interactive detective game, showcase my proficiency in computer vision and innovative storytelling. Additionally, I've developed "Chit-Chat," a secure Python chat system, prioritizing user data protection. As a leader in competitions like L'Oréal Brandstorm Case Competition, I've pioneered AI prototypes for personalized experiences.
</p>
<p>
With skills in HTML, CSS, JavaScript, Python, and multiple languages, I'm committed to pushing technological boundaries and crafting engaging user experiences. Explore my portfolio to learn more!
</p>
</div>
<div id="contact">
<h1>contact</h1>
<table>
<tr>
<td>
<div id="inner_div">
<table id="inner_table">
<tr>
<td><i class="fas fa-phone"></i> UAE: +971 054 427 0414; Canada: +1(514)2976226 </td>
</tr>
<tr>
<td><i class="fas fa-at"></i> dz2238@nyu.edu</td>
</tr>
<tr>
<td><i class="fas fa-map-marker-alt"></i>
<div id="address">
306-3235 Avenue Ridgewood H3V 1B4,<br>
Montreal, Quebec,<br>
Canada
</div>
</td>
</tr>
<tr>
<td>
<a class="social"><i class="fab fa-facebook"></i></a>
<a class="social"><i class="fab fa-twitter"></i></a>
<a class="social"><i class="fab fa-instagram"></i></a>
<a class="social"><i class="fab fa-dribbble"></i></a>
<a class="social"><i class="fab fa-medium"></i></a>
</td>
</tr>
</table>
</div>
</td>
<td>
<form action="mailto:dz2238@nyu.edu" method="post" enctype="text/plain">
<input type="text" name="name" placeholder="name" required><br>
<input type="email" placeholder="email" required><br>
<textarea placeholder="your message" name="comment" required rows="5"></textarea><br>
<button class="btn_one">send</button>
</form>
</td>
</tr>
</table>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
</html>