Skip to content

B
Blog
Commit f16c5e9a by Sakilesh J
Options

finish until the next.js server

parent a2eca5a4
Showing with 1252 additions and 132 deletions
.env 0 → 100644
NEXT_PUBLIC_API_URL=http://localhost:4000/
app/another/page.tsx
import Button from '@/components/button';
import Button from '@/components/base/Button/index';
const AnotherPage = () => {
return (
......@@ -7,7 +7,7 @@ const AnotherPage = () => {
<h3 className="text-3xl text-gray-600 font-semibold mb-5 px-5">
You&lsquo;ve landed on another page
</h3>
<Button href="/" size="lg">
<Button href="/" size="md">
Navigate home page
</Button>
</center>
......
app/blog/[id]/page.tsx 0 → 100644
import Blog from "@/pages/blog";
interface blogSiteProps{
params: {
id: number;
}
}
const Blogsite:React.FC<blogSiteProps> = ({params}) => {
return ( <Blog id={Number(params.id)}/> );
}
export default Blogsite;
\ No newline at end of file
app/layout.tsx
import '@/styles/globals.css';
import ThemeParent from '@/hooks/useTheme';
import Global from '@/layout/GlobalLayout';
import PaginationProvider from '@/hooks/usePagination';
import FilterComponent from '@/hooks/Filter';
interface LayoutProps {
children: React.ReactNode;
}
......@@ -11,7 +14,17 @@ export default function RootLayout({ children }: LayoutProps) {
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="icon" href="/favicon.ico" />
</head>
<body>{children}</body>
<body>
<ThemeParent>
<PaginationProvider>
<FilterComponent>
<Global>
{children}
</Global>
</FilterComponent>
</PaginationProvider>
</ThemeParent>
</body>
</html>
);
}
app/not-found.tsx
import PageNotFound from '@/components/layout/page-not-found';
import PageNotFound from '@/components/layout/PageNotFound/index';
export default PageNotFound;
app/page.tsx
import Button from '@/components/button';
import Image from 'next/image';
import Home from "@/pages/Home";
const HomePage = () => {
return (
<center className="py-10">
<Image
src="/img/nextjs.svg"
alt="Next.js"
width={512}
height={103}
className="w-60 mb-4"
/>
<h3 className="text-3xl text-gray-600 font-semibold mb-5 px-5">
Welcome to Next.js starter template
</h3>
<div className="bg-gray-100 p-5 mb-10">
<p className="mb-3 text-gray-400 font-semibold">
This template is built with
</p>
<div className="flex justify-center gap-5">
<Image
src="/img/tailwind.svg"
alt="Tailwind CSS"
width={512}
height={63}
className="w-40"
/>
<Image
src="/img/typescript.svg"
alt="TypeScript"
width={284}
height={70}
className="w-24"
/>
</div>
</div>
<Button href="/another" size="lg">
Navigate to another page
</Button>
</center>
<Home />
);
};
export default HomePage;
\ No newline at end of file
components/Top-Level/Profile-card/ProfileCard.tsx
......@@ -12,9 +12,10 @@ const ProfileCard:React.FC<ProfileCardProps> = ({authorImg,author,date}) => {
<p className="font-sans text-subHeadColor font-semibold text-[12px] sm:text-[14px]">{`${date.toLocaleString('default', { month: 'short' })} ${date.getDate()}, ${date.getFullYear()}.`}
<span className="ml-2 *:inline *:text-[14px] font-semibold ">
<Image src={Clock} alt="" width={0} height={0} className="mb-[3px] mr-1 w-[15px] h-[15px]" />
<p>
{/* {date.getHours()} hrs */}
{date.getMinutes()} mins</p>
<span>
{date.getMinutes()} mins
</span>
</span>
</p>
</div>
......
components/Top-Level/Searchbar/SearchBar.tsx
import Image from 'next/image'
'use client';
import React, { useRef, useState } from 'react'
import cn from 'classnames'
import {Search,Close} from '@/utils/icons'
......
components/Top-Level/blog-card/BlogCard.tsx
import React from "react"
import Image from "next/image";
import Link from "next/navigation";
import { profileCardsItems } from "@/types/blog";
import ProfileCard from "../Profile-card/ProfileCard";
interface blogcardprops extends profileCardsItems{
......@@ -8,21 +7,23 @@ interface blogcardprops extends profileCardsItems{
title?: string;
description?: string;
id?: number;
handleClick:()=>void;
}
const BlogCard:React.FC<blogcardprops> = ({img,title,description,id,...props}) => {
const BlogCard: React.FC<blogcardprops> = ({ img, title, description, id,handleClick, ...props }) => {
return (
<div className="sm:max-w-sm w-full shadow-sm rounded-md cursor-pointer hover:shadow-xl hover:translate-y-[-2px] transition-all duration-300 ease-in-out overflow-hidden
dark:*:text-white group h-full">
<div
className="sm:max-w-sm w-full shadow-md rounded-md cursor-pointer hover:shadow-xl hover:translate-y-[-2px] transition-all duration-300 ease-in-out overflow-hidden
dark:*:text-white group h-full" onClick={handleClick}>
{
img &&
<Image src={img} width={100} height={100} alt="" className="w-full h-[220px] rounded-t-lg object-cover" />
<Image src={img} width={900} height={900} alt="" className="w-full h-[220px] rounded-t-lg object-cover" />
}
<div className="h-[calc(100%-220px)] p-[1em] sm:p-[1.5em] bg-white flex flex-col dark:bg-[#131617] ">
<h4 className="text-sans font-[700] group-hover:text-primary text-sm sm:text-[18px] my-[.3em] leading-[1.4em]">
<h4 className="text-sans font-[700] group-hover:text-primary text-sm sm:text-[18px] my-[.3em] leading-[1.4em] md:line-clamp-2">
{title}
</h4>
<p className="text-subHeadColor my-[5px] text-sm sm:text-[17px] mb-[1em] leading-[1.4em] dark:text-gray-400">
<p className="text-subHeadColor my-[5px] text-sm sm:text-[17px] mb-[1em] leading-[1.4em] dark:text-gray-400 md:line-clamp-2">
{description}
</p>
<ProfileCard {...props} />
......
components/Top-Level/blog-card/blogcard.stories.tsx
......@@ -5,6 +5,11 @@ import { blog_data } from '@/utils/Blog_data';
const meta: Meta<typeof BlogCard> = {
title: 'Top-Level',
component: BlogCard,
argTypes: {
handleClick: {
action:"onClick",
},
}
}
export default meta;
......@@ -22,12 +27,12 @@ export const blog_: Story = {
}
export const blog_List__: Story = {
render: () => {
render: (args) => {
return (
<div className="flex flex-wrap gap-4 w-full dark:bg-black p-2">
{blog_data.map((data, i) => (
<div key={i} className="flex-grow sm:flex-grow-0 sm:w-[calc(50%-1rem)] lg:w-[calc(33.33%-1rem)] xl:w-[calc(25%-1rem)] *:sm:max-w-md *:h-full">
<BlogCard {...data} />
<BlogCard {...args} {...data} />
</div>
))}
</div>
......
components/Top-Level/blog-page/Blogpage.tsx
......@@ -18,9 +18,9 @@ interface BlogPageProps{
const BlogPage: React.FC<BlogPageProps> = ({ blogTitle, authorDetails,category,readingTime,banner,content,categories }) => {
const { date,author } = authorDetails;
return (
<div className="max-w-[1200px] mx-auto">
<div className="max-w-[1200px] mx-auto mt-10 px-4">
<div className="lg:px-20">
<h3 className="text-[1.4em] sm:text-4xl md:text-5xl font-libre font-bold sm:font-semibold ">{blogTitle}</h3>
<h3 className="text-[1.4em] sm:text-4xl md:text-5xl font-libre font-bold sm:font-semibold dark:text-white">{blogTitle}</h3>
<div className="my-5 *:text-textColor flex gap-4 flex-wrap items-center *:text-sm *:sm:text-md">
<p className="font-semibold capitalize dark:text-white">posted on <span className="font-bold text-gray-400 dark:text-white">{date?.toLocaleString('default', { month: 'short' })} {date.getDate()}, {date.getFullYear()}</span>
</p>
......@@ -45,7 +45,7 @@ const BlogPage: React.FC<BlogPageProps> = ({ blogTitle, authorDetails,category,r
<ul className="dark:text-gray-400 prose-li:list-none mt-10 flex gap-3 items-center flex-wrap">
<li className="text-lg">Tags:</li>
{
categories.map((item: string) => (<li className="px-4 hover:bg-primary hover:text-white dark:hover:bg-primary cursor-pointer text-lg py-1 list-none dark:bg-[#2a2a2a] bg-secondary text-textColor dark:text-white w-min rounded-3xl">
categories.map((item: string) => (<li className="px-4 hover:bg-primary hover:text-white dark:hover:bg-primary cursor-pointer text-lg py-1 list-none dark:bg-[#2a2a2a] bg-secondary text-textColor dark:text-white w-min rounded-3xl" key={item}>
{item}
</li>))
}
......
components/Top-Level/pagination/pagination.stories.tsx
......@@ -15,7 +15,7 @@ type Story = StoryObj<typeof meta>;
export const pagination: Story = {
args: {
size: 7,
currentIndex:0,
currentPage:1,
},
render: (args) => (
<div className='dark:bg-black min-h-full p-2'>
......
components/Top-Level/pagination/pagination.tsx
import Button from "@/components/base/Button/index";
import classNames from "classnames";
import React, { useState } from "react";
interface Paginationprops{
interface PaginationProps {
size: number;
currentIndex: number;
currentPage: number;
onChange: (index: number) => void;
}
const Pagination: React.FC<Paginationprops> = ({ size, currentIndex, onChange }) => {
const [isshow, setisshow] = useState(false)
const Pagination: React.FC<PaginationProps> = ({ size, currentPage, onChange }) => {
const [isShow, setIsShow] = useState(false);
const count = 2;
return (
<div className="flex gap-2 flex-wrap ">
{
!(currentIndex <0) &&
<>
{
currentIndex !== 0 && !(currentIndex >= size) && <Button size="sm" onClick={() => onChange(currentIndex - 1)}>
Back
const handleEllipsisClick = () => {
setIsShow(!isShow);
};
const renderPageButtons = () => {
const pages = [];
if (currentPage > 1) {
pages.push(
<Button key="prev" size="sm" onClick={() => onChange(currentPage - 1)}>
Previous
</Button>
);
}
{
!(currentIndex >= size)&& Array.from({ length: (currentIndex >=size-count+1) || isshow ? size-currentIndex : count}).map((_, index) => {
return (
<Button
key={index}
onClick={() => onChange(index + currentIndex)}
size="icon"
isPrimary={currentIndex+index===currentIndex}
>
{currentIndex +index + 1}
if (currentPage > 2 && !isShow) {
pages.push(
<Button key="1" size="icon" onClick={() => onChange(1)}>
1
</Button>,
<Button key="ellipsis-start" size="icon" onClick={handleEllipsisClick}>
...
</Button>
);
})
}
{
(!isshow && size-currentIndex > 2 )&& (
<React.Fragment>
<Button size="icon" onClick={()=>setisshow(!isshow)}>
...
const startPage = isShow ? 1 : Math.max(currentPage, 1);
const endPage = isShow ? size : Math.min(currentPage + count, size);
for (let i = startPage; i <= endPage; i++) {
const isPrimary = currentPage === i;
pages.push(
<Button key={i} size="icon" isPrimary={isPrimary} onClick={() => onChange(i)}>
{i}
</Button>
<Button size="icon" onClick={() => onChange(size - 1)}>
);
}
if (!isShow && size - currentPage > count+1) {
pages.push(
<Button key="ellipsis-end" size="icon" onClick={handleEllipsisClick}>
...
</Button>,
<Button key={size} size="icon" onClick={() => onChange(size)}>
{size}
</Button>
</React.Fragment>
)
);
}
{
currentIndex !==size-1 && !(currentIndex >= size) && <Button size="sm" onClick={() => onChange(1 + currentIndex)}>
if (currentPage < size) {
pages.push(
<Button key="next" size="sm" onClick={() => onChange(currentPage + 1)}>
Next
{/* <Image src={Right_Arrow} alt="arrow" className="w-[16px] h-[16px] mt-[1px]" /> */}
</Button>
}
</>
}
</div>
);
}
}
return pages;
};
return <div className="flex gap-2 flex-wrap my-10">{renderPageButtons()}</div>;
};
export default Pagination;
components/base/Button/Button.tsx
......@@ -12,7 +12,6 @@ interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
}
export default function Button({ children, size, disabled, className, loading, href,isPrimary, block, ...props }: ButtonProps) {
console.log(isPrimary)
const classes = cn('inline-flex items-center justify-center gap-1 font-sans font-[700] text-textColor leading-2 rounded-xl border-[1px] h-auto dark dark:border-none dark:hover:bg-primary', {
'px-4 py-2 text-[18px]': size === 'sm',
'px-6 py-2 text-[22px]': size === 'md',
......
components/base/Heading/Heading.tsx
const Heading = () => {
return (<div>
<h3 className="font-libre font-medium text-[45px] text-titleColor mb-2">
LifeStyle
return (
<div className="mt-3 dark:*:text-white">
<h3 className="font-libre text-[40px] text-titleColor mb-2 ">
Lifestyle
</h3>
<p className="text-textColor text-xl ">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo, sunt.</p>
</div>);
<p className="text-textColor text-md ">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo, sunt.
</p>
</div>
);
}
export default Heading;
\ No newline at end of file
components/layout/Navigation/Navigation.tsx
'use client';
import Image from 'next/image';
import React, { useEffect, useRef, useState } from 'react';
import React, { useState } from 'react';
import cn from 'classnames';
import SearchBar from '@/components/Top-Level/Searchbar/SearchBar';
import Newspaper from '@/public/Icons/icons-newspaper.svg'
import {Moon,Sun} from "@/utils/icons";
import menu from "@/public/Icons/icons-menu.svg"
import Link from 'next/link';
interface HeaderProps {
onSearch: (name: string) => void;
onChangeTheme: () => string;
onSearch: (search:string) => void;
onChangeTheme: () => void;
}
const Navigation: React.FC<HeaderProps> = ({ onSearch,onChangeTheme }) => {
const [isOPen, setisOPen] = useState(false);
return (
<React.Fragment>
<div className="w-full justify-between flex items-center shadow-md p-4 sticky dark:bg-[black] dark:*:text-white">
<div className='flex gap-2 items-center'>
<div className="sticky top-0 dark:bg-[#131617] bg-white dark:text-white shadow-md p-4 z-50">
<div className="w-full justify-between flex items-center max-w-[1100px] mx-auto">
<Link className="flex gap-2 items-center" href="/">
<Image src={Newspaper} height={40} width={40} alt="Newspaper" />
<h1 className='font-semibold text-2xl'>NewsBlog</h1>
</div>
<h1 className="font-semibold text-2xl">NewsBlog</h1>
</Link>
<div className="hidden md:block min-w-[400px]">
<SearchBar placeholder='Discover news, articles, and more' className={'font-semibold'} onSearch={onSearch} />
<SearchBar placeholder="Discover news, articles, and more" className="font-semibold" onSearch={onSearch} />
</div>
<div className='hidden md:block'>
<Sun handleClick={onChangeTheme}/>
<Moon handleClick={onChangeTheme}/>
<div className='ml-auto mr-2 md:m-0'>
<Sun handleClick={onChangeTheme} />
<Moon handleClick={onChangeTheme} />
</div>
<div className="block md:hidden w-[40px] h-[40px] rounded-md p-2 bg-primary cursor-pointer *:mr-2" onClick={() => setisOPen(!isOPen)}>
<Image src={menu} alt="Menu" className="w-full h-full" width={100} height={100} />
</div>
<div className='block md:hidden w-[40px] h-[40px] rounded-md p-2 bg-primary cursor-pointer' onClick={()=>setisOPen(!isOPen)}>
<Image src={menu} alt='' className='w-full h-full'/>
</div>
<div className={cn('h-0 overflow-hidden md:hidden transition-all duration-100 ease-in-out container bg-white dark:bg-[#131617] ', {
'h-auto py-2 min-w-full mt-2': isOPen
})}>
<SearchBar placeholder="Discover news, articles, and more" className="font-semibold" onSearch={onSearch} />
</div>
<div className={cn('h-0 overflow-hidden md:hidden transition-all duration-100 ease-in-out container bg-white ', {
'h-[auto] py-2 min-w-full':isOPen
})} >
<SearchBar placeholder='Discover news, articles, and more' className={'font-semibold'} onSearch={onSearch} />
</div>
</React.Fragment>
);
}
......
components/layout/PageNotFound/PageNotFound.tsx
......@@ -6,7 +6,7 @@ export default function PageNotFound() {
return (
<div className="flex flex-col justify-center items-center">
<Image src={FourOhFour} alt="404, Page Not Found!" />
<Button href="/">Back to Home</Button>
<Button href="/" size='md'>Back to Home</Button>
</div>
);
}
hooks/Filter.tsx 0 → 100644
'use client';
import { blog_data } from "@/utils/Blog_data";
import { useState,createContext } from "react";
type FilterContext = {
data:{
id: number;
img: string;
title: string;
description: string;
author: string;
authorImg: string;
date: Date;
}[],
handleFilter:(search:string)=>void
}
export const FilterContext = createContext<FilterContext>({
data: blog_data,
handleFilter:()=>{}
})
interface FilterComponentProps{
children: React.ReactNode;
}
const FilterComponent:React.FC<FilterComponentProps> = ({children}) => {
const [filter, setfilter] = useState(blog_data);
const handleFilter = (search: string) => {
if (search.trim() === "") {
setfilter(blog_data);
} else {
setfilter(blog_data.filter((data) => data.title.toLowerCase().includes(search.toLowerCase())));
}
}
return (<FilterContext.Provider value={{
data: filter,
handleFilter
}}>{children}</FilterContext.Provider> );
}
export default FilterComponent;
\ No newline at end of file
hooks/usePagination.tsx 0 → 100644
'use client';
import React, { createContext, useState } from "react";
type paginationContextTypes = {
start: number;
end: number;
size: number;
currentPage: number;
handleChangePage: (page: number) => void;
}
interface usePaginationProps {
children: React.ReactNode;
}
export const paginationContext = createContext<paginationContextTypes>({
start: 1,
end: 1,
size: 1,
currentPage: 1,
handleChangePage: () => {},
});
const PaginationProvider:React.FC<usePaginationProps> = ({children}) => {
const [currentPage, setcurrentPage] = useState(1);
const size = 6;
const [start, setstart] = useState(0);
const [end, setend] = useState(size);
const handleChangePage = (page: number) => {
setcurrentPage(page);
setstart((page - 1) * size);
setend(page * size);
}
return (
<paginationContext.Provider value={{
start,
end,
size,
currentPage,
handleChangePage,
}}>
{children}
</paginationContext.Provider>
);
}
export default PaginationProvider;
\ No newline at end of file
hooks/useTheme.tsx 0 → 100644
'use client';
import React, { createContext, useState } from "react";
interface useThemeProps{
children: React.ReactNode
}
type ThemeContextType = {
theme: 'dark' | 'light';
ToggleTheme: () => void;
};
// Create the context with a default value
export const ThemeContext = createContext<ThemeContextType | null>(null);
const ThemeParent: React.FC<useThemeProps> = ({ children }) => {
const [theme, setTheme] = useState<'light' | 'dark'>('dark');
const ToggleTheme = () => {
if (theme === 'light') setTheme('dark');
else if (theme === 'dark') setTheme('light');
}
return (
<ThemeContext.Provider value={{
theme,
ToggleTheme,
}} >
{children}
</ThemeContext.Provider>
)
}
export default ThemeParent
\ No newline at end of file
layout/GlobalLayout.tsx 0 → 100644
'use client';
import Navigation from "@/components/layout/Navigation/Navigation";
import { FilterContext } from "@/hooks/Filter";
import { ThemeContext } from "@/hooks/useTheme";
import React, { useContext } from "react";
interface GlobalLayoutProps{
children: React.ReactNode;
}
const Global:React.FC<GlobalLayoutProps> = ({children}) => {
const ThemeState = useContext(ThemeContext);
const FilterState = useContext(FilterContext);
return (
<div className={`${ThemeState?.theme} `}>
<div className={`bg-light dark:bg-black min-h-screen`}>
<Navigation onSearch={FilterState.handleFilter}
onChangeTheme={ThemeState ? ThemeState?.ToggleTheme : () => { }} />
{children}
</div>
</div>
);
}
export default Global;
\ No newline at end of file
next-env.d.ts
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference types="next/navigation-types/compat/navigation" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
next.config.js
module.exports = {
images: {
domains:['cdn.pixabay.com','images.pexels.com'],
remotePatterns: [
{
protocol: 'https',
hostname: 's3-ap-southeast-1.amazonaws.com'
}
],
imageSizes: [64, 128, 256, 576, 768, 992, 1200, 1600, 1920, 2048, 3840]
imageSizes: [64, 128, 256, 576, 768, 992, 1200, 1600, 1920, 2048, 3840],
},
webpack: (config, { isServer }) => {
if (process.env.ANALYZE && !isServer) {
......@@ -30,5 +31,5 @@ module.exports = {
];
},
poweredByHeader: false,
compress: false
compress: false,
};
package-lock.json
......@@ -8,6 +8,7 @@
"name": "nextjs-starter-template",
"version": "0.1.0",
"dependencies": {
"@tailwindcss/line-clamp": "^0.4.4",
"@tailwindcss/typography": "^0.5.13",
"@types/node": "^20.11.5",
"@types/react": "^18.2.48",
......@@ -8559,6 +8560,14 @@
"@swc/counter": "^0.1.3"
}
},
"node_modules/@tailwindcss/line-clamp": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz",
"integrity": "sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==",
"peerDependencies": {
"tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
}
},
"node_modules/@tailwindcss/typography": {
"version": "0.5.13",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz",
......
package.json
......@@ -11,6 +11,7 @@
"analyze": "cross-env ANALYZE=true next build"
},
"dependencies": {
"@tailwindcss/line-clamp": "^0.4.4",
"@tailwindcss/typography": "^0.5.13",
"@types/node": "^20.11.5",
"@types/react": "^18.2.48",
......
pages/Home.tsx 0 → 100644
'use client'
import Heading from "@/components/base/Heading/Heading";
import BlogCard from "@/components/Top-Level/blog-card/BlogCard";
import Pagination from "@/components/Top-Level/pagination/pagination";
import { FilterContext } from "@/hooks/Filter";
import { paginationContext } from "@/hooks/usePagination";
import { useRouter } from "next/navigation";
import { useContext, useEffect, useState } from "react";
const Home = () => {
const [isMounted, setisMounted] = useState(false)
const { size, currentPage, start, end, handleChangePage } = useContext(paginationContext);
const router = useRouter();
const {data} = useContext(FilterContext);
useEffect(() => {
setisMounted(true);
}, [])
if (!isMounted) {
return null
}
return (
<div className="max-w-[1100px] mx-auto px-2 ">
<Heading />
<div className="flex flex-wrap gap-6 w-full dark:bg-black mt-4">
{
data.length === 0 && <h2 className=" capitalize dark:text-white text-center w-full text-2xl font-semibold py-5">no Data found</h2>
}
{data?.slice(start,end).map((data) => (
<div key={data.id} className="flex-grow sm:flex-grow-0 sm:w-[calc(50%-1rem)]
lg:w-[calc(33.33%-1rem)] *:sm:max-w-full *:h-full">
<BlogCard {...data} handleClick={() => {
router.push(`/blog/${data.id}`)
}}/>
</div>
))}
</div>
<center className="w-full p-6 flex justify-center ">
<Pagination size={Math.ceil(data
.length / size)} onChange={handleChangePage} currentPage={currentPage} />
</center>
</div >
);
}
export default Home;
\ No newline at end of file
pages/blog.tsx 0 → 100644
import BlogPage from '@/components/Top-Level/blog-page/Blogpage'
import { pageData } from '@/utils/Data';
interface BlogProps{
id:number;
}
const Blog: React.FC<BlogProps> = ({ id }) => {
const data = pageData[id - 1];
return (
<BlogPage {...data} />
)
}
export default Blog
\ No newline at end of file
styles/globals.css
......@@ -2,6 +2,10 @@
@tailwind components;
@tailwind utilities;
head,body,:root{
width: 100%;
min-height: 100%;
}
@font-face {
font-family: hind;
src: url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');
......
tailwind.config.ts
......@@ -5,7 +5,9 @@ const config: Config = {
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./utils/**/*.{js,ts,jsx,tsx,mdx}'
'./utils/**/*.{js,ts,jsx,tsx,mdx}',
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./layout/**/*.{js,ts,jsx,tsx,mdx}'
],
darkMode: 'class', // Using 'class' instead of 'selector' for dark mode
theme: {
......@@ -32,6 +34,7 @@ const config: Config = {
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/line-clamp'),
],
};
......
utils/Blog_data.ts
export const blog_data = [
{
id:1,
img: "https://cdn.pixabay.com/photo/2024/03/24/17/10/background-8653526_960_720.jpg",
title: "How to get perfect start for beginning runners",
description: "A deep dive into closures and how they work in JavaScript.",
......@@ -8,6 +9,7 @@ export const blog_data = [
date: new Date("2023-01-15")
},
{
id:2,
img:'https://cdn.pixabay.com/photo/2023/08/15/15/48/swan-8192196_640.jpg',
title: "Great tools to improve your personal blogging experience",
description: "An introductory guide to Python programming for beginners.",
......@@ -16,6 +18,7 @@ export const blog_data = [
date: new Date("2023-02-10")
},
{
id:3,
img: "https://cdn.pixabay.com/photo/2024/05/18/08/16/cat-8769861_640.jpg",
title: "Great tools to improve your personal blogging experience",
description: "A deep dive into closures and how they work in JavaScript.",
......@@ -24,6 +27,7 @@ export const blog_data = [
date: new Date("2023-03-05")
},
{
id:4,
img: "https://cdn.pixabay.com/photo/2023/08/08/10/50/hot-wheels-8177051_640.jpg",
title: "The technical setup when starting a personal blog",
description:"A deep dive into closures and how they work in JavaScript.",
......@@ -32,6 +36,7 @@ export const blog_data = [
date: new Date("2022-04-20")
},
{
id:5,
img:'https://cdn.pixabay.com/photo/2020/04/22/12/06/adventure-5077760_960_720.jpg',
title: "The technical setup when starting a personal blog",
description: "A deep dive into closures and how they work in JavaScript.",
......@@ -40,6 +45,7 @@ export const blog_data = [
date: new Date("2023-05-18")
},
{
id:6,
img: "https://cdn.pixabay.com/photo/2013/03/12/17/54/hurricane-92968_640.jpg",
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
description: "A deep dive into closures and how they work in JavaScript.",
......@@ -48,6 +54,7 @@ export const blog_data = [
date: new Date("2023-06-15")
},
{
id:7,
img: "https://cdn.pixabay.com/photo/2024/05/26/15/27/anime-8788959_640.jpg",
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
description:'lorem ipsum dolor sit amet, consectetur adipiscing elit.Quisque consequ velit',
......@@ -56,6 +63,7 @@ export const blog_data = [
date: new Date("2023-07-22")
},
{
id:8,
img:'https://cdn.pixabay.com/photo/2023/08/01/08/21/waterfall-8162449_640.jpg',
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
description: "A practical guide to creating RESTful APIs with Node.js.",
......@@ -64,6 +72,7 @@ export const blog_data = [
date: new Date("2023-08-30")
},
{
id:9,
img: "https://cdn.pixabay.com/photo/2014/12/07/09/30/milky-way-559641_640.jpg",
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
description: "An introductory guide to Docker and containerization.",
......@@ -72,11 +81,248 @@ export const blog_data = [
date: new Date("2023-09-25")
},
{
id:10,
img:'https://cdn.pixabay.com/photo/2024/05/24/17/14/travel-8785493_640.jpg',
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
description: "A deep dive into closures and how they work in JavaScript.",
author: "Henry White",
authorImg: "https://images.pexels.com/photos/1898555/pexels-photo-1898555.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-10-10")
}
},
{
id: 11,
img: "https://cdn.pixabay.com/photo/2024/05/09/17/24/shih-tzu-8751508_640.jpg",
title: "The Ultimate Guide to Adventure Travel",
description: "Tips and tricks for planning your next big adventure.",
author: "Emma Johnson",
authorImg: "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-07-20")
},
{
id: 12,
img: "https://cdn.pixabay.com/photo/2024/06/23/12/06/sparrow-8848051_640.jpg",
title: "10 Must-Visit Destinations in Africa",
description: "Exploring the beauty and diversity of Africa's top travel spots.",
author: "Liam Martinez",
authorImg: "https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-08-05")
},
{
id: 13,
img: "https://cdn.pixabay.com/photo/2024/02/09/23/02/trees-8563877_640.jpg",
title: "Boost Your Productivity with These Office Hacks",
description: "Simple and effective tips to make your workday more productive.",
author: "Sophia Brown",
authorImg: "https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-09-10")
},
{
id: 14,
img: "https://cdn.pixabay.com/photo/2019/11/23/16/07/garden-4647544_640.jpg",
title: "Healthy Eating: 7 Delicious Salad Recipes",
description: "A collection of easy and tasty salad recipes for a healthy diet.",
author: "David Wilson",
authorImg: "https://images.pexels.com/photos/1310474/pexels-photo-1310474.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-06-15")
},
{
id: 15,
img: "https://cdn.pixabay.com/photo/2024/02/17/15/14/crows-8579540_640.jpg",
title: "Top Hiking Trails for Beginners",
description: "A guide to the best hiking trails for those new to the activity.",
author: "James Miller",
authorImg: "https://images.pexels.com/photos/936117/pexels-photo-936117.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-07-01")
},
{
id: 16,
img: "https://cdn.pixabay.com/photo/2023/12/15/22/38/trees-8451483_640.jpg",
title: "10 Free Online Courses to Boost Your Career",
description: "A list of the best free online courses available to enhance your skills.",
author: "Olivia Smith",
authorImg: "https://images.pexels.com/photos/374882/pexels-photo-374882.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-05-30")
},
{
id: 17,
img: "https://cdn.pixabay.com/photo/2024/05/02/16/22/parrots-8735074_640.jpg",
title: "Understanding Asynchronous JavaScript",
description: "A deep dive into async functions, promises, and callbacks in JavaScript.",
author: "John Doe",
authorImg: "https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-08-12")
},
{
id: 18,
img: "https://cdn.pixabay.com/photo/2024/04/18/14/04/vietnam-8704397_640.jpg",
title: "How to Start a Blog: A Step-by-Step Guide",
description: "Everything you need to know to start your own blog from scratch.",
author: "Emily Davis",
authorImg: "https://images.pexels.com/photos/712513/pexels-photo-712513.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-04-25")
},
{
id: 19,
img: "https://cdn.pixabay.com/photo/2024/02/16/20/28/lighthouse-8578318_640.jpg",
title: "Remote Work: Tips for Staying Productive",
description: "Strategies to help you stay productive while working from home.",
author: "Michael Brown",
authorImg: "https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-09-02")
},
{
id: 20,
img: "https://cdn.pixabay.com/photo/2024/02/18/15/22/swan-8581483_640.jpg",
title: "Architectural Wonders Around the World",
description: "A tour of some of the most stunning architectural feats worldwide.",
author: "Sophia Brown",
authorImg: "https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-06-18")
},
{
id: 21,
img: "https://cdn.pixabay.com/photo/2024/03/28/15/59/life-8661191_640.jpg",
title: "The Future of Air Travel",
description: "Exploring the innovations that are shaping the future of air travel.",
author: "David Wilson",
authorImg: "https://images.pexels.com/photos/1310474/pexels-photo-1310474.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-10-05")
},
{
id: 22,
img: "https://cdn.pixabay.com/photo/2023/11/26/23/33/horse-8414400_640.jpg",
title: "Photography Tips for Beginners",
description: "Basic tips and techniques to improve your photography skills.",
author: "Emma Johnson",
authorImg: "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-03-22")
},
{
id: 23,
img: "https://cdn.pixabay.com/photo/2024/06/22/05/25/bear-8845470_640.jpg",
title: "DIY Home Decor Projects",
description: "Easy and affordable DIY projects to enhance your home decor.",
author: "Olivia Smith",
authorImg: "https://images.pexels.com/photos/374882/pexels-photo-374882.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-08-18")
},
{
id: 24,
img: "https://cdn.pixabay.com/photo/2023/03/29/16/13/labrador-retriever-7885882_640.jpg",
title: "Top 10 Books to Read This Summer",
description: "A curated list of must-read books for your summer reading list.",
author: "John Doe",
authorImg: "https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-05-15")
},
{
id: 25,
img: "https://cdn.pixabay.com/photo/2013/10/30/21/03/chocolate-203276_640.jpg",
title: "A Guide to Urban Exploration",
description: "Tips and safety guidelines for exploring urban environments.",
author: "Michael Brown",
authorImg: "https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-07-12")
},
{
id: 26,
img: "https://cdn.pixabay.com/photo/2024/04/13/11/29/muffins-8693748_640.jpg",
title: "Mastering CSS Grid Layout",
description: "A comprehensive guide to understanding and using CSS Grid Layout.",
author: "Sophia Brown",
authorImg: "https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-08-20")
},
{
id: 27,
img: "https://cdn.pixabay.com/photo/2023/07/04/17/13/mallow-8106680_640.jpg",
title: "Parenting Tips for New Moms and Dads",
description: "Helpful advice and tips for new parents navigating parenthood.",
author: "Emma Johnson",
authorImg: "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-06-01")
},
{
id: 28,
img: "https://cdn.pixabay.com/photo/2024/06/21/15/18/road-8844555_640.jpg",
title: "Gourmet Cooking at Home",
description: "Easy gourmet recipes you can make in your own kitchen.",
author: "David Wilson",
authorImg: "https://images.pexels.com/photos/1310474/pexels-photo-1310474.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-04-30")
},
{
id: 29,
img: "https://cdn.pixabay.com/photo/2014/10/24/15/08/heaven-501350_640.jpg",
title: "Freelancing 101: How to Get Started",
description: "A guide to starting and succeeding as a freelancer.",
author: "Michael Brown",
authorImg: "https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-07-25")
},
{
id: 30,
img: "https://cdn.pixabay.com/photo/2024/02/17/08/27/bird-8578905_640.jpg",
title: "Mindfulness and Meditation for Beginners",
description: "An introduction to mindfulness and meditation practices.",
author: "Olivia Smith",
authorImg: "https://images.pexels.com/photos/374882/pexels-photo-374882.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-03-05")
},
{
id: 31,
img: "https://cdn.pixabay.com/photo/2024/03/19/16/46/key-west-8643631_640.jpg",
title: "Building Your First Website with HTML and CSS",
description: "Step-by-step instructions for creating your first website.",
author: "John Doe",
authorImg: "https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-09-08")
},
{
id: 32,
img: "https://cdn.pixabay.com/photo/2023/06/11/01/24/flowers-8055013_640.jpg",
title: "Balancing Work and Family Life",
description: "Tips for achieving a healthy work-life balance.",
author: "Sophia Brown",
authorImg: "https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-05-18")
},
{
id: 33,
img: "https://cdn.pixabay.com/photo/2023/12/08/05/41/cat-8436848_640.jpg",
title: "Investing 101: A Beginner's Guide",
description: "Basics of investing for those new to the stock market.",
author: "Emma Johnson",
authorImg: "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-06-25")
},
{
id: 34,
img: "https://cdn.pixabay.com/photo/2017/08/01/02/10/dark-2562840_640.jpg",
title: "Social Media Marketing Tips",
description: "Effective strategies for marketing your business on social media.",
author: "David Wilson",
authorImg: "https://images.pexels.com/photos/1310474/pexels-photo-1310474.jpeg?auto=compress&cs=tinysrgb&w=600",
date: new Date("2023-07-03")
},
];
export const singeBlog={
blogTitle: "Create an Art that shows the beauty in everyone’s ideas of flaws.",
authorDetails: {
author: "Charlotte mia",
date: new Date('2015-1-01'),
},
category: 'fashion',
readingTime: 1,
content: "\n ## How to create an Art that shows the beauty in everyone ideas of flaws.\n\n Fusce faucibus ante vitae justo efficitur elementum. Donec et ipsum faucibus arcu ipsum elementum, luctus justo. ac purus semper. Fusce faucibus ante vitae justo efficitur sed et elementum. Donec ipsum faucibus arcu elementum, luctus justo. ac purus semper. Fusce faucibus ante vitae justo efficitur elementum. Donec ipsum faucibus arcu vitae justo efficitur elementum.\n\n Fusce faucibus ante vitae justo efficitur elementum. Donec ipsum faucibus arcu elementum, luctus justo. ac purus semper. Fusce faucibus ante vitae justo efficitur elementum. Donec ipsum faucibus arcu elementum, luctus justo. ac purus semper.\"\n\n \n> #### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes. \n> \n> — Kelvin Edison\n\n Lorem faucibus fusce ante vitae justo efficitur elementum. Donec ipsum faucibus arcu elementum, luctus justo. ac purus semper. Fusce faucibus ante vitae justo efficitur elementum. Donec ipsum faucibus. Donec ipsum faucibus arcu elementum..\n\n ## Fusce faucibus ante vitae justo efficitur\n\n Lorem faucibus fusce ante vitae justo efficitur elementum. Donec ipsum faucibus arcu elementum, luctus justo. ac purus semper. Fusce faucibus ante vitae justo efficitur elementum. Donec ipsum faucibus. Donec ipsum faucibus arcu Donec ipsum faucibus arcu elementum, luctus justo. ac purus semper.\n\n 1. Quisque sagittis lacus eu lorem sodalesd enean adipiscing.\n 2. Donec ipsum faucibus arcu elementum, luctus justo.\n 3. Nam libero tempore, cum soluta nobis est eligendi optio.\n 4. Sed ut perspiciatis unde omnis natus\n\n ## Quisque sagittis lacus eu lorem sodales\n\n Lorem faucibus fusce ante vitae justo efficitur elementum. Donec ipsum faucibus arcu elementum, luctus justo. ac purus semper. Fusce faucibus ante vitae justo efficitur elementum. Donec ipsum faucibus. Donec ipsum faucibus arcu.\n\n Fusce faucibus arcu faucibus ante vitae justo efficitur elementum. Donec ipsum faucibus. Donec ipsum faucibus arcu.",
categories:[
"Fashion",
"Beauty"
],
banner: {
"img": "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_640.jpg",
"width": 1920,
"height": 500
}
}
\ No newline at end of file
utils/Data.ts 0 → 100644
export const pageData =[{
"blogTitle": "Embrace the Unique: Turning Imperfections into Art",
"authorDetails": {
"author": "Jane Doe",
"date": new Date('2018-05-21')
},
"category": "art",
"readingTime": 2,
"content": "\n ## Embrace the Unique: Turning Imperfections into Art\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.\n\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\n\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\n\n > #### For radiant skin, mix lemon juice with sugar. Gently scrub your face for a minute, then rinse off.\n > \n > — Jamie Oliver\n\n Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla.\n\n ## Embrace the Unique\n\n Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.\n\n 1. Vestibulum id ligula porta felis euismod semper.\n 2. Nulla vitae elit libero, a pharetra augue.\n 3. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.\n 4. Donec ullamcorper nulla non metus auctor fringilla.\n\n ## Aenean lacinia bibendum nulla\n\n Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.",
"categories": [
"Art",
"Inspiration"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/03/24/17/10/background-8653526_960_720.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "Finding Beauty in Flaws: An Artistic Perspective",
"authorDetails": {
"author": "Michael Smith",
"date": new Date('2020-07-15')
},
"category": "design",
"readingTime": 3,
"content": "\n ## Finding Beauty in Flaws: An Artistic Perspective\n\n Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\n\n > #### For glowing skin, blend cucumber with yogurt. Apply to your face and leave it on for 10 minutes.\n > \n > — Sofia Loren\n\n Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.\n\n ## Finding Beauty\n\n Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.\n\n 1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.\n 2. Maecenas sed diam eget risus varius blandit.\n 3. Fusce dapibus, tellus ac cursus commodo.\n 4. Donec id elit non mi porta gravida at eget metus.\n\n ## Maecenas faucibus mollis interdum\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
"categories": [
"Design",
"Beauty"
],
"banner": {
img:'https://cdn.pixabay.com/photo/2023/08/15/15/48/swan-8192196_640.jpg',
"width": 1920,
"height": 500
}
},
{
"blogTitle": "The Art of Imperfection: Celebrating Flaws",
"authorDetails": {
"author": "Emily Davis",
"date": new Date('2019-11-03')
},
"category": "lifestyle",
"readingTime": 4,
"content": "\n ## The Art of Imperfection: Celebrating Flaws\n\n Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\n\n Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.\n\n > #### For smooth skin, mash strawberries and mix with cream. Apply to your face for 5 minutes.\n > \n > — Audrey Hepburn\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.\n\n ## The Art of Imperfection\n\n Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna.\n\n 1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.\n 2. Maecenas sed diam eget risus varius blandit.\n 3. Fusce dapibus, tellus ac cursus commodo.\n 4. Donec id elit non mi porta gravida at eget metus.\n\n ## Vestibulum id ligula porta felis euismod semper\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
"categories": [
"Lifestyle",
"Inspiration"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/05/18/08/16/cat-8769861_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "Art in Imperfection: A Creative Journey",
"authorDetails": {
"author": "Oliver Brown",
"date": new Date('2021-09-10')
},
"category": "photography",
"readingTime": 5,
"content": "\n ## Art in Imperfection: A Creative Journey\n\n Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\n\n Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n > #### For hydrated skin, mix aloe vera gel with rose water. Apply it to your face and let it sit for 15 minutes.\n > \n > — Marilyn Monroe\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.\n\n ## Art in Imperfection\n\n Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.\n\n 1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.\n 2. Maecenas sed diam eget risus varius blandit.\n 3. Fusce dapibus, tellus ac cursus commodo.\n 4. Donec id elit non mi porta gravida at eget metus.\n\n ## Vestibulum id ligula porta felis euismod semper\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
"categories": [
"Photography",
"Creativity"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2023/08/08/10/50/hot-wheels-8177051_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "Imperfections in Art: A New Perspective",
"authorDetails": {
"author": "Sophia Johnson",
"date": new Date('2023-03-17')
},
"category": "creative",
"readingTime": 6,
"content": "\n ## Imperfections in Art: A New Perspective\n\n Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.\n\n Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.\n\n > #### For refreshed skin, combine mint leaves with cucumber. Apply the mixture to your face and leave it for 10 minutes.\n > \n > — Grace Kelly\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.\n\n ## Imperfections in Art\n\n Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.\n\n 1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.\n 2. Maecenas sed diam eget risus varius blandit.\n 3. Fusce dapibus, tellus ac cursus commodo.\n 4. Donec id elit non mi porta gravida at eget metus.\n\n ## Vestibulum id ligula porta felis euismod semper\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
"categories": [
"Creative",
"Art"
],
"banner": {
img:'https://cdn.pixabay.com/photo/2020/04/22/12/06/adventure-5077760_960_720.jpg',
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Beauty of Imperfection in Artistic Creations",
"authorDetails": {
"author": "John Green",
"date": new Date('2016-02-10')
},
"category": "painting",
"readingTime": 2,
"content": "\n ## The Beauty of Imperfection in Artistic Creations\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mollis, est vel euismod aliquet, felis quam fermentum dolor, in vulputate elit orci a eros.\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.\n\n > #### For smooth skin, mash banana and mix with honey. Apply to your face for 10 minutes.\n > \n > — Leonardo da Vinci\n\n Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.\n\n ## The Beauty of Imperfection\n\n Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.\n\n 1. Vestibulum id ligula porta felis euismod semper.\n 2. Nulla vitae elit libero, a pharetra augue.\n 3. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.\n 4. Donec ullamcorper nulla non metus auctor fringilla.\n\n ## Aenean lacinia bibendum nulla\n\n Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.",
"categories": [
"Painting",
"Inspiration"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2013/03/12/17/54/hurricane-92968_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "Perfectly Imperfect: Art in Flaws",
"authorDetails": {
"author": "Anna Lee",
"date": new Date('2017-03-25')
},
"category": "sculpture",
"readingTime": 3,
"content": "\n ## Perfectly Imperfect: Art in Flaws\n\n Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.\n\n > #### For clear skin, mix oatmeal with yogurt. Apply to your face for 15 minutes.\n > \n > — Pablo Picasso\n\n Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\n\n ## Perfectly Imperfect\n\n Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna.\n\n 1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.\n 2. Maecenas sed diam eget risus varius blandit.\n 3. Fusce dapibus, tellus ac cursus commodo.\n 4. Donec id elit non mi porta gravida at eget metus.\n\n ## Vestibulum id ligula porta felis euismod semper\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
"categories": [
"Sculpture",
"Creativity"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/05/26/15/27/anime-8788959_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "The Essence of Flaws in Artistic Expression",
"authorDetails": {
"author": "David Clark",
"date": new Date('2018-08-14')
},
"category": "literature",
"readingTime": 4,
"content": "\n ## The Essence of Flaws in Artistic Expression\n\n Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\n\n Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.\n\n > #### For a fresh look, mix avocado with olive oil. Apply to your face for 10 minutes.\n > \n > — William Shakespeare\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.\n\n ## The Essence of Flaws\n\n Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.\n\n 1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.\n 2. Maecenas sed diam eget risus varius blandit.\n 3. Fusce dapibus, tellus ac cursus commodo.\n 4. Donec id elit non mi porta gravida at eget metus.\n\n ## Vestibulum id ligula porta felis euismod semper\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
"categories": [
"Literature",
"Art"
],
"banner": {
img:'https://cdn.pixabay.com/photo/2023/08/01/08/21/waterfall-8162449_640.jpg',
"width": 1920,
"height": 500
}
},
{
"blogTitle": "Finding Art in the Imperfect",
"authorDetails": {
"author": "Laura Kim",
"date": new Date('2019-10-19')
},
"category": "crafts",
"readingTime": 5,
"content": "\n ## Finding Art in the Imperfect\n\n Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\n\n Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n > #### For soft skin, mix coconut oil with sugar. Gently scrub your face for 5 minutes.\n > \n > — Vincent van Gogh\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.\n\n ## Finding Art\n\n Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.\n\n 1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.\n 2. Maecenas sed diam eget risus varius blandit.\n 3. Fusce dapibus, tellus ac cursus commodo.\n 4. Donec id elit non mi porta gravida at eget metus.\n\n ## Vestibulum id ligula porta felis euismod semper\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
"categories": [
"Crafts",
"Creativity"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2014/12/07/09/30/milky-way-559641_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "Embracing Flaws: The Art of Imperfection",
"authorDetails": {
"author": "Henry Moore",
"date": new Date('2020-12-30')
},
"category": "architecture",
"readingTime": 6,
"content": "\n ## Embracing Flaws: The Art of Imperfection\n\n Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.\n\n Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.\n\n > #### For radiant skin, mix turmeric with yogurt. Apply to your face for 10 minutes.\n > \n > — Zaha Hadid\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.\n\n ## Embracing Flaws\n\n Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.\n\n 1. Cras justo odio, dapibus ac facilisis in, egestas eget quam.\n 2. Maecenas sed diam eget risus varius blandit.\n 3. Fusce dapibus, tellus ac cursus commodo.\n 4. Donec id elit non mi porta gravida at eget metus.\n\n ## Vestibulum id ligula porta felis euismod semper\n\n Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
"categories": [
"Architecture",
"Design"
],
"banner": {
img:'https://cdn.pixabay.com/photo/2024/05/24/17/14/travel-8785493_640.jpg',
"width": 1920,
"height": 500
}
},
{
"blogTitle": "The Beauty of Brutalism",
"authorDetails": {
"author": "Jane Smith",
"date": new Date('2021-01-15')
},
"category": "architecture",
"readingTime": 8,
"content": "\n ## The Beauty of Brutalism\n\n Proin eget tortor risus. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n > #### Less is more.\n > \n > — Ludwig Mies van der Rohe\n\n Curabitur aliquet quam id dui posuere blandit. Donec rutrum congue leo eget malesuada.\n\n ## Functional Aesthetics\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla porttitor accumsan tincidunt.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla quis lorem ut libero malesuada feugiat.\n 3. Vivamus suscipit tortor eget felis porttitor volutpat.\n 4. Donec rutrum congue leo eget malesuada.\n\n ## The Modern Touch\n\n Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit.",
"categories": [
"Architecture",
"Modernism"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/05/09/17/24/shih-tzu-8751508_640.jpg",
"width": 1920,
"height": 500
}
}
,{
"blogTitle": "Futuristic Architecture: A Glimpse Ahead",
"authorDetails": {
"author": "Alex Johnson",
"date": new Date('2021-05-10')
},
"category": "architecture",
"readingTime": 5,
"content": "\n ## Futuristic Architecture: A Glimpse Ahead\n\n Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat.\n\n > #### Form follows function.\n > \n > — Louis Sullivan\n\n Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n ## Innovative Designs\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n 1. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Sustainable Solutions\n\n Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.",
"categories": [
"Architecture",
"Innovation"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/06/23/12/06/sparrow-8848051_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "Green Architecture: Building a Sustainable Future",
"authorDetails": {
"author": "Emily Davis",
"date": new Date('2021-07-21')
},
"category": "architecture",
"readingTime": 7,
"content": "\n ## Green Architecture: Building a Sustainable Future\n\n Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.\n\n > #### The best way to predict the future is to design it.\n > \n > — Buckminster Fuller\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Eco-friendly Innovations\n\n Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## The Future is Green\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Sustainability"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/02/09/23/02/trees-8563877_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "The Evolution of Skyscrapers",
"authorDetails": {
"author": "Michael Lee",
"date": new Date('2021-08-30')
},
"category": "architecture",
"readingTime": 9,
"content": "\n ## The Evolution of Skyscrapers\n\n Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.\n\n > #### Architecture is the learned game, correct and magnificent, of forms assembled in the light.\n > \n > — Le Corbusier\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Reaching New Heights\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## The Sky's the Limit\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.",
"categories": [
"Architecture",
"Engineering"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2019/11/23/16/07/garden-4647544_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "Exploring Modern Architecture",
"authorDetails": {
"author": "Sophia Martinez",
"date": new Date('2022-01-20')
},
"category": "architecture",
"readingTime": 5,
"content": "\n ## Exploring Modern Architecture\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture should speak of its time and place, but yearn for timelessness.\n > \n > — Frank Gehry\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Innovations in Design\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## The Modern Touch\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Modernism"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/02/17/15/14/crows-8579540_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "Exploring Modern Architecture",
"authorDetails": {
"author": "Sophia Martinez",
"date": new Date('2022-01-20')
},
"category": "architecture",
"readingTime": 5,
"content": "\n ## Exploring Modern Architecture\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture should speak of its time and place, but yearn for timelessness.\n > \n > — Frank Gehry\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Innovations in Design\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## The Modern Touch\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Modernism"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2023/12/15/22/38/trees-8451483_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Impact of Architecture on Society",
"authorDetails": {
"author": "David Robinson",
"date": new Date('2022-03-05')
},
"category": "architecture",
"readingTime": 8,
"content": "\n ## The Impact of Architecture on Society\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture is the reaching out for the truth.\n > \n > — Louis Kahn\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Social Influence\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Building Communities\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Society"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/05/02/16/22/parrots-8735074_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "The Rise of Smart Cities",
"authorDetails": {
"author": "Mia Harris",
"date": new Date('2022-04-20')
},
"category": "architecture",
"readingTime": 6,
"content": "\n ## The Rise of Smart Cities\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### The mother art is architecture. Without an architecture of our own we have no soul of our own civilization.\n > \n > — Frank Lloyd Wright\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Urban Connectivity\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## The Future of Urban Living\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Technology"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/04/18/14/04/vietnam-8704397_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Timelessness of Classical Architecture",
"authorDetails": {
"author": "Isabella Walker",
"date": new Date('2022-05-15')
},
"category": "architecture",
"readingTime": 7,
"content": "\n ## The Timelessness of Classical Architecture\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture is the learned game, correct and magnificent, of forms assembled in the light.\n > \n > — Le Corbusier\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Classical Influences\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Enduring Designs\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"History"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/02/16/20/28/lighthouse-8578318_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Timelessness of Classical Architecture",
"authorDetails": {
"author": "Isabella Walker",
"date": new Date('2022-05-15')
},
"category": "architecture",
"readingTime": 7,
"content": "\n ## The Timelessness of Classical Architecture\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture is the learned game, correct and magnificent, of forms assembled in the light.\n > \n > — Le Corbusier\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Classical Influences\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Enduring Designs\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"History"
],
"banner": {
"img": "https://cdn.pixabay.com/photo/2014/12/16/21/10/capitol-570336_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Intersection of Architecture and Art",
"authorDetails": {
"author": "Matthew Taylor",
"date": new Date('2022-06-30')
},
"category": "architecture",
"readingTime": 6,
"content": "\n ## The Intersection of Architecture and Art\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture is a visual art, and the buildings speak for themselves.\n > \n > — Julia Morgan\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Blurring Boundaries\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Artistic Expressions\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Art"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/02/18/15/22/swan-8581483_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "Preserving Architectural Heritage",
"authorDetails": {
"author": "Lucas Evans",
"date": new Date('2022-08-10')
},
"category": "architecture",
"readingTime": 7,
"content": "\n ## Preserving Architectural Heritage\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture is the thoughtful making of space.\n > \n > — Louis Kahn\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Protecting History\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Heritage Conservation\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"History"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/03/28/15/59/life-8661191_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Future of Sustainable Architecture",
"authorDetails": {
"author": "Grace Anderson",
"date": new Date('2022-09-15')
},
"category": "architecture",
"readingTime": 8,
"content": "\n ## The Future of Sustainable Architecture\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture is the will of an epoch translated into space.\n > \n > — Ludwig Mies van der Rohe\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Eco-friendly Innovations\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Green Building Practices\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Sustainability"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2023/11/26/23/33/horse-8414400_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "Reviving Historic Buildings",
"authorDetails": {
"author": "Liam Clark",
"date": new Date('2022-10-30')
},
"category": "architecture",
"readingTime": 6,
"content": "\n ## Reviving Historic Buildings\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### To provide meaningful architecture is not to parody history, but to articulate it.\n > \n > — Daniel Libeskind\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Breathing New Life\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## The Power of Adaptation\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"History"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/06/22/05/25/bear-8845470_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Influence of Cultural Diversity on Architecture",
"authorDetails": {
"author": "Sophia Lee",
"date": new Date('2023-05-20')
},
"category": "architecture",
"readingTime": 8,
"content": "\n ## The Influence of Cultural Diversity on Architecture\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture should speak of its time and place, but yearn for timelessness.\n > \n > — Frank Gehry\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Global Inspirations\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Celebrating Diversity\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Culture"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2023/03/29/16/13/labrador-retriever-7885882_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "Challenges in Modern Urban Development",
"authorDetails": {
"author": "Daniel Brown",
"date": new Date('2023-06-15')
},
"category": "architecture",
"readingTime": 7,
"content": "\n ## Challenges in Modern Urban Development\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture is the reaching out for the truth.\n > \n > — Louis Kahn\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Sustainable Solutions\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Balancing Growth\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Urban Development"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2013/10/30/21/03/chocolate-203276_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Resurgence of Brutalist Architecture",
"authorDetails": {
"author": "Olivia Martinez",
"date": new Date('2023-07-10')
},
"category": "architecture",
"readingTime": 6,
"content": "\n ## The Resurgence of Brutalist Architecture\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### I prefer drawing to talking. Drawing is faster, and leaves less room for lies.\n > \n > — Le Corbusier\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Bold Statements\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Concrete Elegance\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Design"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/04/13/11/29/muffins-8693748_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "Exploring the Future of Smart Homes",
"authorDetails": {
"author": "Jacob Wilson",
"date": new Date('2023-08-25')
},
"category": "architecture",
"readingTime": 8,
"content": "\n ## Exploring the Future of Smart Homes\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### I call architecture frozen music.\n > \n > — Johann Wolfgang von Goethe\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Integration of Technology\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Automated Living\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Technology"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2023/07/04/17/13/mallow-8106680_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "Architectural Marvels of the Ancient World",
"authorDetails": {
"author": "Sophie Roberts",
"date": new Date('2023-09-20')
},
"category": "architecture",
"readingTime": 7,
"content": "\n ## Architectural Marvels of the Ancient World\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture begins where engineering ends.\n > \n > — Walter Gropius\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Ancient Wonders\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Enduring Legacy\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"History"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/06/21/15/18/road-8844555_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "Architectural Marvels of the Ancient World",
"authorDetails": {
"author": "Sophie Roberts",
"date": new Date('2023-09-20')
},
"category": "architecture",
"readingTime": 7,
"content": "\n ## Architectural Marvels of the Ancient World\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture begins where engineering ends.\n > \n > — Walter Gropius\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Ancient Wonders\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Enduring Legacy\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"History"
],
"banner": {
"img": "https://cdn.pixabay.com/photo/2015/09/18/11/46/colosseum-948587_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "The Impact of Climate Change on Architecture",
"authorDetails": {
"author": "Nathan Davis",
"date": new Date('2023-10-15')
},
"category": "architecture",
"readingTime": 6,
"content": "\n ## The Impact of Climate Change on Architecture\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture is a visual art, and the buildings speak for themselves.\n > \n > — Julia Morgan\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Adapting to New Realities\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Sustainable Practices\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Sustainability"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2014/10/24/15/08/heaven-501350_640.jpg",
"width": 1920,
"height": 500
}
},
{
"blogTitle": "The Revival of Postmodern Architecture",
"authorDetails": {
"author": "Isabella Wright",
"date": new Date('2023-11-12')
},
"category": "architecture",
"readingTime": 7,
"content": "\n ## The Revival of Postmodern Architecture\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture is a visual art, and the buildings speak for themselves.\n > \n > — Julia Morgan\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Embracing Diversity in Design\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Bold and Playful Aesthetics\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Design"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/02/17/08/27/bird-8578905_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Influence of Nature in Contemporary Architecture",
"authorDetails": {
"author": "Lucas Taylor",
"date": new Date('2023-12-08')
},
"category": "architecture",
"readingTime": 6,
"content": "\n ## The Influence of Nature in Contemporary Architecture\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture is the learned game, correct and magnificent, of forms assembled in the light.\n > \n > — Le Corbusier\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Sustainable and Biophilic Design\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Harmony with the Environment\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Sustainability"
],
"banner": {
img: "https://cdn.pixabay.com/photo/2024/03/19/16/46/key-west-8643631_640.jpg",
"width": 1920,
"height": 500
}
},{
"blogTitle": "The Evolution of Skyscraper Design",
"authorDetails": {
"author": "Liam Johnson",
"date": new Date('2024-01-20')
},
"category": "architecture",
"readingTime": 8,
"content": "\n ## The Evolution of Skyscraper Design\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.\n\n > #### Architecture is a visual art, and the buildings speak for themselves.\n > \n > — Julia Morgan\n\n Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.\n\n ## Iconic Structures Across Time\n\n Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.\n\n 1. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.\n 2. Nulla porttitor accumsan tincidunt.\n 3. Cras ultricies ligula sed magna dictum porta.\n 4. Vivamus suscipit tortor eget felis porttitor volutpat.\n\n ## Engineering Marvels\n\n Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.",
"categories": [
"Architecture",
"Engineering"
],
"banner": {
"img": "https://cdn.pixabay.com/photo/2014/09/03/20/15/manhattan-435111_640.jpg",
"width": 1920,
"height": 500
}
},
]
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment