-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
174 lines (140 loc) · 10.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="tailwind-dist.css">
<title>Full stack web developer | Mohammed Chammam</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<main>
<section class="jumbotron">
<img src="resources/img/jumbotron_img.svg" alt="Coding illustration" class="jumbotron__desktop_img">
<div class="jumbotron__container">
<p class="jumbotron__title">Hello</p>
<h2 class="jumbotron__lead">My name is Mohammed Chammam!</h2>
<img src="resources/img/jumbotron_img.svg" alt="Coding illustration" class="jumbotron__img">
<div class="jumbotron__btns">
<a class="jumbotron__btn-primary" target="_blanc"
href="https://www.linkedin.com/in/mohammed-chammam-2a74a4a9/">
Linkedin</a>
<a class="jumbotron__btn-secondary" target="_blanc" href="https://github.com/mchammam/">Github</a>
</div>
<p class="jumbotron__description">I am a full stack web developer looking forward to my next challenge.
</p>
<a class="jumbotron__email" target="_blanc"
href="mailto:[email protected]">[email protected]</a>
</div>
</section>
<section class="projects">
<h2 class="projects__header">Projects</h2>
<div class="projects__container container gap-28">
<p>These are a few examples of my work. Please contact me if interested in more.</p>
<div class="projects__card md:py-20 pt-14">
<video autoplay muted class="h-96 mx-auto lg:mx-20 shadow-2xl rounded">
<source src="resources/videos/star-wars-data-explorer-mobile.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<div class="projects__card_container">
<h3 class="text-accent font-bold tracking-widest text-left text-3xl" href="">Star Wars Data Explorer</h3>
<div class="my-2 mt-5 flex justify-items-start gap-2 flex-wrap text-light">
<span class=" text-sm bg-primary p-1 px-3 rounded">TypeScript</span>
<span class=" text-sm bg-primary p-1 px-3 rounded">React</span>
<span class=" text-sm bg-primary p-1 px-3 rounded">React Router</span>
<span class=" text-sm bg-primary p-1 px-3 rounded">React Query</span>
<span class=" text-sm bg-primary p-1 px-3 rounded">Zod</span>
<span class=" text-sm bg-primary p-1 px-3 rounded">CSS Modules</span>
</div>
<p class="projects__description">
React-based Star Wars data explorer, which uses the <a class="text-accent hover:underline" href="https://swapi.dev/" target="_blank">SWAPI</a> under the hood. Utilizing React Query for efficient state and cache management, and React Router for client-side routing. The app is fully type-safe using the Zod library for API response validation and Typescript.
</p>
<div class="flex flex-wrap my-7 gap-7 justify-center md:justify-start mt-14 md:mt-16">
<a href="https://66585a70be0c9eee103b83b0--star-wars-data-explorer.netlify.app/" target="_blanc" class="rounded-full border-primary border-2 p-3 px-7 font-bold text-black hover:tracking-wider duration-300">Live Demo</a>
<a href="https://codesandbox.io/p/github/mchammam/star-wars-data-explorer/" target="_blanc" class="rounded-full border-primary border-2 p-3 px-7 font-bold text-black hover:tracking-wider duration-300">CodeSandbox</a>
<a href="https://github.com/mchammam/star-wars-data-explorer" target="_blanc" class="rounded-full border-primary border-2 p-3 px-7 font-bold text-black hover:tracking-wider duration-300">Github Repo</a>
</div>
</div>
</div>
<div class="projects__card md:py-20 md:px-16 flex flex-col gap-7 md:gap-20 lg:flex-row">
<img class="md:h-96 mx-auto shadow-2xl rounded lg:order-last" alt=""
src="https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto:good,w_900/Challenges/bognvsqd34ueowkompeh.jpg" />
<div class="projects__card_container">
<h3 class="text-accent font-bold tracking-widest text-left text-3xl" href="">Ecommerce Product Page</h3>
<div class="my-2 mt-5 flex justify-items-start gap-2 flex-wrap text-light">
<span class=" text-sm bg-primary p-1 px-3 rounded">TypeScript</span>
<span class=" text-sm bg-primary p-1 px-3 rounded">React</span>
<span class=" text-sm bg-primary p-1 px-3 rounded">Sass</span>
</div>
<p class="projects__description">
Mobile first ecommerce product page built using React.
</p>
<div class="flex flex-wrap my-7 gap-7 justify-center md:justify-start mt-14 md:mt-16">
<a href="https://mchammam.github.io/ecommerce-product-page-main/" target="_blanc" class="rounded-full border-primary border-2 p-3 px-7 font-bold text-black hover:tracking-wider duration-300">Live Demo</a>
<a href="https://codesandbox.io/p/github/mchammam/ecommerce-product-page-main/" target="_blanc" class="rounded-full border-primary border-2 p-3 px-7 font-bold text-black hover:tracking-wider duration-300">CodeSandbox</a>
<a href="https://github.com/mchammam/ecommerce-product-page-main" target="_blanc" class="rounded-full border-primary border-2 p-3 px-7 font-bold text-black hover:tracking-wider duration-300">Github Repo</a>
</div>
</div>
</div>
<div class="projects__card py-7 md:py-20 md:px-16">
<div class="projects__card_container">
<h3 class="text-accent font-bold tracking-widest text-left text-3xl" href="">Ecommerce API</h3>
<div class="my-2 mt-5 flex justify-items-start gap-2 flex-wrap text-light">
<span class=" text-sm bg-primary p-1 px-3 rounded">TypeScript</span>
<span class=" text-sm bg-primary p-1 px-3 rounded">React</span>
<span class=" text-sm bg-primary p-1 px-3 rounded">Sass</span>
</div>
<p class="projects__description">
I am currently developing this ecommerce API based on Node.js.
Check out my progress on GitHub! </p>
<div class="flex flex-wrap my-7 gap-7 justify-center md:justify-start mt-14 md:mt-16">
<a href="https://codesandbox.io/p/github/mchammam/ecommerce-api" target="_blanc" class="rounded-full border-primary border-2 p-3 px-7 font-bold text-black hover:tracking-wider duration-300">CodeSandbox</a>
<a href="https://github.com/mchammam/ecommerce-api" target="_blanc" class="rounded-full border-primary border-2 p-3 px-7 font-bold text-black hover:tracking-wider duration-300">Github Repo</a>
</div>
</div>
</div>
<div class="projects__card py-7 pb-10 md:py-20 md:px-16">
<div class="projects__card_container">
<h3 class="text-accent font-bold tracking-widest text-left text-3xl" href="">Qandell API</h3>
<div class="my-2 mt-5 flex justify-items-start gap-2 flex-wrap text-light">
<span class=" text-sm bg-primary p-1 px-3 rounded">PHP</span>
<span class=" text-sm bg-primary p-1 px-3 rounded">MySQL</span>
</div>
<p class="projects__description">
In this project I built a complex API based on PHP and MySQL. The API was "the brain and
coordinator" of a survey service with both a web based admin/client dashboard and a mobile
application. The funcionality of this API was complex, it handled cronjobs,
matching target groups, statistics and more. My work was to build the API and also work with
the overall infrastructure of the whole service.
</p>
</div>
</div>
</div>
</section>
<section class="bg-default justify-center hidden">
<div class="container flex justify-center">
<img src="./resources/img/technologies.png" alt="Technologies" />
</div>
</section>
<section class="cv">
</section>
<section class="about">
</section>
<section class="footer">
<svg class="footer__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
</svg>
</section>
<section class="color_picker">
<div class="color_picker__color" style="background-color: #F3EFEE;"></div>
<div class="color_picker__color" style="background-color: #B1824F;"></div>
<div class="color_picker__color" style="background-color: #82BBAA;"></div>
<div class="color_picker__color" style="background-color: #CC2A19;"></div>
<div class="color_picker__color" style="background-color: #1A1E21;"></div>
</section>
<!--<section class="contact"></section>-->
</main>
</body>
</html>