feat: ⚡ update app version to 3.6.2

client/templates/Castform/Castform.tsx

@@ -16,8 +16,8 @@ import Section from './widgets/Section';
 const Castform: React.FC<PageProps> = ({ page }) => {
   const isFirstPage = useMemo(() => page === 0, [page]);
 
-  const layout: string[][] = useAppSelector((state) => state.resume.metadata.layout[page]);
-  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const layout: string[][] = useAppSelector((state) => state.resume.present.metadata.layout[page]);
+  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
 
   const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);
   const color = useMemo(() => (contrast === 'dark' ? theme.text : theme.background), [theme, contrast]);

client/templates/Castform/widgets/Heading.tsx

@@ -6,7 +6,7 @@ import { useMemo } from 'react';
 import { useAppSelector } from '@/store/hooks';
 
 const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
   const darkerPrimary = useMemo(() => darken(theme.primary, 0.2), [theme.primary]);
 
   return (

client/templates/Castform/widgets/Masthead.tsx

@@ -15,11 +15,11 @@ import { getContrastColor } from '@/utils/styles';
 import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
 
 export const MastheadSidebar: React.FC = () => {
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
   const { name, headline, photo, email, phone, birthdate, website, location, profiles } = useAppSelector(
-    (state) => state.resume.basics
+    (state) => state.resume.present.basics
   );
-  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
   const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);
   const color = useMemo(() => (contrast === 'dark' ? theme.text : theme.background), [theme, contrast]);
 
@@ -72,7 +72,7 @@ export const MastheadSidebar: React.FC = () => {
 };
 
 export const MastheadMain: React.FC = () => {
-  const { summary } = useAppSelector((state) => state.resume.basics);
+  const { summary } = useAppSelector((state) => state.resume.present.basics);
 
   return (
     <div className="px-4 pt-4">

client/templates/Castform/widgets/Section.tsx

@@ -3,6 +3,7 @@ import { ListItem, Section as SectionType } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
+import { useMemo } from 'react';
 
 import Markdown from '@/components/shared/Markdown';
 import { useAppSelector } from '@/store/hooks';
@@ -20,15 +21,17 @@ const Section: React.FC<SectionProps> = ({
   headlinePath = 'headline',
   keywordsPath = 'keywords',
 }) => {
-  const section: SectionType = useAppSelector((state) => get(state.resume, path, {}));
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
+  const section: SectionType = useAppSelector((state) => get(state.resume.present, path, {}));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
+
+  const sectionId = useMemo(() => section.id || path.replace('sections.', ''), [path, section]);
 
   if (!section.visible) return null;
 
   if (isArray(section.items) && isEmpty(section.items)) return null;
 
   return (
-    <section>
+    <section id={`Castform_${sectionId}`}>
       <Heading>{section.name}</Heading>
 
       <div
@@ -67,7 +70,7 @@ const Section: React.FC<SectionProps> = ({
                 <div className="grid gap-1">
                   {level && <span className="opacity-75">{level}</span>}
                   {levelNum > 0 && (
-                    <div className="level flex">
+                    <div className="flex">
                       {Array.from(Array(5).keys()).map((_, index) => (
                         <div
                           key={index}

client/templates/Gengar/Gengar.tsx

@@ -17,8 +17,8 @@ import Section from './widgets/Section';
 const Gengar: React.FC<PageProps> = ({ page }) => {
   const isFirstPage = useMemo(() => page === 0, [page]);
 
-  const layout: string[][] = useAppSelector((state) => state.resume.metadata.layout[page]);
-  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const layout: string[][] = useAppSelector((state) => state.resume.present.metadata.layout[page]);
+  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
   const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);
   const backgroundColor: string = useMemo(() => alpha(theme.primary, 0.15), [theme.primary]);
   const color = useMemo(() => (contrast === 'dark' ? theme.text : theme.background), [theme, contrast]);

client/templates/Gengar/widgets/Heading.tsx

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import { useAppSelector } from '@/store/hooks';
 
 const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
 
   return (
     <h3

client/templates/Gengar/widgets/Masthead.tsx

@@ -16,11 +16,11 @@ import { getContrastColor } from '@/utils/styles';
 import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
 
 export const MastheadSidebar: React.FC = () => {
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
   const { name, headline, photo, email, phone, birthdate, website, location, profiles } = useAppSelector(
-    (state) => state.resume.basics
+    (state) => state.resume.present.basics
   );
-  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
   const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);
   const iconColor = useMemo(() => (contrast === 'dark' ? theme.text : theme.background), [theme, contrast]);
 
@@ -73,10 +73,10 @@ export const MastheadSidebar: React.FC = () => {
 };
 
 export const MastheadMain: React.FC = () => {
-  const primaryColor: string = useAppSelector((state) => get(state.resume, 'metadata.theme.primary'));
+  const primaryColor: string = useAppSelector((state) => get(state.resume.present, 'metadata.theme.primary'));
   const backgroundColor: string = useMemo(() => alpha(primaryColor, 0.15), [primaryColor]);
 
-  const { summary } = useAppSelector((state) => state.resume.basics);
+  const { summary } = useAppSelector((state) => state.resume.present.basics);
 
   return (
     <div className="grid gap-2 p-4" style={{ backgroundColor }}>

client/templates/Gengar/widgets/Section.tsx

@@ -3,6 +3,7 @@ import { ListItem, Section as SectionType } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
+import { useMemo } from 'react';
 
 import Markdown from '@/components/shared/Markdown';
 import { useAppSelector } from '@/store/hooks';
@@ -20,16 +21,18 @@ const Section: React.FC<SectionProps> = ({
   headlinePath = 'headline',
   keywordsPath = 'keywords',
 }) => {
-  const section: SectionType = useAppSelector((state) => get(state.resume, path, {}));
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
-  const primaryColor: string = useAppSelector((state) => get(state.resume, 'metadata.theme.primary'));
+  const section: SectionType = useAppSelector((state) => get(state.resume.present, path, {}));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
+  const primaryColor: string = useAppSelector((state) => get(state.resume.present, 'metadata.theme.primary'));
+
+  const sectionId = useMemo(() => section.id || path.replace('sections.', ''), [path, section]);
 
   if (!section.visible) return null;
 
   if (isArray(section.items) && isEmpty(section.items)) return null;
 
   return (
-    <section>
+    <section id={`Gengar_${sectionId}`}>
       <Heading>{section.name}</Heading>
 
       <div

client/templates/Glalie/Glalie.tsx

@@ -13,8 +13,8 @@ import Section from './widgets/Section';
 const Glalie: React.FC<PageProps> = ({ page }) => {
   const isFirstPage = useMemo(() => page === 0, [page]);
 
-  const layout: string[][] = useAppSelector((state) => state.resume.metadata.layout[page]);
-  const primaryColor: string = useAppSelector((state) => get(state.resume, 'metadata.theme.primary'));
+  const layout: string[][] = useAppSelector((state) => state.resume.present.metadata.layout[page]);
+  const primaryColor: string = useAppSelector((state) => get(state.resume.present, 'metadata.theme.primary'));
 
   return (
     <div className={styles.page}>

client/templates/Glalie/widgets/BadgeDisplay.tsx

@@ -13,7 +13,7 @@ type Props = {
 };
 
 const BadgeDisplay: React.FC<Props> = ({ items }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
   const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);
 
   if (!isArray(items) || isEmpty(items)) return null;

client/templates/Glalie/widgets/Heading.tsx

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import { useAppSelector } from '@/store/hooks';
 
 const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
 
   return (
     <h3

client/templates/Glalie/widgets/Masthead.tsx

@@ -10,10 +10,10 @@ import getProfileIcon from '@/utils/getProfileIcon';
 import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
 
 export const MastheadSidebar: React.FC = () => {
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
-  const primaryColor: string = useAppSelector((state) => get(state.resume, 'metadata.theme.primary'));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
+  const primaryColor: string = useAppSelector((state) => get(state.resume.present, 'metadata.theme.primary'));
   const { name, headline, photo, email, phone, birthdate, website, location, profiles } = useAppSelector(
-    (state) => state.resume.basics
+    (state) => state.resume.present.basics
   );
 
   return (
@@ -65,7 +65,7 @@ export const MastheadSidebar: React.FC = () => {
 };
 
 export const MastheadMain: React.FC = () => {
-  const { summary } = useAppSelector((state) => state.resume.basics);
+  const { summary } = useAppSelector((state) => state.resume.present.basics);
 
   return <Markdown>{summary}</Markdown>;
 };

client/templates/Glalie/widgets/Section.tsx

@@ -3,6 +3,7 @@ import { ListItem, Section as SectionType } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
+import { useMemo } from 'react';
 
 import Markdown from '@/components/shared/Markdown';
 import { useAppSelector } from '@/store/hooks';
@@ -21,16 +22,18 @@ const Section: React.FC<SectionProps> = ({
   headlinePath = 'headline',
   keywordsPath = 'keywords',
 }) => {
-  const section: SectionType = useAppSelector((state) => get(state.resume, path, {}));
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
-  const primaryColor: string = useAppSelector((state) => get(state.resume, 'metadata.theme.primary'));
+  const section: SectionType = useAppSelector((state) => get(state.resume.present, path, {}));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
+  const primaryColor: string = useAppSelector((state) => get(state.resume.present, 'metadata.theme.primary'));
+
+  const sectionId = useMemo(() => section.id || path.replace('sections.', ''), [path, section]);
 
   if (!section.visible) return null;
 
   if (isArray(section.items) && isEmpty(section.items)) return null;
 
   return (
-    <section>
+    <section id={`Glalie_${sectionId}`}>
       <Heading>{section.name}</Heading>
 
       <div

client/templates/Kakuna/Kakuna.tsx

@@ -12,8 +12,8 @@ import Section from './widgets/Section';
 const Kakuna: React.FC<PageProps> = ({ page }) => {
   const isFirstPage = useMemo(() => page === 0, [page]);
 
-  const { summary } = useAppSelector((state) => state.resume.basics);
-  const layout: string[][] = useAppSelector((state) => state.resume.metadata.layout[page]);
+  const { summary } = useAppSelector((state) => state.resume.present.basics);
+  const layout: string[][] = useAppSelector((state) => state.resume.present.metadata.layout[page]);
 
   return (
     <div className={styles.page}>

client/templates/Kakuna/widgets/BadgeDisplay.tsx

@@ -12,7 +12,7 @@ type Props = {
 };
 
 const BadgeDisplay: React.FC<Props> = ({ items }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
   const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);
 
   if (!isArray(items) || isEmpty(items)) return null;

client/templates/Kakuna/widgets/Masthead.tsx

@@ -10,13 +10,13 @@ import getProfileIcon from '@/utils/getProfileIcon';
 import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
 
 const Masthead = () => {
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
   const { name, photo, email, phone, website, birthdate, headline, location, profiles } = useAppSelector(
-    (state) => state.resume.basics
+    (state) => state.resume.present.basics
   );
 
   return (
-    <div className="grid gap-3 justify-center mb-4 border-b pb-4 text-center">
+    <div className="mb-4 grid justify-center gap-3 border-b pb-4 text-center">
       <div className="mx-auto">
         {photo.visible && !isEmpty(photo.url) && (
           <img

client/templates/Kakuna/widgets/Section.tsx

@@ -3,6 +3,7 @@ import { ListItem, Section as SectionType } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
+import { useMemo } from 'react';
 
 import Markdown from '@/components/shared/Markdown';
 import { useAppSelector } from '@/store/hooks';
@@ -20,16 +21,18 @@ const Section: React.FC<SectionProps> = ({
   headlinePath = 'headline',
   keywordsPath = 'keywords',
 }) => {
-  const section: SectionType = useAppSelector((state) => get(state.resume, path, {}));
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
-  const primaryColor: string = useAppSelector((state) => get(state.resume, 'metadata.theme.primary'));
+  const section: SectionType = useAppSelector((state) => get(state.resume.present, path, {}));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
+  const primaryColor: string = useAppSelector((state) => get(state.resume.present, 'metadata.theme.primary'));
+
+  const sectionId = useMemo(() => section.id || path.replace('sections.', ''), [path, section]);
 
   if (!section.visible) return null;
 
   if (isArray(section.items) && isEmpty(section.items)) return null;
 
   return (
-    <section>
+    <section id={`Kakuna_${sectionId}`}>
       <Heading>{section.name}</Heading>
 
       <div

client/templates/Leafish/Leafish.module.scss

@@ -1,7 +1,11 @@
 .container {
-  @apply grid grid-cols-2 gap-8 px-6 py-4;
+  @apply grid grid-cols-2 gap-4 px-6 py-4;
 
-  .column {
-    @apply col-span-1 flex flex-col;
+  .main {
+    @apply grid gap-4;
+  }
+
+  .sidebar {
+    @apply grid gap-4;
   }
 }

client/templates/Leafish/Leafish.tsx

@@ -11,15 +11,15 @@ import Section from './widgets/Section';
 const Leafish: React.FC<PageProps> = ({ page }) => {
   const isFirstPage = useMemo(() => page === 0, [page]);
 
-  const layout: string[][] = useAppSelector((state) => state.resume.metadata.layout[page]);
+  const layout: string[][] = useAppSelector((state) => state.resume.present.metadata.layout[page]);
 
   return (
     <div className={styles.page}>
       {isFirstPage && <Masthead />}
 
       <div className={styles.container}>
-        <div className={styles.column}>{layout[0].map((key) => getSectionById(key, Section))}</div>
-        <div className={styles.column}>{layout[1].map((key) => getSectionById(key, Section))}</div>
+        <div className={styles.main}>{layout[0].map((key) => getSectionById(key, Section))}</div>
+        <div className={styles.sidebar}>{layout[1].map((key) => getSectionById(key, Section))}</div>
       </div>
     </div>
   );

client/templates/Leafish/widgets/Heading.tsx

@@ -4,11 +4,11 @@ import get from 'lodash/get';
 import { useAppSelector } from '@/store/hooks';
 
 const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
 
   return (
     <h2
-      className="pb-1 mb-2 font-bold uppercase opacity-75"
+      className="mb-2 pb-1 font-bold uppercase opacity-75"
       style={{ borderBottomWidth: '3px', borderColor: theme.primary, color: theme.primary, display: 'inline-block' }}
     >
       {children}

client/templates/Leafish/widgets/Masthead.tsx

@@ -11,27 +11,19 @@ import getProfileIcon from '@/utils/getProfileIcon';
 import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
 
 const Masthead: React.FC = () => {
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
   const { name, photo, headline, summary, email, phone, birthdate, website, location, profiles } = useAppSelector(
-    (state) => state.resume.basics
+    (state) => state.resume.present.basics
   );
-  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
 
   return (
     <div>
-      <div
-        className="flex items-center gap-4 p-6"
-        id="Masterhead_main"
-        style={{ backgroundColor: alpha(theme.primary, 0.2) }}
-      >
+      <div className="flex items-center gap-4 p-6" style={{ backgroundColor: alpha(theme.primary, 0.2) }}>
         <div className="grid flex-1 gap-1">
-          <h1 id="Masterhead_name">{name}</h1>
-          <p style={{ color: theme.primary }} id="Masterhead_headline">
-            {headline}
-          </p>
-          <p className="opacity-75" id="Masterhead_summary">
-            {summary}
-          </p>
+          <h1>{name}</h1>
+          <p style={{ color: theme.primary }}>{headline}</p>
+          <p className="opacity-75">{summary}</p>
         </div>
 
         {photo.visible && !isEmpty(photo.url) && (
@@ -41,13 +33,11 @@ const Masthead: React.FC = () => {
             width={photo.filters.size}
             height={photo.filters.size}
             className={getPhotoClassNames(photo.filters)}
-            id="Masterhead_photo"
           />
         )}
       </div>
       <div
         className="grid gap-y-2 px-8 py-4"
-        id="Masterhead_data"
         style={{ backgroundColor: alpha(theme.primary, 0.4), gridTemplateColumns: `repeat(2, minmax(0, 1fr))` }}
       >
         <DataDisplay icon={<Room />} className="col-span-2">

client/templates/Leafish/widgets/Section.tsx

@@ -3,6 +3,7 @@ import { ListItem, Section as SectionType } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
+import { useMemo } from 'react';
 
 import Markdown from '@/components/shared/Markdown';
 import { useAppSelector } from '@/store/hooks';
@@ -20,22 +21,23 @@ const Section: React.FC<SectionProps> = ({
   headlinePath = 'headline',
   keywordsPath = 'keywords',
 }) => {
-  const section: SectionType = useAppSelector((state) => get(state.resume, path, {}));
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
-  const primaryColor: string = useAppSelector((state) => get(state.resume, 'metadata.theme.primary'));
+  const section: SectionType = useAppSelector((state) => get(state.resume.present, path, {}));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
+  const primaryColor: string = useAppSelector((state) => get(state.resume.present, 'metadata.theme.primary'));
+
+  const sectionId = useMemo(() => section.id || path.replace('sections.', ''), [path, section]);
 
   if (!section.visible) return null;
 
   if (isArray(section.items) && isEmpty(section.items)) return null;
 
   return (
-    <section className="mb-4">
+    <section id={`Leafish_${sectionId}`}>
       <Heading>{section.name}</Heading>
 
       <div
         className="grid items-start gap-4"
         style={{ gridTemplateColumns: `repeat(${section.columns}, minmax(0, 1fr))` }}
-        id={`Section_${section.id}`}
       >
         {section.items.map((item: ListItem) => {
           const id = item.id,
@@ -52,16 +54,16 @@ const Section: React.FC<SectionProps> = ({
             date = formatDateString(get(item, 'date'), dateFormat);
 
           return (
-            <div key={id} id={id} className={`grid gap-1 mb-2 Section_${section.id}_inner`}>
-              <div>
-                {title && <div className="font-bold Section_title">{title}</div>}
-                {subtitle && <div className="Section_subtitle">{subtitle}</div>}
+            <div key={id} className="mb-2 grid gap-1">
+              <div className="grid gap-1">
+                {title && <div className="font-bold">{title}</div>}
+                {subtitle && <div>{subtitle}</div>}
                 {date && (
-                  <div className="italic text-xs Section_date" style={{ color: primaryColor }}>
+                  <div className="text-xs" style={{ color: primaryColor }}>
                     ({date})
                   </div>
                 )}
-                {headline && <div className="opacity-50 Section_headline">{headline}</div>}
+                {headline && <div className="opacity-50">{headline}</div>}
               </div>
 
               {(level || levelNum > 0) && (
@@ -84,14 +86,7 @@ const Section: React.FC<SectionProps> = ({
                 </div>
               )}
 
-              {summary && (
-                <div>
-                  <div className="italic text-xs" style={{ color: primaryColor }}>
-                    Overview
-                  </div>
-                  <Markdown className={`marker:text-[${primaryColor}]`}>{summary}</Markdown>
-                </div>
-              )}
+              {summary && <Markdown>{summary}</Markdown>}
 
               {url && (
                 <DataDisplay icon={<Link />} link={url} className="text-xs">

client/templates/Onyx/Onyx.tsx

@@ -12,8 +12,8 @@ import Section from './widgets/Section';
 const Onyx: React.FC<PageProps> = ({ page }) => {
   const isFirstPage = useMemo(() => page === 0, [page]);
 
-  const { summary } = useAppSelector((state) => state.resume.basics);
-  const layout: string[][] = useAppSelector((state) => state.resume.metadata.layout[page]);
+  const { summary } = useAppSelector((state) => state.resume.present.basics);
+  const layout: string[][] = useAppSelector((state) => state.resume.present.metadata.layout[page]);
 
   return (
     <div className={styles.page}>

client/templates/Onyx/widgets/Heading.tsx

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import { useAppSelector } from '@/store/hooks';
 
 const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
 
   return (
     <h4 className="mb-2 font-bold uppercase" style={{ color: theme.primary }}>

client/templates/Onyx/widgets/Masthead.tsx

@@ -9,9 +9,9 @@ import getProfileIcon from '@/utils/getProfileIcon';
 import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
 
 const Masthead: React.FC = () => {
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
   const { name, photo, email, phone, website, birthdate, headline, location, profiles } = useAppSelector(
-    (state) => state.resume.basics
+    (state) => state.resume.present.basics
   );
 
   return (

client/templates/Onyx/widgets/Section.tsx

@@ -3,6 +3,7 @@ import { ListItem, Section as SectionType } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
+import { useMemo } from 'react';
 
 import Markdown from '@/components/shared/Markdown';
 import { useAppSelector } from '@/store/hooks';
@@ -20,16 +21,18 @@ const Section: React.FC<SectionProps> = ({
   headlinePath = 'headline',
   keywordsPath = 'keywords',
 }) => {
-  const section: SectionType = useAppSelector((state) => get(state.resume, path, {}));
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
-  const primaryColor: string = useAppSelector((state) => get(state.resume, 'metadata.theme.primary'));
+  const section: SectionType = useAppSelector((state) => get(state.resume.present, path, {}));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
+  const primaryColor: string = useAppSelector((state) => get(state.resume.present, 'metadata.theme.primary'));
+
+  const sectionId = useMemo(() => section.id || path.replace('sections.', ''), [path, section]);
 
   if (!section.visible) return null;
 
   if (isArray(section.items) && isEmpty(section.items)) return null;
 
   return (
-    <section>
+    <section id={`Onyx_${sectionId}`}>
       <Heading>{section.name}</Heading>
 
       <div

client/templates/Pikachu/Pikachu.tsx

@@ -10,7 +10,7 @@ import Section from './widgets/Section';
 
 const Pikachu: React.FC<PageProps> = ({ page }) => {
   const isFirstPage = useMemo(() => page === 0, [page]);
-  const layout: string[][] = useAppSelector((state) => state.resume.metadata.layout[page]);
+  const layout: string[][] = useAppSelector((state) => state.resume.present.metadata.layout[page]);
 
   return (
     <div className={styles.page}>

client/templates/Pikachu/widgets/Heading.tsx

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import { useAppSelector } from '@/store/hooks';
 
 const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
 
   return (
     <h3

client/templates/Pikachu/widgets/Masthead.tsx

@@ -13,13 +13,13 @@ import { getContrastColor } from '@/utils/styles';
 import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
 
 export const MastheadSidebar: React.FC = () => {
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
   const { name, photo, email, phone, birthdate, website, location, profiles } = useAppSelector(
-    (state) => state.resume.basics
+    (state) => state.resume.present.basics
   );
 
   return (
-    <div className="col-span-2 grid justify-items-left gap-4">
+    <div className="col-span-2 grid justify-items-start gap-4">
       {photo.visible && !isEmpty(photo.url) && (
         <img
           alt={name}
@@ -62,10 +62,10 @@ export const MastheadSidebar: React.FC = () => {
 };
 
 export const MastheadMain: React.FC = () => {
-  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
   const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);
 
-  const { name, summary, headline } = useAppSelector((state) => state.resume.basics);
+  const { name, summary, headline } = useAppSelector((state) => state.resume.present.basics);
 
   return (
     <div

client/templates/Pikachu/widgets/Section.tsx

@@ -3,6 +3,7 @@ import { ListItem, Section as SectionType } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
+import { useMemo } from 'react';
 
 import Markdown from '@/components/shared/Markdown';
 import { useAppSelector } from '@/store/hooks';
@@ -20,16 +21,18 @@ const Section: React.FC<SectionProps> = ({
   headlinePath = 'headline',
   keywordsPath = 'keywords',
 }) => {
-  const section: SectionType = useAppSelector((state) => get(state.resume, path, {}));
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
-  const primaryColor: string = useAppSelector((state) => get(state.resume, 'metadata.theme.primary'));
+  const section: SectionType = useAppSelector((state) => get(state.resume.present, path, {}));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
+  const primaryColor: string = useAppSelector((state) => get(state.resume.present, 'metadata.theme.primary'));
+
+  const sectionId = useMemo(() => section.id || path.replace('sections.', ''), [path, section]);
 
   if (!section.visible) return null;
 
   if (isArray(section.items) && isEmpty(section.items)) return null;
 
   return (
-    <section>
+    <section id={`Pikachu_${sectionId}`}>
       <Heading>{section.name}</Heading>
 
       <div