Adds a bottom border to the toolbar component to create a more
distinct separation between the toolbar and the content below it.
This change improves the visual hierarchy and overall design of
the page.
The changes in this commit include:
- Add a search icon to the header, which is implemented using the `Image` component from Next.js.
- Update the header layout to have a more balanced and centered design, with the site title and search icon aligned.
- Adjust the spacing and typography of the header elements to improve the overall visual appearance.
These changes are made to enhance the user experience of the header, making it more visually appealing and functional.
Adds a new `tags` field to the `BlogPost` interface and updates the blog post data to include relevant tags.
The `BlogArea` component is updated to display the tags for each blog post.
This change allows users to better understand the topics covered in each blog post and
improves the overall user experience.
This commit introduces several improvements to the blog post UI:
- Adds new icons for tags and calendar using SVG images
- Refines the layout and styling of the blog post tags and publish date
- Adjusts the overall spacing and padding of the blog area and individual blog posts
- Increases the font size of the "Read the article" link for better readability
These changes aim to enhance the visual appeal and user experience of the blog section, making it more visually engaging and informative for the readers.
Adds `AnimatedLink` component to the toolbar, allowing for
animated links to different sections of the website. This
improves the user experience and provides a more visually
appealing way to navigate the site.
Adds a language switcher icon to the header toolbar and updates the email and
RSS icons. This change improves the user experience by providing a way for
users to switch between different language versions of the site.
Adds new icons and links to the toolbar component, including email, RSS feed, support, and settings. The icons are now displayed as images using the Next.js `Image` component, and the links are wrapped in `Link` components for better navigation. The overall layout and styling of the toolbar have also been improved.
Adds a new toolbar component to the header section. This component
displays the user's profile information and provides links to various
sections of the application, such as email, RSS, support, and settings.
The toolbar is designed to be responsive and visually appealing, with a
clean and modern layout.
Modify the layout of the blogpost details section to better align the
content vertically. This change ensures the "Posted" date is aligned
with the bottom of the blogpost description, creating a more balanced
and visually appealing design.
Adds a new `AnimatedLink` component that provides a smooth hover animation
effect to links. This component is then used in the `BlogArea` component to
enhance the appearance of the blog post links.
The changes include:
- Creating a new `AnimatedLink` component in `animatedLink.tsx`
- Updating the `BlogArea` component in `blogpost.tsx` to use the new
`AnimatedLink` component instead of the default `Link` component from
Next.js.
Optimize the image loading in the BlogArea component by removing the
unnecessary `blogTestPic` import and using the correct path for the
image. Additionally, refactor the code to improve readability and
maintainability.
Adds the `Image` component from Next.js to display a local image in the
BlogPost component. The local image file `retrofuturism.webp` is added to
the `public/images` directory and referenced in the component.
This commit introduces a new `BlogArea` component that displays a list of blog posts. The changes include:
- Added a new `BlogArea` component in `components/blogpost.tsx` that renders a list of blog posts with their title, description, and a link to the full post.
- Integrated the `BlogArea` component into the `Home` page in `app/page.tsx`.
- Added mock data for the blog posts in `app/page.tsx` to demonstrate the functionality.
