-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
233 lines (213 loc) · 12.1 KB
/
index.html
File metadata and controls
233 lines (213 loc) · 12.1 KB
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
228
229
230
231
232
233
<!--
Developer: Kerem Can Belli
Project: Static Personal Portfolio Website
Description: Updated English version with structured comments
Last Review: November 2025
-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="Stylesheet" href="style.css"> <!--Activated CSS file-->
<!-- ================ TITLE SECTION ================ -->
<link rel="icon" href="Imagines/Personal_Picture.ico" type="image/x-icon">
<title>
Static Personal Portfolio Website
</title>
<!-- ================ META SECTION ================ -->
<meta charset="UTF-8">
<meta name="Description" content="My Static Personal Portfolio Website that I made using only HTML5 and CSS3.">
<meta name="keywords" content="Personal , Portfolio , Static , HTML5 , CSS3">
<meta name="author" content="Kerem Can Belli , k.belli.eng@gmail.com">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
</head>
<body>
<!-- ================ HEADER SECTION ================ -->
<header id="ust"> <!--Added website's banner that includes personal photo and name-->
<img src="Imagines/Banner.png" alt="Kerem Can Belli Personal Portfolio Title Banner">
</header>
<!-- ================ NAV SECTION ================ -->
<nav> <!--Added navigator menu that includes links in page-->
<ul>
<a href="#About_me"><li>About Me</li></a>
<a href="#Education"><li>Education</li></a>
<a href="#Certificates"><li>Certificates</li></a>
<a href="#Abilities"><li>Abilities</li></a>
<a href="#Projects"><li>Projects</li></a>
<a href="#Contact_me"><li>Contact</li></a>
</ul>
</nav>
<!-- ================ ARTICLE SECTION ================ -->
<article>
<section id="About_me">
<h1>About Me</h1>
<p>I am a Computer Engineering student at Bahçeşehir University.
I have a strong interest in Web Development and Artificial Intelligence.
I graduated from a Science High School with a GPA of 97.6 and earned a 100% scholarship for my studies at BAU.
In the last few months, I have completed several projects such as CLI-based apps, OOP projects, a static portfolio website, and a responsive Notion homepage clone.
These projects helped me improve my skills in Python, HTML5, CSS (Grid & Flexbox), and Git/GitHub for version control.
I focus on writing clean and organized code and learning new tools that help me grow as a developer.
My next goals are to improve my backend skills and start working on small AI projects in the near future.
I am always open to learning new things, collaborating with others, and joining projects that connect AI and web technologies.
</p>
<hr>
</section>
<section id="Education">
<h1>Education</h1>
<h2>Bahçeşehir University</h2>
<p>Bachelor's degree, Computer Engineering<br>
(October 2025-June 2029) <br>
Full Scholarship / 100% Tuition Fee Waiver</p>
<h2>Prof. Dr. Necmettin Erbakan Science High School</h2>
<p>(September 2020-June 2024) <br>
Graduation Grade Point Average (GPA) : 97,6/100</p>
<hr>
</section>
<section id="Certificates">
<h1>Certificates</h1>
<ul>
<li>CSS3, BTK Academy</li>
<li>HTML5, BTK Academy</li>
<li>Version Control Systems Git and Github, BTK Academy</li>
<li>Python, BTK Academy</li>
<li>SQL, BTK Academy</li>
<li>B2 Level English, BTK Academy</li>
<li>IEEE ITU Technology Conference’21, IEEE ITU Student Branch</li>
</ul>
<hr>
</section>
<section id="Abilities">
<!--This section has divided into 6 parts which includes 2 rows and 3 column. Every part has 5 abilities.-->
<h1>Abilities</h1>
<!-- ================ START ABILITIES TABLE ================ -->
<table>
<tr>
<td>
<ol>
<li>Python</li>
<li>Front-End Development</li>
<li>Git</li>
<li>HTML5</li>
<li>CSS3</li>
</ol>
</td>
<td>
<ol start="6">
<li>Responsive Web Design</li>
<li>Object-Oriented Programming (OOP)</li>
<li>Javascript</li>
<li>SQL</li>
<li>CSS Grid Layout</li>
</ol>
</td>
<td>
<ol start="11">
<li>CSS Flexbox</li>
<li>User Interface Design</li>
<li>Algorithms</li>
<li>Data Structures</li>
<li>Software Development Life Cycle (SDLC)</li>
</ol>
</td>
</tr>
<tr>
<td>
<ol start="16">
<li>Problem Solving</li>
<li>Github</li>
<li>Version Control</li>
<li>CLI</li>
<li>Microsoft Visual Studio Code</li>
</ol>
</td>
<td>
<ol start="21">
<li>Relational Database</li>
<li>Microsoft SQL Server</li>
<li>Web Accessibility</li>
<li>Database Design</li>
<li>English</li>
</ol>
</td>
<td>
<ol start="26">
<li>Teamwork</li>
<li>Communication</li>
<li>Time Management</li>
<li>Lifelong Learning</li>
</ol>
</td>
</tr>
</table>
<!-- ================ END ABILITIES TABLE ================ -->
<hr>
</section>
<section id="Projects">
<!--This part has 4 parts and Every part includes one project.-->
<h1>Projects</h1>
<!-- ================ START PROJECTS TABLE ================ -->
<table>
<tr>
<td>
<!-- Static Personal Portfolio Website -->
<h2>01. Static Personal Portfolio Website</h2>
<p class="green"><strong>Situation: Completed</strong></p>
<p>Fully responsive static personal portfolio built with semantic HTML5 and advanced CSS for Git discipline practice.</p>
<a href="https://bellikerem.github.io/static-personal-portfolio/">Live Demo</a>
<br>
<a href="https://github.com/bellikerem/static-personal-portfolio">Github Repository</a>
</td>
<td>
<!-- Python Core Algorithms and CLI Applications -->
<h2>02. Python Core Algorithms and CLI Applications</h2>
<p class="green"><strong>Situation: Completed</strong></p>
<p>5 diverse CLI applications demonstrating core Python fundamentals, algorithms, and data structure usage (Lists, Dictionaries) for AI foundations.</p>
<br>
<a href="https://github.com/bellikerem/python-starter-algorithms">Github Repository</a>
</td>
<td>
<!-- Python OOP: 4 Core Principles Project Set -->
<h2>03. Python OOP: 4 Core Principles Project Set</h2>
<p class="green"><strong>Situation: Completed</strong></p>
<p>4 advanced OOP projects (Library, Banking, Shapes, HR) focusing on implementing Encapsulation, Inheritance, and Polymorphism principles.</p>
<br>
<a href="https://github.com/bellikerem/python-oop-fundamentals">Github Repository</a>
</td>
<td>
<!-- Notion Homepage Clone (Responsive Frontend Project) -->
<h2>04. Notion Homepage Clone (Responsive Frontend Project)</h2>
<p class="green"><strong>Situation: Completed</strong></p>
<p>Responsive clone of Notion.so homepage, developed using Vanilla JS, CSS Grid/Flexbox, and professional Git Workflow as part of a 4-Year Computer Science curriculum</p>
<a href="https://bellikerem.github.io/responsive-site-clone-frontend/">Live Demo</a>
<br>
<a href="https://github.com/bellikerem/responsive-site-clone-frontend">Github Repository</a>
</td>
</tr>
</table>
<!-- ================ END PROJECTS TABLE ================ -->
</section>
</article>
<!-- ================ FOOTER SECTION ================ -->
<footer id="Contact_me">
<section>
<h1>Contact Me</h1>
<div>
<!-- Gmail image and link -->
<img src="Imagines/gmail.png" alt="Gmail Logo">
<a href="mailto:k.belli.eng@gmail.com"><h2>📧 k.belli.eng@gmail.com</h2></a>
</div>
<div>
<!-- GitHub image and link -->
<img src="Imagines/github.png" alt="Github Logo">
<a href="https://github.com/bellikerem"><h2>💾 github.com/bellikerem</h2></a>
</div>
<div>
<!-- Linkedln image and link -->
<img src="Imagines/linkedin.png" alt="Linkedin Logo">
<a href="https://www.linkedin.com/in/keremcanbelli"><h2>🔗 linkedin.com/in/keremcanbelli</h2></a>
</div>
</section>
<p><strong>© 2025 Kerem Can Belli – All rights reserved | Last Updated: November 2025</strong></p>
<a href="#ust" id="go-to-the-top-of-the-page">Go to the top of the page</a>
</footer>
</body>
</html>