@import url(‘https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Outfit:wght@300;400;500;600&display=swap’);
.pg-portfolio * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pg-portfolio {
–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;
–font-display: ‘Cormorant Garamond’, serif;
–font-body: ‘Outfit’, sans-serif;
–section-padding: clamp(4rem, 10vw, 8rem);
font-family: var(–font-body);
font-weight: 300;
background-color: var(–white);
color: var(–gray-800);
line-height: 1.7;
overflow-x: hidden;
position: relative;
}
.pg-portfolio ::selection {
background: #262626;
color: #FAFAFA;
}
.pg-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;
}
.pg-nav-logo {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 0.02em;
color: #FFFFFF !important;
text-decoration: none !important;
border: none !important;
box-shadow: none !important;
}
.pg-nav-links {
display: flex;
gap: 2.5rem;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.pg-nav-links li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.pg-nav-links a {
font-family: ‘Outfit’, sans-serif;
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #FFFFFF !important;
text-decoration: none !important;
position: relative;
padding: 0.25rem 0;
border: none !important;
box-shadow: none !important;
}
.pg-nav-links a::after {
content: ”;
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: #FFFFFF;
transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pg-nav-links a:hover::after {
width: 100%;
}
.pg-hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
background: linear-gradient(135deg, #171717 0%, #0A0A0A 50%, #262626 100%);
overflow: hidden;
}
.pg-hero::before {
content: ”;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(ellipse at center, transparent 0%, #0A0A0A 70%);
animation: pg-rotate 30s linear infinite;
}
@keyframes pg-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.pg-hero-content {
text-align: center;
z-index: 1;
padding: 2rem;
}
.pg-hero-eyebrow {
font-family: ‘Outfit’, sans-serif;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #8A8A8A;
margin-bottom: 2rem;
animation: pg-fadeUp 1s ease-out 0.3s both;
}
.pg-hero-title {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(3.5rem, 12vw, 10rem);
font-weight: 300;
color: #FFFFFF;
letter-spacing: -0.02em;
line-height: 0.95;
animation: pg-fadeUp 1s ease-out 0.5s both;
}
.pg-hero-title span {
display: block;
font-style: italic;
font-weight: 300;
background: linear-gradient(90deg, #D6D6D6, #8A8A8A, #D6D6D6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pg-hero-subtitle {
font-family: ‘Outfit’, sans-serif;
font-size: 1.1rem;
font-weight: 300;
color: #8A8A8A;
margin-top: 2.5rem;
letter-spacing: 0.05em;
animation: pg-fadeUp 1s ease-out 0.7s both;
}
.pg-scroll-indicator {
position: absolute;
bottom: 3rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
animation: pg-fadeUp 1s ease-out 1s both;
}
.pg-scroll-indicator span {
font-family: ‘Outfit’, sans-serif;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6B6B6B;
}
.pg-scroll-line {
width: 1px;
height: 60px;
background: linear-gradient(to bottom, #6B6B6B, transparent);
animation: pg-scrollPulse 2s ease-in-out infinite;
}
@keyframes pg-scrollPulse {
0%, 100% { opacity: 1; transform: scaleY(1); }
50% { opacity: 0.5; transform: scaleY(0.8); }
}
@keyframes pg-fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.pg-section {
padding: clamp(4rem, 10vw, 8rem) 3rem;
}
.pg-section-header {
max-width: 1400px;
margin: 0 auto 4rem;
}
.pg-section-number {
font-family: ‘Outfit’, sans-serif;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.2em;
color: #8A8A8A;
margin-bottom: 1rem;
}
.pg-section-title {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 400;
color: #171717;
letter-spacing: -0.01em;
}
.pg-about {
background: #F5F5F5;
position: relative;
}
.pg-about-grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 6rem;
align-items: center;
}
.pg-about-image {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
}
.pg-about-image::before {
content: ”;
position: absolute;
inset: 0;
background: linear-gradient(135deg, #B8B8B8, #6B6B6B);
z-index: 0;
}
.pg-about-image-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.25rem;
font-style: italic;
color: #FFFFFF;
z-index: 1;
}
.pg-about-image::after {
content: ”;
position: absolute;
top: 1.5rem;
left: 1.5rem;
right: -1.5rem;
bottom: -1.5rem;
border: 1px solid #B8B8B8;
z-index: -1;
}
.pg-about-content h3 {
font-family: ‘Cormorant Garamond’, serif;
font-size: 2rem;
font-weight: 400;
color: #262626;
margin-bottom: 1.5rem;
}
.pg-about-content p {
font-family: ‘Outfit’, sans-serif;
font-size: 1.05rem;
color: #4A4A4A;
margin-bottom: 1.5rem;
max-width: 540px;
}
.pg-about-stats {
display: flex;
gap: 3rem;
margin-top: 3rem;
padding-top: 3rem;
border-top: 1px solid #D6D6D6;
}
.pg-stat {
text-align: left;
}
.pg-stat-number {
font-family: ‘Cormorant Garamond’, serif;
font-size: 3rem;
font-weight: 300;
color: #262626;
line-height: 1;
}
.pg-stat-label {
font-family: ‘Outfit’, sans-serif;
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #6B6B6B;
margin-top: 0.5rem;
}
.pg-services {
background: #FAFAFA;
}
.pg-services-grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.pg-service-card {
padding: 3rem 2.5rem;
background: #F5F5F5;
border: 1px solid #EBEBEB;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
}
.pg-service-card::before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #363636, #8A8A8A);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pg-service-card:hover {
background: #FAFAFA;
border-color: #D6D6D6;
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}
.pg-service-card:hover::before {
transform: scaleX(1);
}
.pg-service-icon {
width: 48px;
height: 48px;
margin-bottom: 2rem;
stroke: #4A4A4A;
stroke-width: 1;
fill: none;
}
.pg-service-card h3 {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.75rem;
font-weight: 400;
color: #262626;
margin-bottom: 1rem;
}
.pg-service-card p {
font-family: ‘Outfit’, sans-serif;
font-size: 0.95rem;
color: #6B6B6B;
line-height: 1.8;
}
.pg-service-list {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #D6D6D6;
list-style: none !important;
}
.pg-service-list li {
font-family: ‘Outfit’, sans-serif;
font-size: 0.85rem;
color: #4A4A4A;
padding: 0.4rem 0;
padding-left: 1rem;
position: relative;
list-style: none !important;
}
.pg-service-list li::before {
content: ‘—’;
position: absolute;
left: 0;
color: #8A8A8A;
}
.pg-work {
background: #171717;
color: #FFFFFF;
}
.pg-work .pg-section-number {
color: #6B6B6B;
}
.pg-work .pg-section-title {
color: #FFFFFF;
}
.pg-portfolio-grid {
max-width: 1600px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.pg-portfolio-item {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
cursor: pointer;
}
.pg-portfolio-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.25rem;
font-style: italic;
color: #6B6B6B;
transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pg-portfolio-item:nth-child(1) .pg-portfolio-image { background: linear-gradient(135deg, #363636, #262626); }
.pg-portfolio-item:nth-child(2) .pg-portfolio-image { background: linear-gradient(135deg, #4A4A4A, #363636); }
.pg-portfolio-item:nth-child(3) .pg-portfolio-image { background: linear-gradient(135deg, #6B6B6B, #4A4A4A); }
.pg-portfolio-item:nth-child(4) .pg-portfolio-image { background: linear-gradient(135deg, #262626, #171717); }
.pg-portfolio-item:hover .pg-portfolio-image {
transform: scale(1.05);
}
.pg-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;
}
.pg-portfolio-item:hover .pg-portfolio-overlay {
opacity: 1;
}
.pg-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);
}
.pg-portfolio-item:hover .pg-portfolio-info {
transform: translateY(0);
opacity: 1;
}
.pg-portfolio-category {
font-family: ‘Outfit’, sans-serif;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #8A8A8A;
margin-bottom: 0.5rem;
}
.pg-portfolio-title {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.75rem;
font-weight: 400;
color: #FFFFFF;
}
.pg-process {
background: #FAFAFA;
}
.pg-process-timeline {
max-width: 1000px;
margin: 0 auto;
position: relative;
}
.pg-process-timeline::before {
content: ”;
position: absolute;
top: 0;
left: 2rem;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, #D6D6D6, #B8B8B8, #D6D6D6);
}
.pg-process-step {
display: flex;
gap: 3rem;
padding: 2.5rem 0;
position: relative;
}
.pg-step-number {
flex-shrink: 0;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.25rem;
color: #363636;
background: #FAFAFA;
border: 1px solid #B8B8B8;
border-radius: 50%;
position: relative;
z-index: 1;
}
.pg-step-content h3 {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.5rem;
font-weight: 400;
color: #262626;
margin-bottom: 0.75rem;
}
.pg-step-content p {
font-family: ‘Outfit’, sans-serif;
font-size: 0.95rem;
color: #6B6B6B;
max-width: 500px;
}
.pg-testimonials {
background: #EBEBEB;
}
.pg-testimonials-container {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.pg-testimonial-quote {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 300;
font-style: italic;
color: #363636;
line-height: 1.6;
margin-bottom: 2.5rem;
position: relative;
}
.pg-testimonial-quote::before {
content: ‘”‘;
font-size: 6rem;
color: #B8B8B8;
position: absolute;
top: -2rem;
left: 50%;
transform: translateX(-50%);
line-height: 1;
font-family: ‘Cormorant Garamond’, serif;
}
.pg-testimonial-author {
font-family: ‘Outfit’, sans-serif;
font-size: 0.9rem;
font-weight: 500;
color: #262626;
margin-bottom: 0.25rem;
}
.pg-testimonial-role {
font-family: ‘Outfit’, sans-serif;
font-size: 0.8rem;
color: #6B6B6B;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pg-contact {
background: #0A0A0A;
color: #FFFFFF;
text-align: center;
}
.pg-contact .pg-section-number {
color: #4A4A4A;
}
.pg-contact .pg-section-title {
color: #FFFFFF;
max-width: 700px;
margin: 0 auto 1rem;
}
.pg-contact-subtitle {
font-family: ‘Outfit’, sans-serif;
font-size: 1.1rem;
color: #8A8A8A;
margin-bottom: 3rem;
}
.pg-contact-email {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 300;
color: #FFFFFF !important;
text-decoration: none !important;
position: relative;
display: inline-block;
transition: color 0.3s ease;
border: none !important;
box-shadow: none !important;
}
.pg-contact-email::after {
content: ”;
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 1px;
background: #6B6B6B;
transform: scaleX(0.3);
transform-origin: left;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pg-contact-email:hover {
color: #B8B8B8 !important;
}
.pg-contact-email:hover::after {
transform: scaleX(1);
background: #B8B8B8;
}
.pg-contact-cta {
display: inline-block;
margin-top: 3rem;
padding: 1.25rem 3rem;
font-family: ‘Outfit’, sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #0A0A0A !important;
background: #FFFFFF;
text-decoration: none !important;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border: none !important;
box-shadow: none !important;
}
.pg-contact-cta:hover {
background: #D6D6D6;
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(255, 255, 255, 0.1) !important;
}
.pg-footer {
background: #0A0A0A;
padding: 2rem 3rem;
border-top: 1px solid #262626;
}
.pg-footer-content {
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.pg-footer-copyright {
font-family: ‘Outfit’, sans-serif;
font-size: 0.8rem;
color: #6B6B6B;
}
.pg-footer-social {
display: flex;
gap: 1.5rem;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.pg-footer-social a {
font-family: ‘Outfit’, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #6B6B6B !important;
text-decoration: none !important;
transition: color 0.3s ease;
border: none !important;
box-shadow: none !important;
}
.pg-footer-social a:hover {
color: #FFFFFF !important;
}
@media (max-width: 1024px) {
.pg-about-grid {
grid-template-columns: 1fr;
gap: 4rem;
}
.pg-about-image {
max-width: 400px;
margin: 0 auto;
}
.pg-services-grid {
grid-template-columns: 1fr;
max-width: 500px;
margin: 0 auto;
}
.pg-portfolio-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.pg-nav {
padding: 1.25rem 1.5rem;
}
.pg-nav-links {
display: none;
}
.pg-section {
padding: clamp(4rem, 10vw, 8rem) 1.5rem;
}
.pg-about-stats {
flex-direction: column;
gap: 2rem;
}
.pg-process-timeline::before {
left: 1.5rem;
}
.pg-process-step {
flex-direction: column;
gap: 1.5rem;
padding-left: 0.5rem;
}
.pg-step-number {
width: 3rem;
height: 3rem;
}
.pg-footer-content {
flex-direction: column;
gap: 1.5rem;
text-align: center;
}
}
Preston Gray
Graphic Design & Web Development
Preston
Gray
Design solutions for small businesses that make a big impression
Your local partner in design
I’m Preston Gray, a graphic designer and web developer who believes every small business deserves standout design. From the corner café that needs a beautiful menu to the family-owned shop launching their first website, I’m here to bring your vision to life.
As a solo designer, I offer something the big agencies can’t: direct collaboration, personal attention, and designs crafted specifically for your business and your community. No templates, no hand-offs—just thoughtful work from start to finish.
Web Design
Custom websites that help local customers find you and learn what makes your business special.
- Custom WordPress Sites
- Landing Pages
- Online Menus & Ordering
- Mobile-Friendly Design
Print Design
Professional print materials that your customers will actually want to pick up, read, and keep.
- Restaurant Menus
- Business Brochures
- Flyers & Postcards
- Business Cards
Brand Identity
Cohesive visual identities that tell your story and make your business instantly recognizable.
- Logo Design
- Color Palettes
- Typography Selection
- Brand Guidelines
Project Image
Menu Design
Local Bistro Menu Suite
Project Image
Web Design
Artisan Bakery Website
Project Image
Brochure Design
Real Estate Brochures
Project Image
Complete Branding
Coffee Shop Identity
01
Discovery
We start with a conversation about your business, your customers, and your goals. I want to understand what makes you unique before a single design is created.
02
Concept
I develop initial concepts tailored to your needs—whether that’s menu layouts, website mockups, or logo options. You’ll see real ideas, not generic templates.
03
Refine
Your feedback shapes the final product. We work together to fine-tune every detail until it’s exactly right for your business.
04
Deliver
You receive polished, print-ready files or a fully launched website—plus guidance on how to use everything effectively.
Preston redesigned our entire menu and it’s made a real difference. Customers actually read it now, and our featured items are selling better than ever.
Maria Santos
Owner, Santos Family Restaurant
Preston Gray 