Preston Gray | Graphic Design & Web Development

:root {
/* Carefully curated gray palette */
–white: #FAFAFA;
–gray-50: #F5F5F5;
–gray-100: #EBEBEB;
–gray-200: #D6D6D6;
–gray-300: #B8B8B8;
–gray-400: #8A8A8A;
–gray-500: #6B6B6B;
–gray-600: #4A4A4A;
–gray-700: #363636;
–gray-800: #262626;
–gray-900: #171717;
–black: #0A0A0A;

/* Typography */
–font-display: ‘Cormorant Garamond’, serif;
–font-body: ‘Outfit’, sans-serif;

/* Spacing */
–section-padding: clamp(4rem, 10vw, 8rem);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: var(–font-body);
font-weight: 300;
background-color: var(–white);
color: var(–gray-800);
line-height: 1.7;
overflow-x: hidden;
}

/* Subtle noise texture overlay */
body::before {
content: ”;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.015;
z-index: 9999;
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.9′ numOctaves=’4′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’100%25′ height=’100%25′ filter=’url(%23noise)’/%3E%3C/svg%3E”);
}

/* Selection styling */
::selection {
background: var(–gray-800);
color: var(–white);
}

/* Navigation */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1.5rem 3rem;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
mix-blend-mode: difference;
}

.nav-logo {
font-family: var(–font-display);
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 0.02em;
color: var(–white);
text-decoration: none;
}

.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}

.nav-links a {
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(–white);
text-decoration: none;
position: relative;
padding: 0.25rem 0;
}

.nav-links a::after {
content: ”;
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: var(–white);
transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-links a:hover::after {
width: 100%;
}

/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
background: linear-gradient(135deg, var(–gray-900) 0%, var(–black) 50%, var(–gray-800) 100%);
overflow: hidden;
}

.hero::before {
content: ”;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(ellipse at center, transparent 0%, var(–black) 70%);
animation: rotate 30s linear infinite;
}

@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.hero-content {
text-align: center;
z-index: 1;
padding: 2rem;
}

.hero-eyebrow {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(–gray-400);
margin-bottom: 2rem;
opacity: 0;
animation: fadeUp 1s ease-out 0.3s forwards;
}

.hero-title {
font-family: var(–font-display);
font-size: clamp(3.5rem, 12vw, 10rem);
font-weight: 300;
color: var(–white);
letter-spacing: -0.02em;
line-height: 0.95;
opacity: 0;
animation: fadeUp 1s ease-out 0.5s forwards;
}

.hero-title span {
display: block;
font-style: italic;
font-weight: 300;
background: linear-gradient(90deg, var(–gray-200), var(–gray-400), var(–gray-200));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.hero-subtitle {
font-size: 1.1rem;
font-weight: 300;
color: var(–gray-400);
margin-top: 2.5rem;
letter-spacing: 0.05em;
opacity: 0;
animation: fadeUp 1s ease-out 0.7s forwards;
}

.scroll-indicator {
position: absolute;
bottom: 3rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
opacity: 0;
animation: fadeUp 1s ease-out 1s forwards;
}

.scroll-indicator span {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–gray-500);
}

.scroll-line {
width: 1px;
height: 60px;
background: linear-gradient(to bottom, var(–gray-500), transparent);
animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
0%, 100% { opacity: 1; transform: scaleY(1); }
50% { opacity: 0.5; transform: scaleY(0.8); }
}

@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Section Styling */
section {
padding: var(–section-padding) 3rem;
}

.section-header {
max-width: 1400px;
margin: 0 auto 4rem;
}

.section-number {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.2em;
color: var(–gray-400);
margin-bottom: 1rem;
}

.section-title {
font-family: var(–font-display);
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 400;
color: var(–gray-900);
letter-spacing: -0.01em;
}

/* About Section */
.about {
background: var(–gray-50);
position: relative;
}

.about-grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 6rem;
align-items: center;
}

.about-image {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
}

.about-image::before {
content: ”;
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(–gray-300), var(–gray-500));
z-index: 0;
}

.about-image-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(–font-display);
font-size: 1.25rem;
font-style: italic;
color: var(–white);
z-index: 1;
}

.about-image::after {
content: ”;
position: absolute;
top: 1.5rem;
left: 1.5rem;
right: -1.5rem;
bottom: -1.5rem;
border: 1px solid var(–gray-300);
z-index: -1;
}

.about-content h3 {
font-family: var(–font-display);
font-size: 2rem;
font-weight: 400;
color: var(–gray-800);
margin-bottom: 1.5rem;
}

.about-content p {
font-size: 1.05rem;
color: var(–gray-600);
margin-bottom: 1.5rem;
max-width: 540px;
}

.about-stats {
display: flex;
gap: 3rem;
margin-top: 3rem;
padding-top: 3rem;
border-top: 1px solid var(–gray-200);
}

.stat {
text-align: left;
}

