Create main data file and empty components for all sections

src/components/sections/experience/experience-section.tsx

@@ -0,0 +1,4 @@
+import { SectionCard } from '@/atoms/section-card';
+import type { ExperienceSection as ExperienceSectionProps } from '@/types/experience-section';
+
+export const ExperienceSection = (props: ExperienceSectionProps) => <SectionCard>Experience section</SectionCard>;

src/components/sections/experience/index.ts

@@ -0,0 +1 @@
+export { ExperienceSection } from './experience-section';

src/components/sections/favorites/favorites-section.tsx

@@ -0,0 +1,4 @@
+import { SectionCard } from '@/atoms/section-card';
+import type { FavoritesSection as FavoritesSectionProps } from '@/types/favorites-section';
+
+export const FavoritesSection = (props: FavoritesSectionProps) => <SectionCard>Favorites section</SectionCard>;

src/components/sections/favorites/index.ts

@@ -0,0 +1 @@
+export { FavoritesSection } from './favorites-section';

src/components/sections/main/index.ts

@@ -0,0 +1 @@
+export { MainSection } from './main-section';

src/components/sections/main/main-section.tsx

@@ -0,0 +1,4 @@
+import { SectionCard } from '@/atoms/section-card';
+import type { MainSection as MainSectionProps } from '@/types/main-section';
+
+export const MainSection = (props: MainSectionProps) => <SectionCard>Main section</SectionCard>;

src/components/sections/portfolio/index.ts

@@ -0,0 +1 @@
+export { PortfolioSection } from './portfolio-section';

src/components/sections/portfolio/portfolio-section.tsx

@@ -0,0 +1,4 @@
+import { SectionCard } from '@/atoms/section-card';
+import type { PortfolioSection as PortfolioSectionProps } from '@/types/portfolio-section';
+
+export const PortfolioSection = (props: PortfolioSectionProps) => <SectionCard>Portfolio section</SectionCard>;

src/components/sections/skills/index.ts

@@ -0,0 +1 @@
+export { SkillsSection } from './skills-section';

src/components/sections/skills/skills-section.tsx

@@ -0,0 +1,4 @@
+import { SectionCard } from '@/atoms/section-card';
+import type { SkillsSection as SkillsSectionProps } from '@/types/skills-section';
+
+export const SkillsSection = (props: SkillsSectionProps) => <SectionCard>Skills section</SectionCard>;

src/components/sections/testimonials/index.ts

@@ -0,0 +1 @@
+export { TestimonialsSection } from './testimonials-section';

src/components/sections/testimonials/testimonials-section.tsx

@@ -0,0 +1,4 @@
+import { SectionCard } from '@/atoms/section-card';
+import type { TestimonialsSection as TestimonialsSectionProps } from '@/types/testimonials-section';
+
+export const TestimonialsSection = (props: TestimonialsSectionProps) => <SectionCard>Testimonials section</SectionCard>;

src/data.ts

@@ -0,0 +1,32 @@
+import myImage from '@/assets/my-image.jpeg';
+import type { Data } from '@/types/data';
+
+export const data: Data = {
+  seo: {
+    title: 'Mark Freeman - Senior React Developer',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales ac dui at vestibulum. In condimentum metus id dui tincidunt, in blandit mi vehicula.',
+  },
+  main: {
+    config: {
+      icon: '',
+    },
+    image: { src: myImage, alt: 'Mark Freeman picture' },
+    fullName: 'Mark Freeman',
+    role: 'Senior React Developer',
+    details: [
+      { label: 'Phone', value: '+48 604 343 212' },
+      { label: 'Email', value: 'veeeery.long.email.address@gmail.com' },
+      { label: 'From', value: 'Warsaw, Poland' },
+      { label: 'Salary range', value: '18 000 - 25 000 PLN' },
+    ],
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales ac dui at vestibulum. In condimentum metus id dui tincidunt, in blandit mi vehicula. Nulla lacinia, erat sit amet elementum vulputate, lectus mauris volutpat mi, vitae accumsan metus elit ut nunc. Vestibulum lacinia enim eget eros fermentum scelerisque. Proin augue leo, posuere ut imperdiet vitae, fermentum eu ipsum. Sed sed neque sagittis, posuere urna nec, commodo leo. Pellentesque posuere justo vitae massa volutpat maximus.',
+    tags: [{ name: 'Open for freelance' }, { name: 'Available for mentoring' }, { name: 'Working on side project' }],
+    action: {
+      label: 'Download CV',
+      href: '#',
+    },
+    socials: [],
+  },
+};

src/data/types/seo.ts

@@ -1,4 +0,0 @@
-export interface Seo {
-  title: string;
-  description: string;
-}

src/pages/index.astro

@@ -1,7 +1,11 @@
 ---
-import { SectionCard } from '@/atoms/section-card';
+import { ExperienceSection } from '@/sections/experience';
-import { Typography } from '@/atoms/typography';
+import { FavoritesSection } from '@/sections/favorites';
-import { LabelledValue } from '@/atoms/labelled-value';
+import { MainSection } from '@/sections/main';
+import { PortfolioSection } from '@/sections/portfolio';
+import { SkillsSection } from '@/sections/skills';
+import { TestimonialsSection } from '@/sections/testimonials';
+import { data } from '../data';
 ---
 
 <!DOCTYPE html>
@@ -11,22 +15,17 @@ import { LabelledValue } from '@/atoms/labelled-value';
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
-    <title>Welcome to Astro</title>
+    <title>{data.seo.title}</title>
+    <meta name="description" content={data.seo.description} />
   </head>
   <body class="bg-gray-50">
     <main>
-      <SectionCard>
+      <MainSection {...data.main} />
-        <Typography variant="main-title">Main title</Typography>
+      {data.skills && <SkillsSection {...data.skills} />}
-        <Typography variant="main-subtitle">Main subtitle</Typography>
+      {data.experience && <ExperienceSection {...data.experience} />}
-        <Typography variant="section-title">Section title</Typography>
+      {data.portfolio && <PortfolioSection {...data.portfolio} />}
-        <Typography variant="section-subtitle">Section subtitle</Typography>
+      {data.testimonials && <TestimonialsSection {...data.testimonials} />}
-        <Typography variant="item-title">Item title</Typography>
+      {data.favorites && <FavoritesSection {...data.favorites} />}
-        <Typography variant="item-subtitle">Item subtitle</Typography>
-        <Typography variant="tile-title">Tile title</Typography>
-        <Typography variant="tile-subtitle">Tile subtitle</Typography>
-        <Typography variant="paragraph">Paragraph</Typography>
-        <LabelledValue label="Phone">+48 604 343 212</LabelledValue>
-      </SectionCard>
     </main>
   </body>
 </html>

src/types/common.ts

@@ -1,5 +1,10 @@
 export type Icon = string;
 
+export type LocalImage = {
+  src: string;
+  alt: string;
+};
+
 export interface Detail {
   label: string;
   value: string | string[];

src/types/favorites-section.ts

@@ -1,28 +1,28 @@
-import type { SectionConfig } from './common';
+import type { LocalImage, SectionConfig } from './common';
 
 interface Book {
   title: string;
-  cover: string;
+  cover: LocalImage;
   author: string;
   url?: string;
 }
 
 interface Person {
   name: string;
-  image: string;
+  image: LocalImage;
   url?: string;
 }
 
 interface Video {
   title: string;
-  thumbnail: string;
+  thumbnail: LocalImage;
   url: string;
 }
 
 interface Media {
   title: string;
   type: string;
-  image: string;
+  image: LocalImage;
   url: string;
 }
 

src/types/main-section.ts

@@ -1,7 +1,7 @@
-import type { Detail, SectionConfig, Social, Tag } from './common';
+import type { Detail, LocalImage, SectionConfig, Social, Tag } from './common';
 
 export interface MainSection {
-  image: string;
+  image: LocalImage;
   fullName: string;
   role: string;
   details: Detail[];
@@ -9,7 +9,7 @@ export interface MainSection {
   tags: Tag[];
   action: {
     label: string;
-    url: string;
+    href: string;
   };
   socials: Social[];
   config: Omit<SectionConfig, 'title'>;

src/types/portfolio-section.ts

@@ -1,8 +1,8 @@
-import type { Detail, SectionConfig, Social, Tag } from './common';
+import type { Detail, LocalImage, SectionConfig, Social, Tag } from './common';
 
 interface Project {
   name: string;
-  image?: string;
+  image?: LocalImage;
   startDate: Date;
   endDate: Date | null;
   details: Detail[];

src/types/seo.ts

@@ -0,0 +1,11 @@
+export interface Seo {
+  /**
+   * Title that will be displayed in Google search results and as tab name. To be fully visible in search results, it should be no longer than 60 characters.
+   */
+  title: string;
+
+  /**
+   * Description that will be displayed in Google search results. To be fully visible in search results, it should be no longer than 160 characters.
+   */
+  description: string;
+}

src/types/testimonials-section.ts

@@ -1,7 +1,7 @@
-import type { SectionConfig } from './common';
+import type { LocalImage, SectionConfig } from './common';
 
 interface Testimonial {
-  image: string;
+  image: LocalImage;
   author: string;
   relation: string;
   content: string;

tsconfig.json

@@ -32,7 +32,10 @@
     // Add aliases for common paths.
     "baseUrl": ".",
     "paths": {
-      "@/atoms/*": ["src/components/atoms/*"]
+      "@/atoms/*": ["src/components/atoms/*"],
+      "@/sections/*": ["src/components/sections/*"],
+      "@/assets/*": ["src/assets/*"],
+      "@/types/*": ["src/types/*"]
     }
   }
 }