feat: create skills sections

HasithDeAlwis commented 1 month ago

🛠 Changes being made

Skills section made
Currently learning section made
Created stories for each feature

TO DOS

Refactor the MySkill section
Add hyperlinks around each skill

📸 Screenshots - If Applicable

✅ Quality Checklist

[ ] Did you test on mobile?
[ ] Were stories made for new features
[ ] Did you write tests for the feature?
[ ] Are the animations smooth on the deploy preview?

Summary by Sourcery

Add a new skills section to the website, featuring both learned skills and currently learning skills. Implement new components and GraphQL queries to support this feature. Enhance the Tailwind configuration and refactor existing animations for improved styling and performance. Include Storybook stories for the new components to aid in UI testing and documentation.

New Features:

Introduce a new skills section to display learned skills and currently learning skills on the website.
Add a 'Currently Learning' section to highlight skills that are being actively developed.
Create new components for displaying skills, including 'MySkills', 'CurrentlyLearning', and 'IndividualSkill'.
Implement new GraphQL queries to fetch data for learned skills and currently learning skills.

Enhancements:

Update Tailwind configuration to include new screen sizes and colors for better styling flexibility.
Refactor animation logic in the 'about-me-text' component to improve performance and maintainability.

Documentation:

Add Storybook stories for the new skills components to facilitate UI testing and documentation.

sourcery-ai[bot] commented 1 month ago

Reviewer's Guide by Sourcery

This pull request implements a new skills section for the portfolio website, including a "My Skills" section and a "Currently Learning" section. The changes involve creating new components, adding API calls to fetch skill data, and implementing animations for the skills display.

User journey diagram for the new skills section

journey
    title User journey for viewing skills section
    section Accessing the Portfolio
      User: Navigate to the portfolio website: 5
    section Viewing Skills
      User: View 'My Skills' section: 4
      User: View 'Currently Learning' section: 4
    section Interacting with Skills
      User: Hover over skill logos for animation: 3
      User: Click on skill logos for more information: 3

ER diagram for new skill-related data types

erDiagram
    Config ||--o{ LearnedSkillLogo : contains
    Config ||--o{ CurrentlyLearningSkill : contains
    LearnedSkillLogo {
        int id
        int skillOrder
        Media skillLogo
        string skillHref
        string updatedAt
        string createdAt
    }
    CurrentlyLearningSkill {
        int id
        string currentSkillName
        Media currentSkillLogo
        string currentSkillHref
        string currentSkillDescription
        string updatedAt
        string createdAt
    }

Class diagram for new skill components

classDiagram
    class MySkills {
        +Array<LearnedSkillLogoType> logos
        +void onMount()
        +void floatingAnimation(int index)
        +void moveLogosBottom(int index)
        +void moveLogosTop(int index)
    }
    class CurrentlyLearning {
        +Array<LearnedSkillLogoType> logos
        +Array<CurrentlyLearningSkillType> currentlyLearning
    }
    class IndividualSkill {
        +CurrentlyLearningSkillType skill
    }
    class LazyImage {
        +string src
        +string alt
        +string classStyles
        +string style
    }
    MySkills --> LazyImage
    CurrentlyLearning --> IndividualSkill
    IndividualSkill --> LazyImage

File-Level Changes

Change	Details	Files
Created new components for displaying skills	Implemented MySkills component for displaying learned skills in a circular layout Created CurrentlyLearning component to show skills currently being learned Added IndividualSkill component for displaying individual skill details	`apps/website/src/components/skills/my-skills.svelte` `apps/website/src/components/skills/currently-learning.svelte` `apps/website/src/components/skills/individual-skill.svelte`
Added API calls to fetch skill data	Implemented getLearnedSkillsData function to fetch learned skills Created getCurrentlyLearningSkillsData function to retrieve currently learning skills	`apps/website/src/api/skills-api.ts`
Updated main page to include new skills sections	Added MySkills and CurrentlyLearning components to the main page Imported new API functions for fetching skill data	`apps/website/src/pages/index.astro`
Implemented animations for skills display	Added GSAP animations for floating effect on skill logos Implemented scroll-triggered animations for skills section	`apps/website/src/components/skills/my-skills.svelte`
Added new types and interfaces for skills data	Created LearnedSkillLogoType and CurrentlyLearningSkillType interfaces Updated generated types to include new skill-related interfaces	`apps/website/src/models/skills.ts` `apps/website/src/models/generated-types.ts`
Created Storybook stories for new components	Added stories for MySkills component Created stories for CurrentlyLearning component Implemented stories for IndividualSkill component	`apps/storybook/stories/skills/my-skills.stories.svelte` `apps/storybook/stories/skills/currently-learning.stories.svelte` `apps/storybook/stories/skills/individual-skill.stories.svelte`
Updated styling and configuration	Added new color definitions and box shadow styles Increased maximum width breakpoint to 3xl (1600px)	`tailwind.config.mjs`

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] commented 1 month ago

Deploy Preview for hasith ready!

Name	Link
Latest commit	1e5a417f98e5b3ba6125a5d18c8db3eb4fd63d27
Latest deploy log	https://app.netlify.com/sites/hasith/deploys/671872e225598f000818e5d2
Deploy Preview	https://deploy-preview-36--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.

HasithDeAlwis / Hasith-Portfolio-v2