From d7a3b4406b3b2d5e4f5320b14ae015d9091db043 Mon Sep 17 00:00:00 2001 From: Orhan Guezel Date: Sat, 9 Nov 2024 20:26:59 +0100 Subject: [PATCH] Updates --- about-me.html | 390 ++----------------------------- contact.html | 6 +- css/about-me.css | 457 +++++++++++++++++++++++++++++++++++++ css/about.css | 2 - css/root.css | 2 + index.html | 1 + js/app.js | 7 + js/components/aboutPage.js | 223 ++++++++++++++++++ 8 files changed, 719 insertions(+), 369 deletions(-) create mode 100644 css/about-me.css create mode 100644 js/components/aboutPage.js diff --git a/about-me.html b/about-me.html index f62805d..5884ed9 100644 --- a/about-me.html +++ b/about-me.html @@ -2,46 +2,11 @@ - - Guezel Webdesign | Professional Web Design and Development - - - - - - - - - - - - - - - - - - - - - + name="viewport" + content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" + /> + Guezel Webdesign | About Me @@ -49,345 +14,40 @@ rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" - crossorigin="anonymous"/> + crossorigin="anonymous" + /> - + rel="stylesheet" + /> + - - - + + + + + href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" + /> + href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" + /> - -
- - -
- - - -
-
- -
-
-
    -

  • A

    • -

  • b

    • -

  • o

    • -

  • u

    • -

  • t

    • -

    • -

  • m

    • -

  • e

    • -
-
- -
-
- profil fotoAbout Me -
- -
- sport fotoSport -
- -
- educationEducation -
- -
- logo-sosialSosial - 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 in - order to enhance my skills in this dynamic field. -

-
- - -
-

- Education -

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

- Experience -

- - - - - - - - - - - - - - - - - - - - - - - - - - -
PositionCompanyPeriod
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
-
- -
- - - -
-

- Sosyal Medya -

