Files
FURK4NGG.github.io/home_tr.html
T
2024-10-01 00:01:22 +03:00

308 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="tr">
<head>
<title>Furkan Karlıoğlu - Ana Sayfa</title>
<link href="img/icon.ico" rel="shortcut icon" type="image/x-icon">
<link rel="manifest" href="/manifest.json">
<meta charset="UTF-8">
<meta http-equiv="X-XSS-Protection" content="1; mode=block">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="robots" content="INDEX, FOLLOW">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-3">
<meta name="publisher" content="https://furk4ngg.github.io">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<meta name="theme-color" content="#F8F6E3">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Furkan Karlıoğlu">
<meta name="keywords" content="Yazılım,Program Dilleri,Yapay Zeka,Siber Güvenlik,Mobil Uygulama,Mobil Uygulama Geliştirme,Robotik Kodlama,Portfolyo,Deneyim,Girişimci,Yazılım Geliştirici">
<meta name="description" content="Bu portföy sitesi, yazılım dünyasına olan tutkumu ve becerilerimi sizinle paylaşmak için tasarladığım bir platformdur. Yeniliğin kilidini açın ve web sitemi ziyaret edin."/>
<meta property="og:description" content="Furkan Karlioglu'nun Kişisel Web Sitesi." />
<meta name="author" content="Furkan KARLIOĞLU">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="https://furk4ngg.github.io/home.html">
<link href='img/icon.ico' rel='apple-touch-icon'/>
<link rel="stylesheet" href="CSS/tr/1.css">
</head>
<body>
<div id=# class="loading_page">
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M415.44 512h-95.11L212.12 357.46v91.1L125.69 512H28V29.82L68.47 0h108.05l123.74 176.13V63.45L386.69 0h97.69v461.5zM38.77 35.27V496l72-52.88V194l215.5 307.64h84.79l52.35-38.17h-78.27L69 13zm82.54 466.61l80-58.78v-101l-79.76-114.4v220.94L49 501.89h72.34zM80.63 10.77l310.6 442.57h82.37V10.77h-79.75v317.56L170.91 10.77zM311 191.65l72 102.81V15.93l-72 53v122.72z" />
</svg>
<div class="name_container">
<div class="logo_name">Gelecek İçin</div>
</div>
</div>
<a href="##" class="to-top" onclick="scrollToElement('#')" aria-label="En Üste Kaydır" draggable="false">
<img src="img/up.webp" alt="scroll_top_button" draggable="false">
</a>
<div id="circle_1" class="circle"></div>
<div id="circle_2" class="circle"></div>
<div id="circle_3" class="circle"></div>
<div id="circle_4" class="circle"></div>
<div id="circle_5" class="circle"></div>
<div id="circle_6" class="circle"></div>
<div id="circle_7" class="circle"></div>
<div id="circle_8" class="circle"></div>
<div id="circle_9" class="circle"></div>
<div id="circle_10" class="circle"></div>
<div id="circle_11" class="circle"></div>
<div id="circle_12" class="circle"></div>
<div id="circle_13" class="circle"></div>
<div id="circle_14" class="circle"></div>
<div id="circle_15" class="circle"></div>
<div id="circle_16" class="circle"></div>
<div id="circle_17" class="circle"></div>
<div id="circle_18" class="circle"></div>
<div id="circle_19" class="circle"></div>
<div id="circle_20" class="circle"></div>
<div id="container_1">
<div class="top">
<header>
<nav>
<input type="checkbox" id="sidebar-active">
<label for="sidebar-active" class="open-sidebar-button">
<svg class="svg_icon_open" width="40px" height="40px" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="10" width="30" height="3" rx="2" ry="2"/><rect x="14" y="21" width="21" height="3" rx="2" ry="2"/></svg>
</label>
<label id="overlay" for="sidebar-active"></label>
<div class="links-container">
<label for="sidebar-active" class="close-sidebar-button">
<svg class="svg_icon_close" xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
</label>
<!-- NOT IN TUTORIAL: The <a> tags are linked to the subpages -->
<a id='toskills' class="menu" href="#skills_" onclick="scrollToElement('skills_')" aria-label="Yeteneklere Kaydır" draggable="false">Yetenekler</a>
<a id='togallery' class="menu" href="#tranding" onclick="scrollToElement('tranding')" aria-label="Galeri'ye Kaydır" draggable="false">Galeri</a>
<a id='toservices' class="menu" href="#services" onclick="scrollToElement('projects')" aria-label="Projelere Kaydır" draggable="false">Hizmetler</a>
<a id='tocontact' class="menu" href="#form_" onclick="scrollToElement('form_')" aria-label="Form'a Kaydır" draggable="false">İletişim</a>
</div>
</nav>
</header>
<div id="first">
<div id="first_">
<div id="container_0">
<h2 class="darkmode-ignore text_greeting_1">Merhaba, Ben</h2>
<h2 class="darkmode-ignore text_greeting_2">Furkan Karlıoğlu</h2>
</div>
<div id="container_3">
<div class="darkmode-ignore container_0"><h1 class="h1">Ben bir <span></span></h1></div>
</div>
</div>
<a class="darkmode-ignore home_scroll" href="#about_me" onclick="scrollToElement('about_me')" aria-label="Hakkımda'ya Kaydır" draggable="false">
<div class="home_scroll_box">
<label>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M11 21.883l-6.235-7.527-.765.644 7.521 9 7.479-9-.764-.645-6.236 7.529v-21.884h-1v21.883z"/></svg></label>
</div>
<span class="home_scroll_text" alt="scroll_about_button" aria-label="Hakkımda'ya Kaydır"></span>
</a>
</div>
</div>
<p id="about_me" class="text_title">- Hakkımda -</p>
<div class="container78">
<div class="image-container">
<div id="photo">
<div class="container_filter"></div>
<img src="img/profile_photo1.webp" alt="profile_photo" class="profile_photo" aria-label="Profile Fotoğrafı" draggable="false">
<img src="img/character1.webp" alt="character_photo" class="character_photo" aria-label="Karakter Fotoğrafı" draggable="false">
</div>
</div>
<div class="text_container">
<p id="animatedTextContainer"></p>
</div>
</div>
<div id="divides" class="divide_1"><div class="space"></div></div>
<div id="skills_">
<p class="text_title">- Yetenekler -</p>
<div id="skills">
<div id="skills_bottom"></div>
<div id="skills_id"><div id="text_skills">PYTHON</div><div class="progress"><div id="progress_value" class="progress-value_1"></div></div></div>
<div id="skills_id"><div id="text_skills">JAVA</div><div class="progress"><div id="progress_value" class="progress-value_2"></div></div></div>
<div id="skills_id"><div id="text_skills">C++</div><div class="progress"><div id="progress_value" class="progress-value_3"></div></div></div>
<div id="skills_id"><div id="text_skills">C#</div><div class="progress"><div id="progress_value" class="progress-value_4"></div></div></div>
<div id="skills_id"><div id="text_skills">CSS</div><div class="progress"><div id="progress_value" class="progress-value_5"></div></div></div>
<div id="skills_id"><div id="text_skills">JAVASCRIPT</div><div class="progress"><div id="progress_value" class="progress-value_6"></div></div></div>
<div id="skills_id"><div id="text_skills">ELEKTRO GİTAR</div><div class="progress"><div id="progress_value" class="progress-value_7"></div></div></div>
<div id="skills_id"><div id="text_skills">FRANSIZCA</div><div class="progress"><div id="progress_value" class="progress-value_8"></div></div></div>
<div id="skills_id"><div id="text_skills">DRONE KULLANIMI</div><div class="progress"><div id="progress_value" class="progress-value_9"></div></div></div>
</div>
</div>
<div id="divides" class="divide_2"><div class="space"></div></div>
</div>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="/CSS/unpkg.comswiper@8swiper-bundle.min.css"/>
<link rel="stylesheet" href="/CSS/tr/2.css">
</head>
<body>
<section id="tranding">
<div class="container_a">
<h1 id="gallery_title" class="section-subheading">- Galeri -</h1>
<h1 id="gallery_body" class="section-heading darkmode-ignore">Projelerim</h1>
</div>
<div class="container">
<div class="swiper tranding-slider">
<div class="swiper-wrapper">
<!-- Slide-start -->
<div id="swiper-slider" class="swiper-slide tranding-slide">
<div class="tranding-slide-img">
<div class="img_filter"></div>
<img id="photo_gallery" class="lazy-load" data-src="img/robotic.webp" href='https://github.com/FURK4NGG/FURK4NGG.github.io' alt="Tranding" draggable="false" aria-label="Galeri Fotoğrafı 1"></div>
<div class="tranding-slide-content">
<div class="tranding-slide-content-bottom">
<span>2020</span>
<h2 class="project-name">
Robotik Kodlama
</h2></div></div></div>
<!-- Slide-end --><!-- Slide-start -->
<div id="swiper-slider" class="swiper-slide tranding-slide">
<div class="tranding-slide-img">
<div class="img_filter"></div>
<img id="photo_gallery" class="lazy-load" data-src="img/game.webp" alt="Tranding" draggable="false" aria-label="Galeri Fotoğrafı 2"></div>
<div class="tranding-slide-content">
<div class="tranding-slide-content-bottom">
<span>2020</span>
<h2 class="project-name">
2D/3D Oyun Geliştirme
</h2></div></div></div>
<!-- Slide-end --><!-- Slide-start -->
<div id="swiper-slider" class="swiper-slide tranding-slide">
<div class="tranding-slide-img">
<div class="img_filter"></div>
<img id="photo_gallery" class="lazy-load" data-src="img/app.webp" alt="Tranding" draggable="false" aria-label="Galeri Fotoğrafı 3"></div>
<div class="tranding-slide-content">
<div class="tranding-slide-content-bottom">
<span>2021</span>
<h2 class="project-name">
Mobil Uygulama Oluşturma
</h2></div></div></div>
<!-- Slide-end -->
<!-- Slide-start -->
<div id="swiper-slider" class="swiper-slide tranding-slide">
<div class="tranding-slide-img">
<div class="img_filter"></div>
<img id="photo_gallery" class="lazy-load" data-src="img/web.webp" alt="Tranding" draggable="false" aria-label="Galeri Fotoğrafı 4"></div>
<div class="tranding-slide-content">
<a class="tranding-slide-content-top" href='https://github.com/FURK4NGG/FURK4NGG.github.io' aria-label="Robotik Kodlama Dosyaları" draggable="false">
<svg class="documents" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 16 16" id="copy"><path d="M4.00029246,4.08524952 L4,10.5 C4,11.8254834 5.03153594,12.9100387 6.33562431,12.9946823 L6.5,13 L10.9143985,13.000703 C10.7082819,13.5829319 10.1528467,14 9.5,14 L6,14 C4.34314575,14 3,12.6568542 3,11 L3,5.5 C3,4.84678131 3.41754351,4.29108512 4.00029246,4.08524952 Z M11.5,2 C12.3284271,2 13,2.67157288 13,3.5 L13,10.5 C13,11.3284271 12.3284271,12 11.5,12 L6.5,12 C5.67157288,12 5,11.3284271 5,10.5 L5,3.5 C5,2.67157288 5.67157288,2 6.5,2 L11.5,2 Z M11.5,3 L6.5,3 C6.22385763,3 6,3.22385763 6,3.5 L6,10.5 C6,10.7761424 6.22385763,11 6.5,11 L11.5,11 C11.7761424,11 12,10.7761424 12,10.5 L12,3.5 C12,3.22385763 11.7761424,3 11.5,3 Z"></path></svg></a>
<div class="tranding-slide-content-bottom">
<span>2022</span>
<h2 class="project-name">
Website Oluşturma
</h2></div></div></div>
<!-- Slide-end -->
<!-- Slide-start -->
<div id="swiper-slider" class="swiper-slide tranding-slide">
<div class="tranding-slide-img">
<div class="img_filter"></div>
<img id="photo_gallery" class="lazy-load" data-src="img/cyber.webp" alt="Tranding" draggable="false" aria-label="Galeri Fotoğrafı 5"></div>
<div class="tranding-slide-content">
<div class="tranding-slide-content-bottom">
<span>2023</span>
<h2 class="project-name">
Siber Güvenlik
</h2></div></div></div>
<!-- Slide-end -->
<!-- Slide-start -->
<div id="swiper-slider" class="swiper-slide tranding-slide">
<div class="tranding-slide-img">
<div class="img_filter"></div>
<img id="photo_gallery" class="lazy-load" data-src="img/ai.webp" alt="Tranding" draggable="false" aria-label="Galeri Fotoğrafı 6"></div>
<div class="tranding-slide-content">
<div class="tranding-slide-content-bottom">
<span>2024</span>
<h2 class="project-name">
Yapay Zeka İstem Mühendisliği
</h2></div></div></div>
<!-- Slide-end -->
</div>
<div class="tranding-slider-control">
<div class="swiper-button-prev slider-arrow" aria-label="Soldaki Fotoğrafa Kaydır"><ion-icon name="arrow-back-outline"></ion-icon></div>
<div class="swiper-button-next slider-arrow" aria-label="Sağdaki Fotoğrafa Kaydır"><ion-icon name="arrow-forward-outline"></ion-icon></div>
<div class="swiper-pagination" aria-label="Fotoğraf Seçici"></div>
</div></div>
</div>
</section>
<script type="module" src="/JAVASCRIPT/unpkg.comionicons@5.5.2distioniconsionicons.esm.js"></script>
<script nomodule src="/JAVASCRIPT/unpkg.comionicons@5.5.2distioniconsionicons.js"></script>
<script src="/JAVASCRIPT/unpkg.comswiper@8swiper-bundle.min.js"></script>
</body>
</html>
<div id="container_2">
<div id="divides" class="divide_3"><div class="space"></div></div>
<p id="services" class="text_title">- Hizmetler -</p>
<div id="services_" class="darkmode-ignore">
<div class="services_id"><p>Mobil Uygulama Oluşturma</p></div>
<div class="services_id"><p>Siber Güvenlik</p></div>
<div class="services_id"><p>Yapay Zeka İstem Mühendisliği</p></div>
</div>
<div id="divides" class="divide_4"><div class="space"></div></div>
<div id="form_">
<html>
<form
action="https://formspree.io/f/xyyvprlo"
method="POST"
enctype="multipart/form-data">
<center><table>
<div id='form_text'>
<p class="form_title">- Bana Ulaşın! -</p>
<p>Projeniz için ücret teklifi almak, soru sormak ya da 'Merhaba!' demek için mail adreslerimden bana ulaşın ya da sosyal medya adreslerim üzerinden bana yazın! En kısa sürede size geri döneceğim.</div>
<div id='form'>
<tr>
<td><input type="text" name="person" style="width: 300px;height: 40px;padding-left: 10px;padding-right: 10px;" maxlength="41" placeholder="İsim Soyisim" aria-label="İsim Girişi"/></td>
</tr>
<tr></tr>
<tr>
<td><input type="email" name="email" style="width: 300px;height: 40px;padding-left: 10px;padding-right: 10px;" maxlength="41" placeholder="Mail Adresi" aria-label="Mail Girişi"/></td>
</tr>
<tr></tr>
<tr>
<td><input type="text" name="konu" style="width: 300px;height: 50px;padding-left: 10px;padding-right: 10px;" maxlength="41" placeholder="Konu" aria-label="Konu Girişi"/></td>
</tr>
<td></td>
<tr>
<td><textarea name="message" style="width: 300px;height: 160px;resize: none;padding: 10px 10px 7px;" maxlength="280" placeholder="Mesaj" aria-label="Mesaj Girişi"></textarea></td>
</tr>
<tr></tr><tr></tr>
<tr>
<td id="submit" colspan="2" align="center"><button id="submit" colspan="2" align="center" class="button-send" role="button" aria-label="Gönder Tuşu">Gönder</button>
</td>
</tr></div>
</table></center>
</form>
</html>
</div>
<footer>
<div id='footer_main'>
<div id="cc" draggable="false">© 2024 Furkan Karlıoğlu</div>
<div id="socialmedia">
<a class="main_a" href="https://www.instagram.com/furkan_css/" target="_blank" rel="noopener noreferrer nofollow" aria-label="Instagram Profiline Git" draggable="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg></a>
<a class="main_a" href="https://discord.gg/ur9ZHAfbzr" target="_blank" rel="noopener noreferrer nofollow" aria-label="Discord Sayfasına Git" draggable="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"/></svg></a>
<a class="main_a" href="https://www.linkedin.com/in/furkan-karl%C4%B1o%C4%9Flu-71202b22a/" target="_blank" rel="noopener noreferrer nofollow" aria-label="Linkedin Profiline Git" draggable="false"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 26 26">
<path d="M 21.125 0 L 4.875 0 C 2.183594 0 0 2.183594 0 4.875 L 0 21.125 C 0 23.816406 2.183594 26 4.875 26 L 21.125 26 C 23.816406 26 26 23.816406 26 21.125 L 26 4.875 C 26 2.183594 23.816406 0 21.125 0 Z M 8.039063 22.070313 L 4 22.070313 L 3.976563 9.976563 L 8.015625 9.976563 Z M 5.917969 8.394531 L 5.894531 8.394531 C 4.574219 8.394531 3.722656 7.484375 3.722656 6.351563 C 3.722656 5.191406 4.601563 4.3125 5.945313 4.3125 C 7.289063 4.3125 8.113281 5.191406 8.140625 6.351563 C 8.140625 7.484375 7.285156 8.394531 5.917969 8.394531 Z M 22.042969 22.070313 L 17.96875 22.070313 L 17.96875 15.5 C 17.96875 13.910156 17.546875 12.828125 16.125 12.828125 C 15.039063 12.828125 14.453125 13.558594 14.171875 14.265625 C 14.066406 14.519531 14.039063 14.867188 14.039063 15.222656 L 14.039063 22.070313 L 9.945313 22.070313 L 9.921875 9.976563 L 14.015625 9.976563 L 14.039063 11.683594 C 14.5625 10.875 15.433594 9.730469 17.519531 9.730469 C 20.105469 9.730469 22.039063 11.417969 22.039063 15.046875 L 22.039063 22.070313 Z"></path>
</svg></a></div>
</div>
</footer>
</div>
<script src="/JAVASCRIPT/gsap.min.js"></script>
<script src="/JAVASCRIPT/ionicons.esm.js"></script>
<script src="/JAVASCRIPT/ionicons.js"></script>
<script src="/JAVASCRIPT/swiper-bundle.min.js"></script>
<script src="/JAVASCRIPT/darkmode-js.min.js"></script>
<script src="/JAVASCRIPT/tr/1.js"></script>
<script>
function isMobileDevice() {return /Mobi|Android/i.test(navigator.userAgent);}
window.onload = function() {
if (isMobileDevice()) {
var circles = document.getElementsByClassName('circle');
for (var i = 0; i < circles.length; i++) {circles[i].style.display = 'none';}}};
const darkmode = new Darkmode(options);
darkmode.showWidget();
</script>
</body>
</html>