About the Project: Orbit is a modern personal blog platform built with Next.js and Tailwind CSS. It features a clean dark-themed design with smooth interactions, structured content sections, and a fully responsive layout — crafted for writers, creators, and storytellers.
Key Highlights: Smooth mobile navigation, an interactive topic slider, a curated featured posts grid, sidebar widgets, and a newsletter subscription form — all built with reusable React components.
- Header — Sticky navigation with mobile sidebar and scroll behavior.
- Hero — Welcome section with headline text and newsletter subscribe form.
- Topics — Horizontal slider showcasing trending blog categories with navigation controls.
- Featured Posts — Editor's selection grid displaying curated top articles.
- Popular Tags — Tag button grid for browsing content by topic or interest.
- Recent Posts — Main blog feed with popular posts, comments, and Instagram sidebar widgets.
- Footer — Site footer with category links, newsletter form, and social media links.
- Responsive Layout — Fully optimized for mobile, tablet, and desktop screens.
- Sticky Header — Navigation bar with smooth scroll-activated styling and shadow effect.
- Mobile Sidebar Menu — Slide-in navigation drawer with body scroll lock on open.
- Topic Slider — Responsive horizontal slider with previous and next navigation buttons.
- Newsletter Form — Email subscription form with basic input validation in hero and footer.
- Back to Top Button — Scroll-triggered floating button for quick page navigation.
- Dark Theme Design — Consistent dark color palette with gradient accents throughout.
- Next.js — React framework used for component-based page structure and routing.
- React — UI library powering all interactive components and state management.
- CSS (Custom Properties) — Global styles with CSS variables for colors, spacing, and typography.
- Lucide React — Icon library used for navigation, buttons, and UI elements.
- Next/Image — Optimized image component for faster loading and better performance.
- Next/Font — Google Fonts integration using Noto Sans for consistent typography.
orbit-blog/
│
├── public/ # Images, logos, SVG patterns, and static assets
│
├── src/
│ ├── app/
│ │ ├── layout.jsx # Root layout with metadata and font configuration
│ │ ├── page.jsx # Main page importing all section components
│ │ └── index.css # Global styles and CSS custom properties
│ │
│ └── components/
│ ├── Header.jsx # Navigation with mobile menu and scroll effects
│ ├── Hero.jsx # Welcome section with newsletter form
│ ├── Topics.jsx # Horizontal slider with trending categories
│ ├── Feature.jsx # Editor's selection featured posts grid
│ ├── PopularTags.jsx # Category tag buttons with icons
│ ├── RecentPost.jsx # Main blog feed with sidebar widgets
│ └── Footer.jsx # Site footer with links and newsletter
│
├── package.json # Dependencies and build scripts
├── next.config.mjs # Next.js configuration
├── jsconfig.json # Path aliases configuration
├── eslint.config.mjs # ESLint rules
└── README.md # Project documentation
-
Clone the repository:
git clone https://github.com/nawazdevx/orbit-blog.git
<li>
<strong>Navigate to project folder:</strong>
<pre><code>cd orbit-blog</code></pre>
</li>
<li>
<strong>Install dependencies:</strong>
<pre><code>npm install</code></pre>
</li>
<li>
<strong>Start development server:</strong>
<pre><code>npm run dev</code></pre>
Then visit the local URL shown in terminal (usually <code>http://localhost:3000</code>)
</li>
<li>
<strong>Build for production:</strong>
<pre><code>npm run build</code></pre>
Production files will be generated in <code>.next/</code> folder
</li>
<li>
<strong>Start production server:</strong>
<pre><code>npm run start</code></pre>
</li>
</ol>
License: This project is licensed under the MIT License.
Contact: Connect with me on LinkedIn or visit my Portfolio.
Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.
