Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
ceaa8d10c9 | ||
|
|
a64664a505 | ||
|
|
36ead92a6c |
31
api/pexels.php
Normal file
31
api/pexels.php
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<?php
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
require_once __DIR__.'/../includes/pexels.php';
|
||||||
|
|
||||||
|
$qs = isset($_GET['queries']) ? explode(',', $_GET['queries']) : ['web design', 'code', 'office', 'creative', 'technology'];
|
||||||
|
$out = [];
|
||||||
|
foreach ($qs as $q) {
|
||||||
|
$u = 'https://api.pexels.com/v1/search?query=' . urlencode(trim($q)) . '&orientation=landscape&per_page=1&page=1';
|
||||||
|
$d = pexels_get($u);
|
||||||
|
if ($d && !empty($d['photos'])) {
|
||||||
|
$p = $d['photos'][0];
|
||||||
|
$src = $p['src']['large'] ?? $p['src']['original'];
|
||||||
|
$filename = $p['id'] . '.jpg';
|
||||||
|
$dest = __DIR__.'/../assets/images/pexels/'.$filename;
|
||||||
|
if (!file_exists($dest)) {
|
||||||
|
download_to($src, $dest);
|
||||||
|
}
|
||||||
|
$out[] = [
|
||||||
|
'src' => 'assets/images/pexels/'.$filename,
|
||||||
|
'photographer' => $p['photographer'] ?? 'Unknown',
|
||||||
|
'photographer_url' => $p['photographer_url'] ?? '',
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
$out[] = [
|
||||||
|
'src' => 'https://picsum.photos/600/400?random='.rand(1,100),
|
||||||
|
'photographer' => 'Random Picsum',
|
||||||
|
'photographer_url' => 'https://picsum.photos/'
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
echo json_encode($out);
|
||||||
@ -1,403 +1,479 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #f6f7f9;
|
||||||
|
--surface: #ffffff;
|
||||||
|
--text: #111827;
|
||||||
|
--muted: #6b7280;
|
||||||
|
--border: #e5e7eb;
|
||||||
|
--primary: #2563eb;
|
||||||
|
--primary-dark: #1d4ed8;
|
||||||
|
--radius-sm: 6px;
|
||||||
|
--radius-md: 10px;
|
||||||
|
--radius-lg: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
background-size: 400% 400%;
|
background: var(--bg);
|
||||||
animation: gradient 15s ease infinite;
|
color: var(--text);
|
||||||
color: #212529;
|
margin: 0;
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-wrapper {
|
main {
|
||||||
display: flex;
|
padding-top: 72px;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes gradient {
|
.section {
|
||||||
0% {
|
position: relative;
|
||||||
background-position: 0% 50%;
|
isolation: isolate;
|
||||||
}
|
overflow: visible;
|
||||||
50% {
|
padding: 72px 0;
|
||||||
background-position: 100% 50%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: 0% 50%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-container {
|
.section > .container {
|
||||||
width: 100%;
|
padding-inline: clamp(0.75rem, 2vw, 1.25rem);
|
||||||
max-width: 600px;
|
|
||||||
background: rgba(255, 255, 255, 0.85);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 85vh;
|
|
||||||
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
|
|
||||||
backdrop-filter: blur(15px);
|
|
||||||
-webkit-backdrop-filter: blur(15px);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-header {
|
.section h2 {
|
||||||
padding: 1.5rem;
|
letter-spacing: -0.02em;
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-messages {
|
.section .lead,
|
||||||
flex: 1;
|
.section p {
|
||||||
overflow-y: auto;
|
line-height: 1.7;
|
||||||
padding: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.25rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom Scrollbar */
|
.section > .container {
|
||||||
::-webkit-scrollbar {
|
position: relative;
|
||||||
width: 6px;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
.section-muted {
|
||||||
background: transparent;
|
background: linear-gradient(180deg, rgba(241, 243, 246, 0.78), rgba(246, 247, 249, 0.56));
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.72);
|
||||||
|
border-bottom: 1px solid rgba(229, 231, 235, 0.55);
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
.section-muted::before {
|
||||||
background: rgba(255, 255, 255, 0.3);
|
content: '';
|
||||||
border-radius: 10px;
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.42), transparent 30%),
|
||||||
|
radial-gradient(circle at 86% 78%, rgba(37, 99, 235, 0.1), transparent 24%);
|
||||||
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
.eyebrow {
|
||||||
background: rgba(255, 255, 255, 0.5);
|
letter-spacing: 0.16em;
|
||||||
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message {
|
.navbar {
|
||||||
max-width: 85%;
|
background: rgba(255, 255, 255, 0.96);
|
||||||
padding: 0.85rem 1.1rem;
|
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
|
||||||
border-radius: 16px;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
|
||||||
animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeIn {
|
.navbar-brand {
|
||||||
from { opacity: 0; transform: translateY(20px) scale(0.95); }
|
font-size: 1.05rem;
|
||||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.message.visitor {
|
.hero-section .lead {
|
||||||
align-self: flex-end;
|
font-size: 1.1rem;
|
||||||
background: linear-gradient(135deg, #212529 0%, #343a40 100%);
|
|
||||||
color: #fff;
|
|
||||||
border-bottom-right-radius: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.message.bot {
|
.hero-card,
|
||||||
align-self: flex-start;
|
.about-panel,
|
||||||
background: #ffffff;
|
.contact-box {
|
||||||
color: #212529;
|
background: var(--surface);
|
||||||
border-bottom-left-radius: 4px;
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-input-area {
|
.badge-soft {
|
||||||
padding: 1.25rem;
|
background: #f3f4f6;
|
||||||
background: rgba(255, 255, 255, 0.5);
|
color: var(--text);
|
||||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
border-radius: 999px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-input-area form {
|
.btn-primary {
|
||||||
display: flex;
|
background: var(--primary);
|
||||||
gap: 0.75rem;
|
border-color: var(--primary);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 0.65rem 1.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-input-area input {
|
.btn-primary:hover,
|
||||||
flex: 1;
|
.btn-primary:focus {
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
background: var(--primary-dark);
|
||||||
border-radius: 12px;
|
border-color: var(--primary-dark);
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
outline: none;
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-input-area input:focus {
|
.btn-outline-dark {
|
||||||
border-color: #23a6d5;
|
border-radius: var(--radius-sm);
|
||||||
box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
|
padding: 0.65rem 1.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-input-area button {
|
.card {
|
||||||
background: #212529;
|
border-radius: var(--radius-md);
|
||||||
color: #fff;
|
|
||||||
border: none;
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input-area button:hover {
|
|
||||||
background: #000;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Background Animations */
|
|
||||||
.bg-animations {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob {
|
|
||||||
position: absolute;
|
|
||||||
width: 500px;
|
|
||||||
height: 500px;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: 50%;
|
|
||||||
filter: blur(80px);
|
|
||||||
animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob-1 {
|
|
||||||
top: -10%;
|
|
||||||
left: -10%;
|
|
||||||
background: rgba(238, 119, 82, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob-2 {
|
|
||||||
bottom: -10%;
|
|
||||||
right: -10%;
|
|
||||||
background: rgba(35, 166, 213, 0.4);
|
|
||||||
animation-delay: -7s;
|
|
||||||
width: 600px;
|
|
||||||
height: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob-3 {
|
|
||||||
top: 40%;
|
|
||||||
left: 30%;
|
|
||||||
background: rgba(231, 60, 126, 0.3);
|
|
||||||
animation-delay: -14s;
|
|
||||||
width: 450px;
|
|
||||||
height: 450px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes move {
|
|
||||||
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
|
|
||||||
33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); }
|
|
||||||
66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); }
|
|
||||||
100% { transform: translate(0, 0) rotate(360deg) scale(1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-link {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-link:hover {
|
|
||||||
background: rgba(0, 0, 0, 0.4);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Admin Styles */
|
|
||||||
.admin-container {
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 3rem auto;
|
|
||||||
padding: 2.5rem;
|
|
||||||
background: rgba(255, 255, 255, 0.85);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
border-radius: 24px;
|
|
||||||
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-container h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
color: #212529;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0 8px;
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table th {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
padding: 1rem;
|
|
||||||
color: #6c757d;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table td {
|
|
||||||
background: #fff;
|
|
||||||
padding: 1rem;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table tr td:first-child { border-radius: 12px 0 0 12px; }
|
|
||||||
.table tr td:last-child { border-radius: 0 12px 12px 0; }
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control {
|
.form-control {
|
||||||
width: 100%;
|
border-radius: var(--radius-sm);
|
||||||
padding: 0.75rem 1rem;
|
border-color: var(--border);
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 12px;
|
|
||||||
background: #fff;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control:focus {
|
.form-control:focus {
|
||||||
outline: none;
|
border-color: var(--primary);
|
||||||
border-color: #23a6d5;
|
box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
|
||||||
box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-container {
|
.toast {
|
||||||
display: flex;
|
border-radius: var(--radius-sm);
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-links {
|
footer a {
|
||||||
display: flex;
|
text-decoration: none;
|
||||||
gap: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-card {
|
@media (max-width: 991px) {
|
||||||
background: rgba(255, 255, 255, 0.6);
|
.section {
|
||||||
padding: 2rem;
|
padding: 56px 0;
|
||||||
border-radius: 20px;
|
}
|
||||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
.hero-section {
|
||||||
margin-bottom: 2.5rem;
|
padding-top: 40px;
|
||||||
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
}
|
||||||
|
.hero-collage {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.hero-collage-main {
|
||||||
|
min-height: 260px;
|
||||||
|
}
|
||||||
|
.hero-collage-stack {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
.hero-collage-stack img {
|
||||||
|
min-height: 160px;
|
||||||
|
}
|
||||||
|
.hero-collage-strip {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.hero-strip-photo {
|
||||||
|
height: 180px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-card h3 {
|
|
||||||
margin-top: 0;
|
html {
|
||||||
margin-bottom: 1.5rem;
|
scroll-behavior: smooth;
|
||||||
font-weight: 700;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-delete {
|
body {
|
||||||
background: #dc3545;
|
position: relative;
|
||||||
color: white;
|
overflow-x: hidden;
|
||||||
border: none;
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-add {
|
.navbar,
|
||||||
background: #212529;
|
main,
|
||||||
color: white;
|
footer {
|
||||||
border: none;
|
position: relative;
|
||||||
padding: 0.5rem 1rem;
|
z-index: 1;
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-save {
|
.site-background {
|
||||||
background: #0088cc;
|
position: fixed;
|
||||||
color: white;
|
inset: 0;
|
||||||
border: none;
|
pointer-events: none;
|
||||||
padding: 0.8rem 1.5rem;
|
overflow: hidden;
|
||||||
border-radius: 12px;
|
z-index: 0;
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
width: 100%;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.webhook-url {
|
.bg-grid,
|
||||||
font-size: 0.85em;
|
.bg-orb,
|
||||||
color: #555;
|
.bg-cursor-glow {
|
||||||
margin-top: 0.5rem;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-table-container {
|
.bg-grid {
|
||||||
overflow-x: auto;
|
inset: 0;
|
||||||
background: rgba(255, 255, 255, 0.4);
|
background-image:
|
||||||
padding: 1rem;
|
linear-gradient(rgba(17, 24, 39, 0.03) 1px, transparent 1px),
|
||||||
border-radius: 12px;
|
linear-gradient(90deg, rgba(17, 24, 39, 0.03) 1px, transparent 1px);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
background-size: 72px 72px;
|
||||||
|
mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.68), transparent 78%);
|
||||||
|
opacity: 0.22;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-table {
|
.bg-orb {
|
||||||
width: 100%;
|
border-radius: 50%;
|
||||||
|
filter: blur(4px);
|
||||||
|
opacity: 0.7;
|
||||||
|
will-change: transform;
|
||||||
|
animation: pulseOrb 12s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-table-time {
|
.bg-orb-one {
|
||||||
width: 15%;
|
top: 7%;
|
||||||
white-space: nowrap;
|
left: -8%;
|
||||||
font-size: 0.85em;
|
width: 340px;
|
||||||
color: #555;
|
height: 340px;
|
||||||
|
background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.34), rgba(37, 99, 235, 0.06) 60%, transparent 72%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-table-user {
|
.bg-orb-two {
|
||||||
width: 35%;
|
top: 18%;
|
||||||
background: rgba(255, 255, 255, 0.3);
|
right: -10%;
|
||||||
border-radius: 8px;
|
width: 420px;
|
||||||
padding: 8px;
|
height: 420px;
|
||||||
|
background: radial-gradient(circle at 40% 40%, rgba(16, 185, 129, 0.24), rgba(37, 99, 235, 0.06) 58%, transparent 74%);
|
||||||
|
animation-duration: 18s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.history-table-ai {
|
.bg-orb-three {
|
||||||
width: 50%;
|
bottom: -8%;
|
||||||
background: rgba(255, 255, 255, 0.5);
|
left: 48%;
|
||||||
border-radius: 8px;
|
width: 360px;
|
||||||
padding: 8px;
|
height: 360px;
|
||||||
|
background: radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.2), rgba(37, 99, 235, 0.06) 62%, transparent 76%);
|
||||||
|
animation-duration: 20s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-messages {
|
.bg-cursor-glow {
|
||||||
text-align: center;
|
top: 0;
|
||||||
color: #777;
|
left: 0;
|
||||||
}
|
width: 240px;
|
||||||
|
height: 240px;
|
||||||
|
margin: -120px 0 0 -120px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.03) 48%, transparent 72%);
|
||||||
|
opacity: 0.5;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-section,
|
||||||
|
.section-muted,
|
||||||
|
.about-panel,
|
||||||
|
.hero-card,
|
||||||
|
.contact-box,
|
||||||
|
.card {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-section::after,
|
||||||
|
.section-muted::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-section::after {
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-muted::after {
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-card,
|
||||||
|
.about-panel,
|
||||||
|
.contact-box,
|
||||||
|
.card,
|
||||||
|
.navbar {
|
||||||
|
-webkit-backdrop-filter: none;
|
||||||
|
backdrop-filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-card,
|
||||||
|
.about-panel,
|
||||||
|
.contact-box,
|
||||||
|
.card {
|
||||||
|
background: rgba(255, 255, 255, 0.97);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card,
|
||||||
|
.hero-card,
|
||||||
|
.about-panel,
|
||||||
|
.contact-box {
|
||||||
|
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.work-card,
|
||||||
|
.about-panel,
|
||||||
|
.contact-box,
|
||||||
|
.testimonial-card {
|
||||||
|
border-radius: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-collage {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-collage-main,
|
||||||
|
.hero-collage-stack,
|
||||||
|
.hero-collage-strip {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 24px;
|
||||||
|
background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(16, 185, 129, 0.08));
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-collage-main {
|
||||||
|
min-height: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-collage-main img,
|
||||||
|
.hero-collage-stack img,
|
||||||
|
.hero-strip-photo {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-collage-main::after,
|
||||||
|
.hero-collage-stack::after,
|
||||||
|
.hero-collage-strip::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(180deg, rgba(15, 23, 42, 0) 35%, rgba(15, 23, 42, 0.2) 100%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-collage-main img,
|
||||||
|
.hero-collage-stack img,
|
||||||
|
.hero-strip-photo {
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-collage-stack {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-collage-stack img {
|
||||||
|
min-height: 153px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-collage-badge {
|
||||||
|
position: absolute;
|
||||||
|
left: 16px;
|
||||||
|
bottom: 16px;
|
||||||
|
z-index: 1;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.45rem 0.8rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.86);
|
||||||
|
color: #0f172a;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-collage-strip {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 96px minmax(0, 1fr);
|
||||||
|
gap: 14px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-strip-photo {
|
||||||
|
height: 96px;
|
||||||
|
border-radius: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-strip-copy {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-media {
|
||||||
|
will-change: transform;
|
||||||
|
transform-origin: center center;
|
||||||
|
transition: transform 0.16s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-img-top.parallax-media,
|
||||||
|
.testi-img.parallax-media {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.work-card {
|
||||||
|
border: 1px solid rgba(229, 231, 235, 0.9);
|
||||||
|
background: rgba(255, 255, 255, 0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.work-card .card-body,
|
||||||
|
.testimonial-card .card-body {
|
||||||
|
padding: 1.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-card {
|
||||||
|
border: 1px solid rgba(229, 231, 235, 0.9);
|
||||||
|
background: rgba(255, 255, 255, 0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-box {
|
||||||
|
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.95));
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary,
|
||||||
|
.btn-outline-dark {
|
||||||
|
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover,
|
||||||
|
.btn-outline-dark:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulseOrb {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 0.52;
|
||||||
|
filter: blur(4px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.78;
|
||||||
|
filter: blur(2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
html {
|
||||||
|
scroll-behavior: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-orb,
|
||||||
|
.bg-cursor-glow,
|
||||||
|
.btn-primary,
|
||||||
|
.btn-outline-dark {
|
||||||
|
animation: none;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-cursor-glow {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-media {
|
||||||
|
transition: none;
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
BIN
assets/images/pexels/1148998.jpg
Normal file
BIN
assets/images/pexels/1148998.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
assets/images/pexels/134469.jpg
Normal file
BIN
assets/images/pexels/134469.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
assets/images/pexels/1714208.jpg
Normal file
BIN
assets/images/pexels/1714208.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
assets/images/pexels/2117283.jpg
Normal file
BIN
assets/images/pexels/2117283.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
assets/images/pexels/3872166.jpg
Normal file
BIN
assets/images/pexels/3872166.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
assets/images/pexels/4175028.jpg
Normal file
BIN
assets/images/pexels/4175028.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
assets/images/pexels/4189611.jpg
Normal file
BIN
assets/images/pexels/4189611.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
assets/images/pexels/4872054.jpg
Normal file
BIN
assets/images/pexels/4872054.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
assets/images/pexels/6476782.jpg
Normal file
BIN
assets/images/pexels/6476782.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
assets/images/pexels/7434184.jpg
Normal file
BIN
assets/images/pexels/7434184.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
assets/images/pexels/7816667.jpg
Normal file
BIN
assets/images/pexels/7816667.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
assets/images/pexels/815996.jpg
Normal file
BIN
assets/images/pexels/815996.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
@ -1,39 +1,73 @@
|
|||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const chatForm = document.getElementById('chat-form');
|
const navLinks = document.querySelectorAll('a.nav-link[href^="#"]');
|
||||||
const chatInput = document.getElementById('chat-input');
|
navLinks.forEach((link) => {
|
||||||
const chatMessages = document.getElementById('chat-messages');
|
link.addEventListener('click', (event) => {
|
||||||
|
const targetId = link.getAttribute('href');
|
||||||
|
const target = document.querySelector(targetId);
|
||||||
|
if (target) {
|
||||||
|
event.preventDefault();
|
||||||
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
const appendMessage = (text, sender) => {
|
const toastEl = document.querySelector('.toast');
|
||||||
const msgDiv = document.createElement('div');
|
if (toastEl && window.bootstrap) {
|
||||||
msgDiv.classList.add('message', sender);
|
const toast = new bootstrap.Toast(toastEl, { delay: 4000 });
|
||||||
msgDiv.textContent = text;
|
toast.show();
|
||||||
chatMessages.appendChild(msgDiv);
|
}
|
||||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|
||||||
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||||
|
const orbs = Array.from(document.querySelectorAll('.bg-orb'));
|
||||||
|
const cursorGlow = document.querySelector('.bg-cursor-glow');
|
||||||
|
const parallaxItems = Array.from(document.querySelectorAll('[data-parallax]'));
|
||||||
|
|
||||||
|
if (!prefersReducedMotion && (orbs.length || cursorGlow || parallaxItems.length)) {
|
||||||
|
const pointer = { x: window.innerWidth / 2, y: window.innerHeight / 3 };
|
||||||
|
const smooth = { x: pointer.x, y: pointer.y };
|
||||||
|
let scrollY = window.scrollY;
|
||||||
|
|
||||||
|
const render = () => {
|
||||||
|
smooth.x += (pointer.x - smooth.x) * 0.08;
|
||||||
|
smooth.y += (pointer.y - smooth.y) * 0.08;
|
||||||
|
|
||||||
|
orbs.forEach((orb, index) => {
|
||||||
|
const depth = Number(orb.dataset.depth || 20);
|
||||||
|
const direction = index % 2 === 0 ? 1 : -1;
|
||||||
|
const dx = ((smooth.x / window.innerWidth) - 0.5) * depth * direction;
|
||||||
|
const dy = ((smooth.y / window.innerHeight) - 0.5) * depth;
|
||||||
|
orb.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
|
||||||
|
});
|
||||||
|
|
||||||
|
parallaxItems.forEach((item, index) => {
|
||||||
|
const depth = Number(item.dataset.parallax || 12);
|
||||||
|
const direction = Number(item.dataset.parallaxDirection || (index % 2 === 0 ? 1 : -1));
|
||||||
|
const rawMoveX = ((smooth.x / window.innerWidth) - 0.5) * depth * 0.7 * direction;
|
||||||
|
const rawMoveY = ((smooth.y / window.innerHeight) - 0.5) * depth * 0.45 + (scrollY * 0.004 * depth * direction);
|
||||||
|
const limitX = Math.max(8, depth * 1.6);
|
||||||
|
const limitY = Math.max(10, depth * 1.8);
|
||||||
|
const moveX = Math.max(-limitX, Math.min(limitX, rawMoveX));
|
||||||
|
const moveY = Math.max(-limitY, Math.min(limitY, rawMoveY));
|
||||||
|
item.style.transform = `translate3d(${moveX}px, ${moveY}px, 0) scale(1.02)`;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (cursorGlow) {
|
||||||
|
cursorGlow.style.transform = `translate3d(${smooth.x}px, ${smooth.y}px, 0)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.requestAnimationFrame(render);
|
||||||
};
|
};
|
||||||
|
|
||||||
chatForm.addEventListener('submit', async (e) => {
|
window.addEventListener('pointermove', (event) => {
|
||||||
e.preventDefault();
|
pointer.x = event.clientX;
|
||||||
const message = chatInput.value.trim();
|
pointer.y = event.clientY;
|
||||||
if (!message) return;
|
}, { passive: true });
|
||||||
|
|
||||||
appendMessage(message, 'visitor');
|
window.addEventListener('scroll', () => {
|
||||||
chatInput.value = '';
|
scrollY = window.scrollY;
|
||||||
|
pointer.y = window.innerHeight / 3 + (window.scrollY * 0.08);
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
try {
|
render();
|
||||||
const response = await fetch('api/chat.php', {
|
}
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ message })
|
|
||||||
});
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
// Artificial delay for realism
|
|
||||||
setTimeout(() => {
|
|
||||||
appendMessage(data.reply, 'bot');
|
|
||||||
}, 500);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error:', error);
|
|
||||||
appendMessage("Sorry, something went wrong. Please try again.", 'bot');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
11
db/migrations/001_create_contact_requests.sql
Normal file
11
db/migrations/001_create_contact_requests.sql
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
-- Create contact requests table
|
||||||
|
CREATE TABLE IF NOT EXISTS contact_requests (
|
||||||
|
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
|
||||||
|
name VARCHAR(120) NOT NULL,
|
||||||
|
email VARCHAR(160) NOT NULL,
|
||||||
|
message TEXT NOT NULL,
|
||||||
|
status VARCHAR(30) NOT NULL DEFAULT 'new',
|
||||||
|
ip_address VARCHAR(45) DEFAULT NULL,
|
||||||
|
user_agent VARCHAR(255) DEFAULT NULL,
|
||||||
|
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
||||||
118
inbox.php
Normal file
118
inbox.php
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
<?php
|
||||||
|
declare(strict_types=1);
|
||||||
|
@ini_set('display_errors', '1');
|
||||||
|
@error_reporting(E_ALL);
|
||||||
|
@date_default_timezone_set('UTC');
|
||||||
|
|
||||||
|
require_once __DIR__ . '/db/config.php';
|
||||||
|
|
||||||
|
function ensure_contact_table(): void {
|
||||||
|
db()->exec(
|
||||||
|
"CREATE TABLE IF NOT EXISTS contact_requests (
|
||||||
|
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
|
||||||
|
name VARCHAR(120) NOT NULL,
|
||||||
|
email VARCHAR(160) NOT NULL,
|
||||||
|
message TEXT NOT NULL,
|
||||||
|
status VARCHAR(30) NOT NULL DEFAULT 'new',
|
||||||
|
ip_address VARCHAR(45) DEFAULT NULL,
|
||||||
|
user_agent VARCHAR(255) DEFAULT NULL,
|
||||||
|
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ensure_contact_table();
|
||||||
|
|
||||||
|
$detail = null;
|
||||||
|
if (isset($_GET['id']) && ctype_digit($_GET['id'])) {
|
||||||
|
$stmt = db()->prepare('SELECT * FROM contact_requests WHERE id = :id');
|
||||||
|
$stmt->execute([':id' => (int) $_GET['id']]);
|
||||||
|
$detail = $stmt->fetch();
|
||||||
|
}
|
||||||
|
|
||||||
|
$stmt = db()->prepare('SELECT id, name, email, status, created_at FROM contact_requests ORDER BY created_at DESC LIMIT 50');
|
||||||
|
$stmt->execute();
|
||||||
|
$rows = $stmt->fetchAll();
|
||||||
|
?>
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="robots" content="noindex, nofollow" />
|
||||||
|
<title>Contact Requests</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link href="assets/css/custom.css?v=<?= time(); ?>" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav class="navbar navbar-light bg-white border-bottom">
|
||||||
|
<div class="container">
|
||||||
|
<a class="navbar-brand fw-semibold" href="index.php">← Back to portfolio</a>
|
||||||
|
<span class="text-muted small">Contact Requests</span>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-lg-7">
|
||||||
|
<div class="card border-0 shadow-sm">
|
||||||
|
<div class="card-body">
|
||||||
|
<h1 class="h4 fw-semibold mb-3">Latest inquiries</h1>
|
||||||
|
<?php if (!$rows): ?>
|
||||||
|
<p class="text-muted mb-0">No inquiries yet. New submissions will appear here.</p>
|
||||||
|
<?php else: ?>
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table align-middle">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Email</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Received</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<?php foreach ($rows as $row): ?>
|
||||||
|
<tr>
|
||||||
|
<td>#<?= htmlspecialchars((string) $row['id']) ?></td>
|
||||||
|
<td><a class="link-dark fw-semibold" href="inbox.php?id=<?= htmlspecialchars((string) $row['id']) ?>"><?= htmlspecialchars($row['name']) ?></a></td>
|
||||||
|
<td><?= htmlspecialchars($row['email']) ?></td>
|
||||||
|
<td><span class="badge badge-soft"><?= htmlspecialchars($row['status']) ?></span></td>
|
||||||
|
<td class="text-muted small"><?= htmlspecialchars($row['created_at']) ?></td>
|
||||||
|
</tr>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-5">
|
||||||
|
<div class="card border-0 shadow-sm h-100">
|
||||||
|
<div class="card-body">
|
||||||
|
<h2 class="h5 fw-semibold">Inquiry detail</h2>
|
||||||
|
<?php if (!$detail): ?>
|
||||||
|
<p class="text-muted">Select a request to see the full message.</p>
|
||||||
|
<?php else: ?>
|
||||||
|
<div class="border rounded p-3 mb-3">
|
||||||
|
<p class="text-muted small mb-1">From</p>
|
||||||
|
<p class="fw-semibold mb-0"><?= htmlspecialchars($detail['name']) ?></p>
|
||||||
|
<p class="text-muted small mb-0"><?= htmlspecialchars($detail['email']) ?></p>
|
||||||
|
</div>
|
||||||
|
<div class="border rounded p-3 mb-3">
|
||||||
|
<p class="text-muted small mb-1">Message</p>
|
||||||
|
<p class="mb-0"><?= nl2br(htmlspecialchars($detail['message'])) ?></p>
|
||||||
|
</div>
|
||||||
|
<p class="text-muted small mb-0">Received <?= htmlspecialchars($detail['created_at']) ?> · Status <?= htmlspecialchars($detail['status']) ?></p>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
26
includes/pexels.php
Normal file
26
includes/pexels.php
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<?php
|
||||||
|
// includes/pexels.php
|
||||||
|
function pexels_key() {
|
||||||
|
$k = getenv('PEXELS_KEY');
|
||||||
|
return $k && strlen($k) > 0 ? $k : 'Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18';
|
||||||
|
}
|
||||||
|
function pexels_get($url) {
|
||||||
|
$ch = curl_init();
|
||||||
|
curl_setopt_array($ch, [
|
||||||
|
CURLOPT_URL => $url,
|
||||||
|
CURLOPT_RETURNTRANSFER => true,
|
||||||
|
CURLOPT_HTTPHEADER => [ 'Authorization: '. pexels_key() ],
|
||||||
|
CURLOPT_TIMEOUT => 15,
|
||||||
|
]);
|
||||||
|
$resp = curl_exec($ch);
|
||||||
|
$code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||||
|
curl_close($ch);
|
||||||
|
if ($code >= 200 && $code < 300 && $resp) return json_decode($resp, true);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
function download_to($srcUrl, $destPath) {
|
||||||
|
$data = file_get_contents($srcUrl);
|
||||||
|
if ($data === false) return false;
|
||||||
|
if (!is_dir(dirname($destPath))) mkdir(dirname($destPath), 0775, true);
|
||||||
|
return file_put_contents($destPath, $data) !== false;
|
||||||
|
}
|
||||||
540
index.php
540
index.php
@ -4,147 +4,451 @@ declare(strict_types=1);
|
|||||||
@error_reporting(E_ALL);
|
@error_reporting(E_ALL);
|
||||||
@date_default_timezone_set('UTC');
|
@date_default_timezone_set('UTC');
|
||||||
|
|
||||||
$phpVersion = PHP_VERSION;
|
require_once __DIR__ . '/db/config.php';
|
||||||
|
require_once __DIR__ . '/mail/MailService.php';
|
||||||
|
|
||||||
|
// Helper to fetch images
|
||||||
|
function get_images(string $queries): array {
|
||||||
|
$apiUrl = 'http://127.0.0.1/api/pexels.php?queries=' . urlencode($queries);
|
||||||
|
$ch = curl_init();
|
||||||
|
curl_setopt_array($ch, [
|
||||||
|
CURLOPT_URL => $apiUrl,
|
||||||
|
CURLOPT_RETURNTRANSFER => true,
|
||||||
|
CURLOPT_TIMEOUT => 5,
|
||||||
|
]);
|
||||||
|
$resp = curl_exec($ch);
|
||||||
|
curl_close($ch);
|
||||||
|
return json_decode($resp ?: '[]', true) ?: [];
|
||||||
|
}
|
||||||
|
|
||||||
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
||||||
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||||
$now = date('Y-m-d H:i:s');
|
$now = date('Y-m-d H:i:s');
|
||||||
|
|
||||||
|
// Fetch images for sections
|
||||||
|
$heroImages = get_images('studio,workspace,creative,editorial');
|
||||||
|
$workImages = get_images('design,code,analytics');
|
||||||
|
$testimonialImages = get_images('person,professional,business');
|
||||||
|
|
||||||
|
$formData = [
|
||||||
|
'name' => '',
|
||||||
|
'email' => '',
|
||||||
|
'message' => '',
|
||||||
|
];
|
||||||
|
$errors = [];
|
||||||
|
$toast = null;
|
||||||
|
$toastType = 'success';
|
||||||
|
$mailWarning = null;
|
||||||
|
|
||||||
|
function ensure_contact_table(): void {
|
||||||
|
db()->exec(
|
||||||
|
"CREATE TABLE IF NOT EXISTS contact_requests (
|
||||||
|
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
|
||||||
|
name VARCHAR(120) NOT NULL,
|
||||||
|
email VARCHAR(160) NOT NULL,
|
||||||
|
message TEXT NOT NULL,
|
||||||
|
status VARCHAR(30) NOT NULL DEFAULT 'new',
|
||||||
|
ip_address VARCHAR(45) DEFAULT NULL,
|
||||||
|
user_agent VARCHAR(255) DEFAULT NULL,
|
||||||
|
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
|
$formData['name'] = trim($_POST['name'] ?? '');
|
||||||
|
$formData['email'] = trim($_POST['email'] ?? '');
|
||||||
|
$formData['message'] = trim($_POST['message'] ?? '');
|
||||||
|
|
||||||
|
if (mb_strlen($formData['name']) < 2) {
|
||||||
|
$errors[] = 'Please enter your name.';
|
||||||
|
}
|
||||||
|
if (!filter_var($formData['email'], FILTER_VALIDATE_EMAIL)) {
|
||||||
|
$errors[] = 'Please provide a valid email address.';
|
||||||
|
}
|
||||||
|
if (mb_strlen($formData['message']) < 10) {
|
||||||
|
$errors[] = 'Please add a brief message (at least 10 characters).';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!$errors) {
|
||||||
|
try {
|
||||||
|
ensure_contact_table();
|
||||||
|
$stmt = db()->prepare(
|
||||||
|
'INSERT INTO contact_requests (name, email, message, ip_address, user_agent) VALUES (:name, :email, :message, :ip, :agent)'
|
||||||
|
);
|
||||||
|
$stmt->execute([
|
||||||
|
':name' => $formData['name'],
|
||||||
|
':email' => $formData['email'],
|
||||||
|
':message' => $formData['message'],
|
||||||
|
':ip' => $_SERVER['REMOTE_ADDR'] ?? null,
|
||||||
|
':agent' => $_SERVER['HTTP_USER_AGENT'] ?? null,
|
||||||
|
]);
|
||||||
|
|
||||||
|
$to = getenv('MAIL_TO') ?: null;
|
||||||
|
$mailRes = MailService::sendContactMessage(
|
||||||
|
$formData['name'],
|
||||||
|
$formData['email'],
|
||||||
|
$formData['message'],
|
||||||
|
$to,
|
||||||
|
'New portfolio inquiry'
|
||||||
|
);
|
||||||
|
|
||||||
|
if (empty($mailRes['success'])) {
|
||||||
|
$mailWarning = 'Saved your message, but email delivery failed. Please confirm SMTP settings.';
|
||||||
|
}
|
||||||
|
|
||||||
|
$toast = 'Thanks for reaching out! I will reply within 1–2 business days.';
|
||||||
|
$toastType = $mailWarning ? 'warning' : 'success';
|
||||||
|
$formData = ['name' => '', 'email' => '', 'message' => ''];
|
||||||
|
} catch (Throwable $e) {
|
||||||
|
$errors[] = 'Something went wrong while saving your message. Please try again.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
?>
|
?>
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>New Style</title>
|
<title>Personal Portfolio</title>
|
||||||
<?php
|
|
||||||
// Read project preview data from environment
|
|
||||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
|
||||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|
||||||
?>
|
|
||||||
<?php if ($projectDescription): ?>
|
<?php if ($projectDescription): ?>
|
||||||
<!-- Meta description -->
|
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
|
||||||
<!-- Open Graph meta tags -->
|
|
||||||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
<!-- Twitter meta tags -->
|
|
||||||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<?php if ($projectImageUrl): ?>
|
<?php if ($projectImageUrl): ?>
|
||||||
<!-- Open Graph image -->
|
|
||||||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||||
<!-- Twitter image -->
|
|
||||||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?= time(); ?>">
|
||||||
<style>
|
<style>
|
||||||
:root {
|
.card-img-top { height: 200px; object-fit: cover; }
|
||||||
--bg-color-start: #6a11cb;
|
.testi-img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
|
||||||
--bg-color-end: #2575fc;
|
|
||||||
--text-color: #ffffff;
|
|
||||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
|
||||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
|
||||||
color: var(--text-color);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
body::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
|
||||||
animation: bg-pan 20s linear infinite;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
@keyframes bg-pan {
|
|
||||||
0% { background-position: 0% 0%; }
|
|
||||||
100% { background-position: 100% 100%; }
|
|
||||||
}
|
|
||||||
main {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
background: var(--card-bg-color);
|
|
||||||
border: 1px solid var(--card-border-color);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 2rem;
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.loader {
|
|
||||||
margin: 1.25rem auto 1.25rem;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
|
||||||
border-top-color: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes spin {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
.hint {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
.sr-only {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px; height: 1px;
|
|
||||||
padding: 0; margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
white-space: nowrap; border: 0;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<div class="site-background" aria-hidden="true">
|
||||||
<div class="card">
|
<span class="bg-grid"></span>
|
||||||
<h1>Analyzing your requirements and generating your website…</h1>
|
<span class="bg-orb bg-orb-one" data-depth="18"></span>
|
||||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
<span class="bg-orb bg-orb-two" data-depth="28"></span>
|
||||||
<span class="sr-only">Loading…</span>
|
<span class="bg-orb bg-orb-three" data-depth="38"></span>
|
||||||
|
<span class="bg-cursor-glow"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom fixed-top">
|
||||||
|
<div class="container">
|
||||||
|
<a class="navbar-brand fw-semibold" href="#top">Alex Carter</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#siteNav" aria-controls="siteNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="siteNav">
|
||||||
|
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#work">Work</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
|
||||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
|
||||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
|
||||||
</div>
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main id="top" class="pt-5">
|
||||||
|
<section class="section hero-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row align-items-center g-4">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<p class="eyebrow text-uppercase text-muted mb-3">Product & Brand Designer</p>
|
||||||
|
<h1 class="display-5 fw-semibold mb-3">Designing calm, precise digital experiences that ship.</h1>
|
||||||
|
<p class="lead text-muted mb-4">I help modern teams turn complex ideas into elegant product experiences. Focused on UX strategy, UI systems, and launch-ready web design.</p>
|
||||||
|
<div class="d-flex flex-wrap gap-3">
|
||||||
|
<a class="btn btn-primary btn-lg" href="#contact">Book a project</a>
|
||||||
|
<a class="btn btn-outline-dark btn-lg" href="#work">See portfolio</a>
|
||||||
|
</div>
|
||||||
|
<div class="hero-meta d-flex flex-wrap gap-4 mt-4">
|
||||||
|
<div>
|
||||||
|
<p class="text-muted small mb-1">Availability</p>
|
||||||
|
<p class="fw-semibold mb-0">New projects from April</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-muted small mb-1">Location</p>
|
||||||
|
<p class="fw-semibold mb-0">New York · Remote</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="hero-card p-4 p-lg-5">
|
||||||
|
<div class="hero-collage mb-4">
|
||||||
|
<?php
|
||||||
|
$heroDefaults = [
|
||||||
|
['src' => 'https://picsum.photos/seed/hero-main/900/1080', 'alt' => 'Creative desk setup with sketches and display screens'],
|
||||||
|
['src' => 'https://picsum.photos/seed/hero-side-a/720/720', 'alt' => 'Moodboard with typography and color samples'],
|
||||||
|
['src' => 'https://picsum.photos/seed/hero-side-b/720/720', 'alt' => 'Product interface on a laptop screen'],
|
||||||
|
['src' => 'https://picsum.photos/seed/hero-side-c/720/720', 'alt' => 'Team workshop notes and sticky planning cards'],
|
||||||
|
];
|
||||||
|
$heroSources = [];
|
||||||
|
for ($i = 0; $i < 4; $i++) {
|
||||||
|
$heroSources[$i] = $heroImages[$i] ?? $heroDefaults[$i];
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<div class="hero-collage-main">
|
||||||
|
<img src="<?= htmlspecialchars($heroSources[0]['src']) ?>" class="hero-photo parallax-media" data-parallax="18" alt="<?= htmlspecialchars($heroSources[0]['alt']) ?>">
|
||||||
|
<span class="hero-collage-badge">Live creative direction</span>
|
||||||
|
</div>
|
||||||
|
<div class="hero-collage-stack">
|
||||||
|
<img src="<?= htmlspecialchars($heroSources[1]['src']) ?>" class="hero-photo parallax-media" data-parallax="12" data-parallax-direction="-1" alt="<?= htmlspecialchars($heroSources[1]['alt']) ?>">
|
||||||
|
<img src="<?= htmlspecialchars($heroSources[2]['src']) ?>" class="hero-photo parallax-media" data-parallax="14" alt="<?= htmlspecialchars($heroSources[2]['alt']) ?>">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-collage-strip mb-4">
|
||||||
|
<img src="<?= htmlspecialchars($heroSources[3]['src']) ?>" class="hero-strip-photo parallax-media" data-parallax="9" data-parallax-direction="-1" alt="<?= htmlspecialchars($heroSources[3]['alt']) ?>">
|
||||||
|
<div class="hero-strip-copy">
|
||||||
|
<p class="text-muted small text-uppercase mb-1">Current focus</p>
|
||||||
|
<p class="fw-semibold mb-1">Visual systems, motion, and product storytelling</p>
|
||||||
|
<p class="text-muted small mb-0">Designed to keep the page lively without overpowering the content.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="h5 fw-semibold mb-3">Recent highlights</h2>
|
||||||
|
<ul class="list-unstyled mb-4">
|
||||||
|
<li class="d-flex justify-content-between border-bottom py-3">
|
||||||
|
<span class="fw-medium">Fintech onboarding revamp</span>
|
||||||
|
<span class="text-muted small">+42% activation</span>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex justify-content-between border-bottom py-3">
|
||||||
|
<span class="fw-medium">Healthcare mobile redesign</span>
|
||||||
|
<span class="text-muted small">4.8★ rating</span>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex justify-content-between py-3">
|
||||||
|
<span class="fw-medium">SaaS dashboard system</span>
|
||||||
|
<span class="text-muted small">12 screens</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="d-flex flex-wrap gap-2">
|
||||||
|
<span class="badge badge-soft">UX Strategy</span>
|
||||||
|
<span class="badge badge-soft">Design Systems</span>
|
||||||
|
<span class="badge badge-soft">Web & Mobile</span>
|
||||||
|
<span class="badge badge-soft">Prototyping</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="work" class="section section-muted">
|
||||||
|
<div class="container">
|
||||||
|
<div class="d-flex justify-content-between align-items-end mb-4">
|
||||||
|
<div>
|
||||||
|
<h2 class="h3 fw-semibold mb-2">Selected work</h2>
|
||||||
|
<p class="text-muted mb-0">A handful of case studies covering product strategy, UX, and UI design.</p>
|
||||||
|
</div>
|
||||||
|
<span class="text-muted small">2023 — 2026</span>
|
||||||
|
</div>
|
||||||
|
<div class="row g-4">
|
||||||
|
<?php
|
||||||
|
$projects = [
|
||||||
|
['title' => 'Signal Labs', 'type' => 'Fintech onboarding', 'summary' => 'Simplified KYC flow, redesigned primary journey, and mapped conversion milestones.'],
|
||||||
|
['title' => 'Northline Health', 'type' => 'Patient app', 'summary' => 'Built a modular design system and streamlined appointment booking.'],
|
||||||
|
['title' => 'Sprout Commerce', 'type' => 'SaaS analytics', 'summary' => 'Designed a cross-functional dashboard with usage insights for teams.'],
|
||||||
|
];
|
||||||
|
foreach ($projects as $i => $project):
|
||||||
|
$img = $workImages[$i] ?? ['src' => 'https://picsum.photos/600/400'];
|
||||||
|
?>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<article class="card work-card shadow-sm h-100 border-0">
|
||||||
|
<img src="<?= htmlspecialchars($img['src']) ?>" class="card-img-top parallax-media" data-parallax="10" data-parallax-direction="<?= $i % 2 === 0 ? 1 : -1 ?>" alt="<?= htmlspecialchars($project['title']) ?>">
|
||||||
|
<div class="card-body d-flex flex-column">
|
||||||
|
<p class="text-muted small text-uppercase mb-2"><?= htmlspecialchars($project['type']) ?></p>
|
||||||
|
<h3 class="h5 fw-semibold"><?= htmlspecialchars($project['title']) ?></h3>
|
||||||
|
<p class="text-muted mt-3"><?= htmlspecialchars($project['summary']) ?></p>
|
||||||
|
<div class="mt-auto">
|
||||||
|
<span class="text-primary small fw-semibold">View case study →</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="about" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row g-4 align-items-center">
|
||||||
|
<div class="col-lg-5">
|
||||||
|
<h2 class="h3 fw-semibold mb-3">About</h2>
|
||||||
|
<p class="text-muted mb-4">I’m a multidisciplinary designer with 9+ years building digital products for startups and enterprise teams. I specialize in UX direction, visual systems, and stakeholder alignment that turns ideas into shipped work.</p>
|
||||||
|
<div class="d-flex flex-wrap gap-2">
|
||||||
|
<span class="badge badge-soft">Figma</span>
|
||||||
|
<span class="badge badge-soft">Webflow</span>
|
||||||
|
<span class="badge badge-soft">Framer</span>
|
||||||
|
<span class="badge badge-soft">Design Systems</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-7">
|
||||||
|
<div class="about-panel p-4 p-lg-5">
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h3 class="h6 text-uppercase text-muted">Services</h3>
|
||||||
|
<ul class="list-unstyled text-muted mb-0">
|
||||||
|
<li class="py-1">Product discovery workshops</li>
|
||||||
|
<li class="py-1">UX & UI design</li>
|
||||||
|
<li class="py-1">Design system build</li>
|
||||||
|
<li class="py-1">Launch planning</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h3 class="h6 text-uppercase text-muted">Focus areas</h3>
|
||||||
|
<ul class="list-unstyled text-muted mb-0">
|
||||||
|
<li class="py-1">Fintech & SaaS platforms</li>
|
||||||
|
<li class="py-1">Mobile-first experiences</li>
|
||||||
|
<li class="py-1">B2B onboarding</li>
|
||||||
|
<li class="py-1">UX copy + tone</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-top mt-4 pt-4 d-flex justify-content-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-muted small mb-1">Clients</p>
|
||||||
|
<p class="fw-semibold mb-0">Stripe, Calm, Notion</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-muted small mb-1">Engagements</p>
|
||||||
|
<p class="fw-semibold mb-0">Strategy · Design · Launch</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="testimonials" class="section section-muted">
|
||||||
|
<div class="container">
|
||||||
|
<div class="d-flex justify-content-between align-items-end mb-4">
|
||||||
|
<div>
|
||||||
|
<h2 class="h3 fw-semibold mb-2">Testimonials</h2>
|
||||||
|
<p class="text-muted mb-0">Short notes from founders and product leads.</p>
|
||||||
|
</div>
|
||||||
|
<span class="text-muted small">Updated March <?= date('Y'); ?></span>
|
||||||
|
</div>
|
||||||
|
<div class="row g-4">
|
||||||
|
<?php
|
||||||
|
$testi = [
|
||||||
|
['quote' => '“Alex quickly aligned our team and shipped a full design system. The project paid for itself within weeks.”', 'name' => 'Jordan Lee · Product Lead'],
|
||||||
|
['quote' => '“Clear, structured, and incredibly fast. We felt in control while launching a brand new onboarding.”', 'name' => 'Priya Patel · Founder']
|
||||||
|
];
|
||||||
|
foreach ($testi as $i => $item):
|
||||||
|
$img = $testimonialImages[$i] ?? ['src' => 'https://picsum.photos/100'];
|
||||||
|
?>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="card testimonial-card border-0 shadow-sm h-100">
|
||||||
|
<div class="card-body d-flex gap-3">
|
||||||
|
<img src="<?= htmlspecialchars($img['src']) ?>" class="testi-img parallax-media" data-parallax="6" data-parallax-direction="<?= $i % 2 === 0 ? 1 : -1 ?>" alt="Testimonial photo">
|
||||||
|
<div>
|
||||||
|
<p class="text-muted mb-2"><?= htmlspecialchars($item['quote']) ?></p>
|
||||||
|
<p class="fw-semibold mb-0"><?= htmlspecialchars($item['name']) ?></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="contact" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row g-4 align-items-start">
|
||||||
|
<div class="col-lg-5">
|
||||||
|
<h2 class="h3 fw-semibold mb-3">Let’s work together</h2>
|
||||||
|
<p class="text-muted mb-4">Send a short note about your project or role. I’ll reply with availability, timing, and next steps.</p>
|
||||||
|
<div class="contact-box p-4">
|
||||||
|
<h3 class="h6 text-uppercase text-muted">Typical engagements</h3>
|
||||||
|
<ul class="list-unstyled text-muted mb-0">
|
||||||
|
<li class="py-1">UX audit + roadmap (2 weeks)</li>
|
||||||
|
<li class="py-1">New product experience (6–8 weeks)</li>
|
||||||
|
<li class="py-1">Design system sprint (3 weeks)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-7">
|
||||||
|
<div class="card border-0 shadow-sm">
|
||||||
|
<div class="card-body p-4 p-lg-5">
|
||||||
|
<h3 class="h5 fw-semibold mb-3">Contact form</h3>
|
||||||
|
|
||||||
|
<?php if ($errors): ?>
|
||||||
|
<div class="alert alert-danger" role="alert">
|
||||||
|
<?= htmlspecialchars(implode(' ', $errors)) ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if ($mailWarning): ?>
|
||||||
|
<div class="alert alert-warning" role="alert">
|
||||||
|
<?= htmlspecialchars($mailWarning) ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<form method="post" action="#contact" class="row g-3">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label class="form-label">Name</label>
|
||||||
|
<input class="form-control" type="text" name="name" value="<?= htmlspecialchars($formData['name']) ?>" required>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label class="form-label">Email</label>
|
||||||
|
<input class="form-control" type="email" name="email" value="<?= htmlspecialchars($formData['email']) ?>" required>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label">Message</label>
|
||||||
|
<textarea class="form-control" name="message" rows="4" required><?= htmlspecialchars($formData['message']) ?></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 d-flex flex-wrap gap-3 align-items-center">
|
||||||
|
<button class="btn btn-primary btn-lg" type="submit">Send inquiry</button>
|
||||||
|
<span class="text-muted small">I respond within 48 hours.</span>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<?php if (!getenv('MAIL_TO')): ?>
|
||||||
|
<p class="text-muted small mt-3 mb-0">This is for testing purposes only — Flatlogic does not guarantee usage of the mail server. Please set up your own SMTP in <code>.env</code> (MAIL_/SMTP_ vars) with out AI Agent.</p>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-muted small mt-3">Admin view: <a class="link-dark" href="inbox.php">View contact requests</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
|
||||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
<footer class="border-top py-4">
|
||||||
|
<div class="container d-flex flex-wrap justify-content-between align-items-center gap-3">
|
||||||
|
<p class="text-muted small mb-0">© <?= date('Y'); ?> Alex Carter. All rights reserved.</p>
|
||||||
|
<div class="d-flex gap-3">
|
||||||
|
<a class="text-muted small" href="#work">Portfolio</a>
|
||||||
|
<a class="text-muted small" href="#contact">Contact</a>
|
||||||
|
<span class="text-muted small">Updated <?= htmlspecialchars($now) ?> UTC</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||||
|
<?php if ($toast): ?>
|
||||||
|
<div class="toast align-items-center text-bg-<?= $toastType ?> border-0 show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="true">
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="toast-body">
|
||||||
|
<?= htmlspecialchars($toast) ?>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>
|
||||||
|
<script src="assets/js/main.js?v=<?= time(); ?>" defer></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user