diff --git a/css/about-me.css b/css/about-me.css index 05ae2c0..c0c23c6 100644 --- a/css/about-me.css +++ b/css/about-me.css @@ -193,7 +193,7 @@ } /* About Me Bölümü */ -.about-me { +#about-me { padding: 40px 0; text-align: center; background: radial-gradient( @@ -211,6 +211,8 @@ margin-bottom: 20px; } + + .content { margin: 30px auto; padding: 40px; @@ -221,6 +223,11 @@ text-align: left; } +.about-content p { + text-align: left; + background-color: var(--background-color); +} + /* Tablo Stili */ .table-section { width: 100%; @@ -248,26 +255,24 @@ background-color: var(--secondary-color); } .table-section tr:hover { - background-color: var(--highlight-color); - color: #000; + background-color: #19d6e3; /* Daha parlak bir mavi ton */ + color: #000; /* Siyah yazı rengi */ } /* Sport Section */ +#sport p { + padding: 40px; + text-align: left; + background-color: var(--background-color); +} .sport-content { display: flex; flex-wrap: wrap; justify-content: center; - gap: 30px; + gap: 20px; } -#sport p { - font-size: 1.2rem; - color: var(--text-color); - font-family: var(--font-family2); - text-align:left; - padding: 20px; -} .sport-card { position: relative; @@ -401,57 +406,140 @@ -/* Responsive Design */ @media (max-width: 768px) { + /* Ana kahraman bölümü daha küçük boyutta */ .about-me-hero { + padding: 20px; height: 70vh; } + /* "Heros" grid yapısı iki sütun ve üç satır */ #heros { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; + gap: 15px; } + /* Merkezdeki "About Me" öğesi tam ortada kalır */ .about-mee { grid-column: 1 / 3; grid-row: 2 / 3; } + /* Köşelerdeki ikonlar için ayarlamalar */ .education, .sport, .experince, .sosial { grid-column: span 1; + justify-self: center; } + /* İkon boyutlarını küçült */ .logos img { width: 80px; height: 80px; } + + /* İkon etiket boyutları küçültülür */ .logos .span { font-size: var(--h4-font-size); } - .logo-footer h4 { - color: var(--text-color); - } - .sport-gallery { - flex-direction: column; - } - .sport-card { - width: 100%; - height: auto; + /* İçerik genel olarak mobil için optimize edilir */ + .content { + padding: 20px; } + + /* Eğitim ve Deneyim Bölümü */ + /* Education ve Experience Bölümleri için Mobil Uyumluluk Ayarları */ + .table-section { + width: 100%; + border-collapse: collapse; + background-color: #1b2838; + margin: 0 auto; +} + +/* Başlıklar gizleniyor ve mobil uyumlu hale getiriliyor */ +.table-section thead { + display: none; /* Tablodaki başlıkları gizle */ +} + +/* Her satır, mobilde ayrı bir kutu şeklinde görünecek */ +.table-section tr { + display: flex; + flex-direction: column; + margin-bottom: 20px; + padding: 10px; + border: 1px solid #0d1f2d; + border-radius: 8px; + background-color: #0d1f2d; +} + +/* Her hücre içeriği yatay olarak hizalanır */ +.table-section td { + display: flex; + justify-content: space-between; + padding: 8px 10px; + font-size: 0.95rem; + color: #ffffff; + border-bottom: 1px solid #1b2838; +} + +/* Son satırın altındaki çizgiyi kaldırmak için */ +.table-section td:last-child { + border-bottom: none; +} + +/* Her hücreye başlıkları eklemek için */ +.table-section td::before { + content: attr(data-label); /* "data-label" ile başlık ekle */ + font-weight: bolder; + color: var(--text-color); +} + +.sport-content { + display: grid; + grid-template-columns: repeat(2, 1fr); /* İki sütun */ + gap: 15px; +} + + /* Sosyal medya simgeleri için konteyner */ .container { + display: flex; flex-wrap: wrap; + gap: 10px; + justify-content: center; } - + + /* Sosyal medya düğmeleri için daha küçük boyutlar */ .btn-sosmed { width: 60px; height: 60px; } - + .btn-sosmed i { font-size: 28px; } + + /* Spor galerisi mobilde tek sütun olarak görünür */ + .sport-gallery { + flex-direction: column; + gap: 15px; + } + + .sport-card { + width: 100%; + height: auto; + } + + /* Diğer yazı alanları için hizalama */ + #social-media h2, + #sport p, + .section-title { + text-align: center; + } + + } + diff --git a/js/components/aboutPage.js b/js/components/aboutPage.js index af0641f..475365f 100644 --- a/js/components/aboutPage.js +++ b/js/components/aboutPage.js @@ -1,223 +1,211 @@ export function loadAboutPage() { - const mainContent = document.getElementById("about-content"); - - if (mainContent) { - mainContent.innerHTML = ` -
-
- -
+ const mainContent = document.getElementById("about-content"); -
-
- - profil fotoAbout Me - + if (mainContent) { + mainContent.innerHTML = ` +
+
+
    +

  • A

    • +

  • b

    • +

  • o

    • +

  • u

    • +

  • t

    • +

    • +

  • m

    • +

  • e

    • +
-
- - sport fotoSport - -
-
- - educationEducation - -
-
- - logo-sosialSocial Media - -
-
- - logo-projectsExperience - -
-
-
-
-

- About Me -

-
-

- I'm Orhan Güzel, a passionate web developer with a background in engineering. - My journey into technology began with my graduation from Erciyes University - and continued as a military engineer in the Turkish Air Force for 12 years. - Since moving to Germany in 2022, I have focused on web development and - constantly strive to learn more to enhance my skills in this dynamic field. -

-
- -
-

- Education -

-
- - - - - - - - - - - - - - - - - - - - -
DegreeUniversityPeriod
Bachelor's DegreeErciyes University, Turkey1998 - 2005
Vocational SchoolAnatolische Berufsschule, Turkey1994 - 1997
+
-
+

- Experience + About Me

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
PositionCompanyPeriod
Production WorkerHumintec GmbHOct 2023 - Jan 2024
FreelancerBTU GmbHJul 2018 - Oct 2023
EngineerTurkish Air ForceJul 2005 - Jul 2018
+
+

+ I'm Orhan Güzel, a passionate web developer with a background in engineering. + My journey into technology began with my graduation from Erciyes University + and continued as a military engineer in the Turkish Air Force for 12 years. + Since moving to Germany in 2022, I have focused on web development and + constantly strive to learn more to enhance my skills in this dynamic field. +

-
- -
-

Sports

-

- I participate in triathlons, competing in swimming, cycling, and running. Especially for those of us who spend long hours at the desk coding, staying active is crucial not only for physical health but also for maintaining mental clarity. To avoid the monotony of a sedentary lifestyle, I engage in various sports. Daily training sessions, at least one hour a day, have proven to be a fantastic way to keep my body fit and boost my energy levels. Through sports, I stay not only physically strong but also mentally sharp and motivated. -

- -
-
- Swimming -
Running
-
-
- Cycling -
Running
-
-
- Running -
Cycling
-
-
- Swimming -
Duathlon
-
-
- Cycling -
Swimming
-
-
- Running -
Triathlon
-
-
- Swimming -
Triathlon
-
-
- Cycling -
Duathlon
-
-
- Running -
Running
-
-
- Swimming -
Swimming
-
-
- Cycling -
Duathlon
-
-
- Running -
Running
-
-
- Swimming -
Cycling
-
-
- Cycling -
Cycling
-
-
- Running -
Running
-
- -
- - - -
-

- Sosyal Medya -

-
-
- - - - - - -
-
-
-
- `; - } else { - console.error("Element with ID 'main-content' not found."); +
+

+ Education +

+
+ + + + + + + + + + + + + + + + + + +
Vocational SchoolAnatolische Berufsschule, Turkey1994 - 1997
Bachelor's DegreeErciyes University, Turkey1998 - 2005
Web Development CourseDCI, Germany2024 - 2025
+
+
+ +
+

+ Experience +

+
+ + + + + + + + + + + + + + + + + + +
Production WorkerHumintec GmbHOct 2023 - Jan 2024
FreelancerBTU GmbHJul 2018 - Oct 2023
EngineerTurkish Air ForceJul 2005 - Jul 2018
+
+
+ +
+

Sports

+

+ I participate in triathlons, competing in swimming, cycling, and running. Especially for those of us who spend long hours at the desk coding, staying active is crucial not only for physical health but also for maintaining mental clarity. To avoid the monotony of a sedentary lifestyle, I engage in various sports. Daily training sessions, at least one hour a day, have proven to be a fantastic way to keep my body fit and boost my energy levels. Through sports, I stay not only physically strong but also mentally sharp and motivated. +

+ +
+
+ Swimming +
Running
+
+
+ Cycling +
Running
+
+
+ Running +
Cycling
+
+
+ Swimming +
Duathlon
+
+
+ Cycling +
Swimming
+
+
+ Running +
Triathlon
+
+
+ Swimming +
Triathlon
+
+
+ Cycling +
Duathlon
+
+
+ Running +
Running
+
+
+ Swimming +
Swimming
+
+
+ Cycling +
Duathlon
+
+
+ Running +
Running
+
+
+ Swimming +
Cycling
+
+
+ Cycling +
Cycling
+
+
+ Running +
Running
+
+
+
+ +
+

+ Social Media +

+
+
+ + + + + + +
+
+
+ `; + } else { + console.error("Element with ID 'main-content' not found."); + } } -} - -document.addEventListener("DOMContentLoaded", () => { - loadAboutPage(); -}); + + document.addEventListener("DOMContentLoaded", () => { + loadAboutPage(); + }); + \ No newline at end of file