-
- - - - - - -
-
-
- - - - - - + +
+ +
+ + + + diff --git a/contact.html b/contact.html index a34ab25..5c9702e 100644 --- a/contact.html +++ b/contact.html @@ -47,8 +47,10 @@ - - + + + + diff --git a/css/about-me.css b/css/about-me.css new file mode 100644 index 0000000..05ae2c0 --- /dev/null +++ b/css/about-me.css @@ -0,0 +1,457 @@ +.about-me-hero { + padding: 30px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + height: 80vh; + background: radial-gradient( + circle at center, + rgba(13, 31, 45, 0.8) 0%, + rgba(0, 0, 0, 1) 100% + ); +} + +.dots { + list-style-type: none; + padding: 0; + position: absolute; + display: flex; + justify-content: center; + margin: 40vh auto; +} + +.dots li { + font-size: 2em; + font-weight: bold; + opacity: 0; + transform: translateX(-1100px); + display: inline-block; + animation: loading 1.5s ease forwards; +} + +.dots li:nth-child(1) { + animation-delay: 300ms; +} +.dots li:nth-child(2) { + animation-delay: 600ms; +} +.dots li:nth-child(3) { + animation-delay: 900ms; +} +.dots li:nth-child(4) { + animation-delay: 1200ms; +} +.dots li:nth-child(5) { + animation-delay: 1500ms; +} +.dots li:nth-child(6) { + animation-delay: 1800ms; +} +.dots li:nth-child(7) { + animation-delay: 2100ms; +} +.dots li:nth-child(8) { + animation-delay: 2400ms; +} + +#heros { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + gap: 20px; + width: 100%; + height: 100%; + align-items: center; + justify-items: center; +} + +.logos img { + display: block; + margin: 0 auto 20px; + border: 0; + border-radius: 50%; + box-shadow: 0 0 15px var(--highlight-color); + object-fit: cover; + width: 100px; + height: 100px; + opacity: 0; + animation: bounceIn 450ms linear 6s forwards, + neonBox1 1.5s ease-in-out infinite alternate; +} + +.logos .span { + display: inline-block; + font-family: var(--font-family); + font-size: var(--h3-font-size); + color: #fff; + opacity: 0; + text-shadow: 0 0 15px var(--highlight-color); + animation: bounceIn 450ms linear 6s forwards, + neonText1 1.5s ease-in-out infinite alternate; +} + +/* Grid Pozisyonları */ +.about-mee { + grid-column: 2 / 3; + grid-row: 2 / 3; +} +.sport { + grid-column: 3 / 4; + grid-row: 1 / 2; +} +.education { + grid-column: 1 / 2; + grid-row: 1 / 2; +} +.sosial { + grid-column: 3 / 4; + grid-row: 3 / 4; +} +.experince { + grid-column: 1 / 2; + grid-row: 3 / 4; +} + +/* Görseller ve Animasyon Gecikmeleri */ +.about-mee img { + animation-delay: 4s; +} +.sport img { + animation-delay: 5s; +} +.education img { + animation-delay: 6s; +} +.sosial img { + animation-delay: 7s; +} +.experince img { + animation-delay: 8s; +} + +/* Icon Size and Animation Delays */ +.about-mee img { + width: 200px; + height: 200px; + animation: bounceIn 450ms linear 4s forwards, + neonBox1 1.5s ease-in-out infinite alternate; +} + +.about-mee .span { + font-size: 1.7rem; + animation-delay: 4s; +} + +.sport img { + width: 100px; + height: 100px; + animation: bounceIn 450ms linear 4s forwards, + neonBox2 1.5s ease-in-out infinite alternate; + animation-delay: 5s; +} + +.sport .span { + animation-delay: 5s; +} + +.education img { + width: 100px; + height: 100px; + animation: bounceIn 450ms linear 4s forwards, + neonBox3 1.5s ease-in-out infinite alternate; + animation-delay: 6s; +} + +.education .span { + animation-delay: 6s; +} + +.sosial img { + width: 100px; + height: 100px; + animation: bounceIn 450ms linear 4s forwards, + neonBox4 1.5s ease-in-out infinite alternate; + animation-delay: 7s; +} + +.sosial .span { + animation-delay: 7s; +} + +.experince img { + width: 100px; + height: 100px; + animation: bounceIn 450ms linear 4s forwards, + neonBox5 1.5s ease-in-out infinite alternate; + animation-delay: 8s; +} + +.experince .span { + animation-delay: 8s; +} + +/* About Me Bölümü */ +.about-me { + padding: 40px 0; + text-align: center; + background: radial-gradient( + circle at center, + rgb(13, 31, 45, 0.5) 0%, + rgba(0, 0, 0, 1) 100% + ); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.section-title { + font-size: 2rem; + font-weight: 700; + color: var(--highlight-color); + margin-bottom: 20px; +} + +.content { + margin: 30px auto; + padding: 40px; + line-height: 1.8; + overflow: hidden; + background-color: var(--background-color); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + text-align: left; +} + +/* Tablo Stili */ +.table-section { + width: 100%; + border-collapse: collapse; + background-color: var(--background-color); + overflow: hidden; +} + +.table-section th, +.table-section td { + padding: 15px 20px; + text-align: center; + color: var(--text-color); + font-size: 1.1rem; + font-family: var(--font-family2); +} + +.table-section th { + background-color: var(--background-light); + font-weight: bold; + color: var(--highlight-color); +} + +.table-section tr:nth-child(even) { + background-color: var(--secondary-color); +} +.table-section tr:hover { + background-color: var(--highlight-color); + color: #000; +} + +/* Sport Section */ + +.sport-content { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 30px; +} + +#sport p { + font-size: 1.2rem; + color: var(--text-color); + font-family: var(--font-family2); + text-align:left; + padding: 20px; +} + +.sport-card { + position: relative; + width: 250px; + height: 250px; + overflow: hidden; + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.sport-card:hover { + transform: translateY(-10px); + box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4); +} + +.sport-img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; +} + +.sport-card:hover .sport-img { + transform: scale(1.1); +} + +.sport-caption { + position: absolute; + bottom: 10px; + left: 0; + right: 0; + padding: 10px; + background: rgba(0, 0, 0, 0.6); + color: #fff; + font-size: 1.2rem; + text-align: center; + transition: background-color 0.3s ease; + font-family: var(--font-family); +} + +.sport-card:hover .sport-caption { + background: rgba(0, 0, 0, 0.8); +} + +/* Social Media Section */ +#social-media { + margin-top: 30px; + line-height: 1.8; + overflow: hidden; + text-align: center; +} + +#social-media h2 { + font-size: var(--h2-font-size); + color: var(--highlight-color); + margin-bottom: 30px; + text-align: center; +} + +.container { + display: flex; + justify-content: center; + gap: 15px; /* Butonlar arasında boşluk */ + flex-wrap: nowrap; +} + +.btn-sosmed { + display: flex; + align-items: center; + justify-content: center; + background: #e0e0e0; + width: 80px; + height: 80px; + margin: 8px; + border-radius: 50%; + box-shadow: 0 6px 16px -6px #000; + position: relative; + overflow: hidden; + transition: all 0.3s ease; +} + +.btn-sosmed i { + font-size: 36px; + color: inherit; /* Buton rengini ikon rengine uyarlar */ + transition: transform 0.3s linear; +} + +.btn-sosmed:hover i { + transform: scale(1.2); /* İkon büyütme efekti */ + color: #e0e0e0; +} + +.btn-sosmed::before { + content: ""; + position: absolute; + width: 105%; + height: 150%; + transform: rotate(30deg); + left: -150%; + top: 90%; + transition: all 0.6s ease; /* Hover'da animasyonun daha yumuşak olması için */ +} + +.btn-sosmed:hover::before { + animation: anim 0.6s forwards; /* Hover sırasında animasyon */ + left: 0; + top: -30%; +} + +.btn-sosmed.btn-facebook { color: #1a237e; } +.btn-sosmed.btn-instagram { color: #F50057; } +.btn-sosmed.btn-youtube { color: #D50000; } +.btn-sosmed.btn-github { color: #000000; } +.btn-sosmed.btn-linkedin { color: #0091EA; } +.btn-sosmed.btn-codepen { color: #000000; } + +/* İkonların arka plan renkleri */ +.btn-facebook::before { background: #1a237e; } +.btn-instagram::before { background: #F50057; } +.btn-youtube::before { background: #D50000; } +.btn-github::before { background: #000000; } +.btn-linkedin::before { background: #0091EA; } +.btn-codepen::before { background: #000000; } + +@keyframes anim { + 0% { left: -150%; top: 90%; } + 50% { left: 15%; top: -30%; } + 100% { left: 0; top: -30%; } +} + + + + +/* Responsive Design */ +@media (max-width: 768px) { + .about-me-hero { + height: 70vh; + } + + #heros { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + } + + .about-mee { + grid-column: 1 / 3; + grid-row: 2 / 3; + } + + .education, + .sport, + .experince, + .sosial { + grid-column: span 1; + } + + .logos img { + width: 80px; + height: 80px; + } + .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; + } + .container { + flex-wrap: wrap; + } + + .btn-sosmed { + width: 60px; + height: 60px; + } + + .btn-sosmed i { + font-size: 28px; + } +} diff --git a/css/about.css b/css/about.css index 578a499..b1cd314 100644 --- a/css/about.css +++ b/css/about.css @@ -15,8 +15,6 @@ } .about-content p { - font-size: var(--p-font-size); - color: var(--text-color); margin-bottom: 30px; } diff --git a/css/root.css b/css/root.css index a75c899..aeab421 100644 --- a/css/root.css +++ b/css/root.css @@ -1,6 +1,8 @@ :root { --primary-color: #19d6e3; --secondary-color: #0d1f2d; + --background-color: #1b2838; + --background-light: #0d1f2d; --black-color:#000000; --text-color: white; --highlight-color: #19d6e3; diff --git a/index.html b/index.html index 3e8cc4f..21c69f2 100644 --- a/index.html +++ b/index.html @@ -53,6 +53,7 @@ integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> + diff --git a/js/app.js b/js/app.js index 6c44ec1..0d53c5b 100644 --- a/js/app.js +++ b/js/app.js @@ -6,6 +6,7 @@ import { loadSkillsSection } from './components/skillSection.js'; import { loadContactSection } from './components/contactSection.js'; import { loadFooter } from './components/footer.js'; import { loadContactPage } from './components/contactPage.js'; +import { loadAboutPage } from './components/aboutPage.js'; const currentPage = window.location.pathname; @@ -26,3 +27,9 @@ if (currentPage.includes('index.html') || currentPage === '/') { if (currentPage.includes('contact.html')) { loadContactPage(); // Tam iletişim sayfası sadece `contact.html`de yüklenecek } + +// Sadece `about-me.html` sayfası için About Me içeriğini yükle +if (currentPage.includes('about-me.html')) { + loadAboutPage(); +} + diff --git a/js/components/aboutPage.js b/js/components/aboutPage.js new file mode 100644 index 0000000..af0641f --- /dev/null +++ b/js/components/aboutPage.js @@ -0,0 +1,223 @@ +export function loadAboutPage() { + const mainContent = document.getElementById("about-content"); + + if (mainContent) { + mainContent.innerHTML = ` +
+
+
    +

  • A

    • +

  • b

    • +

  • o

    • +

  • u

    • +

  • t

    • +

    • +

  • m

    • +

  • e

    • +
+
+ + +
+ +
+

+ 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 +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
PositionCompanyPeriod
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
+
+ +
+ + + +
+

+ Sosyal Medya +

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