diff --git a/README.md b/README.md index bbe6b53..e318616 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ Dieses Projekt ist eine persönliche Portfolio-Website von Orhan Güzel, einem Webentwickler, der sich auf die Gestaltung und Entwicklung moderner, responsiver Websites spezialisiert hat. Das Portfolio zeigt Fähigkeiten, abgeschlossene Projekte und Kontaktdaten in einem klaren und professionellen Design. + + ### Inhaltsverzeichnis: - [Startseite](#startseite) - [Über mich](#über-mich) diff --git a/about-me.html b/about-me.html index 2379ed5..f62805d 100644 --- a/about-me.html +++ b/about-me.html @@ -4,8 +4,6 @@ Guezel Webdesign | Professional Web Design and Development - - diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..a34ab25 --- /dev/null +++ b/contact.html @@ -0,0 +1,74 @@ + + + + + + + Guezel Webdesign | Professional Web Design and Development + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + + + + + diff --git a/contakt.html b/contakt.html deleted file mode 100644 index 93bfdcf..0000000 --- a/contakt.html +++ /dev/null @@ -1,220 +0,0 @@ - - - - - - Guezel Webdesign | Profesyonel Web Tasarım ve Geliştirme - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - -
- - - -
-
- - -
-
-
-

Contact Us

- contact -
-
- - - -
-
-

Get In Touch And Feel Free To Contact Us

-

- Feel free to reach out to us for any inquiries or assistance you may - need. Our team is dedicated to providing you with top-notch service - and answering all your questions. Whether you’re looking for more - information about our services, need support, or simply want to give - feedback, we’re here to help. Get in touch with us today! -

-
- -
-
-
-
- -
-
-

Office Location

-

13th Rock Street, San Francisco

-
-
-
-
- -
-
-

Phone Number

-

+235-569-559-66, +985-365-226-447

-
-
-
-
- -
-
-

Mail Address

-

support@example.com

