Skip to content
Zenith Docs

Web Resume

Web resume is created from pages located directly in the src/pages directory. We recommend creating one robust version of the resume in the index.astro file and then create its customized versions (for particular job offers) in separate files.

Page structure

The web resume is built using the Astro framework. The structure of the page is as follows:

---
// 1. Imports
import { getEntry } from 'astro:content';
import { enUS } from 'date-fns/locale';
// ...


// 2. Global context
await initializeWebContext(Astro, {
  /* ... */
});
---


{/* 3. Page layout */}
<Layout class="gap-16">
  {/* 4. Metadata and styles */}
  <Fragment slot="head">{/* ... */}</Fragment>
  {/* 5. Page content */}
  <Sidebar>{/* ... */}</Sidebar>
  <Basics entry={getEntry('basics', 'main')} />
  <Section class="gap-8" id="skills">{/* ... */}</Section>
  {/* ... */}
</Layout>

1. Imports

At the top of the file, you import all necessary components and utilities. When exploring the index.astro file, you may discover the following types of imports:

  • External libraries (first two) - utilities from the external libraries. You can customize the locale imported from 'date-fns/locale' if you want to display the page in a different language.
  • UI components (@/components/*, @/web/components/*) - components used to build the interface of the page. Check the components reference to read about all available components.
  • Style components (@/styles/*) - components that define the global styles of the page. You can change end of their import paths, to use different fonts and color schemes. Check the components reference to learn more about them.
  • Utilities (@/web/utils/*) - helper functions used to build the page.

2. Global context

Global configuration applied to the particular web page. You can learn more about all configurable values from the global context reference.

3. Page layout

The entire page content should be wrapped in the Layout component. It provides the basic structure of the page, applies global styles, and renders site metadata.

4. Metadata and styles

<Fragment slot="head"> should contain the metadata component and all style components. Usually you don’t have to modify much here. For style components, just update their import paths to customize page styling. For metadata component, modify only the second argument of the getEntry() function to use a different file for content.

5. Page content

Contains the actual page content built using components imported earlier. Some of components may require an entry prop - an invocation of the getEntry() function that fetches their data. Components may also receive some optional props you can discover by checking their files. To learn more about all available components, consult the components reference.

Page customization

There are many ways to customize the web resume. In this section we will shortly describe all of them and provide you with links to the detailed guides.

Content customization

To modify the content available for all pages, you can edit/create content collection entries and render their data using specified components. To learn more about displaying content collections data, check the data flow section. To discover available content collection entries, visit the content collections reference.

Style customization

There are four types of style components that allows to customize the appearance of the resume. One element of each type is already used within <Fragment slot="head"> at the top of your page content. To learn more about style components and their use cases, visit the Styles and Theming guide.

Locale customization

The main place to configure your resume language is configuration passed to the initializeWebContext. You can use it to customize: the locale used for dates and page lang attribute, set of translations used in some components, and dateFormat used when displaying dates. To learn more about those properties, check the global context reference.

Additional places you may want to check when customizing page language are texts provided to presentation components like <SectionTitle /> or <SubsectionTitle /> and content collection entries you use to get data.

To customize items displayed on the sidebar edit the <SidebarItem /> elements. You can add, remove and customize them by providing custom icons and titles (displayed in the tooltip). To work correctly <SidebarItem /> requires a sectionId property with an id of the section it should link to. To learn more about the sidebar, visit the Sidebar reference.

Analytics integration

Zenith comes with a built-in support for some cookie-less analytics services. They are disabled by default, but you can setup them following the Analytics guide.