{"id":21992175,"url":"https://github.com/sinantech/patika-frontend-course","last_synced_at":"2026-04-09T18:51:00.273Z","repository":{"id":242667047,"uuid":"810211551","full_name":"sinantech/patika-frontend-course","owner":"sinantech","description":"🎯 Patika + Frontend Course All Projects","archived":false,"fork":false,"pushed_at":"2024-09-03T06:27:17.000Z","size":62718,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-28T09:49:21.880Z","etag":null,"topics":["bootstrap","css","frontend","html","javascript","nodejs","tailwind"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sinantech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-04T09:04:27.000Z","updated_at":"2024-11-05T08:20:58.000Z","dependencies_parsed_at":"2024-11-29T20:23:02.408Z","dependency_job_id":null,"html_url":"https://github.com/sinantech/patika-frontend-course","commit_stats":null,"previous_names":["sinantech/patikafrontendcourse","sinantech/patika-frontend-course"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinantech%2Fpatika-frontend-course","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinantech%2Fpatika-frontend-course/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinantech%2Fpatika-frontend-course/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinantech%2Fpatika-frontend-course/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sinantech","download_url":"https://codeload.github.com/sinantech/patika-frontend-course/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245052619,"owners_count":20553161,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","frontend","html","javascript","nodejs","tailwind"],"created_at":"2024-11-29T20:13:02.338Z","updated_at":"2026-04-09T18:50:55.246Z","avatar_url":"https://github.com/sinantech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Hub All Practices\n\nThis repository is an archive containing all the projects I have completed during my React learning journey.\n\n## Project Structure\n\n### Weeks\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to expand all projects and pre-work.\u003c/summary\u003e\n\n| #   | Project Name | Source Code                                                                                      |\n| --- |--------------|--------------------------------------------------------------------------------------------------|\n| 0   | Pre Work     | [Source](https://github.com/sinantech/PatikaFrontEndCourse/blob/main/PreworkPractice/index.html) |\n| 1   | Week-1       | [Source](https://github.com/sinantech/PatikaFrontendCourse/tree/main/1st-week)                     |\n| 2   | Week-2       | [Source](https://github.com/sinantech/PatikaFrontendCourse/tree/main/2nd-week)                     |\n| 3   | Week-3       | [Source](https://github.com/sinantech/PatikaFrontendCourse/tree/main/3rd-week)                     |\n| 4   | Week-4       | [Source](https://github.com/sinantech/PatikaFrontendCourse/tree/main/4th-week)                     |\n| 5   | Week-5       | [Source](https://github.com/sinantech/PatikaFrontendCourse/tree/main/5th-week)                     |\n| 6   | Week-6       | [Source](https://github.com/sinantech/PatikaFrontendCourse/tree/main/6th-week)                     |\n| 7   | Week-7       | [Source](https://github.com/sinantech/PatikaFrontendCourse/tree/main/7th-week)                     |\n| 8   | Week-8       | [Source](https://github.com/sinantech/PatikaFrontendCourse/tree/main/8th-week)                     |\n| 9   | Week-9       | [Source](https://github.com/sinantech/PatikaFrontendCourse/tree/main/9th-week)                     |\n| 10  | Week-10       | [Source](https://github.com/sinantech/PatikaFrontendCourse/tree/main/10th-week)                     |\n\nWeek 7 main.js kodları açıklaması:\n\nAOS (Animate On Scroll) Başlatılması:\n\nAOS.init({ ... }): Sayfa yüklendiğinde animasyonları başlatmak için AOS kütüphanesi yapılandırılıyor. startEvent: 'load' ile animasyonlar sayfa yüklendiğinde başlayacak. offset: 20 ile animasyonların başlaması için elemanlar görünür alanın 20 piksel içine girdiğinde tetiklenecek. once: true ile animasyonlar sadece bir kez çalışacak.\nSwiper Başlatılması (Kamera Bölümü):\n\nnew Swiper('#camera .swiper', { ... }): Kamera bölümünde bir Swiper kaydırıcısı başlatılıyor. speed: 600 ile geçiş hızı 600 milisaniye olarak ayarlanıyor. spaceBetween: 12 ile slaytlar arasındaki boşluk 12 piksel olarak ayarlanıyor. navigation objesi ile önceki ve sonraki butonları etkinleştiriliyor.\nGLightbox Başlatılması (Genel):\n\nGLightbox({ selector: '.glightbox' }): Genel lightbox (açılır görsel gösterici) başlatılıyor ve .glightbox seçicisine sahip elemanları hedef alıyor.\nGLightbox Başlatılması (Fotoğraflar):\n\nGLightbox({ selector: '#photos .photo' }): Fotoğraf lightbox başlatılıyor ve #photos .photo seçicisine sahip elemanları hedef alıyor.\nSwiper Başlatılması (Yorumlar Bölümü):\n\nnew Swiper('#comments .swiper', { ... }): Yorumlar bölümünde bir Swiper kaydırıcısı başlatılıyor. pagination objesi ile sayfalandırma butonları etkinleştiriliyor ve tıklanabilir hale getiriliyor.\nHeader Elementinin Alınması:\n\nvar header = document.getElementById('header'): Header (üst bilgi) elementini header değişkenine atıyor.\nHeader'ın Kaydırıldığında Sınıf Eklenmesi/Kaldırılması:\n\nvar headerScrolledHandler = function () { ... }: Bu fonksiyon, sayfa 100 pikselden fazla kaydırıldığında header elementine header-scrolled sınıfını ekliyor, aksi takdirde bu sınıfı kaldırıyor.\nHeaderScrolledHandler'ın Olaylara Eklenmesi:\n\nwindow.addEventListener('load', headerScrolledHandler): Sayfa yüklendiğinde headerScrolledHandler fonksiyonu çağrılıyor.\ndocument.addEventListener('scroll', headerScrolledHandler): Sayfa kaydırıldığında headerScrolledHandler fonksiyonu çağrılıyor.\nTüm 'scrollto' Sınıfına Sahip Bağlantıların Alınması:\n\nvar links = document.getElementsByClassName('scrollto'): Tüm .scrollto sınıfına sahip bağlantı elemanları links değişkenine atanıyor.\nHer Bölüm İçin Doğru Linkin Odaklanması:\n\nvar focusSectionLink = function (event) { ... }: Bu fonksiyon, her scrollto bağlantısı için, kullanıcı sayfayı kaydırdığında doğru linkin odaklanmasını sağlıyor. Bağlantının hash değeri (örneğin #section1) ile ilgili bölüm bulunuyor ve sayfanın kaydırma pozisyonuna göre linkin active sınıfı ekleniyor veya kaldırılıyor.\nBağlantıya Tıklandığında İlgili Bölüme Yumuşak Geçiş:\n\nvar focusSection = function (event) { ... }: Bu fonksiyon, bağlantıya tıklandığında ilgili bölüme yumuşak bir geçiş yapılmasını sağlıyor. event.preventDefault() ile varsayılan tıklama davranışı durduruluyor ve sayfanın hedef bölüme kaydırılması sağlanıyor.\nSayfa Kaydırıldığında focusSectionLink'in Çağrılması:\n\nwindow.addEventListener('scroll', focusSectionLink): Sayfa kaydırıldığında focusSectionLink fonksiyonu çağrılıyor.\n'scrollto' Sınıfına Sahip Bağlantılara Tıklama Olayının Eklenmesi:\n\nfor (const link of links) { link.addEventListener('click', focusSection) }: Her scrollto sınıfına sahip bağlantıya tıklama olayı ekleniyor ve focusSection fonksiyonu çağrılıyor.\nBu kod, web sayfasının farklı bölümlerini kaydırma ve animasyonlarla daha kullanıcı dostu hale getirmeyi amaçlıyor. Swiper ve GLightbox gibi kütüphanelerle kaydırıcılar ve lightbox özellikleri ekleniyor, ve scroll animasyonları ile kullanıcı etkileşimi artırılıyor.\n\n\n\u003c/details\u003e\n\n\n\n## License\n\nThis project is licensed under the [MIT License](https://choosealicense.com/licenses/mit/).\n\n## Author\n\nSinan Can Ozer","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinantech%2Fpatika-frontend-course","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsinantech%2Fpatika-frontend-course","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinantech%2Fpatika-frontend-course/lists"}