-
-
-
- -
-
- - - - - -
-
-
-
- - - - - - - diff --git a/css/about-me.css b/css/about-me.css deleted file mode 100644 index 36046b5..0000000 --- a/css/about-me.css +++ /dev/null @@ -1,465 +0,0 @@ - -.about-me-hero { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - height: 90vh; - background: radial-gradient( - circle at center, - rgb(13, 31, 45, 0.8) 0%, - rgba(0, 0, 0, 1) 100% - ); -} - - -.dots { - list-style-type: none; - padding: 0; - position: relative; - display: flex; - justify-content: center; - margin: 50vh 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; -} - - - -.logos{ - width: 100%; - position: absolute; - overflow: visible; - text-align: 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; - 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: var(--text-color); - 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; -} - -.about-mee { - top: calc(50% - 100px); - left: 0%; - margin: 60px 0; -} - -.about-mee img{ - width: 200px; - height: 200px; - top: 20%; - left: 50%; - animation: bounceIn 450ms linear 4s forwards, neonBox1 1.5s ease-in-out infinite alternate; -} - -.about-mee .span{ - font-size:1.7rem; - animation-delay: 4s; -} - -/* logo-sport */ - -.sport { - top: calc(40% - 100px); - left: 30%; - } -.sport .span 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; -} - - - -/* logo-education */ - -.education { - top: calc(33% - 100px); - right: 30%; - margin: 60px 0; - } - .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; - } - - - -/* logo-sosial */ - -.sosial { - top: calc(87% - 100px); - left: 30%; - } - .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; - } - - - -/* logo-projets*/ - -.experince { - top: calc(80% - 100px); - right: 30%; - margin: 60px 0; - } - - .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 Section */ -.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: var(--h2-font-size); - font-weight: 700; - color: var(--highlight-color); - margin: 0 auto; -} - -.about-content { - margin: 60px 40px; - padding: 40px; - text-align: left; - line-height: 1.8; - border: 0.5px solid var(--text-color); - background-color: #1b2838; - border-radius: 10px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); -} - -.about-content:hover { - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9); -} - -.about-content p { - font-size: var(--p-font-size); -} - -/* Table Styling for Education and Experience */ -.table-section { - width: 90%; - margin: 20px auto; - border-collapse: collapse; - background-color: #1b2838; - border-radius: 10px; - 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: #0d1f2d; - font-weight: bold; - color: var(--highlight-color); - font-family: var(--font-family); -} - -.table-section tr:nth-child(even) { - background-color: #0d1f2d; -} - -.table-section tr:hover { - background-color: #19d6e3; - color: #000; -} -/* Sport Section */ -#sport { - padding: 60px 20px; - margin: 60px 40px; - text-align: center; - background-color: #1b2838; - border-radius: 10px; -} - -#sport h2 { - font-size: 2.5rem; - color: #19d6e3; - margin-bottom: 20px; -} - -#sport p { - margin-bottom: 20px; -} - -.sport-gallery { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 30px; -} - -.sport-card { - position: relative; - width: 250px; - height: 250px; - border-radius: 15px; - 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); -} - -/* Responsive Design */ -@media (max-width: 768px) { - .sport-card { - width: 100%; - height: 200px; - } - - .sport-gallery { - flex-direction: column; - gap: 20px; - } -} - -/* Social Media Section */ -#social-media { - padding: 40px 20px; - text-align: center; -} - -#social-media h2 { - font-size: var(--h2-font-size); - color: var(--highlight-color); - margin-bottom: 30px; -} -.btn-sosmed { - display: inline-block; - background: #e0e0e0; - width: 96px; - height: 96px; - margin: 8px; - border-radius: 50%; - box-shadow: 0 6px 16px -6px #000; - position: relative; - overflow: hidden; -} - -.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; -} - -.btn-sosmed i { - line-height: 96px; - font-size: 50px; - transition: 0.3s linear; -} - -.btn-sosmed:hover i { - transform: scale(1.2); - color: #e0e0e0; -} - -.btn-sosmed::before { - content: ""; - position: absolute; - width: 105%; - height: 150%; - transform: rotate(30deg); - left: -150%; - top: 90%; -} - -.btn-sosmed:hover::before { - animation: anim 0.6s 1; - left: 0; - top: -30%; -} - -.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%; - } -} - - - - -.logo-footer h4 { - color: var(--text-color); -} diff --git a/css/about.css b/css/about.css index 7da6e11..578a499 100644 --- a/css/about.css +++ b/css/about.css @@ -5,11 +5,6 @@ text-align: center; } -.about-me .section-title { - font-size: 2.5em; - color: var(--text-color); - margin-bottom: 30px; -} .about-content { margin: 0 auto; @@ -19,34 +14,25 @@ font-family: var(--font-family2); } - .about-content p { font-size: var(--p-font-size); color: var(--text-color); margin-bottom: 30px; } - +/* Responsive Design */ @media (max-width: 768px) { .about-me { padding: 30px 10px; } - .about-me .section-title { - font-size: 2em; - } - .about-content { font-size: 1em; line-height: 1.6; } } - @media (max-width: 480px) { - .about-me .section-title { - font-size: 1.8em; - } .about-content { font-size: 0.9em; diff --git a/css/contact-me.css b/css/contact-me.css index 454cdde..a9ab4bd 100644 --- a/css/contact-me.css +++ b/css/contact-me.css @@ -1,135 +1,78 @@ -/* Contact Section */ -.contact-hero { - position: relative; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - height: 50vh; - background: radial-gradient( - circle at center, - rgb(13, 31, 45, 0.5) 0%, - rgba(0, 0, 0, 1) 100% - ); - overflow: hidden; -} - -.contact-hero .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.7); - z-index: 1; -} - -.contact-hero .contact-content { - position: relative; - z-index: 2; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - animation: fadeIn 2s ease-out; -} - -.contact-hero .contact-image { - width: 400px; - max-width: 900px; - border-radius: 8px; - animation: fadeInImage 2s ease-out 0.5s forwards; -} - -.contact-hero h2 { - font-size: var(--h1-font-size); - color: var(--text-color); - margin-bottom: 20px; - animation: fadeInText 1.5s ease-out forwards; - letter-spacing: 2px; - z-index: 2; -} - -.contact-section { +/* Contact Page Section */ +.contact-page { background-color: var(--black-color); + padding: 40px 20px; + max-width: 1200px; + margin: 20px auto; } -.contact-info { +.section-title { text-align: center; - color: var(--highlight-color); - font-size: var(--h1-font-size); - margin: 20px 0; - padding: 20px; -} - -.contact-info h2 { - color: var(--text-color); } .contact-container { display: flex; flex-wrap: wrap; - justify-content: space-between; + justify-content: center; align-items: flex-start; - width: 100%; - max-width: 1200px; + max-width: 1000px; margin: 0 auto; padding: 20px; gap: 30px; } .contact-cards { - flex: 1 1 400px; + flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: space-between; - min-height: 680px; - margin: 0 auto; background-color: var(--secondary-color); border: 0.5px solid rgba(255, 255, 255, 0.1); border-radius: 8px; + padding: 20px; } .contact-cards .card { - flex: 1 1 350px; + flex: 1 1 250px; display: flex; flex-direction: column; - align-items: flex-start; + align-items: center; padding: 20px; - margin: 20px 10px; background-color: #000c14; border: 0.5px solid rgba(255, 255, 255, 0.1); border-radius: 8px; + margin: 15px; } .card .icon i { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 10px; - font-size: 1.5em; + font-size: 2em; color: var(--highlight-color); width: 60px; height: 60px; border: 1px solid var(--highlight-color); border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 15px; } .card .info h3 { - font-size: var(--h3-font-size); - margin-bottom: 20px; + font-size: 1.5em; + margin-bottom: 10px; color: var(--text-color); font-family: var(--font-family2); + text-align: center; } .contact-form { - flex: 1 1 400px; - min-height: 680px; + flex: 1 1 100%; + max-width: 600px; + margin: 0 auto; background-color: var(--secondary-color); border: 0.5px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 20px; - margin: 0 auto; } .contact-form form { @@ -155,38 +98,41 @@ button { width: 140px; + align-self: center; + margin-top: 10px; } -.logo-footer h4 { - color: var(--text-color); -} - - - -/* Responsive for smaller screens */ -@media (max-width: 780px) { - .contact-hero h2 { - font-size: var(--h2-font-size); - } - .contact-hero .contact-image { - max-width: 150px; - } +/* Responsive Design for smaller screens */ +@media (max-width: 768px) { .contact-container { - flex-direction: column; + padding: 10px; + gap: 10px; } .contact-cards, .contact-form { width: 100%; min-height: auto; + } - .contact-cards { + .contact-cards .card { width: 100%; + max-width: 350px; } - .contact-cards .card { - align-items: center; + .contact-form { + width: 100%; + padding: 15px; + } + + .card .info h3 { + font-size: 1.2em; /* Başlık boyutunu küçült */ + } + + .contact-form input, + .contact-form textarea { + font-size: 1em; } } diff --git a/css/contact.css b/css/contact.css index 91452e7..48a9899 100644 --- a/css/contact.css +++ b/css/contact.css @@ -1,16 +1,10 @@ /* Contact Section */ -.contact { +.contact-summary{ padding: 50px 20px; background: radial-gradient(circle at center, rgb(13, 31, 45, 0.5) 0%, rgba(0, 0, 0, 0.9) 100%); text-align: center; } -.contact .section-title { - font-size: 2.5em; - color: var(--text-color); - margin-bottom: 30px; -} - .contact p{ margin-bottom: 30px; } @@ -29,9 +23,6 @@ /* Responsive Design */ @media (max-width: 768px) { - .contact .section-title { - font-size: 2em; - } .contact-description { font-size: 1em; diff --git a/css/footer.css b/css/footer.css index ecc1fe4..dd522bb 100644 --- a/css/footer.css +++ b/css/footer.css @@ -14,9 +14,33 @@ padding: 10px; } +.logo-footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 20px; +} + +.logo-footer img { + width: 120px; + height: 120px; +} + +.logo-footer .section-title { + font-size: var(--h2-font-size); + color: var(--text-color); + margin-bottom: 20px; + text-align: center; +} + +.highlight-footer { + font-size: var(--h2-font-size); + color: var(--highlight-color); +} + /* Footer Content Layout */ .footer-content { - max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; @@ -80,9 +104,7 @@ margin-top: 40px; } -.copyright { - font-size: 0.9em; -} + /* Scroll to Top Button */ .scroll-to-top { @@ -103,21 +125,20 @@ z-index: 1000; } -.logo-footer { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-bottom: 20px; -} - -.logo-footer img { - width: 150px; - height: 150px; -} - /* Responsive */ -@media (max-width: 768px) { +@media (max-width: 768px) { + + .logo-footer img { + width: 80px; + height: 80px; + } + .logo-footer .section-title { + font-size: var(--h3-font-size); + } + + .highlight-footer{ + font-size: var(--h3-font-size); + } .footer-content { flex-direction: column; align-items: flex-start; @@ -127,6 +148,8 @@ margin-bottom: 30px; } + + .scroll-to-top { display: none; } diff --git a/css/global.css b/css/global.css deleted file mode 100644 index c4d96a8..0000000 --- a/css/global.css +++ /dev/null @@ -1,115 +0,0 @@ -/* Global Styles */ - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - background-color: var(--secondary-color); - color: var(--text-color); - font-size: var(--base-font-size); - line-height: 1.6; - overflow-x: hidden; -} - -h1 { - font-size: var(--h1-font-size); - color: var(--highlight-color); - font-family: var(--font-family); -} - -h2 { - font-size: var(--h2-font-size); - color: var(--highlight-color); - font-family: var(--font-family); -} - -h4 { - font-size: var(--h4-font-size); - color: var(--highlight-color); - font-family: var(--font-family); -} - - -.main-nav { - display: flex; - justify-content: space-between; - align-items: center; - background: rgba(0, 0, 0, 0.9); - width: 100%; - padding: 10px 20px; -} - -.main-nav .logo { - display: flex; - align-content: center; - justify-content: center; - height: 50px; -} - -.main-nav .logo img { - display: flex; - align-items: center; - justify-content: center; - width: 50px; - height: 50px; -} - -.main-nav .logo h4 { - font-size: var(--h4-font-size); - font-family: var(--font-family); - color: var(--text-color); - margin: auto 0; -} - -span{ - color: var(--highlight-color); - font-family: var(--font-family); -} - - -.main-nav nav ul { - display: flex; - list-style-type: none; -} - -.main-nav nav ul li { - margin: 0 5px; -} - -.main-nav nav ul li a { - color: white; - text-decoration: none; - font-size: 1.2rem; - transition: color 0.3s ease; - font-family: var(--font-family); -} - -p { - font-family: var(--font-family2); - font-size: var(--p-font-size); - color: var(--text-color); -} - -/* Butonlar */ -button, .btn, .explore-btn { - font-family: var(--font-family); - background-color: var(--btn-bg-color); - color: var(--btn-text-color); - padding: var(--btn-padding); - border-radius: var(--btn-radius); - text-decoration: none; - font-size: 1.2em; - display: inline-block; - cursor: pointer; - transition: background-color 0.4s ease, transform 0.3s ease; -} - -button:hover, .btn:hover, .explore-btn:hover { - background-color:var(--text-color); - box-shadow: 2px 2px 10px rgba(252, 247, 247, 0.8); - transform: scale(1.05); -} - diff --git a/css/hamburger.css b/css/header.css similarity index 54% rename from css/hamburger.css rename to css/header.css index 44c77df..cbd99ea 100644 --- a/css/hamburger.css +++ b/css/header.css @@ -1,5 +1,68 @@ +/* Ana Header ve Navbar Stili */ +.main-nav { + display: flex; + justify-content: space-between; + align-items: center; + background: rgba(0, 0, 0, 0.9); + margin:0; + padding: 20px; + position: relative; + z-index: 100; + box-shadow: 0 2px 5px rgba(202, 128, 128, 0.2); + +} + + +/* Logo Stili */ +.main-nav .logo { + display: flex; + align-items: center; + justify-content: center; + height: 50px; + gap: 10px; +} + +.main-nav .logo img { + width: 50px; + height: 50px; +} + +.main-nav .logo h4 { + font-size: var(--a-font-size); + font-family: var(--font-family); + color: var(--text-color); + margin: 0; + line-height: 1; +} + + +.main-nav .logo span { + font-size: var(--p-font-size); +} + +/* Navbar Menü Stili */ +.main-nav nav ul { + display: flex; + list-style-type: none; +} + +.main-nav nav ul li { + margin: 0 10px; +} + +.main-nav nav ul li a { + color: white; + text-decoration: none; + font-size: 1.2rem; + transition: color 0.3s ease; + font-family: var(--font-family); +} -/* Hamburger Menü Stili - Küçük Ekranlarda */ +.main-nav nav ul li a:hover { + color: var(--highlight-color); +} + +/* Hamburger Menü - Küçük Ekranlar için */ .hamburger-menu { display: flex; flex-direction: column; @@ -7,10 +70,10 @@ width: 30px; height: 21px; cursor: pointer; - z-index: 100; + z-index: 101; + transition: transform 0.3s ease; } -/* Hamburger Menü Barları */ .hamburger-menu .bar { height: 3px; width: 100%; @@ -19,33 +82,33 @@ transition: all 0.3s ease; } -/* Mobil Menünün Varsayılan Durumu - Gizli */ +/* Mobil Menü Varsayılan Durumu */ .nav-menu { - display: none; + display: flex; flex-direction: column; - background-color: rgba(0, 0, 0, 0.9); - position: absolute; - top: 70px; + background-color: rgba(244, 157, 157, 0.9); + position: fixed; + top: 0; right: 0; width: 100%; height: 100vh; justify-content: center; align-items: center; - transition: transform 0.4s ease; - transform: translateX(100%); - z-index: 99; + transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease; + transform: translateX(100%); opacity: 0; visibility: hidden; + z-index: 99; } /* Menü Açıldığında Görünür */ .nav-menu.show { - transform: translateX(0); + transform: translateX(0); opacity: 1; visibility: visible; } -/* Menü içindeki bağlantılar */ +/* Menü içindeki bağlantılar - Mobil */ .nav-menu li { list-style: none; margin: 20px 0; @@ -78,7 +141,7 @@ /* Büyük Ekranlar için Navbar */ @media (min-width: 1024px) { .nav-menu { - display: flex; + display: flex; flex-direction: row; position: static; background-color: transparent; @@ -87,7 +150,7 @@ align-items: center; opacity: 1; visibility: visible; - transform: none; + transform: none; } /* Hamburger menü büyük ekranlarda gizlenir */ @@ -113,3 +176,10 @@ color: var(--highlight-color); } } + +/* Responsive için daha küçük padding */ +@media (max-width: 768px) { + .main-nav { + padding: 10px 15px; + } +} diff --git a/css/hero.css b/css/hero.css index 980f81c..297eaaa 100644 --- a/css/hero.css +++ b/css/hero.css @@ -5,7 +5,7 @@ text-align: center; padding: 20px; height: 80vh; - background: radial-gradient(circle at center, rgb(13, 31, 45, 0.5) 0%, rgba(0, 0, 0, 1) 100%); + background: radial-gradient(circle at center, rgba(13, 31, 45, 0.5) 0%, rgba(0, 0, 0, 1) 100%); position: relative; } @@ -21,6 +21,12 @@ color: var(--text-color); } +.highlight-text { + color: var(--highlight-color); + font-size: 1.5rem; + font-weight: bold; +} + .hero-content > p { margin-bottom: 20px; } @@ -69,7 +75,22 @@ font-size: 2.5rem; } + .highlight-text { + font-size: var(--h2-font-size); + } + .hero-content > p { font-size: 1.5rem; } } + +/* Animations */ +@keyframes fadeIn { + 0% { opacity: 0; transform: translateY(-20px); } + 100% { opacity: 1; transform: translateY(0); } +} + +@keyframes fadeInImage { + 0% { opacity: 0; transform: scale(0.9); } + 100% { opacity: 1; transform: scale(1); } +} diff --git a/css/layout.css b/css/layout.css new file mode 100644 index 0000000..ea07eb2 --- /dev/null +++ b/css/layout.css @@ -0,0 +1,141 @@ +/* layout.css */ + +/* Genel Etiket Ayarları */ + +html, +body { + overflow-x: hidden; + margin: 0; + padding: 0; + box-sizing: border-box; + width: 100%; +} + +body { + background-color: var(--secondary-color); + line-height: 1.6; + line-height: 1.2; + letter-spacing: 1.2px; +} + +h1 { + font-size: var(--h1-font-size); + font-family: var(--font-family); + color: var(--highlight-color); +} +h2 { + font-size: var(--h2-font-size); + font-family: var(--font-family); + color: var(--text-color); +} +h3 { + font-size: var(--h3-font-size); + font-family: var(--font-family); + color: var(--highlight-color); +} +h4 { + font-size: var(--h4-font-size); + font-family: var(--font-family); + color: var(--highlight-color); +} +span { + font-size: var(--a-font-size); + font-family: var(--font-family); + color: var(--highlight-color); +} +a { + font-size: var(--a-font-size); + font-family: var(--font-family2); + color: var(--text-color); + text-decoration: none; + transition: color 0.3s; +} +p { + font-size: var(--a-font-size); + font-family: var(--font-family2); + color: #555; + line-height: 1.2; +} + +p { + font-family: var(--font-family2); + font-size: var(--a-font-size); + color: var(--text-color); +} + +.main-nav nav ul { + display: flex; + list-style-type: none; +} + +.main-nav nav ul li { + margin: 0 5px; +} + + +.section-title .highlight { + font-size: var(--h2-font-size); + color: var(--highlight-color); +} + +/* Butonlar */ +button, +.btn, +.explore-btn { + font-family: var(--font-family); + background-color: var(--btn-bg-color); + color: var(--btn-text-color); + padding: var(--btn-padding); + border-radius: var(--btn-radius); + text-decoration: none; + font-size: var(--a-font-size); + display: inline-block; + cursor: pointer; + transition: background-color 0.4s ease, transform 0.3s ease; +} + +button:hover, +.btn:hover, +.explore-btn:hover { + background-color: var(--text-color); + box-shadow: 2px 2px 10px rgba(252, 247, 247, 0.8); + transform: scale(1.05); +} + +/* Responsive Ayarlar */ +@media (max-width: 768px) { + h1 { + font-size: 1.75rem; + } + h2 { + font-size: 1.5rem; + } + h3 { + font-size: 1.2rem; + } + h4 { + font-size: 1rem; + } + span { + font-size: 0.8rem; + } + a { + font-size: 0.8rem; + } + p { + font-size: 0.8rem; + } + + .section-title { + font-size: var(--h3-font-size); + } + + .section-title .highlight { + font-size: var(--h3-font-size); + } + + button { + padding: 0.5rem 1rem; + font-size: 0.8rem; + } +} diff --git a/css/portfolio.css b/css/portfolio.css index 78969d9..0d99c02 100644 --- a/css/portfolio.css +++ b/css/portfolio.css @@ -1,157 +1,129 @@ -/* Portfolio Section Styles */ -.portfolio-hero { - position: relative; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - height: 50vh; - background: radial-gradient( - circle at center, - rgb(13, 31, 45, 0.5) 0%, - rgba(0, 0, 0, 1) 100% - ); - overflow: hidden; -} - -.portfolio-hero .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.7); - z-index: 1; - opacity: 0; -} - -.portfolio-hero .portfolio-content { - position: relative; - z-index: 2; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - animation: fadeIn 2s ease-out; -} - -.portfolio-hero .portfolio-image { - width: 400px; - max-width: 900px; - border-radius: 8px; - animation: fadeInImage 2s ease-out 0.5s forwards; -} - -.portfolio-hero h2 { - font-size: var(--h1-font-size); - color: var(--text-color); - margin-bottom: 20px; - animation: fadeInText 1.5s ease-out forwards; - letter-spacing: 2px; - z-index: 2; -} - -.portfolio-section { +/* Projects Section Genel Ayarlar */ +.projects { padding: 50px 20px; - background-color: var(--secondary-color); + background: radial-gradient(circle at center, rgb(13, 31, 45, 0.5) 0%, rgba(0, 0, 0, 0.9) 100%); text-align: center; - z-index: 1; - max-width: 1200px; - margin: 0 auto; } -.section-title { - font-size: 2.5em; - color: var(--highlight-color); - margin-bottom: 20px; - color: var(--text-color); -} + .section-description { - font-size: 1.2em; + font-size: 1.1rem; color: var(--text-color); - margin-bottom: 40px; + margin: 0 auto 40px; + max-width: 800px; } -/* Project Card Styles */ -.projects-card { +/* Projects Layout */ +.projects-section { display: flex; - flex-wrap: wrap; - align-items: center; justify-content: center; - background-color: #1b2838; - padding: 30px; - border-radius: 15px; - margin-bottom: 40px; - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); - z-index: -1; + gap: 30px; + flex-wrap: wrap; } -.projects-image { - flex: 1 1 300px; +.project-item { + position: relative; + width: 100%; max-width: 450px; - margin-bottom: 20px; + height: 350px; border-radius: 8px; + overflow: hidden; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); + margin-bottom: 40px; + transition: transform 0.3s ease, box-shadow 0.3s ease; } -.projects-details { - flex: 1 1 300px; - max-width: 450px; - color: white; - text-align: left; - margin-left: 20px; - overflow: hidden; - min-width: 350px; - z-index: 1; +.project-item:hover { + transform: translateY(-5px); + box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4); } -.projects-details h3 { - font-size: 2em; - margin-bottom: 10px; - font-family: var(--font-family); - color:var(--highlight-color); +.project-image-wrapper { + width: 100%; + height: 100%; overflow: hidden; } -.projects-details p { - font-size: 1.1em; - margin-bottom: 10px; - overflow: hidden; +.project-image-wrapper img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; } -.projects-details ul { - text-align: left; - list-style: disc; - padding-left: 20px; - margin-bottom: 20px; +.project-item:hover .project-image-wrapper img { + transform: scale(1.05); } -.projects-details ul li { - font-size: 1.1em; +/* Project Details */ +.project-details { + position: absolute; + bottom: 10%; + left: 0; + width: 100%; + background: rgba(27, 40, 56, 0.85); + color: var(--text-color); + padding: 15px 20px; + text-align: center; + border-radius: 0 0 8px 8px; + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5); +} + +.project-details h3 { + font-size: 1.4em; + margin-bottom: 8px; + color: var(--highlight-color); +} + +.project-details p { + font-size: 1em; + color: var(--text-color); margin-bottom: 5px; - font-family: var(--font-family2); } -.projects-details h4 { - font-size: 1.3em; - margin-bottom: 10px; +.project-link { + font-size: 1em; + color: var(--highlight-color); + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; } -.logo-footer h4{ +.project-link:hover { color: var(--text-color); } +/* View All Button */ +.view-all .btn { + display: inline-block; + padding: 10px 20px; + font-size: 1em; + border-radius: 20px; + background-color: var(--highlight-color); + color: var(--text-color); + text-decoration: none; + transition: background-color 0.3s ease; +} + +.view-all .btn:hover { + background-color: var(--text-color); + color: var(--highlight-color); +} + /* Responsive Design */ -@media (min-width: 768px) { - .project-card { - flex-direction: row; - align-items: flex-start; - justify-content: space-between; +@media (max-width: 768px) { + .projects-section { + flex-direction: column; + align-items: center; + } + + .project-item { + max-width: 100%; + height: auto; } - .project-image { - width: 100%; - max-width: 500px; - margin-bottom: 20px; + .section-description { + font-size: 1rem; } } diff --git a/css/projects.css b/css/projects.css deleted file mode 100644 index f4e7813..0000000 --- a/css/projects.css +++ /dev/null @@ -1,122 +0,0 @@ -/* Projects Section */ -.projects { - padding: 50px 20px; - background: radial-gradient(circle at center, rgb(13, 31, 45, 0.5) 0%, rgba(0, 0, 0, 0.9) 100%); - text-align: center; -} - -.section-title { - font-size: var(--h2-font-size); - color: var(--text-color); - margin-bottom: 20px; -} - -.section-title h2 { - font-size: var(--h2-font-size); - color: var(--text-color); - margin-bottom: 20px; -} - -.section-title h2 span { - color: var(--highlight-color); -} - -.section-description { - font-size: var(--p-font-size); - color: var(--text-color); - margin-bottom: 50px; - margin: 50px auto; -} - - -.projects-section { - display: flex; - justify-content: center; - gap: 50px; - flex-wrap: wrap; -} - -.project-item { - position: relative; - width: 100%; - max-width: 600px; - height: 450px; - border-radius: 10px; - overflow: hidden; - margin-bottom: 50px; -} - - -.project-image-wrapper { - position: relative; - width: 100%; - height: 100%; - z-index: 1; -} - -.project-image-wrapper img { - flex:1 1 400px; - height: 100%; - object-fit: cover; - z-index: 2; -} - -/* Project Details */ -.project-details { - position: absolute; - top: 50%; - left: 5%; - background-color: #1b2838; - color: var(--text-color); - padding: 20px; - text-align: center; - border-radius: 10px; - z-index: 10; - box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5); - width: 90%; - -} - -/* Project Details Heading */ -.project-details h3 { - font-size: 1.8em; - margin-bottom: 10px; - font-family: var(--font-family); -} - -.project-details p { - font-size: 1.1em; - overflow: hidden; -} - -/* Project Link */ -.project-link { - font-size: 1.1em; - color: var(--highlight-color); - text-decoration: none; - font-family: var(--font-family); -} - -.project-details a:hover { - color: var(--text-color); - transition: color 0.4s ease, transform 0.4s ease; -} - -.view-all .btn { - display: inline-block; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .project-item { - width: 100%; - } - - .projects-section { - flex-direction: column; - } - - .project-details { - width: 90%; - } -} diff --git a/css/root.css b/css/root.css index 6e6ddfd..a75c899 100644 --- a/css/root.css +++ b/css/root.css @@ -7,14 +7,23 @@ --font-family: 'Orbitron', sans-serif; --font-family2: 'Roboto', sans-serif; + --base-font-size: 16px; --h1-font-size: 3rem; --h2-font-size: 2.5rem; + --h3-font-size: 2rem; --h4-font-size: 1.5rem; - --p-font-size: 1.2rem; + --a-font-size: 1.2rem; --btn-padding: 10px 20px; --btn-radius: 20px; --btn-bg-color: var(--primary-color); --btn-text-color: black; } + +body { + margin: 0; + padding: 0; + box-sizing: border-box; + background-color: var(--background-light); +} diff --git a/css/skills.css b/css/skills.css index 26b4553..bfd8361 100644 --- a/css/skills.css +++ b/css/skills.css @@ -5,16 +5,6 @@ text-align: center; } -.section-title { - font-size: 2.5em; - color: var(--text-color); - margin-bottom: 40px; -} - -.section-title span { - color: var(--highlight-color); -} - .skill-flex { display: flex; flex-wrap: wrap; diff --git "a/img/Ads\304\261z tasar\304\261m.png" "b/img/Ads\304\261z tasar\304\261m.png" new file mode 100644 index 0000000..51fcd9e Binary files /dev/null and "b/img/Ads\304\261z tasar\304\261m.png" differ diff --git a/img/loggo.png b/img/loggo.png new file mode 100644 index 0000000..16c3177 Binary files /dev/null and b/img/loggo.png differ diff --git a/img/logo1.png b/img/logo1.png index b80ef71..8859d80 100644 Binary files a/img/logo1.png and b/img/logo1.png differ diff --git a/img/personalFoto.png b/img/personalFoto.png new file mode 100644 index 0000000..90c745c Binary files /dev/null and b/img/personalFoto.png differ diff --git a/index.html b/index.html index df2cd5f..3e8cc4f 100644 --- a/index.html +++ b/index.html @@ -31,271 +31,57 @@ - - - - - - + + - + + - - - + + - - - - - - - -
-

Loading...

-
-
-
-
- - - -
- - -
- - - -
-
- - -
- -
-
-

- Transforming Ideas into - Digital Experiences -

-

- I am a web developer specializing in creating unique, - high-performance websites and web applications. With a focus on user - experience and modern design, I bring ideas to life on the web. -

-
- Explore My Work -
-
-
-
- -
-

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

-
-
- View Detail -
-
-
- - -
-
-

My Portfolio

-

- Explore some of the key projects I've completed, ranging from - restaurant websites to industrial solutions, helping clients bring - their online presence to life. -

-
- -
- -
-
- Antalya Döner Pizzeria Website -
-
-

Antalya Döner Pizzeria

-

- A website developed for a popular Döner restaurant in Germany. -

- View Details → -
-
- - -
-
- Miss Et Website -
-
-

Miss Et & Balik

-

- A website developed for a popular restaurant in der Türkei -

- View Details → -
-
-
- -
- View All Portfolio -
-
+ + - -
-

My Skills

-
- - -
-

Frontend Development

-
HTML

HTML

-
CSS

CSS

-
Sass

Sass

-
Bootstrap

Bootstrap

-
JavaScript

JavaScript

-
React.js

React.js

-
- - -
-

Backend Development

-
Node.js

NodeJS

-
Express.js

Express.js

-
MongoDB

MongoDB

-
MySQL

MySQL

-
Postman

Postman

-
- - -
-

UI/UX Design

-
Figma

Figma

-
Canva

Canva

-
Adobe Photoshop

Adobe Photoshop

-
- - -
-

Other Skills

-
SEO

SEO

-
Git

Git

-
GitHub

GitHub

-
WordPress

WordPress

-
- -
-
+ + + + + + + - -
-

- Get in Touch -

-

- If you would like to work together or have any questions, feel free to - reach out to me. -

-
- Contact Me - -
+ +
+ + + + + +
- - + + -
- - - + + + diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..6c44ec1 --- /dev/null +++ b/js/app.js @@ -0,0 +1,28 @@ +import { loadHeader } from './components/header.js'; +import { loadHeroSection } from './components/heroSection.js'; +import { loadAboutMeSection } from './components/aboutMeSection.js'; +import { loadProjectsSection } from './components/portfolyoSection.js'; +import { loadSkillsSection } from './components/skillSection.js'; +import { loadContactSection } from './components/contactSection.js'; +import { loadFooter } from './components/footer.js'; +import { loadContactPage } from './components/contactPage.js'; + +const currentPage = window.location.pathname; + +// Tüm sayfalarda geçerli olan bileşenleri yükle +loadHeader(); +loadFooter(); + +// Ana sayfa (index.html) için bileşenleri yükle +if (currentPage.includes('index.html') || currentPage === '/') { + loadHeroSection(); + loadAboutMeSection(); + loadProjectsSection(); + loadSkillsSection(); + loadContactSection(); // Yalnızca `index.html` için kısa iletişim bölümü yüklenecek +} + +// `contact.html` sayfasında yalnızca tam iletişim sayfası yüklenir +if (currentPage.includes('contact.html')) { + loadContactPage(); // Tam iletişim sayfası sadece `contact.html`de yüklenecek +} diff --git a/js/components/aboutMeSection.js b/js/components/aboutMeSection.js new file mode 100644 index 0000000..27cb2f3 --- /dev/null +++ b/js/components/aboutMeSection.js @@ -0,0 +1,21 @@ +export function loadAboutMeSection() { + const aboutMeSection = document.getElementById('about-me-section'); + aboutMeSection.innerHTML = ` +
+

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

+
+
+ View Detail +
+
+
+ `; + } + \ No newline at end of file diff --git a/js/components/contactPage.js b/js/components/contactPage.js new file mode 100644 index 0000000..e2af451 --- /dev/null +++ b/js/components/contactPage.js @@ -0,0 +1,65 @@ +export function loadContactPage() { + const contactSection = document.getElementById('contact'); + if (contactSection) { + contactSection.innerHTML = ` +
+

Get In Touch And Feel Free To Contact Us

+

+ Feel free to reach out to us for any inquiries or assistance you may + need. Our team is dedicated to providing you with top-notch service + and answering all your questions. Whether you’re looking for more + information about our services, need support, or simply want to give + feedback, we’re here to help. Get in touch with us today! +

+ +
+
+
+
+ +
+
+

Office Location

+

13th Rock Street, San Francisco

+
+
+
+
+ +
+
+

Phone Number

+

+235-569-559-66, +985-365-226-447

+
+
+
+
+ +
+
+

Mail Address

+

support@example.com

+
+
+
+ +
+
+ + + + + +
+
+
+
+ `; + } else { + console.log("Element with id 'contact' not found."); + } +} + +document.addEventListener('DOMContentLoaded', () => { + loadContactPage(); +}); diff --git a/js/components/contactSection.js b/js/components/contactSection.js new file mode 100644 index 0000000..9f88cd1 --- /dev/null +++ b/js/components/contactSection.js @@ -0,0 +1,19 @@ +export function loadContactSection() { + const contactSection = document.getElementById('contact-section'); + if (contactSection) { // DOM'da `contact-section` olup olmadığını kontrol edin + contactSection.innerHTML = ` +
+

+ Get in Touch +

+

+ If you would like to work together or have any questions, feel free to + reach out to me. +

+
+ Contact Me +
+
+ `; + } +} diff --git a/js/components/footer.js b/js/components/footer.js new file mode 100644 index 0000000..2567439 --- /dev/null +++ b/js/components/footer.js @@ -0,0 +1,60 @@ +export function loadFooter() { + const footer = document.getElementById('footer'); + footer.innerHTML = ` + + `; +} diff --git a/js/components/header.js b/js/components/header.js new file mode 100644 index 0000000..a9609d3 --- /dev/null +++ b/js/components/header.js @@ -0,0 +1,57 @@ +export function loadHeader() { + const header = document.getElementById("header"); + + // Şu anki sayfanın adını belirleyin + const currentPage = window.location.pathname.split("/").pop(); + + // Sayfaya göre farklı linkler tanımlayın + const linkPrefix = currentPage === "index.html" ? "" : "index.html"; + + header.innerHTML = ` +
+ + +
+ + + +
+
+ `; + + // Hamburger menü işlevselliği + const hamburgerMenu = header.querySelector('.hamburger-menu'); + const navMenu = header.querySelector('.nav-menu'); + + hamburgerMenu.addEventListener('click', function () { + navMenu.classList.toggle('show'); + hamburgerMenu.classList.toggle('open'); + + // Menü açıldığında sayfa kaydırmasını durdur + if (navMenu.classList.contains('show')) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = 'auto'; + } + }); + + // Menü dışında bir yere tıklandığında menüyü kapat + document.addEventListener('click', function (event) { + if (!header.contains(event.target) && navMenu.classList.contains('show')) { + navMenu.classList.remove('show'); + hamburgerMenu.classList.remove('open'); + document.body.style.overflow = 'auto'; + } + }); +} diff --git a/js/components/heroSection.js b/js/components/heroSection.js new file mode 100644 index 0000000..1afe188 --- /dev/null +++ b/js/components/heroSection.js @@ -0,0 +1,19 @@ +export function loadHeroSection() { + const heroSection = document.getElementById('hero-section'); + heroSection.innerHTML = ` +
+
+

Transforming Ideas into Digital Experiences

+

+ I am a web developer specializing in creating unique, high-performance websites and web applications. + With a focus on user experience and modern design, I bring ideas to life on the web. +

+
+ Explore My Work +
+
+
+
+ `; + } + \ No newline at end of file diff --git a/js/components/loader.js b/js/components/loader.js new file mode 100644 index 0000000..8b852cd --- /dev/null +++ b/js/components/loader.js @@ -0,0 +1,12 @@ +export function loadLoader() { + const loader = document.getElementById('loader'); + loader.innerHTML = ` +
+

Loading...

+
+
+
+
+ `; + } + \ No newline at end of file diff --git a/js/components/portfolyoSection.js b/js/components/portfolyoSection.js new file mode 100644 index 0000000..5d76b3f --- /dev/null +++ b/js/components/portfolyoSection.js @@ -0,0 +1,49 @@ +export function loadProjectsSection() { + const projectsSection = document.getElementById('projects-section'); + projectsSection.innerHTML = ` +
+

+ My Portfolio

+

+ Explore some of the key projects I've completed, ranging from + restaurant websites to industrial solutions, helping clients bring + their online presence to life. +

+ + +
+ +
+
+ Antalya Döner Pizzeria Website +
+
+

Antalya Döner Pizzeria

+

+ A website developed for a popular Döner restaurant in Germany. +

+ View Details → +
+
+ + +
+
+ Miss Et Website +
+
+

Miss Et & Balik

+

+ A website developed for a popular restaurant in der Türkei +

+ View Details → +
+
+
+ +
+ View All Portfolio +
+
+ `; +} diff --git a/js/components/skillSection.js b/js/components/skillSection.js new file mode 100644 index 0000000..556cf65 --- /dev/null +++ b/js/components/skillSection.js @@ -0,0 +1,50 @@ +export function loadSkillsSection() { + const skillsSection = document.getElementById('skills-section'); + skillsSection.innerHTML = ` +
+

My Skills

+
+ + +
+

Frontend Development

+
HTML

HTML

+
CSS

CSS

+
Sass

Sass

+
Bootstrap

Bootstrap

+
JavaScript

JavaScript

+
React.js

React.js

+
+ + +
+

Backend Development

+
Node.js

NodeJS

+
Express.js

Express.js

+
MongoDB

MongoDB

+
MySQL

MySQL

+
Postman

Postman

+
+ + +
+

UI/UX Design

+
Figma

Figma

+
Canva

Canva

+
Adobe Photoshop

Adobe Photoshop

+
+ + +
+

Other Skills

+
SEO

SEO

+
Git

Git

+
GitHub

GitHub

+
WordPress

WordPress

+
+ +
+
+ `; + } + \ No newline at end of file