<!DOCTYPE html>
Browse files<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nathan Stower | Digital Strategy Consultant</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--orange: #FF5722;
--orange-glow: rgba(255, 87, 34, 0.3);
--orange-light: #FF8A65;
--black: #0a0a0a;
--dark-gray: #1a1a1a;
--mid-gray: #2d2d2d;
--light-gray: #e5e5e5;
--white: #ffffff;
--content-max: 1920px;
--content-padding: clamp(20px, 5vw, 80px);
/* Typography */
--font-display: 'Bebas Neue', sans-serif;
--font-body: 'Inter', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Shadows */
--shadow-brutal: 8px 8px 0 0 rgba(255, 87, 34, 1);
--shadow-brutal-black: 8px 8px 0 0 rgba(0, 0, 0, 1);
--shadow-brutal-hover: 12px 12px 0 0 rgba(255, 87, 34, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background: var(--black);
color: var(--white);
line-height: 1.6;
overflow-x: hidden;
cursor: auto;
}
.custom-cursor-enabled {
cursor: none;
}
/* Grain overlay - premium texture */
.grain-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 10000;
opacity: 0.03;
mix-blend-mode: overlay;
}
.grain-overlay::before {
content: '';
position: absolute;
inset: -200%;
width: 400%;
height: 400%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-repeat: repeat;
animation: grain 8s steps(10) infinite;
}
@keyframes grain {
0%, 100% { transform: translate(0, 0); }
10% { transform: translate(-5%, -10%); }
20% { transform: translate(-15%, 5%); }
30% { transform: translate(7%, -25%); }
40% { transform: translate(-5%, 25%); }
50% { transform: translate(-15%, 10%); }
60% { transform: translate(15%, 0%); }
70% { transform: translate(0%, 15%); }
80% { transform: translate(3%, 35%); }
90% { transform: translate(-10%, 10%); }
}
/* Custom cursor */
.cursor {
width: 20px;
height: 20px;
background: var(--orange);
border-radius: 50%;
position: fixed;
pointer-events: none;
mix-blend-mode: difference;
z-index: 9999;
transition: transform 0.2s ease;
transform: translate(-50%, -50%);
}
.cursor-hover {
transform: translate(-50%, -50%) scale(2);
background: transparent;
border: 2px solid var(--orange);
}
.cursor-trail {
width: 8px;
height: 8px;
background: var(--orange-light);
border-radius: 50%;
position: fixed;
pointer-events: none;
mix-blend-mode: difference;
z-index: 9998;
opacity: 0.7;
transition: all 0.15s ease;
transform: translate(-50%, -50%);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--orange);
outline-offset: 4px;
}
/* Scroll progress bar */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: var(--orange);
z-index: 10001;
transform-origin: left;
transition: width 0.1s ease;
box-shadow: 0 0 10px var(--orange-glow);
}
/* Skip link for accessibility */
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 10000;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
width: auto;
height: auto;
padding: 1rem 1.5rem;
background: var(--orange);
color: var(--black);
border: 2px solid var(--black);
box-shadow: var(--shadow-brutal-black);
font-weight: 700;
font-family: var(--font-mono);
}
/* Page loader */
.page-loader {
position: fixed;
inset: 0;
background: var(--black);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.page-loader.hidden {
opacity: 0;
visibility: hidden;
}
.loader-text {
font-size: 4rem;
font-weight: 400;
font-family: var(--font-display);
color: var(--orange);
letter-spacing: 0.05em;
}
.loader-cursor {
display: inline-block;
width: 4px;
height: 50px;
background: var(--orange);
margin-left: 8px;
animation: blink 1s step-end infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.cursor,
.cursor-trail {
display: none;
}
body {
cursor: auto;
}
.grain-overlay {
display: none;
}
}
/* Circuit Pattern Background */
.circuit-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
opacity: 0.04;
}
.circuit-bg svg {
width: 100%;
height: 100%;
}
/* Main Container */
.page-wrapper {
position: relative;
z-index: 1;
max-width: 3440px;
margin: 0 auto;
}
.content-container {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--content-padding);
}
/* Typography */
h1, h2, h3, h4 {
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
letter-spacing: 0.02em;
line-height: 1;
}
/* Navigation */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 20px 0;
background: linear-gradient(180deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0) 100%);
transition: all 0.3s ease;
}
.nav.scrolled {
background: rgba(10, 10, 10, 0.98);
backdrop-filter: blur(20px);
box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
text-decoration: none;
color: var(--white);
}
.logo-box {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 12px;
background: transparent;
border: 2px solid var(--white);
border-radius: 4px;
font-family: 'Bebas Neue', sans-serif;
font-size: 26px;
color: var(--white);
letter-spacing: 0.05em;
overflow: hidden;
transition: all 0.3s ease;
}
.logo-n {
display: inline-block;
}
.logo-expand {
display: inline-block;
max-width: 0;
opacity: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.logo:hover .logo-expand {
max-width: 120px;
opacity: 1;
}
.logo:hover .logo-box {
padding: 0 14px;
}
.nav-links {
display: flex;
gap: 40px;
list-style: none;
}
.nav-links a {
color: var(--light-gray);
text-decoration: none;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: color 0.3s ease;
position: relative;
}
.nav-links a::after {
content: '';
- README.md +8 -5
- index.html +471 -19
- script.js +145 -0
- style.css +158 -19
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title: Digital Orange Strategist
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: Digital Orange Strategist 🍊
|
| 3 |
+
colorFrom: purple
|
| 4 |
+
colorTo: green
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
|
@@ -1,19 +1,471 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Digital Orange Strategist</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<link rel="stylesheet" href="style.css">
|
| 11 |
+
<script>
|
| 12 |
+
tailwind.config = {
|
| 13 |
+
theme: {
|
| 14 |
+
extend: {
|
| 15 |
+
colors: {
|
| 16 |
+
orange: {
|
| 17 |
+
500: '#FF5722',
|
| 18 |
+
}
|
| 19 |
+
}
|
| 20 |
+
}
|
| 21 |
+
}
|
| 22 |
+
}
|
| 23 |
+
</script>
|
| 24 |
+
</head>
|
| 25 |
+
<body class="bg-gray-900 text-white">
|
| 26 |
+
<!-- Custom Cursor -->
|
| 27 |
+
<div class="cursor hidden md:block fixed w-5 h-5 bg-orange-500 rounded-full pointer-events-none z-50 mix-blend-difference" id="cursor"></div>
|
| 28 |
+
<div class="cursor-trail hidden md:block fixed w-2 h-2 bg-orange-300 rounded-full pointer-events-none z-40 mix-blend-difference opacity-70" id="cursorTrail"></div>
|
| 29 |
+
|
| 30 |
+
<!-- Grain overlay -->
|
| 31 |
+
<div class="fixed inset-0 pointer-events-none z-30 opacity-10 mix-blend-overlay" aria-hidden="true">
|
| 32 |
+
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij48ZmlsdGVyIGlkPSJub2lzZSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuODUiIG51bU9jdGF2ZXM9IjQiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjb2Zmc2V0KSIvPjwvc3ZnPg==')] animate-grain"></div>
|
| 33 |
+
</div>
|
| 34 |
+
|
| 35 |
+
<!-- Navigation -->
|
| 36 |
+
<nav class="fixed top-0 left-0 right-0 z-40 py-5 bg-gradient-to-b from-gray-900/90 to-transparent transition-all duration-300" id="nav">
|
| 37 |
+
<div class="container mx-auto px-6">
|
| 38 |
+
<div class="flex justify-between items-center">
|
| 39 |
+
<a href="#" class="flex items-center text-white no-underline">
|
| 40 |
+
<div class="flex items-center justify-center h-11 px-3 border-2 border-white rounded font-bebas text-2xl tracking-wider overflow-hidden transition-all duration-300">
|
| 41 |
+
<span class="inline-block">N</span>
|
| 42 |
+
<span class="inline-block max-w-0 opacity-0 overflow-hidden transition-all duration-300">ATHAN.</span>
|
| 43 |
+
</div>
|
| 44 |
+
</a>
|
| 45 |
+
|
| 46 |
+
<div class="hidden md:flex items-center space-x-10">
|
| 47 |
+
<a href="#services" class="text-gray-300 hover:text-white uppercase text-sm font-medium tracking-wider relative group transition-colors duration-300">
|
| 48 |
+
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-orange-500 transition-all duration-300 group-hover:w-full"></span>
|
| 49 |
+
Services
|
| 50 |
+
</a>
|
| 51 |
+
<a href="#work" class="text-gray-300 hover:text-white uppercase text-sm font-medium tracking-wider relative group transition-colors duration-300">
|
| 52 |
+
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-orange-500 transition-all duration-300 group-hover:w-full"></span>
|
| 53 |
+
Work
|
| 54 |
+
</a>
|
| 55 |
+
<a href="#about" class="text-gray-300 hover:text-white uppercase text-sm font-medium tracking-wider relative group transition-colors duration-300">
|
| 56 |
+
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-orange-500 transition-all duration-300 group-hover:w-full"></span>
|
| 57 |
+
About
|
| 58 |
+
</a>
|
| 59 |
+
<a href="#contact" class="bg-orange-500 hover:bg-white hover:text-orange-500 text-white px-7 py-3 uppercase text-sm font-semibold tracking-wider border-2 border-orange-500 transition-all duration-300 font-mono">
|
| 60 |
+
Contact
|
| 61 |
+
</a>
|
| 62 |
+
</div>
|
| 63 |
+
|
| 64 |
+
<button class="md:hidden flex flex-col gap-1.5 bg-transparent border-none p-2" id="mobileMenuBtn">
|
| 65 |
+
<span class="block w-7 h-0.5 bg-white transition-all duration-300"></span>
|
| 66 |
+
<span class="block w-7 h-0.5 bg-white transition-all duration-300"></span>
|
| 67 |
+
<span class="block w-7 h-0.5 bg-white transition-all duration-300"></span>
|
| 68 |
+
</button>
|
| 69 |
+
</div>
|
| 70 |
+
</div>
|
| 71 |
+
</nav>
|
| 72 |
+
|
| 73 |
+
<!-- Mobile Menu -->
|
| 74 |
+
<div class="fixed inset-0 bg-gray-900/95 backdrop-blur-xl z-50 flex flex-col justify-center items-center gap-10 opacity-0 invisible transition-all duration-300" id="mobileNav">
|
| 75 |
+
<button class="absolute top-8 right-8 text-3xl" id="mobileNavClose">✕</button>
|
| 76 |
+
<a href="#services" class="text-4xl md:text-5xl font-bebas text-white hover:text-orange-500 transition-colors duration-300">Services</a>
|
| 77 |
+
<a href="#work" class="text-4xl md:text-5xl font-bebas text-white hover:text-orange-500 transition-colors duration-300">Work</a>
|
| 78 |
+
<a href="#about" class="text-4xl md:text-5xl font-bebas text-white hover:text-orange-500 transition-colors duration-300">About</a>
|
| 79 |
+
<a href="#contact" class="text-4xl md:text-5xl font-bebas text-white hover:text-orange-500 transition-colors duration-300">Contact</a>
|
| 80 |
+
</div>
|
| 81 |
+
|
| 82 |
+
<!-- Hero Section -->
|
| 83 |
+
<section class="min-h-screen flex items-center relative overflow-hidden pt-20">
|
| 84 |
+
<div class="absolute inset-0 z-0">
|
| 85 |
+
<div class="absolute inset-0 bg-gradient-to-b from-gray-900/30 via-gray-900/70 to-gray-900"></div>
|
| 86 |
+
<img src="https://static.photos/technology/1920x1080/42" alt="Digital background" class="w-full h-full object-cover opacity-30">
|
| 87 |
+
</div>
|
| 88 |
+
|
| 89 |
+
<div class="container mx-auto px-6 relative z-10">
|
| 90 |
+
<div class="max-w-2xl">
|
| 91 |
+
<div class="inline-flex items-center gap-3 px-5 py-3 bg-orange-500/10 border border-orange-500/30 text-orange-500 text-xs font-semibold tracking-widest uppercase mb-7 font-mono animate-fade-up">
|
| 92 |
+
<span class="inline-block w-2 h-2 bg-orange-500 rounded-full animate-pulse"></span>
|
| 93 |
+
Digital Strategist
|
| 94 |
+
</div>
|
| 95 |
+
|
| 96 |
+
<h1 class="text-6xl md:text-8xl font-bebas leading-tight mb-4 animate-fade-up animate-delay-100">
|
| 97 |
+
<span class="text-white">Turning Ideas</span><br>
|
| 98 |
+
<span class="text-orange-500">Into Digital Gold</span>
|
| 99 |
+
</h1>
|
| 100 |
+
|
| 101 |
+
<p class="text-lg md:text-xl text-gray-300 mb-8 max-w-lg animate-fade-up animate-delay-200">
|
| 102 |
+
I craft digital experiences that blend strategy, design and technology to drive measurable business results.
|
| 103 |
+
</p>
|
| 104 |
+
|
| 105 |
+
<div class="flex flex-wrap gap-3 mb-10 animate-fade-up animate-delay-300">
|
| 106 |
+
<span class="px-4 py-2 border border-gray-700 text-gray-300 text-xs font-medium tracking-wider uppercase hover:border-orange-500 hover:text-orange-500 transition-all duration-300">Strategy</span>
|
| 107 |
+
<span class="px-4 py-2 border border-gray-700 text-gray-300 text-xs font-medium tracking-wider uppercase hover:border-orange-500 hover:text-orange-500 transition-all duration-300">Design</span>
|
| 108 |
+
<span class="px-4 py-2 border border-gray-700 text-gray-300 text-xs font-medium tracking-wider uppercase hover:border-orange-500 hover:text-orange-500 transition-all duration-300">Development</span>
|
| 109 |
+
<span class="px-4 py-2 border border-gray-700 text-gray-300 text-xs font-medium tracking-wider uppercase hover:border-orange-500 hover:text-orange-500 transition-all duration-300">Marketing</span>
|
| 110 |
+
</div>
|
| 111 |
+
|
| 112 |
+
<div class="flex flex-wrap gap-4 animate-fade-up animate-delay-400">
|
| 113 |
+
<a href="#contact" class="flex items-center gap-3 bg-orange-500 hover:bg-transparent hover:border-orange-500 text-white px-8 py-5 text-sm font-semibold tracking-wider uppercase border-2 border-orange-500 transition-all duration-300 group">
|
| 114 |
+
Get Started
|
| 115 |
+
<i data-feather="arrow-right" class="group-hover:translate-x-1 transition-transform duration-300"></i>
|
| 116 |
+
</a>
|
| 117 |
+
<a href="#work" class="flex items-center gap-3 bg-transparent hover:bg-orange-500/10 text-white px-8 py-5 text-sm font-semibold tracking-wider uppercase border-2 border-gray-700 hover:border-orange-500 transition-all duration-300">
|
| 118 |
+
View Work
|
| 119 |
+
</a>
|
| 120 |
+
</div>
|
| 121 |
+
</div>
|
| 122 |
+
</div>
|
| 123 |
+
</section>
|
| 124 |
+
|
| 125 |
+
<!-- Services Section -->
|
| 126 |
+
<section id="services" class="py-20 bg-gray-800">
|
| 127 |
+
<div class="container mx-auto px-6">
|
| 128 |
+
<div class="text-center mb-20">
|
| 129 |
+
<span class="inline-block px-5 py-2 bg-orange-500/10 border border-orange-500/30 text-orange-500 text-xs font-semibold tracking-widest uppercase mb-4 font-mono">What I Do</span>
|
| 130 |
+
<h2 class="text-4xl md:text-6xl font-bebas mb-4">Digital Services That <span class="text-orange-500">Deliver</span></h2>
|
| 131 |
+
<p class="text-gray-400 max-w-2xl mx-auto">Comprehensive digital solutions tailored to your business needs and goals.</p>
|
| 132 |
+
</div>
|
| 133 |
+
|
| 134 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 135 |
+
<!-- Service 1 -->
|
| 136 |
+
<div class="bg-gray-900 border-2 border-gray-800 hover:border-orange-500 p-10 transition-all duration-300 hover:-translate-y-2">
|
| 137 |
+
<div class="w-16 h-16 bg-orange-500/10 border border-orange-500/30 flex items-center justify-center mb-8">
|
| 138 |
+
<i data-feather="target" class="text-orange-500 w-8 h-8"></i>
|
| 139 |
+
</div>
|
| 140 |
+
<h3 class="text-2xl font-bebas mb-4">Strategic Consulting</h3>
|
| 141 |
+
<p class="text-gray-400 mb-6">Data-driven digital strategies aligned with your business objectives and market opportunities.</p>
|
| 142 |
+
<ul class="space-y-3">
|
| 143 |
+
<li class="flex items-start gap-2 text-gray-300">
|
| 144 |
+
<i data-feather="check" class="text-orange-500 w-4 h-4 mt-0.5 flex-shrink-0"></i>
|
| 145 |
+
<span>Market analysis</span>
|
| 146 |
+
</li>
|
| 147 |
+
<li class="flex items-start gap-2 text-gray-300">
|
| 148 |
+
<i data-feather="check" class="text-orange-500 w-4 h-4 mt-0.5 flex-shrink-0"></i>
|
| 149 |
+
<span>Competitive positioning</span>
|
| 150 |
+
</li>
|
| 151 |
+
<li class="flex items-start gap-2 text-gray-300">
|
| 152 |
+
<i data-feather="check" class="text-orange-500 w-4 h-4 mt-0.5 flex-shrink-0"></i>
|
| 153 |
+
<span>Digital roadmap</span>
|
| 154 |
+
</li>
|
| 155 |
+
</ul>
|
| 156 |
+
</div>
|
| 157 |
+
|
| 158 |
+
<!-- Service 2 -->
|
| 159 |
+
<div class="bg-gray-900 border-2 border-gray-800 hover:border-orange-500 p-10 transition-all duration-300 hover:-translate-y-2">
|
| 160 |
+
<div class="w-16 h-16 bg-orange-500/10 border border-orange-500/30 flex items-center justify-center mb-8">
|
| 161 |
+
<i data-feather="layout" class="text-orange-500 w-8 h-8"></i>
|
| 162 |
+
</div>
|
| 163 |
+
<h3 class="text-2xl font-bebas mb-4">Experience Design</h3>
|
| 164 |
+
<p class="text-gray-400 mb-6">User-centered digital experiences that engage, convert and delight your audience.</p>
|
| 165 |
+
<ul class="space-y-3">
|
| 166 |
+
<li class="flex items-start gap-2 text-gray-300">
|
| 167 |
+
<i data-feather="check" class="text-orange-500 w-4 h-4 mt-0.5 flex-shrink-0"></i>
|
| 168 |
+
<span>UI/UX design</span>
|
| 169 |
+
</li>
|
| 170 |
+
<li class="flex items-start gap-2 text-gray-300">
|
| 171 |
+
<i data-feather="check" class="text-orange-500 w-4 h-4 mt-0.5 flex-shrink-0"></i>
|
| 172 |
+
<span>Prototyping</span>
|
| 173 |
+
</li>
|
| 174 |
+
<li class="flex items-start gap-2 text-gray-300">
|
| 175 |
+
<i data-feather="check" class="text-orange-500 w-4 h-4 mt-0.5 flex-shrink-0"></i>
|
| 176 |
+
<span>User testing</span>
|
| 177 |
+
</li>
|
| 178 |
+
</ul>
|
| 179 |
+
</div>
|
| 180 |
+
|
| 181 |
+
<!-- Service 3 -->
|
| 182 |
+
<div class="bg-gray-900 border-2 border-gray-800 hover:border-orange-500 p-10 transition-all duration-300 hover:-translate-y-2">
|
| 183 |
+
<div class="w-16 h-16 bg-orange-500/10 border border-orange-500/30 flex items-center justify-center mb-8">
|
| 184 |
+
<i data-feather="code" class="text-orange-500 w-8 h-8"></i>
|
| 185 |
+
</div>
|
| 186 |
+
<h3 class="text-2xl font-bebas mb-4">Web Development</h3>
|
| 187 |
+
<p class="text-gray-400 mb-6">High-performance websites and applications built with modern technologies.</p>
|
| 188 |
+
<ul class="space-y-3">
|
| 189 |
+
<li class="flex items-start gap-2 text-gray-300">
|
| 190 |
+
<i data-feather="check" class="text-orange-500 w-4 h-4 mt-0.5 flex-shrink-0"></i>
|
| 191 |
+
<span>Custom development</span>
|
| 192 |
+
</li>
|
| 193 |
+
<li class="flex items-start gap-2 text-gray-300">
|
| 194 |
+
<i data-feather="check" class="text-orange-500 w-4 h-4 mt-0.5 flex-shrink-0"></i>
|
| 195 |
+
<span>E-commerce</span>
|
| 196 |
+
</li>
|
| 197 |
+
<li class="flex items-start gap-2 text-gray-300">
|
| 198 |
+
<i data-feather="check" class="text-orange-500 w-4 h-4 mt-0.5 flex-shrink-0"></i>
|
| 199 |
+
<span>Headless CMS</span>
|
| 200 |
+
</li>
|
| 201 |
+
</ul>
|
| 202 |
+
</div>
|
| 203 |
+
</div>
|
| 204 |
+
</div>
|
| 205 |
+
</section>
|
| 206 |
+
|
| 207 |
+
<!-- Work Section -->
|
| 208 |
+
<section id="work" class="py-20 bg-gray-900">
|
| 209 |
+
<div class="container mx-auto px-6">
|
| 210 |
+
<div class="text-center mb-20">
|
| 211 |
+
<span class="inline-block px-5 py-2 bg-orange-500/10 border border-orange-500/30 text-orange-500 text-xs font-semibold tracking-widest uppercase mb-4 font-mono">Portfolio</span>
|
| 212 |
+
<h2 class="text-4xl md:text-6xl font-bebas mb-4">Selected <span class="text-orange-500">Projects</span></h2>
|
| 213 |
+
<p class="text-gray-400 max-w-2xl mx-auto">A showcase of recent work delivering exceptional digital results.</p>
|
| 214 |
+
</div>
|
| 215 |
+
|
| 216 |
+
<div class="grid md:grid-cols-2 gap-8">
|
| 217 |
+
<!-- Project 1 -->
|
| 218 |
+
<div class="group relative overflow-hidden rounded-lg">
|
| 219 |
+
<img src="https://static.photos/technology/800x600/1" alt="Project 1" class="w-full h-96 object-cover transition-transform duration-700 group-hover:scale-110">
|
| 220 |
+
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent flex flex-col justify-end p-8">
|
| 221 |
+
<span class="text-orange-500 text-sm font-medium tracking-widest uppercase mb-2">E-commerce</span>
|
| 222 |
+
<h3 class="text-3xl font-bebas mb-2">Luxury Watch Store</h3>
|
| 223 |
+
<p class="text-gray-300 mb-4">Premium e-commerce experience with AR try-on feature.</p>
|
| 224 |
+
<a href="#" class="inline-flex items-center gap-2 text-white group-hover:text-orange-500 transition-colors duration-300">
|
| 225 |
+
View Case Study
|
| 226 |
+
<i data-feather="arrow-right" class="w-4 h-4"></i>
|
| 227 |
+
</a>
|
| 228 |
+
</div>
|
| 229 |
+
</div>
|
| 230 |
+
|
| 231 |
+
<!-- Project 2 -->
|
| 232 |
+
<div class="group relative overflow-hidden rounded-lg">
|
| 233 |
+
<img src="https://static.photos/technology/800x600/2" alt="Project 2" class="w-full h-96 object-cover transition-transform duration-700 group-hover:scale-110">
|
| 234 |
+
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent flex flex-col justify-end p-8">
|
| 235 |
+
<span class="text-orange-500 text-sm font-medium tracking-widest uppercase mb-2">Web App</span>
|
| 236 |
+
<h3 class="text-3xl font-bebas mb-2">Fitness Tracker</h3>
|
| 237 |
+
<p class="text-gray-300 mb-4">AI-powered workout planning and progress tracking.</p>
|
| 238 |
+
<a href="#" class="inline-flex items-center gap-2 text-white group-hover:text-orange-500 transition-colors duration-300">
|
| 239 |
+
View Case Study
|
| 240 |
+
<i data-feather="arrow-right" class="w-4 h-4"></i>
|
| 241 |
+
</a>
|
| 242 |
+
</div>
|
| 243 |
+
</div>
|
| 244 |
+
|
| 245 |
+
<!-- Project 3 -->
|
| 246 |
+
<div class="group relative overflow-hidden rounded-lg">
|
| 247 |
+
<img src="https://static.photos/technology/800x600/3" alt="Project 3" class="w-full h-96 object-cover transition-transform duration-700 group-hover:scale-110">
|
| 248 |
+
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent flex flex-col justify-end p-8">
|
| 249 |
+
<span class="text-orange-500 text-sm font-medium tracking-widest uppercase mb-2">Branding</span>
|
| 250 |
+
<h3 class="text-3xl font-bebas mb-2">Coffee Roastery</h3>
|
| 251 |
+
<p class="text-gray-300 mb-4">Complete brand identity and e-commerce solution.</p>
|
| 252 |
+
<a href="#" class="inline-flex items-center gap-2 text-white group-hover:text-orange-500 transition-colors duration-300">
|
| 253 |
+
View Case Study
|
| 254 |
+
<i data-feather="arrow-right" class="w-4 h-4"></i>
|
| 255 |
+
</a>
|
| 256 |
+
</div>
|
| 257 |
+
</div>
|
| 258 |
+
|
| 259 |
+
<!-- Project 4 -->
|
| 260 |
+
<div class="group relative overflow-hidden rounded-lg">
|
| 261 |
+
<img src="https://static.photos/technology/800x600/4" alt="Project 4" class="w-full h-96 object-cover transition-transform duration-700 group-hover:scale-110">
|
| 262 |
+
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent flex flex-col justify-end p-8">
|
| 263 |
+
<span class="text-orange-500 text-sm font-medium tracking-widest uppercase mb-2">Mobile App</span>
|
| 264 |
+
<h3 class="text-3xl font-bebas mb-2">Travel Planner</h3>
|
| 265 |
+
<p class="text-gray-300 mb-4">Personalized itinerary builder with real-time updates.</p>
|
| 266 |
+
<a href="#" class="inline-flex items-center gap-2 text-white group-hover:text-orange-500 transition-colors duration-300">
|
| 267 |
+
View Case Study
|
| 268 |
+
<i data-feather="arrow-right" class="w-4 h-4"></i>
|
| 269 |
+
</a>
|
| 270 |
+
</div>
|
| 271 |
+
</div>
|
| 272 |
+
</div>
|
| 273 |
+
|
| 274 |
+
<div class="text-center mt-16">
|
| 275 |
+
<a href="#" class="inline-flex items-center gap-3 px-8 py-4 bg-orange-500 hover:bg-orange-600 text-white text-sm font-semibold tracking-wider uppercase border-2 border-orange-500 transition-all duration-300 group">
|
| 276 |
+
View All Projects
|
| 277 |
+
<i data-feather="arrow-right" class="group-hover:translate-x-1 transition-transform duration-300"></i>
|
| 278 |
+
</a>
|
| 279 |
+
</div>
|
| 280 |
+
</div>
|
| 281 |
+
</section>
|
| 282 |
+
|
| 283 |
+
<!-- Stats Section -->
|
| 284 |
+
<section class="py-16 bg-orange-500">
|
| 285 |
+
<div class="container mx-auto px-6">
|
| 286 |
+
<div class="grid md:grid-cols-4 gap-8 text-center">
|
| 287 |
+
<div class="animate-fade-up">
|
| 288 |
+
<div class="text-5xl md:text-7xl font-bebas mb-2">10+</div>
|
| 289 |
+
<div class="text-sm uppercase tracking-wider font-mono">Years Experience</div>
|
| 290 |
+
</div>
|
| 291 |
+
<div class="animate-fade-up animate-delay-100">
|
| 292 |
+
<div class="text-5xl md:text-7xl font-bebas mb-2">150+</div>
|
| 293 |
+
<div class="text-sm uppercase tracking-wider font-mono">Projects</div>
|
| 294 |
+
</div>
|
| 295 |
+
<div class="animate-fade-up animate-delay-200">
|
| 296 |
+
<div class="text-5xl md:text-7xl font-bebas mb-2">$25M+</div>
|
| 297 |
+
<div class="text-sm uppercase tracking-wider font-mono">Revenue Generated</div>
|
| 298 |
+
</div>
|
| 299 |
+
<div class="animate-fade-up animate-delay-300">
|
| 300 |
+
<div class="text-5xl md:text-7xl font-bebas mb-2">98%</div>
|
| 301 |
+
<div class="text-sm uppercase tracking-wider font-mono">Client Satisfaction</div>
|
| 302 |
+
</div>
|
| 303 |
+
</div>
|
| 304 |
+
</div>
|
| 305 |
+
</section>
|
| 306 |
+
|
| 307 |
+
<!-- Testimonials Section -->
|
| 308 |
+
<section class="py-20 bg-gray-800">
|
| 309 |
+
<div class="container mx-auto px-6">
|
| 310 |
+
<div class="text-center mb-20">
|
| 311 |
+
<span class="inline-block px-5 py-2 bg-orange-500/10 border border-orange-500/30 text-orange-500 text-xs font-semibold tracking-widest uppercase mb-4 font-mono">Testimonials</span>
|
| 312 |
+
<h2 class="text-4xl md:text-6xl font-bebas mb-4">Client <span class="text-orange-500">Feedback</span></h2>
|
| 313 |
+
<p class="text-gray-400 max-w-2xl mx-auto">What my clients say about working with me.</p>
|
| 314 |
+
</div>
|
| 315 |
+
|
| 316 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 317 |
+
<!-- Testimonial 1 -->
|
| 318 |
+
<div class="bg-gray-900 border-2 border-gray-800 p-8 transition-all duration-300 hover:border-orange-500 hover:-translate-y-2">
|
| 319 |
+
<div class="text-orange-500 text-5xl mb-6">"</div>
|
| 320 |
+
<p class="text-gray-300 italic mb-8">Working with Nathan was transformative for our digital strategy. His insights helped us triple our online revenue in just six months.</p>
|
| 321 |
+
<div class="flex items-center gap-4">
|
| 322 |
+
<div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center text-orange-500 font-bebas text-xl">JD</div>
|
| 323 |
+
<div>
|
| 324 |
+
<h4 class="font-medium">John Doe</h4>
|
| 325 |
+
<p class="text-sm text-gray-400">CEO, TechStart</p>
|
| 326 |
+
</div>
|
| 327 |
+
</div>
|
| 328 |
+
</div>
|
| 329 |
+
|
| 330 |
+
<!-- Testimonial 2 -->
|
| 331 |
+
<div class="bg-gray-900 border-2 border-gray-800 p-8 transition-all duration-300 hover:border-orange-500 hover:-translate-y-2">
|
| 332 |
+
<div class="text-orange-500 text-5xl mb-6">"</div>
|
| 333 |
+
<p class="text-gray-300 italic mb-8">Nathan's ability to understand our business needs and translate them into an exceptional digital experience was impressive.</p>
|
| 334 |
+
<div class="flex items-center gap-4">
|
| 335 |
+
<div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center text-orange-500 font-bebas text-xl">AS</div>
|
| 336 |
+
<div>
|
| 337 |
+
<h4 class="font-medium">Amy Smith</h4>
|
| 338 |
+
<p class="text-sm text-gray-400">Marketing Director, BrandCo</p>
|
| 339 |
+
</div>
|
| 340 |
+
</div>
|
| 341 |
+
</div>
|
| 342 |
+
|
| 343 |
+
<!-- Testimonial 3 -->
|
| 344 |
+
<div class="bg-gray-900 border-2 border-gray-800 p-8 transition-all duration-300 hover:border-orange-500 hover:-translate-y-2">
|
| 345 |
+
<div class="text-orange-500 text-5xl mb-6">"</div>
|
| 346 |
+
<p class="text-gray-300 italic mb-8">The website Nathan created for us exceeded all expectations. Our conversion rates improved by 220% after launch.</p>
|
| 347 |
+
<div class="flex items-center gap-4">
|
| 348 |
+
<div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center text-orange-500 font-bebas text-xl">MR</div>
|
| 349 |
+
<div>
|
| 350 |
+
<h4 class="font-medium">Michael Roberts</h4>
|
| 351 |
+
<p class="text-sm text-gray-400">Founder, RetailPro</p>
|
| 352 |
+
</div>
|
| 353 |
+
</div>
|
| 354 |
+
</div>
|
| 355 |
+
</div>
|
| 356 |
+
</div>
|
| 357 |
+
</section>
|
| 358 |
+
|
| 359 |
+
<!-- Contact Section -->
|
| 360 |
+
<section id="contact" class="py-20 bg-gray-900">
|
| 361 |
+
<div class="container mx-auto px-6">
|
| 362 |
+
<div class="grid md:grid-cols-2 gap-16 items-center">
|
| 363 |
+
<div>
|
| 364 |
+
<span class="inline-block px-5 py-2 bg-orange-500/10 border border-orange-500/30 text-orange-500 text-xs font-semibold tracking-widest uppercase mb-4 font-mono">Get In Touch</span>
|
| 365 |
+
<h2 class="text-4xl md:text-6xl font-bebas mb-6">Let's Work <span class="text-orange-500">Together</span></h2>
|
| 366 |
+
<p class="text-gray-400 mb-8 max-w-lg">Ready to take your digital presence to the next level? Contact me to discuss your project and how I can help.</p>
|
| 367 |
+
|
| 368 |
+
<div class="space-y-6">
|
| 369 |
+
<div class="flex items-center gap-6">
|
| 370 |
+
<div class="w-14 h-14 bg-orange-500/10 border border-orange-500/30 flex items-center justify-center flex-shrink-0">
|
| 371 |
+
<i data-feather="mail" class="text-orange-500"></i>
|
| 372 |
+
</div>
|
| 373 |
+
<div>
|
| 374 |
+
<h4 class="text-xs uppercase tracking-wider text-gray-500 mb-1">Email</h4>
|
| 375 |
+
<a href="mailto:hello@example.com" class="text-lg hover:text-orange-500 transition-colors duration-300">hello@example.com</a>
|
| 376 |
+
</div>
|
| 377 |
+
</div>
|
| 378 |
+
|
| 379 |
+
<div class="flex items-center gap-6">
|
| 380 |
+
<div class="w-14 h-14 bg-orange-500/10 border border-orange-500/30 flex items-center justify-center flex-shrink-0">
|
| 381 |
+
<i data-feather="phone" class="text-orange-500"></i>
|
| 382 |
+
</div>
|
| 383 |
+
<div>
|
| 384 |
+
<h4 class="text-xs uppercase tracking-wider text-gray-500 mb-1">Phone</h4>
|
| 385 |
+
<a href="tel:+1234567890" class="text-lg hover:text-orange-500 transition-colors duration-300">+1 (234) 567-890</a>
|
| 386 |
+
</div>
|
| 387 |
+
</div>
|
| 388 |
+
|
| 389 |
+
<div class="flex items-center gap-6">
|
| 390 |
+
<div class="w-14 h-14 bg-orange-500/10 border border-orange-500/30 flex items-center justify-center flex-shrink-0">
|
| 391 |
+
<i data-feather="map-pin" class="text-orange-500"></i>
|
| 392 |
+
</div>
|
| 393 |
+
<div>
|
| 394 |
+
<h4 class="text-xs uppercase tracking-wider text-gray-500 mb-1">Location</h4>
|
| 395 |
+
<p class="text-lg">San Francisco, CA</p>
|
| 396 |
+
</div>
|
| 397 |
+
</div>
|
| 398 |
+
</div>
|
| 399 |
+
</div>
|
| 400 |
+
|
| 401 |
+
<div class="bg-gray-800 border border-gray-700 p-10">
|
| 402 |
+
<h3 class="text-2xl font-bebas mb-8">Send Me a Message</h3>
|
| 403 |
+
<form class="space-y-6">
|
| 404 |
+
<div>
|
| 405 |
+
<label for="name" class="block text-sm uppercase tracking-wider text-gray-500 mb-2 font-mono">Name</label>
|
| 406 |
+
<input type="text" id="name" class="w-full px-4 py-3 bg-gray-900 border border-gray-700 focus:border-orange-500 focus:ring-2 focus:ring-orange-500/30 outline-none transition-all duration-300">
|
| 407 |
+
</div>
|
| 408 |
+
|
| 409 |
+
<div>
|
| 410 |
+
<label for="email" class="block text-sm uppercase tracking-wider text-gray-500 mb-2 font-mono">Email</label>
|
| 411 |
+
<input type="email" id="email" class="w-full px-4 py-3 bg-gray-900 border border-gray-700 focus:border-orange-500 focus:ring-2 focus:ring-orange-500/30 outline-none transition-all duration-300">
|
| 412 |
+
</div>
|
| 413 |
+
|
| 414 |
+
<div>
|
| 415 |
+
<label for="subject" class="block text-sm uppercase tracking-wider text-gray-500 mb-2 font-mono">Subject</label>
|
| 416 |
+
<input type="text" id="subject" class="w-full px-4 py-3 bg-gray-900 border border-gray-700 focus:border-orange-500 focus:ring-2 focus:ring-orange-500/30 outline-none transition-all duration-300">
|
| 417 |
+
</div>
|
| 418 |
+
|
| 419 |
+
<div>
|
| 420 |
+
<label for="message" class="block text-sm uppercase tracking-wider text-gray-500 mb-2 font-mono">Message</label>
|
| 421 |
+
<textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-900 border border-gray-700 focus:border-orange-500 focus:ring-2 focus:ring-orange-500/30 outline-none transition-all duration-300"></textarea>
|
| 422 |
+
</div>
|
| 423 |
+
|
| 424 |
+
<button type="submit" class="w-full px-8 py-4 bg-orange-500 hover:bg-orange-600 text-white text-sm font-semibold tracking-wider uppercase border-2 border-orange-500 transition-all duration-300">
|
| 425 |
+
Send Message
|
| 426 |
+
</button>
|
| 427 |
+
</form>
|
| 428 |
+
</div>
|
| 429 |
+
</div>
|
| 430 |
+
</div>
|
| 431 |
+
</section>
|
| 432 |
+
|
| 433 |
+
<!-- Footer -->
|
| 434 |
+
<footer class="py-12 bg-gray-950 border-t border-gray-800">
|
| 435 |
+
<div class="container mx-auto px-6">
|
| 436 |
+
<div class="flex flex-col md:flex-row justify-between items-center gap-8">
|
| 437 |
+
<div class="flex items-center gap-4">
|
| 438 |
+
<a href="#" class="flex items-center text-white no-underline">
|
| 439 |
+
<div class="flex items-center justify-center h-11 px-3 border-2 border-white rounded font-bebas text-2xl tracking-wider">
|
| 440 |
+
<span class="inline-block">N</span>
|
| 441 |
+
<span class="inline-block">ATHAN.</span>
|
| 442 |
+
</div>
|
| 443 |
+
</a>
|
| 444 |
+
<p class="text-gray-500 text-sm">© 2023 Digital Orange Strategist. All rights reserved.</p>
|
| 445 |
+
</div>
|
| 446 |
+
|
| 447 |
+
<div class="flex items-center gap-6">
|
| 448 |
+
<a href="#" class="text-gray-400 hover:text-orange-500 transition-colors duration-300">
|
| 449 |
+
<i data-feather="twitter"></i>
|
| 450 |
+
</a>
|
| 451 |
+
<a href="#" class="text-gray-400 hover:text-orange-500 transition-colors duration-300">
|
| 452 |
+
<i data-feather="linkedin"></i>
|
| 453 |
+
</a>
|
| 454 |
+
<a href="#" class="text-gray-400 hover:text-orange-500 transition-colors duration-300">
|
| 455 |
+
<i data-feather="dribbble"></i>
|
| 456 |
+
</a>
|
| 457 |
+
<a href="#" class="text-gray-400 hover:text-orange-500 transition-colors duration-300">
|
| 458 |
+
<i data-feather="github"></i>
|
| 459 |
+
</a>
|
| 460 |
+
</div>
|
| 461 |
+
</div>
|
| 462 |
+
</div>
|
| 463 |
+
</footer>
|
| 464 |
+
|
| 465 |
+
<script src="script.js"></script>
|
| 466 |
+
<script>
|
| 467 |
+
feather.replace();
|
| 468 |
+
</script>
|
| 469 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 470 |
+
</body>
|
| 471 |
+
</html>
|
|
@@ -0,0 +1,145 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 2 |
+
// Initialize Feather Icons
|
| 3 |
+
feather.replace();
|
| 4 |
+
|
| 5 |
+
// Mobile Menu Toggle
|
| 6 |
+
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
|
| 7 |
+
const mobileNav = document.getElementById('mobileNav');
|
| 8 |
+
const mobileNavClose = document.getElementById('mobileNavClose');
|
| 9 |
+
|
| 10 |
+
if (mobileMenuBtn && mobileNav) {
|
| 11 |
+
mobileMenuBtn.addEventListener('click', function() {
|
| 12 |
+
mobileNav.classList.add('active');
|
| 13 |
+
document.body.style.overflow = 'hidden';
|
| 14 |
+
});
|
| 15 |
+
|
| 16 |
+
mobileNavClose.addEventListener('click', function() {
|
| 17 |
+
mobileNav.classList.remove('active');
|
| 18 |
+
document.body.style.overflow = '';
|
| 19 |
+
});
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
// Custom Cursor
|
| 23 |
+
if (window.matchMedia('(pointer: fine)').matches) {
|
| 24 |
+
const cursor = document.getElementById('cursor');
|
| 25 |
+
const cursorTrail = document.getElementById('cursorTrail');
|
| 26 |
+
|
| 27 |
+
if (cursor && cursorTrail) {
|
| 28 |
+
document.body.classList.add('custom-cursor-enabled');
|
| 29 |
+
|
| 30 |
+
let mouseX = 0, mouseY = 0;
|
| 31 |
+
let trailX = 0, trailY = 0;
|
| 32 |
+
|
| 33 |
+
document.addEventListener('mousemove', (e) => {
|
| 34 |
+
mouseX = e.clientX;
|
| 35 |
+
mouseY = e.clientY;
|
| 36 |
+
cursor.style.left = mouseX + 'px';
|
| 37 |
+
cursor.style.top = mouseY + 'px';
|
| 38 |
+
});
|
| 39 |
+
|
| 40 |
+
function animateTrail() {
|
| 41 |
+
trailX += (mouseX - trailX) * 0.15;
|
| 42 |
+
trailY += (mouseY - trailY) * 0.15;
|
| 43 |
+
cursorTrail.style.left = trailX + 'px';
|
| 44 |
+
cursorTrail.style.top = trailY + 'px';
|
| 45 |
+
requestAnimationFrame(animateTrail);
|
| 46 |
+
}
|
| 47 |
+
animateTrail();
|
| 48 |
+
|
| 49 |
+
// Hover effects
|
| 50 |
+
const hoverElements = document.querySelectorAll('a, button, [data-hover]');
|
| 51 |
+
hoverElements.forEach(el => {
|
| 52 |
+
el.addEventListener('mouseenter', () => cursor.classList.add('cursor-hover'));
|
| 53 |
+
el.addEventListener('mouseleave', () => cursor.classList.remove('cursor-hover'));
|
| 54 |
+
});
|
| 55 |
+
}
|
| 56 |
+
}
|
| 57 |
+
|
| 58 |
+
// Nav scroll effect
|
| 59 |
+
const nav = document.getElementById('nav');
|
| 60 |
+
if (nav) {
|
| 61 |
+
window.addEventListener('scroll', function() {
|
| 62 |
+
if (window.scrollY > 50) {
|
| 63 |
+
nav.classList.add('nav-scrolled');
|
| 64 |
+
} else {
|
| 65 |
+
nav.classList.remove('nav-scrolled');
|
| 66 |
+
}
|
| 67 |
+
});
|
| 68 |
+
}
|
| 69 |
+
|
| 70 |
+
// Smooth scrolling for anchor links
|
| 71 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 72 |
+
anchor.addEventListener('click', function(e) {
|
| 73 |
+
e.preventDefault();
|
| 74 |
+
|
| 75 |
+
const targetId = this.getAttribute('href');
|
| 76 |
+
if (targetId === '#') return;
|
| 77 |
+
|
| 78 |
+
const targetElement = document.querySelector(targetId);
|
| 79 |
+
if (targetElement) {
|
| 80 |
+
targetElement.scrollIntoView({
|
| 81 |
+
behavior: 'smooth'
|
| 82 |
+
});
|
| 83 |
+
|
| 84 |
+
// Close mobile menu if open
|
| 85 |
+
if (mobileNav && mobileNav.classList.contains('active')) {
|
| 86 |
+
mobileNav.classList.remove('active');
|
| 87 |
+
document.body.style.overflow = '';
|
| 88 |
+
}
|
| 89 |
+
}
|
| 90 |
+
});
|
| 91 |
+
});
|
| 92 |
+
|
| 93 |
+
// Intersection Observer for animations
|
| 94 |
+
const animateOnScroll = function() {
|
| 95 |
+
const elements = document.querySelectorAll('.animate-fade-up');
|
| 96 |
+
if (elements.length === 0) return;
|
| 97 |
+
|
| 98 |
+
const observer = new IntersectionObserver((entries) => {
|
| 99 |
+
entries.forEach(entry => {
|
| 100 |
+
if (entry.isIntersecting) {
|
| 101 |
+
entry.target.style.opacity = '1';
|
| 102 |
+
entry.target.style.transform = 'translateY(0)';
|
| 103 |
+
observer.unobserve(entry.target);
|
| 104 |
+
}
|
| 105 |
+
});
|
| 106 |
+
}, { threshold: 0.1 });
|
| 107 |
+
|
| 108 |
+
elements.forEach(element => {
|
| 109 |
+
observer.observe(element);
|
| 110 |
+
});
|
| 111 |
+
};
|
| 112 |
+
|
| 113 |
+
animateOnScroll();
|
| 114 |
+
|
| 115 |
+
// Form submission
|
| 116 |
+
const contactForm = document.querySelector('form');
|
| 117 |
+
if (contactForm) {
|
| 118 |
+
contactForm.addEventListener('submit', function(e) {
|
| 119 |
+
e.preventDefault();
|
| 120 |
+
|
| 121 |
+
// Simple validation
|
| 122 |
+
let isValid = true;
|
| 123 |
+
const inputs = this.querySelectorAll('input, textarea');
|
| 124 |
+
|
| 125 |
+
inputs.forEach(input => {
|
| 126 |
+
if (!input.value.trim()) {
|
| 127 |
+
input.style.borderColor = '#FF5722';
|
| 128 |
+
isValid = false;
|
| 129 |
+
} else {
|
| 130 |
+
input.style.borderColor = '';
|
| 131 |
+
}
|
| 132 |
+
});
|
| 133 |
+
|
| 134 |
+
if (isValid) {
|
| 135 |
+
// Here you would typically send the form data to a server
|
| 136 |
+
alert('Thank you for your message! I will get back to you soon.');
|
| 137 |
+
this.reset();
|
| 138 |
+
}
|
| 139 |
+
});
|
| 140 |
+
}
|
| 141 |
+
|
| 142 |
+
// Console easter egg
|
| 143 |
+
console.log('%c👋 Looking for a digital strategist?', 'font-size: 18px; color: #FF5722;');
|
| 144 |
+
console.log('%cLet\'s build something amazing together!', 'font-size: 14px; color: #888;');
|
| 145 |
+
});
|
|
@@ -1,28 +1,167 @@
|
|
| 1 |
-
|
| 2 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
}
|
| 17 |
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
padding: 16px;
|
| 22 |
-
border: 1px solid lightgray;
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
|
| 27 |
-
|
|
|
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
|
| 2 |
+
|
| 3 |
+
@keyframes fade-up {
|
| 4 |
+
from {
|
| 5 |
+
opacity: 0;
|
| 6 |
+
transform: translateY(30px);
|
| 7 |
+
}
|
| 8 |
+
to {
|
| 9 |
+
opacity: 1;
|
| 10 |
+
transform: translateY(0);
|
| 11 |
+
}
|
| 12 |
+
}
|
| 13 |
+
|
| 14 |
+
@keyframes grain {
|
| 15 |
+
0%, 100% { transform: translate(0, 0); }
|
| 16 |
+
10% { transform: translate(-5%, -10%); }
|
| 17 |
+
20% { transform: translate(-15%, 5%); }
|
| 18 |
+
30% { transform: translate(7%, -25%); }
|
| 19 |
+
40% { transform: translate(-5%, 25%); }
|
| 20 |
+
50% { transform: translate(-15%, 10%); }
|
| 21 |
+
60% { transform: translate(15%, 0%); }
|
| 22 |
+
70% { transform: translate(0%, 15%); }
|
| 23 |
+
80% { transform: translate(3%, 35%); }
|
| 24 |
+
90% { transform: translate(-10%, 10%); }
|
| 25 |
+
}
|
| 26 |
+
|
| 27 |
+
.animate-fade-up {
|
| 28 |
+
animation: fade-up 0.8s ease forwards;
|
| 29 |
+
opacity: 0;
|
| 30 |
+
}
|
| 31 |
+
|
| 32 |
+
.animate-delay-100 {
|
| 33 |
+
animation-delay: 0.1s;
|
| 34 |
+
}
|
| 35 |
+
|
| 36 |
+
.animate-delay-200 {
|
| 37 |
+
animation-delay: 0.2s;
|
| 38 |
+
}
|
| 39 |
+
|
| 40 |
+
.animate-delay-300 {
|
| 41 |
+
animation-delay: 0.3s;
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
+
.animate-grain {
|
| 45 |
+
animation: grain 8s steps(10) infinite;
|
| 46 |
+
}
|
| 47 |
+
|
| 48 |
+
.font-bebas {
|
| 49 |
+
font-family: 'Bebas Neue', sans-serif;
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
.font-mono {
|
| 53 |
+
font-family: 'JetBrains Mono', monospace;
|
| 54 |
+
}
|
| 55 |
+
|
| 56 |
+
/* Custom cursor styles */
|
| 57 |
+
@media (min-width: 768px) {
|
| 58 |
+
.cursor {
|
| 59 |
+
transition: transform 0.2s ease;
|
| 60 |
+
}
|
| 61 |
+
|
| 62 |
+
.cursor-hover {
|
| 63 |
+
transform: scale(2);
|
| 64 |
+
background: transparent;
|
| 65 |
+
border: 2px solid #FF5722;
|
| 66 |
+
}
|
| 67 |
+
}
|
| 68 |
+
|
| 69 |
+
/* Mobile menu animation */
|
| 70 |
+
#mobileNav {
|
| 71 |
+
transition: opacity 0.3s ease, visibility 0.3s ease;
|
| 72 |
+
}
|
| 73 |
+
|
| 74 |
+
#mobileNav.active {
|
| 75 |
+
opacity: 1;
|
| 76 |
+
visibility: visible;
|
| 77 |
+
}
|
| 78 |
+
|
| 79 |
+
/* Logo hover effect */
|
| 80 |
+
.logo:hover .logo-expand {
|
| 81 |
+
max-width: 120px;
|
| 82 |
+
opacity: 1;
|
| 83 |
+
}
|
| 84 |
+
|
| 85 |
+
.logo:hover .logo-box {
|
| 86 |
+
padding: 0 14px;
|
| 87 |
+
}
|
| 88 |
+
|
| 89 |
+
/* Hero section adjustments */
|
| 90 |
+
@media (max-width: 768px) {
|
| 91 |
+
.hero {
|
| 92 |
+
min-height: auto;
|
| 93 |
+
padding-top: 120px;
|
| 94 |
+
padding-bottom: 80px;
|
| 95 |
+
}
|
| 96 |
+
|
| 97 |
+
.hero h1 {
|
| 98 |
+
font-size: 4rem;
|
| 99 |
+
}
|
| 100 |
+
}
|
| 101 |
+
|
| 102 |
+
/* Stats section animation */
|
| 103 |
+
.stats-section {
|
| 104 |
+
background: linear-gradient(135deg, #FF5722 0%, #FF7043 100%);
|
| 105 |
+
}
|
| 106 |
+
|
| 107 |
+
/* Testimonial quote styling */
|
| 108 |
+
.testimonial-quote {
|
| 109 |
+
position: relative;
|
| 110 |
+
}
|
| 111 |
+
|
| 112 |
+
.testimonial-quote::before {
|
| 113 |
+
content: '"';
|
| 114 |
+
position: absolute;
|
| 115 |
+
top: -20px;
|
| 116 |
+
left: -10px;
|
| 117 |
+
font-size: 80px;
|
| 118 |
+
color: rgba(255, 255, 255, 0.1);
|
| 119 |
+
font-family: Georgia, serif;
|
| 120 |
+
line-height: 1;
|
| 121 |
}
|
| 122 |
|
| 123 |
+
/* Form input focus styles */
|
| 124 |
+
input:focus, textarea:focus {
|
| 125 |
+
box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.3);
|
| 126 |
}
|
| 127 |
|
| 128 |
+
/* Navigation scroll effect */
|
| 129 |
+
.nav-scrolled {
|
| 130 |
+
background: rgba(10, 10, 10, 0.98);
|
| 131 |
+
backdrop-filter: blur(20px);
|
| 132 |
+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
|
| 133 |
}
|
| 134 |
|
| 135 |
+
/* Project card hover effect */
|
| 136 |
+
.project-card:hover img {
|
| 137 |
+
transform: scale(1.1);
|
|
|
|
|
|
|
|
|
|
| 138 |
}
|
| 139 |
|
| 140 |
+
/* Service card icon animation */
|
| 141 |
+
.service-icon {
|
| 142 |
+
transition: transform 0.3s ease;
|
| 143 |
}
|
| 144 |
+
|
| 145 |
+
.service-card:hover .service-icon {
|
| 146 |
+
transform: rotate(10deg) scale(1.1);
|
| 147 |
+
}
|
| 148 |
+
|
| 149 |
+
/* Button hover effects */
|
| 150 |
+
.btn-hover-effect:hover {
|
| 151 |
+
transform: translateY(-3px);
|
| 152 |
+
box-shadow: 0 10px 20px rgba(255, 87, 34, 0.2);
|
| 153 |
+
}
|
| 154 |
+
|
| 155 |
+
/* Reduced motion support */
|
| 156 |
+
@media (prefers-reduced-motion: reduce) {
|
| 157 |
+
* {
|
| 158 |
+
animation-duration: 0.01ms !important;
|
| 159 |
+
animation-iteration-count: 1 !important;
|
| 160 |
+
transition-duration: 0.01ms !important;
|
| 161 |
+
scroll-behavior: auto !important;
|
| 162 |
+
}
|
| 163 |
+
|
| 164 |
+
.cursor, .cursor-trail {
|
| 165 |
+
display: none;
|
| 166 |
+
}
|
| 167 |
+
}
|