Creation of the blog home page and its components

daviteixeira-dev · Sep 2, 2023 · 0b75388 · 0b75388 · vercel · Sep 2, 2023
1 parent 6a3c05f
commit 0b75388
Show file tree

Hide file tree

Showing 3 changed files with 161 additions and 5 deletions.
diff --git a/src/components/BlogSection/BlogSection.jsx b/src/components/BlogSection/BlogSection.jsx
@@ -64,7 +64,7 @@ const BlogSection = () => {
                 </Text>
 
                 <Link
-                    href="#"
+                    href="/blog"
                     width="13rem"
                     marginTop="2rem"
                     padding="1rem 2rem"

diff --git a/src/components/DesktopMenu/DesktopMenuBlog.jsx b/src/components/DesktopMenu/DesktopMenuBlog.jsx
@@ -0,0 +1,43 @@
+import { Flex, Link, ListItem, UnorderedList } from "@chakra-ui/react";
+
+import DesktopMenuLogo from "./DesktopMenuLogo";
+
+const DesktopMenuBlog = () => {
+    return (
+        <Flex 
+            as="nav"
+            zIndex={2}
+            width="100%" 
+            height="7rem" 
+            position="fixed"
+            alignItems="center" 
+            boxShadow="dark-lg"
+            backgroundColor="black"
+            padding={["1rem", "0 2rem"]}
+            justifyContent="space-between"
+        >
+            <DesktopMenuLogo 
+                avatarSize="md" 
+                fontSize={["1.2rem", "1.5rem"]} 
+                size={["100%", "100%", "100%", "20%"]} 
+            />
+
+            <UnorderedList listStyleType="none" display="flex" >
+                <ListItem>
+                    <Link 
+                        href="/" 
+                        padding=".5rem 1rem"
+                        borderRadius=".2rem"
+                        color="whiteAlpha.900" 
+                        backgroundColor="blue.500"
+                        style={{ textDecoration: "none" }}
+                    >
+                        Portfólio
+                    </Link>
+                </ListItem>
+            </UnorderedList>
+        </Flex>
+    );
+};
+
+export default DesktopMenuBlog;
diff --git a/src/pages/Blog.jsx b/src/pages/Blog.jsx
@@ -1,10 +1,123 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Flex, Text, Container, Heading, SimpleGrid } from "@chakra-ui/react";
+
+import DesktopMenuBlog from "../components/DesktopMenu/DesktopMenuBlog";
+
+import BlogCard from "../components/BlogSection/BlogCard";
+import Footer from "../components/Footer/Footer";
+
+const myBlogCards = [
+    {
+        cardLink: "#",
+        widthCard: "auto",
+        cardTag: "#Front-End",
+        cardDate: "27/08/2023",
+        cardNameAutor: "Davi Teixeira",
+        cardImage: "images/froned.jpg",
+        cardImageAutor: "/images/davi.jpg",
+        cardAlt: "Imagem de um programador.",
+        cardTitle: "Lorem, ipsum dolor sit amet consectetur adipisicing elit.",
+        cardText: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque non corporis illum provident nihil nam nobis, architecto libero tempora excepturi deserunt aliquid quisquam!"
+    },
+    {
+        cardLink: "#",
+        widthCard: "auto",
+        cardTag: "#Front-End",
+        cardDate: "27/08/2023",
+        cardNameAutor: "Davi Teixeira",
+        cardImage: "images/froned.jpg",
+        cardImageAutor: "/images/davi.jpg",
+        cardAlt: "Imagem de um programador.",
+        cardTitle: "Lorem, ipsum dolor sit amet consectetur adipisicing elit.",
+        cardText: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque non corporis illum provident nihil nam nobis, architecto libero tempora excepturi deserunt aliquid quisquam!"
+    },
+    {
+        cardLink: "#",
+        widthCard: "auto",
+        cardTag: "#Front-End",
+        cardDate: "27/08/2023",
+        cardNameAutor: "Davi Teixeira",
+        cardImage: "images/froned.jpg",
+        cardImageAutor: "/images/davi.jpg",
+        cardAlt: "Imagem de um programador.",
+        cardTitle: "Lorem, ipsum dolor sit amet consectetur adipisicing elit.",
+        cardText: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque non corporis illum provident nihil nam nobis, architecto libero tempora excepturi deserunt aliquid quisquam!"
+    },
+]
 
 const Blog = () => {
     return (
-        <Flex>
-            <Text>Hello World!</Text>
-        </Flex>
+        <Container fontFamily="Arial, Helvetica, sans-serif" maxW="full" padding="0">
+
+            <DesktopMenuBlog />
+
+            <Flex
+                padding="1rem"
+                alignItems="center" 
+                flexDirection="column" 
+                justifyContent="center"
+                backgroundColor="gray.900"
+                height={["100vh", "25rem"]} 
+            >
+                <Heading 
+                    as="h1"
+                    paddingTop="6rem"
+                    textAlign="center"
+                    marginBottom="1rem" 
+                    color="whiteAlpha.900"
+                    fontSize={["2.5rem", "3rem"]} 
+                >
+                    Davi Teixeira Blog
+                </Heading>
+
+                <Heading
+                    as="h2"
+                    paddingTop="1rem"
+                    textAlign="center"
+                    marginBottom="1rem" 
+                    color="whiteAlpha.900"
+                    fontSize={["1.5rem", "2.2rem"]} 
+                >
+                    Desenvolvendo a Web: Insights e Aprendizado
+                </Heading>
+
+                <Text 
+                    textAlign="center"
+                    color="whiteAlpha.900"
+                    fontSize={["1rem", "1.5rem"]} 
+                >
+                    Dicas, Tutoriais e Recursos para Desenvolvedores Web.
+                </Text>
+            </Flex>
+
+            <SimpleGrid 
+                as="section"
+                spacing={6}
+                padding="2rem" 
+                columns={[ 1 , 1, 2,  3 ]} 
+                backgroundColor="gray.800"
+                justifyContent="space-evenly"
+            >
+                {
+                    myBlogCards.map((item, index) => (
+                        <BlogCard 
+                            key={index}
+                            cardAlt={item.cardAlt}
+                            cardTag={item.cardTag}
+                            cardDate={item.cardDate}
+                            cardLink={item.cardLink}
+                            cardText={item.cardText}
+                            widthCard={item.widthCard}
+                            cardTitle={item.cardTitle}
+                            cardImage={item.cardImage}
+                            cardNameAutor={item.cardNameAutor}
+                            cardImageAutor={item.cardImageAutor}
+                        />
+                    ))
+                }
+            </SimpleGrid>
+
+            <Footer />
+        </Container>
     );
 };