-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (135 loc) · 7.5 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
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Essam's site</title>
<link rel="icon" type="image/x-icon" href="./assets/icon/Ghost.ico">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/dataTheme.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header>
<div class="logo">
<a class="link " data-section="home" href="#home">
<img src="./assets/img/Light-300-300px.png" class="logo-ico" id="logo">
</a>
</div>
<nav class="nav-links">
<a class="link" data-section="home" href="#home"><i class="fa-solid fa-house"></i></a>
<a class="link" data-section="curriculums" href="#curriculums"><i
class="fa-solid fa-graduation-cap"></i></a>
<a class="link" data-section="about" href="#about"><i class="fa-solid fa-bars"></i></a>
<a class="link" data-section="tasks" href="#tasks"><i class="fa-solid fa-list-check"></i></a>
<a class="link" data-section="projects" href="#projects"><i class="fa-solid fa-bars-progress"></i></a>
</nav>
<div class="social-links">
<a href="https://www.linkedin.com/in/m-essam/" target="_blank"><i class='bx bxl-linkedin'></i></a>
<a href="https://github.com/m-essam-s" target="_blank"><i class='bx bxl-github'></i></a>
<a href="https://x.com/m_essam_s" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
</div>
<div class="theme-notifier ">
<button type="button" data-theme-toggle aria-label="Change to light theme">
<i class='bx bx-moon' id="theme-button"></i>
</button>
</div>
</header>
<main>
<section class="home" id="home">
<div class="home-content">
<h1>Hi, I'm Mohamed Essam</h1>
<h3>'We' Full-Stack Web Developer Intern</h3>
<p>I am passionate about web development and continuously learning new technologies. Currently learning
ReactJs and PHP Laravel. I am also interested in Python and Machine Learning. I am excited to share
my knowledge with you. I hope you enjoy my site. </p>
<div class="btn-box">
<a href="mailto:sir.m.essam.g@gmail.com">Mail Me</a>
<a href="https://wa.me/+201118236797?text=">Let's Talk</a>
</div>
</div>
</section>
<section class="curriculums" id="curriculums">
<h2 class="sec-title">Content & Curriculums</h2>
<div class="sec-content curriculums-content" id="curriculums-content">
<!-- js file -->
</div>
</section>
<section class="about" id="about">
<h2 class="sec-title">About</h2>
<div class="sec-content" id="about-content">
<!-- js file -->
</div>
</section>
<section class="tasks" id="tasks">
<h2 class="sec-title">Tasks</h2>
<div class="tasks-container sec-content">
<div class="html-tasks task">
<h3>HTML</h3>
<div>
<a href="./tasks/html/SirTimBernersLee/index.html" target="_blank">Sir Tim Berners Lee</a>
<a href="./tasks/html/MyFavouriteCars/index.html" target="_blank">My Favourite Cars</a>
<a href="./tasks/html/VideoloadingScreen/index.html" target="_blank">Video Loading Screen</a>
<a href="./tasks/html/YourbestSinger/index.html" target="_blank">Your Best Singer</a>
<a href="./tasks/html/TheGodfatherFilm/index.html" target="_blank">The Godfather Film</a>
<a href="./tasks/html/MobileStore/index.html" target="_blank">Mobile Store</a>
<a href="./tasks/html/FormValidation/index.html" target="_blank">FormValidation</a>
</div>
</div>
<div class="css-tasks task">
<h3>CSS</h3>
<div>
<a href="./tasks/css/HelloCss/index.html" target="_blank">Hello Css</a>
<a href="./tasks/css/TextStyle/index.html" target="_blank">Text Style</a>
<a href="./tasks/css/MyProfile/index.html" target="_blank">My Profile</a>
<a href="./tasks/css/Shop/index.html" target="_blank">Shop</a>
<a href="./tasks/css/ILLDYSECTIONGRID/index.html" target="_blank">ILLDY SECTION GRID</a>
<a href="./tasks/css/SimplelandingPage/index.html" target="_blank">Simple landing Page</a>
<a href="https://colorlibhub.com/illdy/" target="_blank">Illdy Theme Demo</a>
</div>
</div>
<div class="js-tasks task">
<h3>JavaScript</h3>
<div>
<a href="./tasks/js/AgeCalculator/index.html" target="_blank">Age Calculator</a>
<a href="./tasks/js/Q&Agame/index.html" target="_blank">Q & A Game</a>
<a href="./tasks/js/SumTwoNum/index.html" target="_blank">Sum 2 num</a>
<a href="./tasks/js/DataBindTask/index.html" target="_blank">Data Bind Task</a>
<a href="./tasks/js/LoopProblemSet/index.html" target="_blank">Loop Problem Set</a>
<a href="./tasks/js/FawreyCardGame/index.html" target="_blank">Fawrey Card Game</a>
<a href="./tasks/js/PrintDataTable/index.html" target="_blank">Print Data table</a>
<a href="./tasks/js/StopWatch/index.html" target="_blank">Stop Watch</a>
<a href="./tasks/js/AllusersAPI/index.html" target="_blank">All users API | Dummy Json</a>
<a href="./tasks/js/OurProductsDOM/index.html" target="_blank">Our Products DOM</a>
<a href="./tasks/js/SignatureWebsite/index.html" target="_blank">Signature website</a>
</div>
</div>
<div class="task">
<h3>jQuery</h3>
<div>
<a href="./tasks/jQuery/Build-a-design-with-jQuery/index.html" target="_blank">Build a
design with jQuery</a>
</div>
</div>
<div class="task">
<h3>React</h3>
<div>
<a href="./tasks/react/punny-headline-react-example/index.html" target="_blank">React Example</a>
</div>
</div>
</div>
</section>
<section class="projects" id="projects">
<h2 class="sec-title">Projects</h2>
<div class="sec-content"></div>
</section>
</main>
<script src="./js/script.js"></script>
<script src="./js/curriculumsContent.js"></script>
<script src="./js/aboutContent.js"></script>
<script src="./js/theme-picker.js"></script>
<script src="./js/routing.js"></script>
<script src="https://kit.fontawesome.com/9f15208743.js" crossorigin="anonymous"></script>
</body>
</html>