.stat-number {
font-family: var(–font-display);
font-size: 3rem;
font-weight: 300;
color: var(–gray-800);
line-height: 1;
}

.stat-label {
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(–gray-500);
margin-top: 0.5rem;
}

/* Services Section */
.services {
background: var(–white);
}

.services-grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.service-card {
padding: 3rem 2.5rem;
background: var(–gray-50);
border: 1px solid var(–gray-100);
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
}

.service-card::before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(–gray-700), var(–gray-400));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-card:hover {
background: var(–white);
border-color: var(–gray-200);
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.service-card:hover::before {
transform: scaleX(1);
}

.service-icon {
width: 48px;
height: 48px;
margin-bottom: 2rem;
stroke: var(–gray-600);
stroke-width: 1;
fill: none;
}

.service-card h3 {
font-family: var(–font-display);
font-size: 1.75rem;
font-weight: 400;
color: var(–gray-800);
margin-bottom: 1rem;
}

.service-card p {
font-size: 0.95rem;
color: var(–gray-500);
line-height: 1.8;
}

.service-list {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(–gray-200);
list-style: none;
}

.service-list li {
font-size: 0.85rem;
color: var(–gray-600);
padding: 0.4rem 0;
padding-left: 1rem;
position: relative;
}

.service-list li::before {
content: ‘—’;
position: absolute;
left: 0;
color: var(–gray-400);
}

/* Portfolio Section */
.portfolio {
background: var(–gray-900);
color: var(–white);
}

.portfolio .section-number {
color: var(–gray-500);
}

.portfolio .section-title {
color: var(–white);
}

.portfolio-grid {
max-width: 1600px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}

.portfolio-item {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
cursor: pointer;
}

.portfolio-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(–font-display);
font-size: 1.25rem;
font-style: italic;
color: var(–gray-500);
transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.portfolio-item:nth-child(1) .portfolio-image { background: linear-gradient(135deg, var(–gray-700), var(–gray-800)); }
.portfolio-item:nth-child(2) .portfolio-image { background: linear-gradient(135deg, var(–gray-600), var(–gray-700)); }
.portfolio-item:nth-child(3) .portfolio-image { background: linear-gradient(135deg, var(–gray-500), var(–gray-600)); }
.portfolio-item:nth-child(4) .portfolio-image { background: linear-gradient(135deg, var(–gray-800), var(–gray-900)); }

.portfolio-item:hover .portfolio-image {
transform: scale(1.05);
}

.portfolio-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(10, 10, 10, 0.9), transparent 60%);
opacity: 0;
transition: opacity 0.5s ease;
}

.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}

.portfolio-info {
position: absolute;
bottom: 2rem;
left: 2rem;
right: 2rem;
transform: translateY(20px);
opacity: 0;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.portfolio-item:hover .portfolio-info {
transform: translateY(0);
opacity: 1;
}

.portfolio-category {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–gray-400);
margin-bottom: 0.5rem;
}

.portfolio-title {
font-family: var(–font-display);
font-size: 1.75rem;
font-weight: 400;
color: var(–white);
}

/* Process Section */
.process {
background: var(–white);
}

.process-timeline {
max-width: 1000px;
margin: 0 auto;
position: relative;
}

.process-timeline::before {
content: ”;
position: absolute;
top: 0;
left: 2rem;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, var(–gray-200), var(–gray-300), var(–gray-200));
}

.process-step {
display: flex;
gap: 3rem;
padding: 2.5rem 0;
position: relative;
}

.step-number {
flex-shrink: 0;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
font-family: var(–font-display);
font-size: 1.25rem;
color: var(–gray-700);
background: var(–white);
border: 1px solid var(–gray-300);
border-radius: 50%;
position: relative;
z-index: 1;
}

.step-content h3 {
font-family: var(–font-display);
font-size: 1.5rem;
font-weight: 400;
color: var(–gray-800);
margin-bottom: 0.75rem;
}

.step-content p {
font-size: 0.95rem;
color: var(–gray-500);
max-width: 500px;
}

/* Testimonials Section */
.testimonials {
background: var(–gray-100);
}

.testimonials-container {
max-width: 900px;
margin: 0 auto;
text-align: center;
}

.testimonial-quote {
font-family: var(–font-display);
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 300;
font-style: italic;
color: var(–gray-700);
line-height: 1.6;
margin-bottom: 2.5rem;
position: relative;
}

.testimonial-quote::before {
content: ‘”‘;
font-size: 6rem;
color: var(–gray-300);
position: absolute;
top: -2rem;
left: 50%;
transform: translateX(-50%);
line-height: 1;
}

.testimonial-author {
font-size: 0.9rem;
font-weight: 500;
color: var(–gray-800);
margin-bottom: 0.25rem;
}

.testimonial-role {
font-size: 0.8rem;
color: var(–gray-500);
letter-spacing: 0.1em;
text-transform: uppercase;
}

/* Contact Section */
.contact {
background: var(–black);
color: var(–white);
text-align: center;
}

