/* Google Fonts kullanımı için:
Bu satırı HTML içine eklemelisin:
*/
.poppins-bold {
font-family: var(--poppins-bold);
font-weight: 700;
}
.poppins-light {
font-family: var(--poppins-light);
font-weight: 300;
}
.poppins-semibold {
font-family: var(--poppins-semibold);
font-weight: 600;
}
:root {
--color-bg: #262329;
--color-bg-2: #39353d;
--color-text-light: #ddd5e6;
--poppins-bold: 'Poppins', sans-serif;
--poppins-light: 'Poppins', sans-serif;
--poppins-semibold: 'Poppins', sans-serif;
}
body {
background-color: var(--color-bg);
margin: 0;
background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.015) 1%, transparent 30%),
radial-gradient(circle at 75% 75%, rgba(255,255,255,0.01) 1%, transparent 30%);
background-repeat: repeat;
background-size: 400px 400px;
scroll-behavior: smooth;
}
h1, h2, h3 {
font-family: var(--poppins-bold);
margin: 0;
}
section{
scroll-margin-top: 80px;
}
h2{
margin-bottom:50px;
font-size: 60px;
color: var(--color-text-light)
}
a{
color: var(--color-text-light);;
text-decoration: none;
}
span{
font-family: var(--poppins-semibold);
}
.big-title{
font-size: 150px;
font-family: var(--poppins-bold);
color: var(--color-text-light);
}
.normal-title{
font-size: 40px;
font-family: var(--poppins-light);
color: var(--color-text-light);
letter-spacing: 35px;
}
#swipe-down{
display:flex;
flex-direction: column;
align-items: center;
position: absolute;
bottom: 20px;
color: var(--color-text-light)
}
#header {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(145deg, var(--color-bg), var(--color-bg-2));
}
#navbar{
background-color: var(--color-bg);
width: 100%;
height: 80px;
display:flex;
position: fixed;
align-items: center;
justify-content: center;
color: var(--color-text-light);
gap:30px;
z-index: 999;
}
#navbar span{
font-family: var(--poppins-light);
}
.nav-logo-link{
display: flex;
justify-content: center;
align-items: center;
height: 80%;
position: absolute;
left: 10%;
}
.nav-logo{
height: 100%;
}
.navbar-links{
display: flex;
gap:30px;
}
/* ABOUT ME */
#about-me{
background: radial-gradient(circle at top left, var(--color-bg-2), var(--color-bg));
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 50px 0 100px 0;
}
.about-me-container{
width: 60%;
height: 40vh;
display: flex;
justify-content: center;
align-items: center;
text-align: justify;
gap:100px;
padding:20px;
}
.about-me-container img{
width: 400px;
border-radius: 100%;
}
.about-me-p{
color:var(--color-text-light);
font-family: var(--poppins-light);
}
/* TECHNOLOGIES */
#technologies{
background: linear-gradient(60deg, var(--color-bg), var(--color-bg-2));
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 50px 0 100px 0;
}
.technologies-container{
width: 50%;
height: auto;
display:flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
gap: 20px;
}
.single-technology{
height: max-content;
padding:10px 20px 10px 20px;
background-color: var(--color-text-light);
color: var(--color-bg);
border-radius: 20px;
font-weight: 600;
}
/* PROJECTS */
#projects{
background: linear-gradient(120deg, var(--color-bg-2), var(--color-bg));
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 50px 0 100px 0;
}
.projects-container{
display:flex;
gap:30px;
flex-wrap: wrap;
}
.project-details{
display:flex;
flex-direction: column;
align-items: center;
text-align: center;
gap:20px;
flex:1;
padding:0 10px 0 10px;
}
.single-project{
background-color: var(--color-bg);
width: 300px;
min-height: 100%;
border-radius: 30px;
padding-bottom:20px;;
display:flex;
flex-direction: column;
align-items: center;
text-align: center;
gap:20px;
overflow: hidden;
}
.single-project img{
object-fit: cover;
object-position: center top;
max-height: 100px;
}
.single-project, .project-title, .project-description{
color: var(--color-text-light)
}
.single-project .project-title{
font-size:30px;
margin-top: 20px;
}
.single-project .project-description{
font-family: var(--poppins-light);
font-size:15px;
padding: 0 10px 0 10px;
}
.single-project .project-technologies-container{
width: 100%;
display:flex;
gap:10px;
padding:10px;
flex-wrap: wrap;
justify-content: center;
}
.single-project .project-single-technology{
background-color: var(--color-bg-2);
border-radius: 15px;
padding: 10px;
display: flex;
font-family: var(--poppins-light);
font-size:13px;
}
.single-project > .scroll-fade {
display: flex;
flex-direction: column;
flex: 1;
}
/* EXPERIENCES */
#experiences{
background: linear-gradient(60deg, var(--color-bg), var(--color-bg-2));
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 50px 0 100px 0;
}
.experiences-container{
width: 80%;
display: flex;
flex-direction: column;
gap:20px;
}
.single-experience{
width: 100%;
height: 15vh;
display:flex;
justify-content: flex-start;
align-items: center;
gap:30px;
padding:10px 50px 10px 50px;
border-radius: 10px;
background-color: var(--color-bg);
color: var(--color-text-light)
}
.experience-company-logo{
max-height: 80%;
max-width: 100px;;
}
.experience-company-details{
display:flex;
flex-direction: column;
gap:2px;
}
.experience-company-name{
font-size: 30px;
font-weight: 600;
}
.experience-company-position{
font-family: var(--poppins-light);
}
.experience-company-technologies{
margin-top: 10px;
display:flex;
gap:10px;
flex:1;
}
.experience-single-technology{
max-width: max-content;
background-color: var(--color-text-light);
color: var(--color-bg);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 10px 5px 10px;
font-family: var(--poppins-semibold);
font-size:15px;
font-weight: 600;
}
.single-experience {
transition: transform 0.3s ease, box-shadow 0.3s ease;
transform-style: preserve-3d;
will-change: transform;
}
.single-experience:hover {
transform: perspective(1000px) translateY(-10px) rotateX(3deg);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
/* CONTACT ME */
#contact-me{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 50px 0 50px 0;
}
.contact-form{
width: 30%;
display:flex;
flex-direction: column;
align-items: center;
gap:20px;
}
.contact-form input{
width: 100%;
height: 5vh;
background-color: var(--color-bg-2);
color: var(--color-text-light);
border:none;
text-align: center;
border-radius: 10px;
}
.contact-form input::placeholder{
color: var(--color-text-light);
opacity: 50%;
}
.contact-form input[type=submit]{
background-color: var(--color-text-light);
color:var(--color-bg-2);
width: 30%;
border-radius: 20px;
height: 4vh;
}
.contact-form input[name=message]{
height: 20vh;
}
/* FOOTER */
#footer{
padding: 50px 0 50px 0;
display: flex;
justify-content: center;
align-items: center;
}
.footer-container{
color: var(--color-text-light);
display:flex;
justify-content: center;
align-items: center;
}
/* EKSTRALAR */
/* Genel hover animasyonları */
a, button, input, .single-project, .single-technology, .project-single-technology {
transition: all 0.3s ease;
}
/* Project hover 3D efekti */
.single-project:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 15px 25px rgba(0,0,0,0.3);
cursor: pointer;
}
/* Teknoloji etiketlerine hover efekti */
.single-technology:hover,
.project-single-technology:hover{
transform: scale(1.05);
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
/* Submit butonu hover efekti */
.contact-form input[type=submit]:hover {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
cursor: pointer;
}
/* Navbar hover efekti */
#navbar span a:hover {
color: #ffffff;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
}
/* Swipe down ikonuna basit animasyon */
#swipe-down span:last-child {
animation: swipeAnimation 1.5s infinite ease-in-out;
}
#swipe-down {
transition: opacity 0.5s ease-in-out;
}
@keyframes swipeAnimation {
0% { transform: translateY(0); opacity: 0.5; }
50% { transform: translateY(10px); opacity: 1; }
100% { transform: translateY(0); opacity: 0.5; }
}
/* EKSTRALAR X2 */
/* Giriş animasyonu için geçiş efekti */
.scroll-fade, .scroll-slide-up {
opacity: 0;
transform: translateY(20px);
transition: opacity 1s ease-out, transform 1s ease-out;
}
/* Aktif olduğunda animasyon başlasın */
.scroll-fade.active, .scroll-slide-up.active {
opacity: 1;
transform: translateY(0);
}
#navbar.scrolled {
background-color: rgba(38, 35, 41, 0.9);
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
backdrop-filter: blur(5px);
}
#nav-hamburger-icon{
display: none;
}
#navigation-button{
display: none;
}
@media (max-width: 1560px){
.about-me-container{
flex-direction: column;
height: auto;
gap:20px;
width: 80%;
}
.about-me-container img{
width: 50%;
}
}
@media (max-width: 1024px) {
.big-title {
font-size: 45px;
}
.normal-title{
font-size:20px;
letter-spacing: 5px;
}
.about-me-container{
flex-direction: column;
height: auto;
gap:20px;
width: 80%;
}
.about-me-container img{
width: 50%;
}
.technologies-container{
width: 80%;
gap:10px;
}
.single-technology{
text-align: center;
font-size: 12px;
padding: 5px 10px 5px 10px;
}
h2{
font-size: 30px;
margin-bottom:20px;
}
.projects-container{
flex-direction: column;
}
.contact-me{
width: 100%;
}
.contact-form{
width: 90%;
}
.contact-form input{
width: 90%;
}
.navbar-links {
display: none;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.navbar-links.active {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
position: absolute;
top: 80px;
width: 80%;
background-color: var(--color-bg-2);
padding: 10px;
border-radius: 10px;
z-index: 1000;
opacity: 1;
transform: translateY(0);
}
/* İkon geçişi için */
#nav-hamburger-icon, #nav-close-icon {
width: 100%;
height: 100%;
object-fit: contain;
}
#nav-close-icon {
display: none;
}
#navigation-button.active #nav-hamburger-icon {
display: none;
}
#navigation-button.active #nav-close-icon {
display: block;
}
#navigation-button {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 10%;
background-color: var(--color-bg-2);
color: var(--color-text-light);
border: none;
border-radius: 10px;
}
.single-experience{
padding:20px 10px 20px 10px;
width: auto;
height: auto;
aspect-ratio: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:10px;
}
.experience-company-logo{
width: 80%;
}
.experience-company-details{
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.experience-company-name{
font-size: 23px;
font-weight: 600;
}
.experience-company-position{
font-size: 14px;
}
.experience-company-technologies{
width: 100%;
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
}
@media (max-width: 768px) {
.big-title {
font-size: 45px;
}
.normal-title{
font-size:20px;
letter-spacing: 5px;
}
.about-me-container{
flex-direction: column;
height: auto;
gap:20px;
}
.about-me-container img{
width: 50%;
}
.single-technology{
text-align: center;
}
h2{
font-size: 30px;
margin-bottom:20px;
}
.projects-container{
flex-direction: column;
}
.contact-me{
width: 100%;
}
.contact-form{
width: 90%;
}
.contact-form input{
width: 90%;
}
#navigation-button{
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 10%;
background-color: var(--color-bg-2);
color: var(--color-text-light);
border:none;
border-radius: 10px;
}
#nav-hamburger-icon{
display: block;
width: 80%;
}
}