8 |
9 |
10 |
11 |
12 | 46 |
18 | 
19 | 404 PAGE NOT FOUND
20 |
21 | Take me home
22 |
23 |
24 | -
20 |
-
21 |
-
24 |
-
27 |
-
30 |
-
33 |
-
36 |
-
39 |
-
42 |
-
45 |
30 | Thank You!
31 |
32 |
40 | Take me home
41 |
42 |
43 | Will get back at you as soon as possible!
33 |Have a nice day
34 |35 | 36 | 😊 37 | 38 |
39 |48 |
12 |
14 |
15 | Hello World!
16 | I am Wael, aka Mr Wii
17 | Front-end developer.
18 |
19 |
27 |
28 |
51 |
52 |
53 |
54 | )
55 | }
56 |
57 | const Linku = styled(NavLink)`
58 | margin-left: 30%;
59 | @media only screen and (min-width: 100px) and (max-width: 320px) {
60 | margin-left: 20%;
61 | }
62 | @media only screen and (min-width: 321px) and (max-width: 600px) {
63 | margin-left: 20%;
64 | }
65 | `
66 | const Linku2 = styled(NavLink)`
67 | margin-left: 15%;
68 | @media only screen and (min-width: 100px) and (max-width: 320px) {
69 | margin-left: 5%;
70 | }
71 | @media only screen and (min-width: 321px) and (max-width: 600px) {
72 | margin-left: 5%;
73 | }
74 | `
75 | const Div1 = styled.div`
76 | position: relative;
77 | display: inline-block;
78 | width: 100%;
79 | @media only screen and (min-width: 100px) and (max-width: 320px) {
80 | margin-top: 30%;
81 | }
82 | @media only screen and (min-width: 321px) and (max-width: 600px) {
83 | margin-top: 40%;
84 | }
85 | `
86 |
87 | const Div = styled.div`
88 | margin-left: 5vw;
89 | margin-top: 23vh;
90 | flex-grow: 1;
91 | `
92 |
93 | const SecondButton = styled(Button)`
94 | background-color: #492e7c;
95 | border: 2px solid #492e7c;
96 | &:hover {
97 | box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
98 | color: #492e7c;
99 | border-color: transparent;
100 | background-color: transparent;
101 | }
102 | `
103 |
104 | const Header2 = styled(Header1)`
105 | margin-left: 9rem;
106 | font-size: 35px;
107 | line-height: 20px;
108 | color: #9858e9;
109 | @media only screen and (min-width: 100px) and (max-width: 320px) {
110 | font-size: 15px;
111 | line-height: 15px;
112 | margin-left: 4rem;
113 | }
114 | @media only screen and (min-width: 321px) and (max-width: 600px) {
115 | font-size: 17px;
116 | line-height: 15px;
117 | margin-left: 2rem;
118 | }
119 | @media only screen and (min-width: 601px) and (max-width: 1024px) {
120 | font-size: 22px;
121 | line-height: 20px;
122 | margin-left: 5rem;
123 | }
124 | `
125 |
126 | const Header3 = styled(Header2)`
127 | margin-left: 17rem;
128 | font-size: 32px;
129 | line-height: 70px;
130 | @media only screen and (min-width: 100px) and (max-width: 320px) {
131 | font-size: 14px;
132 | line-height: 25px;
133 | margin-left: 7rem;
134 | }
135 | @media only screen and (min-width: 321px) and (max-width: 600px) {
136 | font-size: 17px;
137 | line-height: 30px;
138 | margin-left: 5rem;
139 | }
140 | @media only screen and (min-width: 601px) and (max-width: 1024px) {
141 | font-size: 22px;
142 | line-height: 30px;
143 | margin-left: 7rem;
144 | }
145 | `
146 |
147 | export default Intro
148 |
--------------------------------------------------------------------------------
/src/assets/svg/node.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
62 |
--------------------------------------------------------------------------------
/src/components/common/footer/footer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Footer from 'rc-footer'
3 | import 'rc-footer/assets/index.css'
4 | import logo from 'assets/images/profile.png'
5 | import fb from 'assets/svg/facebook.svg'
6 | import ig from 'assets/svg/instagram.svg'
7 | import wa from 'assets/svg/whatsapp.svg'
8 | import twt from 'assets/svg/twitter.svg'
9 | import li from 'assets/svg/linkedin.svg'
10 | import gh from 'assets/svg/github.svg'
11 | import mrt from 'assets/svg/mrtodo.svg'
12 | import mrl from 'assets/svg/mrlgd.svg'
13 | import wp from 'assets/svg/wp.svg'
14 |
15 | const fror = `Made with ❤️ by Mr Wii`
16 |
17 | const Ftr = () => {
18 | return (
19 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | Get In Touch
47 |
48 |
49 |
50 |
20 |
35 | ),
36 | title: 'Mr Wii',
37 | items: [
38 | {
39 | title: 'Home',
40 | url: 'https://mr-wii.com/',
41 | openExternal: false,
42 | LinkComponent: 'a'
43 | },
44 | {
45 | title: 'About Me',
46 | url: 'https://mr-wii.com/about',
47 | openExternal: false
48 | },
49 | {
50 | title: 'Contact Me',
51 | url: 'https://mr-wii.com/contact'
52 | }
53 | ]
54 | },
55 | {
56 | title: 'My Social Media',
57 | items: [
58 | {
59 | icon: 
,
60 | title: 'Facebook',
61 | url: 'https://www.facebook.com/Waeruu',
62 | openExternal: true
63 | },
64 | {
65 | icon: 
,
66 | title: 'LinkedIn',
67 | url: 'https://www.linkedin.com/in/ouailbni/',
68 | openExternal: true
69 | },
70 |
71 | {
72 | icon: 
,
73 | title: 'Twitter',
74 | url: 'https://twitter.com/BniWael',
75 | openExternal: true
76 | },
77 | {
78 | icon: 
,
79 | title: 'Instagram',
80 | url: 'https://www.instagram.com/wael_bni/',
81 | openExternal: true,
82 | description: 'Personal'
83 | },
84 | {
85 | icon: ,
86 | title: 'Instagram',
87 | url: 'https://www.instagram.com/wii.mr/',
88 | openExternal: true,
89 | description: 'Mr Wii'
90 | },
91 | {
92 | icon: 
,
93 | title: 'WhatsApp',
94 | description: '+212 6 39 03 23 34'
95 | }
96 | ]
97 | },
98 | {
99 | title: 'More from me',
100 | items: [
101 | {
102 | icon: 
,
103 | title: 'Mr Todo',
104 | url: 'https://thirsty-dubinsky-de0f0a.netlify.com/',
105 | openExternal: true
106 | },
107 | {
108 | icon: 
,
109 | title: 'Github',
110 | url: 'https://github.com/Mr-Wii',
111 | openExternal: true
112 | },
113 | {
114 | icon: 
,
115 | title: 'WP Resume',
116 | url: 'https://ouailbni.000webhostapp.com/',
117 | openExternal: true
118 | },
119 | {
120 | icon: 
,
121 | title: 'Mr Legend',
122 | description: 'Unreleased, W.I.P'
123 | }
124 | ]
125 | }
126 | ]}
127 | bottom={fror}
128 | />
129 |
130 | )
131 | }
132 |
133 | export default Ftr
134 |
--------------------------------------------------------------------------------
/src/components/common/Layout/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Geo';
3 | font-style: normal;
4 | font-weight: 400;
5 | src: url('./fonts/geo-v11-latin-regular.eot');
6 | src: local('Geo'), local('Geo-Regular'),
7 | url('./fonts/geo-v11-latin-regular.eot?#iefix') format('embedded-opentype'),
8 | url('./fonts/geo-v11-latin-regular.woff2') format('woff2'),
9 | url('./fonts/geo-v11-latin-regular.woff') format('woff'),
10 | url('./fonts/geo-v11-latin-regular.ttf') format('truetype'),
11 | url('./fonts/geo-v11-latin-regular.svg#Geo') format('svg');
12 | font-display: swap;
13 | }
14 |
15 | @font-face {
16 | font-family: 'Montserrat';
17 | font-style: normal;
18 | font-weight: 400;
19 | src: url('./fonts/montserrat-v14-latin-regular.eot');
20 | src: local('Montserrat Regular'), local('Montserrat-Regular'),
21 | url('./fonts/montserrat-v14-latin-regular.eot?#iefix')
22 | format('embedded-opentype'),
23 | url('./fonts/montserrat-v14-latin-regular.woff2') format('woff2'),
24 | url('./fonts/montserrat-v14-latin-regular.woff') format('woff'),
25 | url('./fonts/montserrat-v14-latin-regular.ttf') format('truetype'),
26 | url('./fonts/montserrat-v14-latin-regular.svg#Montserrat') format('svg');
27 | font-display: swap;
28 | }
29 |
30 | @font-face {
31 | font-family: 'Merriweather';
32 | font-style: normal;
33 | font-weight: 400;
34 | src: url('./fonts/merriweather-v21-latin-regular.eot');
35 | src: local('Merriweather Regular'), local('Merriweather-Regular'),
36 | url('./fonts/merriweather-v21-latin-regular.eot?#iefix')
37 | format('embedded-opentype'),
38 | url('./fonts/merriweather-v21-latin-regular.woff2') format('woff2'),
39 | url('./fonts/merriweather-v21-latin-regular.woff') format('woff'),
40 | url('./fonts/merriweather-v21-latin-regular.ttf') format('truetype'),
41 | url('./fonts/merriweather-v21-latin-regular.svg#Merriweather') format('svg');
42 | font-display: swap;
43 | }
44 |
45 | @font-face {
46 | font-family: 'Poppins';
47 | font-style: normal;
48 | font-weight: 400;
49 | src: url('./fonts/poppins-v9-latin-regular.eot');
50 | src: local('Poppins Regular'), local('Poppins-Regular'),
51 | url('./fonts/poppins-v9-latin-regular.eot?#iefix')
52 | format('embedded-opentype'),
53 | url('./fonts/poppins-v9-latin-regular.woff2') format('woff2'),
54 | url('./fonts/poppins-v9-latin-regular.woff') format('woff'),
55 | url('./fonts/poppins-v9-latin-regular.ttf') format('truetype'),
56 | url('./fonts/poppins-v9-latin-regular.svg#Poppins') format('svg');
57 | font-display: swap;
58 | }
59 |
60 | @font-face {
61 | font-family: 'Roboto';
62 | font-style: normal;
63 | font-weight: 300;
64 | src: url('./fonts/roboto-v20-latin-300.eot');
65 | src: local('Roboto Light'), local('Roboto-Light'),
66 | url('./fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'),
67 | url('./fonts/roboto-v20-latin-300.woff2') format('woff2'),
68 | url('./fonts/roboto-v20-latin-300.woff') format('woff'),
69 | url('./fonts/roboto-v20-latin-300.ttf') format('truetype'),
70 | url('./fonts/roboto-v20-latin-300.svg#Roboto') format('svg');
71 | font-display: swap;
72 | }
73 | @font-face {
74 | font-family: 'Roboto';
75 | font-style: normal;
76 | font-weight: 400;
77 | src: url('./fonts/roboto-v20-latin-regular.eot');
78 | src: local('Roboto'), local('Roboto-Regular'),
79 | url('./fonts/roboto-v20-latin-regular.eot?#iefix')
80 | format('embedded-opentype'),
81 | url('./fonts/roboto-v20-latin-regular.woff2') format('woff2'),
82 | url('./fonts/roboto-v20-latin-regular.woff') format('woff'),
83 | url('./fonts/roboto-v20-latin-regular.ttf') format('truetype'),
84 | url('./fonts/roboto-v20-latin-regular.svg#Roboto') format('svg');
85 | font-display: swap;
86 | }
87 | @font-face {
88 | font-family: 'Roboto';
89 | font-style: normal;
90 | font-weight: 500;
91 | src: url('./fonts/roboto-v20-latin-500.eot');
92 | src: local('Roboto Medium'), local('Roboto-Medium'),
93 | url('./fonts/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'),
94 | url('./fonts/roboto-v20-latin-500.woff2') format('woff2'),
95 | url('./fonts/roboto-v20-latin-500.woff') format('woff'),
96 | url('./fonts/roboto-v20-latin-500.ttf') format('truetype'),
97 | url('./fonts/roboto-v20-latin-500.svg#Roboto') format('svg');
98 | font-display: swap;
99 | }
100 | @font-face {
101 | font-family: 'Roboto';
102 | font-style: normal;
103 | font-weight: 700;
104 | src: url('./fonts/roboto-v20-latin-700.eot');
105 | src: local('Roboto Bold'), local('Roboto-Bold'),
106 | url('./fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'),
107 | url('./fonts/roboto-v20-latin-700.woff2') format('woff2'),
108 | url('./fonts/roboto-v20-latin-700.woff') format('woff'),
109 | url('./fonts/roboto-v20-latin-700.ttf') format('truetype'),
110 | url('./fonts/roboto-v20-latin-700.svg#Roboto') format('svg');
111 | font-display: swap;
112 | }
113 |
--------------------------------------------------------------------------------
/src/assets/svg/mrlgd.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/mysql.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
50 |
--------------------------------------------------------------------------------
/src/assets/svg/jquery.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
42 |
--------------------------------------------------------------------------------
/src/styles/style.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | // Buttons
4 |
5 | export const Button = styled.button`
6 | padding: 0.6rem;
7 | font-size: 18px;
8 | font-weight: 900;
9 | color: #fff;
10 | background-color: #c906fa;
11 | border: 2px solid #c906fa;
12 | cursor: pointer;
13 | width: 35%;
14 | transition: 0.25s ease;
15 | border-radius: 5%;
16 | margin-bottom: 2rem;
17 | z-index: 1;
18 | position: relative;
19 | &:hover {
20 | box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
21 | color: #c906fa;
22 | border-color: transparent;
23 | background-color: transparent;
24 | }
25 | @media only screen and (min-width: 100px) and (max-width: 320px) {
26 | width: 60%;
27 | font-size: 12px;
28 | }
29 | @media only screen and (min-width: 321px) and (max-width: 600px) {
30 | width: 60%;
31 | font-size: 14px;
32 | }
33 | @media only screen and (min-width: 601px) and (max-width: 1024px) {
34 | width: 45%;
35 | font-size: 16px;
36 | }
37 | `
38 |
39 | // Images
40 |
41 | export const BgImg = styled.img`
42 | position: absolute;
43 | left: 0vw;
44 | top: 8vh;
45 | width: 17%;
46 | height: auto;
47 | z-index: 0;
48 | @media only screen and (min-width: 100px) and (max-width: 320px) {
49 | top: 12vh;
50 | width: 50%;
51 | }
52 | @media only screen and (max-width: 600px) and (min-width: 321px) {
53 | top: 10vh;
54 | width: 50%;
55 | }
56 | @media only screen and (min-width: 601px) and (max-width: 1024px) {
57 | top: 10vh;
58 | width: 25%;
59 | }
60 | `
61 | export const BgImg2 = styled.img`
62 | width: 60%;
63 | margin-left: 10%;
64 | margin-right: auto;
65 | @media (max-width: 600px) {
66 | width: 60%;
67 | height: auto;
68 | margin-left: 20%;
69 | margin-top: 3rem;
70 | }
71 | @media only screen and (min-width: 601px) and (max-width: 1024px) {
72 | height: auto;
73 | margin-left: 20%;
74 | }
75 | `
76 | export const BgImg3 = styled(BgImg2)`
77 | margin-left: 19%;
78 |
79 | @media (max-width: 600px) {
80 | display: none;
81 | }
82 | @media only screen and (min-width: 601px) and (max-width: 1024px) {
83 | width: 80%;
84 | margin-left: 12%;
85 | }
86 | `
87 |
88 | // Headers
89 |
90 | export const Header1 = styled.h1`
91 | color: #5e3da5;
92 | font-family: Poppins;
93 | font-style: normal;
94 | font-weight: normal;
95 | font-size: 86px;
96 | position: relative;
97 | z-index: 1;
98 | @media only screen and (min-width: 100px) and (max-width: 320px) {
99 | font-size: 36px;
100 | }
101 | @media only screen and (min-width: 321px) and (max-width: 600px) {
102 | font-size: 39px;
103 | }
104 | @media only screen and (min-width: 601px) and (max-width: 1024px) {
105 | font-size: 55px;
106 | }
107 | `
108 |
109 | export const Header2 = styled.h1`
110 | font-family: Montserrat, sans-serif;
111 | font-size: 40px;
112 | text-transform: uppercase;
113 | text-align: left;
114 | color: rgb(103, 74, 170);
115 | margin-left: calc(80px + ((-80) - 80) * ((100vw - 300px) / (1600 - 300)));
116 | margin-bottom: 7vh;
117 | border: none;
118 | border-bottom: 2px solid;
119 | border-radius: 130px 50px/4px 2px;
120 | padding: 10px;
121 | @media only screen and (min-width: 100px) and (max-width: 320px) {
122 | font-size: 25px;
123 | text-transform: uppercase;
124 | text-align: center;
125 | color: rgb(103, 74, 170);
126 | margin-left: 0;
127 | margin-bottom: 7vh;
128 | }
129 | @media only screen and (min-width: 321px) and (max-width: 600px) {
130 | font-size: 30px
131 | text-transform: uppercase;
132 | text-align: center;
133 | color: rgb(103, 74, 170);
134 | margin-left: 0;
135 | margin-bottom: 7vh;
136 | }
137 | @media only screen and (min-width: 601px) and (max-width: 1024px) {
138 | font-size: 40px
139 | line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px) / (1600 - 300)));
140 | text-transform: uppercase;
141 | text-align: center;
142 | color: rgb(103, 74, 170);
143 | margin-left: 0;
144 | margin-bottom: 7vh;
145 | }
146 | `
147 |
148 | export const Title = styled.h1`
149 | font-size: 40px;
150 | font-family: Montserrat, sans-serif;
151 | text-transform: uppercase;
152 | text-align: center;
153 | margin-top: 11vh;
154 | color: #5e3da5;
155 | border: none;
156 | border-bottom: 2px solid;
157 | border-radius: 130px 50px/4px 2px;
158 | padding: 10px;
159 | @media only screen and (min-width: 100px) and (max-width: 320px) {
160 | font-size: 25px;
161 | margin-top: 15vh;
162 | }
163 | @media only screen and (min-width: 321px) and (max-width: 600px) {
164 | font-size: 30px;
165 | }
166 | `
167 |
168 | // Containers
169 |
170 | export const divContainer = styled.div`
171 | margin-left: 5vw;
172 | margin-top: 55vh;
173 | flex-grow: 1;
174 | @media only screen and (min-width: 601px) and (max-width: 1024px) {
175 | margin-left: 5vw;
176 | margin-top: 20vh;
177 | }
178 | `
179 |
180 | // Form
181 |
182 | export const Form = styled.form`
183 | max-width: 600px;
184 | text-align: center;
185 | margin: 30px auto;
186 |
187 | input,
188 | textarea {
189 | border: 0;
190 | padding: 1.5em;
191 | display: block;
192 | width: 100%;
193 | margin-bottom: 1em;
194 | font-family: 'Merriweather', sans-serif;
195 | resize: none;
196 | background-color: rgb(255, 255, 255);
197 | color: #000000;
198 | outline: none;
199 | border: none;
200 | border-radius: 20px;
201 | box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
202 | -moz-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
203 | -webkit-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
204 | -o-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
205 | -ms-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
206 | }
207 |
208 | input[type='text'],
209 | input[type='email'] {
210 | @media only screen and (min-width: 100px) and (max-width: 320px) {
211 | height: 5px;
212 | }
213 | @media only screen and (min-width: 321px) and (max-width: 600px) {
214 | height: 50px;
215 | }
216 | }
217 |
218 | textarea {
219 | height: 126px;
220 | @media only screen and (min-width: 100px) and (max-width: 320px) {
221 | height: 80px;
222 | }
223 | @media only screen and (min-width: 321px) and (max-width: 600px) {
224 | height: 110px;
225 | }
226 | }
227 |
228 | input:focus,
229 | textarea:focus {
230 | box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.15);
231 | -moz-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.15);
232 | -webkit-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.15);
233 | -o-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.15);
234 | -ms-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.15);
235 | -webkit-transition: all 0.4s;
236 | -o-transition: all 0.4s;
237 | -moz-transition: all 0.4s;
238 | transition: all 0.4s;
239 | }
240 |
241 | input[type='submit'] {
242 | color: white;
243 | margin-top: 5vh;
244 | padding: 1em;
245 | background-color: #4eb7d1;
246 | border-radius: 21px;
247 | cursor: pointer;
248 | width: 30%;
249 | margin-right: auto;
250 | margin-left: auto;
251 | -webkit-transition: all 0.4s;
252 | -o-transition: all 0.4s;
253 | -moz-transition: all 0.4s;
254 | transition: all 0.4s;
255 | box-shadow: 0 10px 30px 0px #7dd2eccc;
256 | -moz-box-shadow: 0 10px 30px 0px #7dd2eccc;
257 | -webkit-box-shadow: 0 10px 30px 0px #7dd2eccc;
258 | -o-box-shadow: 0 10px 30px 0px #7dd2eccc;
259 | -ms-box-shadow: 0 10px 30px 0px #7dd2eccc;
260 | }
261 |
262 | input[type='submit']:hover {
263 | background-color: #2f94f1;
264 | box-shadow: 0 10px 30px 0px #bebebe;
265 | -moz-box-shadow: 0 10px 30px 0px #bebebe;
266 | -webkit-box-shadow: 0 10px 30px 0px #bebebe;
267 | -o-box-shadow: 0 10px 30px 0px #bebebe;
268 | -ms-box-shadow: 0 10px 30px 0px #bebebe;
269 | }
270 | `
271 |
--------------------------------------------------------------------------------
/src/assets/svg/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/instagram.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/home/projects.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-useless-computed-key */
2 | import React from 'react'
3 | import Card from '@material-ui/core/Card'
4 | import CardActions from '@material-ui/core/CardActions'
5 | import CardContent from '@material-ui/core/CardContent'
6 | import CardMedia from '@material-ui/core/CardMedia'
7 | import Button from '@material-ui/core/Button'
8 | import Typography from '@material-ui/core/Typography'
9 | import Grid from '@material-ui/core/Grid'
10 | import andzoa from 'assets/images/andzoa.webp'
11 | import mrTodo from 'assets/images/mrTodo.webp'
12 | import mrLegend from 'assets/images/mrLegend.webp'
13 | import { makeStyles } from '@material-ui/core/styles'
14 | import Container from '@material-ui/core/Container'
15 | import img1 from 'assets/images/shape3.webp'
16 | import wiiro from 'assets/images/mrWii.webp'
17 | import { BgImg3, Header2 } from 'styles/style'
18 | import styled from 'styled-components'
19 |
20 | const useStyles = makeStyles({
21 | card: {
22 | maxWidth: 300,
23 | height: '410px',
24 | marginRight: 'auto',
25 | marginLeft: 'auto',
26 | borderRadius: '9px',
27 | boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
28 | '&:hover': {
29 | backgroundColor: 'transparent',
30 | color: '#9858e9',
31 | boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(231,176,255,1)'
32 | },
33 | ['@media (max-width:600px)']: {
34 | height: '320px',
35 | width: '250px'
36 | },
37 | ['@media only screen and (min-width: 601px) and (max-width: 1024px)']: {
38 | height: '375px'
39 | },
40 | '& h2': {
41 | textAlign: 'center',
42 | fontSize: '25px',
43 | fontWeight: 'bold'
44 | },
45 | '& p': {
46 | fontSize: 'calc(14px + (17 - 14) * ((100vw - 300px) / (1600 - 300)))',
47 | textAlign: 'center'
48 | },
49 | '& p:hover': {
50 | color: 'black'
51 | }
52 | },
53 | button: {
54 | fontSize: '16px',
55 | marginLeft: 'auto',
56 | marginRight: 'auto',
57 | verticalAlign: 'middle',
58 | '& a': {
59 | textDecoration: 'none',
60 | color: '#267ee2'
61 | },
62 | ['@media only screen and (min-width: 601px) and (max-width: 1024px)']: {
63 | fontSize: '12px'
64 | }
65 | },
66 | root: {
67 | flexGrow: 1
68 | }
69 | })
70 |
71 | const Projects = () => {
72 | const classes = useStyles()
73 | return (
74 |
89 |
284 |
91 |
92 |
93 |
94 |
107 |
112 | Personal Website
113 | (Current) 114 |
115 |
116 |
117 |
118 |
131 |
132 |
133 |
134 |
135 |
136 |
149 |
150 | Mr Todo
151 |
152 |
157 | Mr Todo is a light TODO app created using reactJS, has
158 | plenty of features that will make your Todos a piece of
159 | cake.
160 |
161 |
162 |
163 |
176 |
189 |
190 |
191 |
192 |
193 |
194 |
207 |
208 | Andzoa
209 |
210 |
215 | A school project i did when i was interning at a company
216 | called Andzoa, stack used: Html / Css / JS / PHP / MySql.
217 |
218 |
219 |
220 |
221 |
234 |
235 |
236 |
237 |
238 |
239 |
252 |
253 | Mr Legend
254 |
255 |
260 | A web app i'm making (W.I.P) to rank Moroccan player base
261 | for a certain game (League of Legends).
262 |
263 |
264 |
265 |
278 |
279 |
280 |
281 |
282 |
283 | 113 | (Current) 114 |
43 |
44 |
45 |
120 |
121 | 
126 |
127 |
128 |
217 |
218 |
219 |
46 | About Me
47 | Hello, my Name is Ouail Bni
48 |
49 |I'm 23 years old and a Computer Science Graduate,
50 |
51 | I got my Bachelors Degree in 2018 and decided to learn web
52 | developement and get better at it since it picked my interest
53 | and i enjoy it, currently getting familiar with new practices in
54 | the field and stay updated with all the new things at the same
55 | time.
56 |
57 |
58 |
59 | I'm a technologies enthusiast and a self-taught Front-End
60 | Developer, i do have some Back-End knowledge such as PHP and
61 | NodeJs.
62 |
63 |
64 |
65 | I am interested in UI/UX design and also android developement as
66 | i did some contributions in the android developement section,
67 | specifically themeing and customizing android roms and builds
68 | check out my{' '}
69 |
79 | XDA profile
80 | {' '}
81 | and{' '}
82 |
92 | threads/work
93 | {' '}
94 | to know more.
95 |
96 |
97 |
98 |
99 | For any business related inquiries you can contact me using :
100 |
101 |
102 |
117 |
118 |
119 | 49 |
58 |
64 |
97 |
98 |
102 |
-
103 |
-
104 |
-
108 |
-
112 |
117 |
118 |
129 | Get in touch using the web :
130 |
131 |
216 | 131 |
-
132 |