25/hasith/website/feat create hero section

HasithDeAlwis commented 2 months ago

🛠 Changes being made

Hero page made
Adjustments to tailwidnconfig for font sizes on mobile and desktop for display fonts

📸 Screenshots - If Applicable

✅ Quality Checklist

[x] Did you test on mobile?
[ ] Did you write tests for the feature?
[ ] Are the animations smooth on the deploy preview?

Summary by Sourcery

Create a new hero section for the website, replacing the existing main content on the homepage with a visually engaging component. Update Tailwind configuration to adjust font sizes for improved display across devices. Add a new TypeScript path alias for asset management.

New Features:

Introduce a new hero section component to the website, enhancing the visual appeal and user engagement on the homepage.

Enhancements:

Adjust font sizes in the Tailwind configuration for better display on mobile and desktop devices, improving readability and design consistency.

Chores:

Add a new path alias '@assets/*' in the TypeScript configuration to streamline asset management and imports.

sourcery-ai[bot] commented 2 months ago

Reviewer's Guide by Sourcery

This pull request implements a new hero section for the website, replacing the previous content on the index page. The changes include creating a new hero component, adjusting the layout, adding animations, and updating the Tailwind configuration for responsive font sizes.

File-Level Changes

Change	Details	Files
Implement new hero section	Create new Hero component with responsive design Add background gradient and forest image Implement cloud animations Add fade-in animations for text elements	`apps/website/src/components/hero/hero.astro` `apps/website/src/pages/index.astro`
Update Tailwind configuration	Adjust font sizes for mobile and desktop displays Remove duplicate color definitions	`tailwind.config.mjs`
Modify layout and styling	Add overflow-x: hidden to body Remove unused styles from index page	`apps/website/src/layouts/Layout.astro` `apps/website/src/pages/index.astro`
Update TypeScript configuration	Add path alias for assets directory	`apps/website/tsconfig.json`
Remove unused components	Delete Card component	`apps/website/src/components/index/card.svelte`

Sequence Diagram

sequenceDiagram
    participant U as User
    participant I as Index Page
    participant H as Hero Component
    participant A as Assets
    U->>I: Visit website
    I->>H: Render Hero component
    H->>A: Load background image
    H->>A: Load cloud images
    H->>U: Display hero section
    Note over H,U: Animate text and clouds

Tips

- Trigger a new Sourcery review by commenting `@sourcery-ai review` on the pull request. - Continue your discussion with Sourcery by replying directly to review comments. - You can change your review settings at any time by accessing your [dashboard](https://app.sourcery.ai): - Enable or disable the Sourcery-generated pull request summary or reviewer's guide; - Change the review language; - You can always [contact us](mailto:support@sourcery.ai) if you have any questions or feedback.

netlify[bot] commented 2 months ago

Deploy Preview for hasith failed. Why did it fail? →

Name	Link
Latest commit	0f1506fef2492d473db1e9e5d70fe9071442c90e
Latest deploy log	https://app.netlify.com/sites/hasith/deploys/66f1ae417df9d40008e5cc1f

HasithDeAlwis commented 2 months ago

Hey @HasithDeAlwis - I've reviewed your changes - here's some feedback:

Overall Comments:

Consider the implications of using 'overflow-x: hidden' on the body. While it prevents horizontal scrolling, it might inadvertently hide important UI elements.

The quality checklist indicates that tests weren't written for this feature. We recommend adding appropriate tests to ensure the new hero section functions correctly across different scenarios.

Here's what I looked at during the review

🟢 General issues: all looks good

🟢 Security: all looks good

🟢 Testing: all looks good

🟢 Complexity: all looks good

🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨ Help me be more useful! Please click 👍 or 👎 on each comment to tell me if it was helpful.

--> Test will be made soon Need to test: -> Do clouds disappear after 3s -> Is my name visible on all screens

netlify[bot] commented 2 months ago

Deploy Preview for golden-begonia-0d0992 ready!

Name	Link
Latest commit	0a3d8679c9ccd1bf5c3b77292d0425b60c474188
Latest deploy log	https://app.netlify.com/sites/golden-begonia-0d0992/deploys/66f642cb5056870008b4d3da
Deploy Preview	https://deploy-preview-26--golden-begonia-0d0992.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