News Component
In this project, I built a dynamic news section using React and Next.js. I used the following techniques and technologies:
- React useState and useEffect: To manage local state and fetch external data from an API (jsonplaceholder)
- API integration: fetching and displaying real-time data with error handling
Layout and Styling Notes
- Framer Motion: To add smooth entrance animations (opacity, translateY) and interactive hover effects on news items
- Responsive design with Tailwind CSS: Using grid layouts, padding, and custom colors for a mobile
- Responsive design with Tailwind CSS: Using grid layouts, padding, and custom colors for a mobile
- Next.js Image optimization: Improving performance by using the next/image component
- Background layering: positioning a background image with custom z-index and transform to create depth
- Next.js Image optimization: Improving performance by using the next/image component