added about

This commit is contained in:
2026-08-02 19:40:05 -07:00
parent 8e9f50fed6
commit 2422378e9b
4 changed files with 247 additions and 88 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 845 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

176
src/pages/about.astro Normal file
View File

@@ -0,0 +1,176 @@
---
import Layout from '../layouts/Layout.astro';
import { Image } from 'astro:assets';
// Updated image imports pointing to /assets/images/brand-package/
import noelleImage1 from '../assets/images/brand-package/noelle-paris.jpg';
import noelleImage2 from '../assets/images/brand-package/noelle-paris2.jpg';
---
<Layout title="About Noelle | Noelle Paris Design">
<main class="about-container">
<header class="about-header">
<h1>About Noelle</h1>
<p class="subtitle">Design for Well-Being, Inside & Out</p>
</header>
{/* Primary Featured Portrait */}
<div class="image-wrapper main-portrait">
<Image
src={noelleImage1}
alt="Noelle Paris"
class="profile-image"
loading="eager"
/>
</div>
{/* Biography Content - Middle Aligned */}
<article class="about-content">
<p class="lead-paragraph">
At the heart of every project, Noelle Paris believes that exceptional design begins with understanding people. As the founder and principal designer of Noelle Paris Design, she creates timeless interiors and outdoor living spaces that are thoughtfully tailored to the people who inhabit them. Guided by her philosophy of <em>Design for Well-Being, Inside & Out</em>, Noelle believes our environments have the power to shape how we feel, how we connect, and how we experience everyday life. Her goal is not simply to create beautiful homes, but to design spaces that feel deeply personal, function effortlessly, and enrich the lives of those who call them home.
</p>
<p>
Noelle's multidisciplinary background gives her a perspective that extends far beyond aesthetics alone. Each chapter of her career has contributed to the designer she is today, shaping an approach rooted in empathy, thoughtful problem-solving, and a deep understanding of the relationship between people and the spaces they inhabit.
</p>
<p>
Noelle began her professional career supporting executive leadership teams at innovative Silicon Valley technology startups. Working alongside entrepreneurs and executives in fast-paced environments strengthened her skills in organization, communication, project management, and strategic thinking—an invaluable foundation for leading complex design and construction projects today.
</p>
<p>
Motivated by a desire to make a more meaningful impact in people's lives, Noelle returned to graduate school and earned a Master of Arts in Clinical Mental Health Counseling from Palo Alto University. Her education and experience in counseling provided a deeper understanding of human behavior, relationships, and emotional well-being, while reinforcing the importance of empathy, trust, and authentic connection. Those principles continue to shape every client relationship, allowing her to design with curiosity, compassion, and a genuine understanding of how each client wants to live.
</p>
{/* Secondary Image Integrated Inline */}
<div class="image-wrapper inline-portrait">
<Image
src={noelleImage2}
alt="Noelle Paris Design Process"
class="profile-image"
loading="lazy"
/>
</div>
<p>
Her passion for creating environments that support well-being naturally led to the founding of Liebe Life Holistic Wellness, where she combined her background in counseling and holistic wellness to create a thoughtfully designed healing space dedicated to whole-person health. Throughout the process of designing, renovating, and building the wellness center, Noelle rediscovered a lifelong passion that had always been woven throughout her life: architecture, construction, interior design, and landscape design.
</p>
<p>
That experience ultimately inspired her next chapter. After earning her California real estate license, Noelle found the ideal intersection of her passions—bringing together her understanding of homes, construction, wellness, and design to help clients create spaces that are not only beautiful, but enduring, functional, and deeply meaningful.
</p>
<p>
Anyone who has known Noelle throughout her life would tell you that design has always been her greatest creative passion. Long before it became her profession, she was studying architecture, reimagining floor plans, remodeling homes, redesigning landscapes, and carefully considering how thoughtful design could improve the way people experience their everyday lives. Becoming a designer wasn't a departure from her previous work—it was the natural culmination of everything that came before.
</p>
<p>
Today, Noelle brings together a rare combination of experience in psychology, wellness, real estate, construction, and design to offer clients something more than beautiful spaces. She offers a thoughtful, collaborative design experience grounded in listening first, understanding deeply, and creating homes that reflect each client's unique lifestyle, values, and aspirations.
</p>
<p>
She believes the most successful homes are those that feel authentic to the people who live within them. Beautiful materials and timeless details are important, but they are only meaningful when they support connection, simplify daily life, inspire joy, and promote lasting well-being.
</p>
<p class="closing-statement">
For Noelle, that has always been the true purpose of design.
</p>
</article>
</main>
</Layout>
<style>
.about-container {
max-width: 720px; /* Slightly narrower reading column for optimal centered typography */
margin: 0 auto;
padding: 4rem 1.5rem;
color: #2b2b2b;
}
.about-header {
text-align: center;
margin-bottom: 3rem;
}
.about-header h1 {
font-size: 2.5rem;
font-weight: 300;
margin-bottom: 0.75rem;
letter-spacing: -0.01em;
}
.subtitle {
font-size: 0.95rem;
color: #666;
text-transform: uppercase;
letter-spacing: 0.15em;
}
/* Image Wrapper & Centered Portraits */
.image-wrapper {
display: flex;
justify-content: center;
width: 100%;
}
.main-portrait {
margin-bottom: 3.5rem;
}
.inline-portrait {
margin: 3.5rem 0;
}
.profile-image {
width: 100%;
max-width: 480px;
height: auto;
border-radius: 2px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
object-fit: cover;
}
/* Centered Typography Styling */
.about-content {
line-height: 1.9;
font-size: 1.05rem;
color: #333;
text-align: center; /* Center-aligned paragraphs */
}
.about-content p {
margin-bottom: 2rem;
}
.lead-paragraph {
font-size: 1.125rem;
line-height: 1.95;
color: #1a1a1a;
}
.closing-statement {
font-style: italic;
font-size: 1.15rem;
color: #111;
margin-top: 3rem;
letter-spacing: 0.02em;
}
@media (max-width: 600px) {
.about-container {
padding: 2.5rem 1.25rem;
}
.about-header h1 {
font-size: 2rem;
}
.subtitle {
font-size: 0.85rem;
}
.profile-image {
max-width: 100%;
}
}
</style>

