-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
220 lines (216 loc) · 12.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Comfortaa:[email protected]&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Orbitron:[email protected]&family=Victor+Mono:ital,wght@0,100..700;1,100..700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./tools/style.css">
<title>Modern Portfolio</title>
</head>
<body>
<header class="header" id="header">
<a href="#" class="logo">Ahmet Yavuz</a>
<nav class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#project">Project</a>
</nav>
</header>
<section class="home" id="home">
<div class="home-content">
<h3>Hello I'm</h3>
<h1 class="name">Ahmet Yavuz</h1>
<h3 class="title">And I'm Fullstack Developer</h3>
<p class="info">I’m Ahmet Yavuz, Fullstack Developer based in Turkiye with 1 year of experience. I
specialize in creating responsive web applications using Spring Boot, Node.js, HTML, CSS, and
JavaScript, particularly with frameworks like React. I’m passionate about user experience and enjoy
collaborating with teams to build accessible, high-performance websites. In my free time, I like to
explore new technologies and contribute to open-source projects.</p>
<div class="social-item">
<a href="https://www.linkedin.com/in/1yavuzahmet/" target="_blank"><i
class="fa-brands fa-linkedin"></i></a>
<a href="https://github.com/yavuzahmet1" target="_blank"><i class="fa-brands fa-github"></i></a>
<a href="https://www.instagram.com/1yavuzahmet/" target="_blank"><i
class="fa-brands fa-instagram"></i></i></a>
<a href="https://medium.com/@1yavuzahmet" target="_blank"><i class="fa-brands fa-medium"></i></i></a>
<a href="https://www.hackerrank.com/profile/1yavuzahmet" target="_blank"><i
class="fa-brands fa-hackerrank"></i></i></a>
</div>
<a href="" class="btn">Download Cv</a>
</div>
<div class="home-img">
<img src="./images/profil.gif" alt="">
</div>
</section>
<section class="about" id="about">
<div class="about-img">
<img src="./images/profil.gif" alt="">
</div>
<div class="about-content">
<h2 class="heading">About <span>Me</span></h2>
<h3>Fullstack Instractor</h3>
<p class="about-content">
Turning dreams into code and being able to guide people at their fingertips must be a realistic dream. I
think that it is an environment where one can work with modeling technique for pleasure rather than
necessity, and I want to improve myself with different models.<br>
First of all, it was a dream to enter the software industry. It has been a passion that has been in my
mind ever since my high school years (since 2003). Even though I work in various sectors away from
software, I can clearly say that I want to advance in the software industry, which is a sector where I
can enjoy this passion rather than the salary it will bring, and I would even like to be a tea maker in
this sector. I can make sacrifices that will contribute to my development rather than salary.
</p>
</div>
</section>
<section class="skills" id="skills">
<h2 class="heading">My <span>Skills</span></h2>
<div class="skills-container">
<div class="skills-box">
<i class="fa-solid fa-code"></i>
<h3>HTML</h3>
<p>HTML, or HyperText Markup Language, is the standard language used to create and structure content on
the web. It's the foundation of web pages, defining the elements that make up a page, such as
headings, paragraphs, images, links, lists, and more.</p>
</div>
<div class="skills-box">
<i class="fa-brands fa-css3"></i>
<h3>CSS</h3>
<p>CSS, or Cascading Style Sheets, is a language used to style and format the layout of web pages. It
allows web developers to control the appearance of HTML elements, including colors, fonts, spacing,
and overall page design, making the web visually appealing and user-friendly.</p>
</div>
<div class="skills-box">
<i class="fa-brands fa-react"></i>
<h3>REACT</h3>
<p>React is a JavaScript library for building user interfaces, primarily used for developing single-page
applications (SPAs) and creating complex, interactive web applications with a dynamic user
experience. Created by Facebook (now Meta), it simplifies the process of building UI components by
making it easy to manage the state of an application and update only the necessary parts of the UI
when data changes.</p>
</div>
<div class="skills-box">
<i class="fa-brands fa-node"></i>
<h3>NODE.JS</h3>
<p>JavaScript, one of the most popular programming languages, was initially used for developing
client-side web applications for a long time. Node.js enabled the development of
platform-independent JavaScript applications using Google's Chrome V8 JavaScript runtime engine.
Thus, Node.js opened the door for JavaScript to be used for various purposes, including server-side
applications.</p>
</div>
<div class="skills-box">
<i class="fa-brands fa-sass"></i>
<h3>SASS</h3>
<p>Short for Syntactically Awesome Style Sheets, SASS is a popular CSS pre-processor. SASS code is
processed by the program and compiled into CSS code, which can be used to style HTML elements. SASS
controls how it appears on the web page. It is compatible with all CSS versions.</p>
</div>
<div class="skills-box">
<i class="fa-brands fa-bootstrap"></i>
<h3>BOOTSRAP</h3>
<p>Bootstrap is a free, open source front-end development framework for the creation of websites and web
apps. Designed to enable responsive development of mobile-first websites, Bootstrap provides a
collection of syntax for template designs.</p>
</div>
</div>
</section>
<section class="project" id="project">
<h2 class="heading">Latest <span>Project</span></h2>
<div class="project-container">
<div class="project-box">
<img src="./images/home.gif" width="60px" height="280px" alt="">
<p class="pro"><a
href="https://yavuzahmet1.github.io/fullstack-clarusway/frontend/html-css/class-notes/hc-10-flexbox-project/">HTML-CSS
Project</a></p>
</div>
<div class="project-box">
<img src="./images/parallax.gif" width="60px" height="280px" alt="">
<p class="pro"><a
href="https://yavuzahmet1.github.io/fullstack-clarusway/frontend/teamwork-agendas/week-2/tw-tuesday-parallax/">HTML-CSS
Project</a></p>
</div>
<div class="project-box">
<img src="./images/screen-capture-ezgif.com-video-to-gif-converter (2).gif" width="60px" height="280px"
alt="">
<p class="pro"><a
href="https://yavuzahmet1.github.io/fullstack-clarusway/frontend/html-css/assigments/4-portfolio-martin/">HTML-CSS
Project</a></p>
</div>
<div class="project-box">
<img src="./images/image.png" width="60px" height="280px" alt="">
<p class="pro"><a
href="https://yavuzahmet1.github.io/fullstack-clarusway/frontend/html-css/assigments/3-music-site/">HTML-CSS
Project</a></p>
</div>
<div class="project-box">
<img src="./images/responsive-design.gif" width="60px" height="280px" alt="">
<p class="pro"><a
href="https://yavuzahmet1.github.io/fullstack-clarusway/projects/responsive-design/">HTML-CSS
Project</a></p>
</div>
<div class="project-box">
<img src=" ./images/calculator.png" width="60px" height="280px" alt="">
<p class="pro"><a href="https://yavuzahmet1.github.io/fullstack-clarusway/projects/night-work">HTML-CSS
Project</a></p>
</div>
<div class="project-box">
<img src="./frontend/boostrap/hc-14-bootstrap-2/img/coffee-main.png" width="60px" height="280px" alt="">
<p class="pro">
<a href="https://yavuzahmet1.github.io/fullstack-clarusway/projects/cup-time-coffee/">HTML-CSS
Project</a>
</p>
</div>
<div class="project-box">
<img src="./projects/animated-login-page/img/login-page.png" width="60px" height="280px" alt="">
<p class="pro">
<a href="https://yavuzahmet1.github.io/fullstack-clarusway/projects/animated-login-page/">HTML-CSS-JS
Project</a>
</p>
</div>
<div class="project-box">
<img src="./projects/3D-rotation-effect/img/image.png" width="60px" height="280px" alt="">
<p class="pro">
<a href="https://yavuzahmet1.github.io/fullstack-clarusway/projects/3D-rotation-effect/">HTML-CSS-JS
Project</a>
</p>
</div>
<div class="project-box">
<img src="./frontend/teamwork-agendas/week-6/img/main.png" width="60px" height="280px" alt="">
<p class="pro">
<a href="https://yavuzahmet1.github.io/fullstack-clarusway/frontend/teamwork-agendas/week-6/">HTML-CSS-JS
Project</a>
</p>
</div>
<div class="project-box">
<img src="./projects/coffee-shop/img/main-picture.png" width="60px" height="280px" alt="">
<p class="pro">
<a href="https://yavuzahmet1.github.io/fullstack-clarusway/projects/coffee-shop">HTML-CSS-JS
Project</a>
</p>
</div>
<div class="project-box">
<img src="./frontend/teamwork-agendas/week-6/friday/image.png" width="60px" height="280px" alt="">
<p class="pro">
<a
href="https://yavuzahmet1.github.io/fullstack-clarusway/frontend/teamwork-agendas/week-6/friday/">HTML-CSS-JS
Project</a>
</p>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-text">
<p>Copyright © 2024 I was inspired by my teacher Harley's page.</p>
</div>
<div class="footer-icon-top">
<a href="" class="#home"><i class="fa fa-arrow-circle-up"></i></a>
</div>
</footer>
</body>
</html>