-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
227 lines (176 loc) · 9.82 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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EYOB TESFAYE</title>
<link rel = "stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/2f61f6a27e.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="header">
<div class="container">
<nav>
<i class="fa-sharp fa-solid fa-e"></i>
<ul>
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contactme">Contact</a></li>
</ul>
</nav>
<div class="header-text">
<h1>A <span>Competitive Programmer</span><br>and Software Engineer</h1>
</div>
</div>
</div>
<!-----about-- -------->
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<img src="images/eyobimageone.jpg" alt="">
</div>
<div class="about-col-2">
<h1 class ="subtitle" >About Me</h1>
<p>
I am Eyob Tesfaye, an aspiring software engineer based in Addis Ababa, Ethiopia. I specialize in frontend, backend, and mobile app development, and I am passionate about competitive programming. With a strong foundation in various programming languages and development frameworks, I strive to create efficient, user-friendly applications and solutions. My dedication to continuous learning and problem-solving drives me to excel in the ever-evolving field of technology.</p>
<div class="tab-titles">
<p class="tablinks active-links" onclick="opentab('skills')">skills</p>
<p class="tablinks" onclick="opentab('education')">Education</p>
<p class="tablinks"onclick="opentab('experiance')">Experiance</p>
</div>
<div class="tab-content active-tab" id="skills">
<ul>
<li><span>website development</span><br>developing websites</li>
<li><span>Mobile app development</span><br>Mobile app development</li>
</ul>
</div>
<div class="tab-content" id="education">
<ul>
<li><span>Fourth year software engineering student at AASTU</span><br>pursuing my degree in Software Engineering</li>
<li><span>G5 student at A2SV </span><br>trained in Datastructure and Algorithms in python</li>
</ul>
</div>
<div class="tab-content" id="experiance">
<ul>
</ul>
</div>
</div>
</div>
</div>
</div>
<!----------services----->
<div id="services">
<div class="container">
<h1 class="subtitle">My services </h1>
<div class="services-list">
<div>
<i class="fa-solid fa-code"></i>
<h2> Web development</h2>
<p>I offer comprehensive web development services to help you create a professional and effective online presence. Whether you need a custom website design, responsive frontend development, or a robust backend solution, I have the skills and experience to deliver high-quality results. From crafting engaging user interfaces to building scalable server-side applications, I focus on creating web solutions that meet your business needs and exceed your expectations.</p>
</div>
<div>
<h2> UI/UX design</h2>
<p>I specialize in creating intuitive and visually appealing user interfaces that enhance the user experience. My approach combines user research, wireframing, and prototyping to design solutions that are both functional and engaging. I focus on understanding your target audience and crafting designs that are not only aesthetically pleasing but also user-friendly, ensuring that your application or website effectively meets user needs and business goals.</p>
</div>
<div>
<h2> Mobile App Development</h2>
<p>I provide end-to-end mobile app development services for Android platforms. From conceptualizing app ideas and designing user-friendly interfaces to developing features and optimizing performance, I’m committed to delivering high-quality mobile applications. Whether you need a native app or a cross-platform solution, I work to create seamless and efficient mobile experiences that engage users and achieve your business objectives.</p>
</div>
</div>
</div>
</div>
<!-------portfolio------>
<div id ="portfolio">
<div class ="container">
<h1 class="subtitle">My Work </h1>
<div class ="work-List">
<div class ="work">
<img src="images/work-1.png">
<div class="layer">
<h3>Webite</h3>
<p>This is a sample website i build</p>
<a href="https://eyobswebsite.netlify.app/"><i class="fa-regular fa-up-right-from-square"></i></a>
</div>
</div>
<div class ="work">
<img src="images/work-2.png">
<div class="layer">
<h3>This is My leetcode Profile</h3>
<p>This is my leetcode profile where i solve 300+ questions</p>
<a href="https://leetcode.com/u/EYOB_TESFAYE/"><i class="fa-regular fa-up-right-from-square"></i></a>
</div>
</div>
<div class ="work">
<img src ="images/work-3.png">
<div class="layer">
<h3>Website</h3>
<p>This is a sample website i build</p>
<a href="https://eyobswebsite.netlify.app/"><i class="fa-regular fa-up-right-from-square"></i></a>
</div>
</div>
</div>
<a href="" class="btn">See More</a>
</div>
</div>
<div id="contactme" >
<div class="contact">
<div class="container">
<div class="row">
<div class="contact-left">
<h1 class="subtitle">Contact Me</h1>
<p><i class="fa-solid fa-paper-plane"></i>[email protected]</p>
<p><i class="fa-solid fa-square-phone"></i>0953850592</p>
<div class="social-icons">
<a href="https://www.linkedin.com/in/eyob-tesfaye-480b30205"><i class="fa-brands fa-linkedin"></i></a>
<a href=""><i class="fa-brands fa-telegram"></i></a>
</div>
</div>
<div class="contact-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Name">
<input type="text" name="Email" placeholder="Email">
<textarea name="Message" rows="6" placeholder="Yourmessage"></textarea>
<button type="submit" class="btn btn-2">submit</button>
</form>
<span id="msg"></span>
</div>
</div>
</div>
</div>
</div>
<script>
var tablinks = document.getElementsByClassName("tab-links");
var tabcontents = document.getElementsByClassName("tab-content");
function opentab(tabname){
for(tablink of tablinks){
tablink.classList.remove("active-links");
}
for(tabcontent of tabcontents){
tabcontent.classList.remove("active-tab");
}
event.currentTarget.classList.add("active-links");
document.getElementById(tabname).classList.add("active-tab");
}
</script>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbw2hh9jK7EvWbHVjGsJydQ_tZTdsFYoEjxRNJpQWcQwEDBElRny7XvTg9GT-H0U5q3B/exec'
const form = document.forms['submit-to-google-sheet']
const msg = document.getElementById("msg") // Added 'document.' prefix
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => {
msg.innerHTML = "Message sent successfully"
setTimeout(function(){
msg.innerHTML = ""
}, 4000)
form.reset()
})
.catch(error => console.error('Error!', error.message))
})
</script>
</body>
</html>