Feat/website/29 create about me section

[HasithDeAlwis]

ISSUE

Create a about-me section closes #29

Solution

• Used GSAP for animations
• Had to delete payload app
• Setup a storybook for this
• Setup e2e tests for about-me section

Improvements for Future

• MUST have cleaner more modular commits
• Hard to debug errors
• Organize structure for creating stories more effectively

Overall not too bad, had some major blockers with Payload CMS and the dependencies were impossible to manage. I had to bite the bullet and create a separate repo for my payload-cms, it's ok, but in the future I need Nx or Turborepo to manage dependencies effectively.

Will close this issue now and deal with production bugs later, need to maintain velocity to finish this project

Summary by Sourcery

Create an 'About Me' section on the website with animated components using GSAP. Set up Storybook for component visualization and end-to-end tests for the new section. Update build dependencies and refactor configurations to support new features. Remove the Payload app to address dependency management challenges.

New Features:

• Introduce an 'About Me' section on the website, utilizing GSAP for animations to enhance user experience.
• Add new Svelte components for displaying 'About Me' text and SVGs, with animations triggered by scroll events.
• Implement a new API function to fetch 'About Me' data, including text and assets, from a GraphQL endpoint.

Enhancements:

• Update font styles in the website layout to include additional weights for Montserrat Alternates and Poppins fonts.
• Add new TypeScript models for 'About Me' data to ensure type safety and consistency across the application.

Build:

• Update dependencies in the pnpm-lock.yaml file, including the addition of GSAP and SplitType libraries for animations.

CI:

• Modify Storybook configuration to include new path aliases for models and assets, improving module resolution.

Tests:

• Set up end-to-end tests for the 'About Me' section to ensure functionality and performance.
• Add Storybook stories for the 'About Me' components, providing a visual testing environment for the new features.

Chores:

• Remove the Payload app from the repository due to dependency management issues, with plans to manage it separately.

[sourcery-ai[bot]]

Reviewer's Guide by Sourcery

This pull request implements an "About Me" section for a website. It includes new components for displaying text and SVG images, API integration for fetching data, and animations using GSAP. The changes span across multiple applications including the website, Payload CMS, and Storybook.

User journey diagram for the new About Me section

journey
    title User journey for the About Me section
    section Visit About Me Page
      User: Go to the website
      User: Navigate to the About Me section
    section View About Me Content
      User: See animated header
      User: View subheader and description
      User: Observe SVG images
    section Interact with Content
      User: Scroll through the section
      User: Hover over images for animation effects
    section Data Fetching
      System: Fetch About Me data from API
      System: Display fetched data on the page

Class diagram for the About Me components

classDiagram
    class AboutMe {
        +AboutMeTextType text
        +AboutMeAssetType[] images
    }
    class AboutMeText {
        +string subheader
        +string description
    }
    class AboutMeSvgs {
        +AboutMeAssetType[] images
    }
    class AboutMeAssetType {
        +string svgURL
        +string svgAlt
        +int order
        +int id
    }
    class AboutMeTextType {
        +string aboutMeSubheader
        +string aboutMeDescription
        +int id
    }
    AboutMe --> AboutMeText
    AboutMe --> AboutMeSvgs
    AboutMeSvgs --> AboutMeAssetType
    AboutMeText --> AboutMeTextType

File-Level Changes

Change	Details	Files
Implemented 'About Me' section components	Created AboutMe, AboutMeText, and AboutMeSvgs components Added GSAP animations for text and SVG elements Integrated SplitType for text animations	apps/website/src/components/about-me/about-me.svelte apps/website/src/components/about-me/about-me-text.svelte apps/website/src/components/about-me/about-me-svgs.svelte
Added Payload CMS collections for 'About Me' content	Created AboutMeDescription collection for text content Created AboutMeAsset collection for SVG assets Updated Payload config to include new collections	apps/payload/src/collections/about-me/about-me-text.ts apps/payload/src/collections/about-me/about-me-assets.ts apps/payload/src/payload.config.ts
Implemented API integration for 'About Me' data	Created getAboutMeData function to fetch data from Payload CMS Added types for About Me data Updated index page to fetch and pass data to AboutMe component	apps/website/src/api/about-me-api.ts apps/website/src/models/about-me.ts apps/website/src/pages/index.astro
Added Storybook stories for 'About Me' components	Created stories for AboutMe, AboutMeText, and AboutMeSvgs components Added assets for story examples	apps/storybook/stories/about-me/about-me.stories.svelte apps/storybook/stories/about-me/about-me-text.stories.svelte apps/storybook/stories/about-me/about-me-svgs.stories.svelte
Updated project configuration and dependencies	Added GSAP and SplitType as dependencies Updated tsconfig.json with new path aliases Modified Storybook configuration for new components	pnpm-lock.yaml apps/website/tsconfig.json apps/storybook/.storybook/main.ts apps/storybook/.storybook/preview-head.html

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#29	Create stories for the About Me Section	✅
#29	Use Payload to load in about me section info	✅

---

Tips and commands

#### Interacting with Sourcery - **Trigger a new review:** Comment `@sourcery-ai review` on the pull request. - **Continue discussions:** Reply directly to Sourcery's review comments. - **Generate a GitHub issue from a review comment:** Ask Sourcery to create an issue from a review comment by replying to it. - **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull request title to generate a title at any time. - **Generate a pull request summary:** Write `@sourcery-ai summary` anywhere in the pull request body to generate a PR summary at any time. You can also use this command to specify where the summary should be inserted. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) to: - Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others. - Change the review language. - Add, remove or edit custom review instructions. - Adjust other review settings. #### Getting Help - [Contact our support team](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).

[netlify[bot]]

✅ Deploy Preview for hasith ready!

Name	Link
🔨 Latest commit	728130ec4b0d9927a6d43420421b3ba6cc07fd25
🔍 Latest deploy log	https://app.netlify.com/sites/hasith/deploys/670b15f0df13a30008936f1d
😎 Deploy Preview	https://deploy-preview-30--hasith.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.