updated logo layout

Author: dconco

css/style.css

@@ -108,8 +108,8 @@ nav .container {
 
 .hero-content {
 	display: grid;
-	grid-template-columns: 1fr 300px;
-	gap: 60px;
+	grid-template-columns: 300px 1fr;
+	gap: 90px;
 	align-items: center;
 	position: relative;
 	z-index: 2;
@@ -149,6 +149,7 @@ nav .container {
 .hero-image {
 	position: relative;
 	text-align: center;
+	margin: auto;
 }
 
 .profile-pic {
@@ -323,9 +324,16 @@ nav .container {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background: 
-		radial-gradient(circle at 30% 40%, rgba(100, 255, 218, 0.1) 0%, transparent 50%),
-		radial-gradient(circle at 70% 60%, rgba(0, 212, 170, 0.08) 0%, transparent 50%);
+	background: radial-gradient(
+			circle at 30% 40%,
+			rgba(100, 255, 218, 0.1) 0%,
+			transparent 50%
+		),
+		radial-gradient(
+			circle at 70% 60%,
+			rgba(0, 212, 170, 0.08) 0%,
+			transparent 50%
+		);
 	pointer-events: none;
 }
 
@@ -354,7 +362,7 @@ nav .container {
 	left: 0;
 	right: 0;
 	height: 4px;
-	background: linear-gradient(135deg, #25D366, #64ffda);
+	background: linear-gradient(135deg, #25d366, #64ffda);
 }
 
 .ai-bot-card:hover {
@@ -366,7 +374,7 @@ nav .container {
 .ai-bot-icon {
 	width: 80px;
 	height: 80px;
-	background: linear-gradient(135deg, #25D366, #128C7E);
+	background: linear-gradient(135deg, #25d366, #128c7e);
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
@@ -379,7 +387,8 @@ nav .container {
 }
 
 @keyframes pulse {
-	0%, 100% {
+	0%,
+	100% {
 		transform: scale(1);
 		box-shadow: 0 15px 30px rgba(37, 211, 102, 0.3);
 	}
@@ -437,7 +446,7 @@ nav .container {
 }
 
 .btn-whatsapp {
-	background: linear-gradient(135deg, #25D366, #128C7E);
+	background: linear-gradient(135deg, #25d366, #128c7e);
 	color: white;
 	padding: 18px 35px;
 	border-radius: 50px;
@@ -456,7 +465,7 @@ nav .container {
 .btn-whatsapp:hover {
 	transform: translateY(-3px);
 	box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4);
-	background: linear-gradient(135deg, #128C7E, #25D366);
+	background: linear-gradient(135deg, #128c7e, #25d366);
 }
 
 .btn-whatsapp i {
@@ -465,7 +474,11 @@ nav .container {
 }
 
 @keyframes bounce {
-	0%, 20%, 50%, 80%, 100% {
+	0%,
+	20%,
+	50%,
+	80%,
+	100% {
 		transform: translateY(0);
 	}
 	40% {
@@ -549,7 +562,7 @@ nav .container {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
+	background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
 	border-radius: 50%;
 }
 
@@ -633,7 +646,7 @@ nav .container {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
+	background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
 	opacity: 0;
 	transition: opacity 0.3s ease;
 }
@@ -828,6 +841,7 @@ footer p {
 		grid-template-columns: 1fr;
 		text-align: center;
 		gap: 40px;
+		margin-top: 120px;
 	}
 
 	.hero-text h1 {

index.html

@@ -185,6 +185,14 @@
 		<section id="home" class="hero">
 			<div class="container">
 				<div class="hero-content">
+					<div class="hero-image floating">
+						<div class="profile-pic">
+							<img
+								src="https://raw.githubusercontent.com/dconco/dconco/refs/heads/main/profile3.png"
+								alt="Dave Conco"
+							/>
+						</div>
+					</div>
 					<div class="hero-text animate-in">
 						<h1>Hi, I'm <span class="highlight">Dave Conco</span></h1>
 						<p class="subtitle">
@@ -205,14 +213,6 @@ <h1>Hi, I'm <span class="highlight">Dave Conco</span></h1>
 							>
 						</div>
 					</div>
-					<div class="hero-image floating">
-						<div class="profile-pic">
-							<img
-								src="https://raw.githubusercontent.com/dconco/dconco/refs/heads/main/profile3.png"
-								alt="Dave Conco"
-							/>
-						</div>
-					</div>
 				</div>
 			</div>
 		</section>

js/index.js

@@ -6,7 +6,7 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 		if (target) {
 			target.scrollIntoView({
 				behavior: 'smooth',
-				block: 'start',
+				block: 'start'
 			})
 		}
 	})
@@ -22,6 +22,7 @@ window.addEventListener('scroll', () => {
 	}
 })
 
+/*
 // Animate elements on scroll
 const observerOptions = {
 	threshold: 0.1,
@@ -39,3 +40,4 @@ const observer = new IntersectionObserver(entries => {
 document.querySelectorAll('.project-card, .skill-category, .ai-bot-card').forEach(el => {
 	observer.observe(el)
 })
+*/