Redesign of Wedepohl Engineering’s website, built with Astro, React, Server Islands, SCSS and is deployed using NodeJS on Vercel.
Features include:
Astro Components
Astro Components are the building blocks of an Astro website. They allow you to create reusable pieces
of UI that can be composed together to build complex layouts and functionality. They are component agnostic
and could be built using any framework (React, Vue, Svelte, etc.) or no framework at all.
We use plain Astro components and React components to build various parts of the website.
Scoped styles are used within the components to ensure that styles do not leak out and affect other parts of the website.
View the Astro Components Documentation Page
Astro Content Collections
Astro Content Collections are the primary way to manage, query and ensure type-safety for content in an Astro project.
We use markdown files to provide the content.
View the Astro Content Collections Documentation Page
Astro Images
Astro Image/Picture Components are used to display responsive modern format images on websites. They optimized the image
to image to reduce file size, improve performance, add lazy loading and reduce cumulative layout shift.
View the Astro Image/Picture Components Documentation Page
Astro Server Islands
Astro Server Islands are a powerful feature of Astro that allows you to build interactive components without
the overhead of a full JavaScript framework on the client-side. It can be used to put a placeholder for content that
will be rendered later by the server. This increases performance and reduces the amount of JavaScript sent to the client.
View the Astro Server Islands Documentation Page
This page is an example of Astro Server Islands in action. The placeholder content is rendered first, and then the server
fills in the rest of the after a delay to simulate data fetching that could take time.
View the Server Islands Demo Page
Astro View Transitions
View transitions are animated transitions between different website views.
They are a popular design choice for preserving visual continuity as visitors
move between states or views of an application.
View the Astro View Transitions Documentation Page
Light/Dark Mode
Light/Dark mode toggle that allows users to switch between light and dark themes or to use their system preferences.
This is implemented using CSS variables and JavaScript to toggle the theme based the users system preference or manual selection.
The selected theme is persisted using local storage to ensure the user's preference is maintained across sessions and revisiting the page.
SCSS Tokens
SCSS Tokens in one file are used to customize the design (colors, fonts, etc.) of the website. This allows for easy updates to the design system
by changing the values in a single location.
Back to Projects