Blog Portfolio is a modern, fully responsive website built with Next.js and Tailwind CSS, featuring a light and dark theme switcher for a dynamic user experience. Designed for developers, designers, and content creators, this template combines a sleek portfolio layout with a powerful blogging platform.
Installation & Setup
- npm install
- npm run dev
Additional Plugins & Packages
If you face any errors or missing modules, you may need to install extra libraries:
- npm install remixicon react-icons @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons
- npm install swiper
- npm install bootstrap-icons
- npm install remixicon
- npm install @iconify/react
What’s Included
- Complete Next.js Source Code – App Router structure, pages, and reusable components.
- Tailwind CSS Setup – Configuration, theme tokens (colors, spacing), and dark mode support.
- Reusable Components – Navbar, Footer, ProjectCard, PostCard, FilterControls, and Form elements.
- Light & Dark Mode Integration – Smooth toggle with theme persistence via localStorage.
- Demo Data – Sample blog posts and portfolio projects (JSON or MDX format).
- Responsive Layouts – Optimized for mobile, tablet, and desktop devices.
Tech Stack Used
- Next JS (App Router) — Fast SSR/SSG and routing.
- Tailwind CSS — Utility-first styling with easy theming.
- Next-themes — Light & dark mode handling.
- @iconify/react / React Icons — Iconography.
- Swiper JS — Sliders for hero/portfolio.
- Google Fonts — Clean typography.
Pages Included
- Home (Index) – Hero intro, featured projects, and recent blog highlights.
- My Projects – Grid view of all portfolio works with category filtering.
- Project Details – Individual project page with description, images, and technologies used.
- Blog – List of blog articles with search and filter options.
- Blog Details – Full article page with related posts and share buttons.
- About – Personal information, skills, and professional background.
- Login – Secure user authentication page.
- Signup – Registration form for new users.
- Contact – Contact form with social media links and email section.
- 404 Page – Custom not found page with redirect option.
Key Features
- Modern UI Design – Clean, elegant, and responsive layout built for creators and developers.
- Light & Dark Mode – Seamless theme toggle with saved user preference.
- Component-Based Architecture – Reusable and modular React components for easy customization.
- Dynamic Content Loading – Fetch posts and project data via JSON or MDX for flexibility.
- Fully Responsive – Optimized for mobile, tablet, and desktop devices.
- Fast Performance – Lightweight pages powered by Next.js optimization.
- Easy to Customize – Tailwind utility classes and clean code structure make editing simple.
- Error Handling – Custom 404 and fallback pages for smooth navigation.
Designed for creators, developers, writers, and professionals, it combines a personal portfolio with a dynamic blogging platform — allowing you to showcase your projects and share insights seamlessly.
Reviews
Clear filtersThere are no reviews yet.