View File

@@ -5,101 +5,84 @@ import { Image } from 'astro:assets';
// 1. Import main graphic logo // 1. Import main graphic logo
import mainLogo from '../assets/images/brand-package/Noelle_Paris_Design_Logo_Web.png'; import mainLogo from '../assets/images/brand-package/Noelle_Paris_Design_Logo_Web.png';
// Main Slideshow Images // 1. Bulk import all main-slideshow images at build time
import slideshow1 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_1.jpg'; const imageImports = import.meta.glob<{ default: ImageMetadata }>(
import slideshow2 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_2.jpg'; '../assets/images/main-slideshow/*.{jpg,png,jpeg,webp}',
import slideshow3 from '../assets/images/main-slideshow/FOMCM_Maine_Page_Slideshow_3.jpg'; { eager: true }
import slideshow5 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_5.jpg'; );
import slideshow6 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_6.jpg';
import slideshow9 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_9.jpg';
import slideshow10 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_10.jpg';
import slideshow11 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_11.jpg';
import slideshow12 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_12.jpg';
import slideshow13 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_13.jpg';
import slideshow14 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_14.jpg';
import slideshow15 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_15.jpg';
import slideshow16 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_16.jpg';
import slideshow17 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_17.jpg';
import slideshow18 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_18.jpg';
import slideshow19 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_19.jpg';
import slideshow20 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_20.jpg';
import slideshow21 from '../assets/images/main-slideshow/FOMCM_Main_Page_Slideshow_21.jpg';
import slideshow22 from '../assets/images/main-slideshow/FOWC_Main_Page_Slideshow_22.jpg';
import slideshow23 from '../assets/images/main-slideshow/FOWC_Main_Page_Slideshow_23.jpg';
import slideshow24 from '../assets/images/main-slideshow/FOWC_Main_Page_Slideshow_24.jpg';
import slideshow25 from '../assets/images/main-slideshow/FOWC_Main_Page_Slideshow_25.jpg';
import slideshow26 from '../assets/images/main-slideshow/HHC_Main_Page_Slideshow_26.jpg';
import slideshow27 from '../assets/images/main-slideshow/HHC_Main_Page_Slideshow_27.jpg';
import slideshow28 from '../assets/images/main-slideshow/HHC_Main_Page_Slideshow_28.jpg';
import slideshow29 from '../assets/images/main-slideshow/HHC_Main_Page_Slideshow_29.jpg';
import slideshow30 from '../assets/images/main-slideshow/HHC_Main_Page_Slideshow_30.jpg';
import slideshow31 from '../assets/images/main-slideshow/HHC_Main_Page_Slideshow_31.jpg';
import slideshow32 from '../assets/images/main-slideshow/HHC_Main_Page_Slideshow_32.jpg';
import slideshow33 from '../assets/images/main-slideshow/OVCFH_Main_Page_Slideshow_33.jpg';
import slideshow34 from '../assets/images/main-slideshow/OVCFH_Main_Page_Slideshow_34.jpg';
import slideshow35 from '../assets/images/main-slideshow/OVCFH_Main_Page_Slideshow_35.jpg';
import slideshow36 from '../assets/images/main-slideshow/OVCFH_Main_Page_Slideshow_36.jpg';
import slideshow37 from '../assets/images/main-slideshow/OVCFH_Main_Page_Slideshow_37.jpg';
import slideshow38 from '../assets/images/main-slideshow/OVCFH_Main_Page_Slideshow_38.jpg';
import slideshow39 from '../assets/images/main-slideshow/OVCFH_Main_Page_Slideshow_39.jpg';
import slideshow40 from '../assets/images/main-slideshow/OVCFH_Main_Page_Slideshow_40.jpg';
import slideshow41 from '../assets/images/main-slideshow/OVCFH_Main_Page_Slideshow_41.jpg';
import slideshow42 from '../assets/images/main-slideshow/OVCFH_Main_Page_Slideshow_42.jpg';
import slideshow43 from '../assets/images/main-slideshow/OVCFH_Main_Page_Slideshow_43.jpg';
const rawSlides = [ // 2. Define your project metadata lookup map
// Fair Oaks Midcentury Modern (FOMCM) const projectMeta: Record<string, { title: string; href: string }> = {
{ image: slideshow1, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, FOMCM: {
{ image: slideshow2, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, title: 'FAIR OAKS MIDCENTURY MODERN',
{ image: slideshow3, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, href: '/projects/fair-oaks-midcentury-modern',
{ image: slideshow5, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, },
{ image: slideshow6, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, FOWC: {
{ image: slideshow9, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, title: 'FAIR OAKS WELLNESS CENTER',
{ image: slideshow10, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, href: '/projects/fair-oaks-wellness-center',
{ image: slideshow11, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, },
{ image: slideshow12, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, HHC: {
{ image: slideshow13, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, title: 'HAYWARD HILLS CONTEMPORARY',
{ image: slideshow14, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, href: '/projects/hayward-hills-contemporary',
{ image: slideshow15, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, },
{ image: slideshow16, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, OVCFH: {
{ image: slideshow17, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, title: 'ORANGEVALE COLONIAL FARMHOUSE',
{ image: slideshow18, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, href: '/projects/orangevale-colonial-farmhouse',
{ image: slideshow19, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, },
{ image: slideshow20, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' }, };
{ image: slideshow21, title: 'FAIR OAKS MIDCENTURY MODERN', href: '/projects/fair-oaks-midcentury-modern' },
// Fair Oaks Wellness Center (FOWC) // 3. Group images by their project prefix (e.g., FOMCM, FOWC)
{ image: slideshow22, title: 'FAIR OAKS WELLNESS CENTER', href: '/projects/fair-oaks-wellness-center' }, const projectGroups: Record<string, any[]> = {};
{ image: slideshow23, title: 'FAIR OAKS WELLNESS CENTER', href: '/projects/fair-oaks-wellness-center' },
{ image: slideshow24, title: 'FAIR OAKS WELLNESS CENTER', href: '/projects/fair-oaks-wellness-center' },
{ image: slideshow25, title: 'FAIR OAKS WELLNESS CENTER', href: '/projects/fair-oaks-wellness-center' },
// Hayward Hills Contemporary (HHC) for (const path in imageImports) {
{ image: slideshow26, title: 'HAYWARD HILLS CONTEMPORARY', href: '/projects/hayward-hills-contemporary' }, const filename = path.split('/').pop() || '';
{ image: slideshow27, title: 'HAYWARD HILLS CONTEMPORARY', href: '/projects/hayward-hills-contemporary' }, const prefix = filename.split('_')[0]; // Extracts "FOMCM", "FOWC", etc.
{ image: slideshow28, title: 'HAYWARD HILLS CONTEMPORARY', href: '/projects/hayward-hills-contemporary' }, const meta = projectMeta[prefix] || { title: '', href: '#' };
{ image: slideshow29, title: 'HAYWARD HILLS CONTEMPORARY', href: '/projects/hayward-hills-contemporary' },
{ image: slideshow30, title: 'HAYWARD HILLS CONTEMPORARY', href: '/projects/hayward-hills-contemporary' },
{ image: slideshow31, title: 'HAYWARD HILLS CONTEMPORARY', href: '/projects/hayward-hills-contemporary' },
{ image: slideshow32, title: 'HAYWARD HILLS CONTEMPORARY', href: '/projects/hayward-hills-contemporary' },
// Orangevale Colonial Farmhouse (OVCFH) if (!projectGroups[prefix]) {
{ image: slideshow33, title: 'ORANGEVALE COLONIAL FARMHOUSE', href: '/projects/orangevale-colonial-farmhouse' }, projectGroups[prefix] = [];
{ image: slideshow34, title: 'ORANGEVALE COLONIAL FARMHOUSE', href: '/projects/orangevale-colonial-farmhouse' }, }
{ image: slideshow35, title: 'ORANGEVALE COLONIAL FARMHOUSE', href: '/projects/orangevale-colonial-farmhouse' },
{ image: slideshow36, title: 'ORANGEVALE COLONIAL FARMHOUSE', href: '/projects/orangevale-colonial-farmhouse' },
{ image: slideshow37, title: 'ORANGEVALE COLONIAL FARMHOUSE', href: '/projects/orangevale-colonial-farmhouse' },
{ image: slideshow38, title: 'ORANGEVALE COLONIAL FARMHOUSE', href: '/projects/orangevale-colonial-farmhouse' },
{ image: slideshow39, title: 'ORANGEVALE COLONIAL FARMHOUSE', href: '/projects/orangevale-colonial-farmhouse' },
{ image: slideshow40, title: 'ORANGEVALE COLONIAL FARMHOUSE', href: '/projects/orangevale-colonial-farmhouse' },
{ image: slideshow41, title: 'ORANGEVALE COLONIAL FARMHOUSE', href: '/projects/orangevale-colonial-farmhouse' },
{ image: slideshow42, title: 'ORANGEVALE COLONIAL FARMHOUSE', href: '/projects/orangevale-colonial-farmhouse' },
{ image: slideshow43, title: 'ORANGEVALE COLONIAL FARMHOUSE', href: '/projects/orangevale-colonial-farmhouse' }
];
projectGroups[prefix].push({
image: imageImports[path].default,
title: meta.title,
href: meta.href,
});
}
// 4. Shuffle inside each project group using Fisher-Yates
const shuffle = <T,>(array: T[]): T[] => {
const arr = [...array];
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
};
// Infinite loop duplicates Object.keys(projectGroups).forEach((key) => {
projectGroups[key] = shuffle(projectGroups[key]);
});
// 5. Interleave groups so projects alternate evenly (Fair Randomization)
const interleaveProjects = (groups: Record<string, any[]>) => {
const interleaved: any[] = [];
const keys = shuffle(Object.keys(groups)); // Randomize initial group order
const queues = keys.map((k) => [...groups[k]]);
while (queues.some((q) => q.length > 0)) {
for (const queue of queues) {
if (queue.length > 0) {
interleaved.push(queue.shift());
}
}
}
return interleaved;
};
const rawSlides = interleaveProjects(projectGroups);
// 6. Infinite loop duplicates setup
const slides = [ const slides = [
rawSlides[rawSlides.length - 1], rawSlides[rawSlides.length - 1],
...rawSlides, ...rawSlides,