.contact .section-number {
color: var(–gray-600);
}

.contact .section-title {
color: var(–white);
max-width: 700px;
margin: 0 auto 1rem;
}

.contact-subtitle {
font-size: 1.1rem;
color: var(–gray-400);
margin-bottom: 3rem;
}

.contact-email {
font-family: var(–font-display);
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 300;
color: var(–white);
text-decoration: none;
position: relative;
display: inline-block;
transition: color 0.3s ease;
}

.contact-email::after {
content: ”;
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 1px;
background: var(–gray-500);
transform: scaleX(0.3);
transform-origin: left;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-email:hover {
color: var(–gray-300);
}

.contact-email:hover::after {
transform: scaleX(1);
background: var(–gray-300);
}

.contact-cta {
display: inline-block;
margin-top: 3rem;
padding: 1.25rem 3rem;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(–black);
background: var(–white);
text-decoration: none;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-cta:hover {
background: var(–gray-200);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(255, 255, 255, 0.1);
}

/* Footer */
footer {
background: var(–black);
padding: 2rem 3rem;
border-top: 1px solid var(–gray-800);
}

.footer-content {
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

.footer-copyright {
font-size: 0.8rem;
color: var(–gray-500);
}

.footer-social {
display: flex;
gap: 1.5rem;
}

.footer-social a {
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(–gray-500);
text-decoration: none;
transition: color 0.3s ease;
}

.footer-social a:hover {
color: var(–white);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
.about-grid {
grid-template-columns: 1fr;
gap: 4rem;
}

.about-image {
max-width: 400px;
margin: 0 auto;
}

.services-grid {
grid-template-columns: 1fr;
max-width: 500px;
}

.portfolio-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 768px) {
nav {
padding: 1.25rem 1.5rem;
}

.nav-links {
display: none;
}

section {
padding: var(–section-padding) 1.5rem;
}

.about-stats {
flex-direction: column;
gap: 2rem;
}

.process-timeline::before {
left: 1.5rem;
}

.process-step {
flex-direction: column;
gap: 1.5rem;
padding-left: 0.5rem;
}

.step-number {
width: 3rem;
height: 3rem;
}

.footer-content {
flex-direction: column;
gap: 1.5rem;
text-align: center;
}
}

/* Smooth scroll reveal animation */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.active {
opacity: 1;
transform: translateY(0);
}

Preston Gray

About
Services
Work
Process
Contact

Graphic Design & Web Development

Preston
Gray

Crafting digital experiences for small businesses

Scroll

About

Your Photo Here

Design with purpose, built with precision

I’m Preston Gray, a graphic designer and web developer dedicated to helping small, local businesses establish their digital presence. I believe every business deserves a thoughtful, professional brand identity—not just the big corporations.

Working one-on-one with each client, I deliver personalized attention and bespoke solutions that larger agencies simply can’t provide. Your vision becomes my mission.

50+

Projects Completed

100%

Client Satisfaction

1:1

Personal Attention

Services

Web Design

Custom, responsive websites that capture your brand’s essence and convert visitors into customers.

Custom WordPress Sites
Landing Pages
E-commerce Solutions
Mobile Optimization

Brand Identity

Cohesive visual identities that tell your story and create lasting impressions with your audience.

Logo Design
Color Systems
Typography Selection
Brand Guidelines

Print Design

Professional marketing materials that extend your brand beyond the screen.

Business Cards
Brochures & Flyers
Signage & Banners
Packaging Design

Selected Work

Project Image

Brand Identity

Local Coffee Roasters

Project Image

Web Design

Artisan Bakery Website

Project Image

Print Design

Boutique Hotel Collateral

Project Image

Complete Branding

Wellness Studio Identity

My Process

Discovery

We begin with a conversation. I learn about your business, goals, target audience, and vision to ensure every design decision is rooted in strategy.

Concept

Based on our discovery session, I develop initial concepts and mood boards that capture the aesthetic direction and possibilities for your project.

Refine

Through collaborative feedback, we refine the chosen direction until every detail aligns perfectly with your vision and business objectives.

Deliver

I deliver polished, production-ready assets along with guidelines to ensure consistent implementation across all touchpoints.

Kind Words

Preston understood our vision from the very first conversation. The website he created has transformed how our customers perceive our brand.

Sarah Mitchell

Owner, The Craft Kitchen

Let’s create something remarkable together

Ready to elevate your brand? I’d love to hear from you.

hello@prestongray.com

Start a Project

// Intersection Observer for scroll reveal
const revealElements = document.querySelectorAll(‘.reveal’);

revealElements.forEach(el => revealObserver.observe(el));

// Smooth scroll for navigation
document.querySelectorAll(‘a[href^=”#”]’).forEach(anchor => {
anchor.addEventListener(‘click’, function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute(‘href’));
if (target) {
target.scrollIntoView({
behavior: ‘smooth’,
block: ‘start’
});
}
});
});