A responsive and modern blog website built with Next.js, TypeScript, and styled components. This project showcases a clean and functional design with features such as post previews, navigation, and easy-to-read typography.
- Dynamic Content: Fetches blog posts from a backend or headless CMS.
- Responsive Design: Optimized for all screen sizes (desktop, tablet, and mobile).
- SEO-Friendly: Uses meta tags, open graph tags, and dynamic page titles to improve search engine visibility.
- Page Transitions: Smooth transitions using Framer Motion for an enhanced user experience.
- Theming: Light and dark mode support for user preference.
- Frontend: Next.js, TypeScript
- Styling: CSS Modules, styled-components
- Animations: Framer Motion
- Data Handling: Headless CMS (Sanity, Contentful, or similar) or local markdown files
- Node.js (v14+)
- Yarn (or npm)
- Clone the repository:
git clone https://github.com/AnimeshA867/Blog-Website.git cd Blog-Website - Install dependencies:
yarn install
# or
npm install- Configure environment variables (e.g., for CMS API keys) if required. See .env.example for reference.
To start the development server:
yarn dev
# or
npm run devThis will run the website on http://localhost:3000.
To build the project for production:
yarn build
# or
npm run buildAfter building, you can start the production server:
yarn start
# or
npm startpages/: Contains the main pages of the website, including blog pages and static pages.components/: Reusable UI components (Navbar, Footer, etc.).lib/: Utility functions, helpers, and hooks.public/: Static assets like images and icons.styles/: Global and component-specific styles.
Contributions are welcome! Please feel free to submit a pull request or open an issue to discuss improvements or bugs.
This project is licensed under the MIT License. See the LICENSE file for details.
Created by Animesh Acharya.