connecting to prismic and creating about page

.slicemachine/libraries-state.json

@@ -0,0 +1,5 @@
+{
+  "slices": {
+    "components": {}
+  }
+}

package.json

@@ -12,13 +12,24 @@
     "check-format": "prettier --check .",
     "check-lint": "eslint . --ext ts --ext tsx --ext js",
     "format": "prettier --write .",
-    "test-all": "yarn check-format && yarn check-lint && yarn check-types && yarn build"
+    "test-all": "yarn check-format && yarn check-lint && yarn check-types && yarn build",
+    "slicemachine": "start-slicemachine"
   },
   "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.6.1",
+    "@mui/styled-engine-sc": "^5.6.1",
+    "@prismicio/client": "^6.4.2",
+    "@prismicio/helpers": "^2.2.1",
+    "@prismicio/next": "^0.1.2",
+    "@prismicio/react": "^2.2.0",
+    "@prismicio/slice-simulator-react": "^0.2.1",
     "next": "11.1.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "styled-components": "^5.3.1",
+    "slice-machine-ui": "^0.3.5",
+    "styled-components": "^5.3.5",
     "typed.js": "^2.0.12"
   },
   "devDependencies": {

prismicio.js

@@ -0,0 +1,29 @@
+import * as prismic from "@prismicio/client";
+import { enableAutoPreviews } from "@prismicio/next";
+import sm from "./sm.json";
+
+export const endpoint = sm.apiEndpoint;
+export const repositoryName = prismic.getRepositoryName(endpoint);
+
+export function linkResolver(doc) {
+  switch (doc.type) {
+    case "homepage":
+      return "/";
+    default:
+      return null;
+  }
+}
+
+export function createClient(config = {}) {
+  const client = prismic.createClient(endpoint, {
+    ...config,
+  });
+
+  enableAutoPreviews({
+    client,
+    previewData: config.previewData,
+    req: config.req,
+  });
+
+  return client;
+}

sm.json

@@ -0,0 +1,6 @@
+{
+  "_latest": "0.3.0",
+  "apiEndpoint": "https://arthursena.prismic.io/api/v2",
+  "libraries": ["@/slices"],
+  "framework": "previousNext"
+}

src/components/Header/styles.ts

@@ -7,13 +7,16 @@ export const Container = styled.div`
   display: flex;
   justify-content: center;
   align-self: center;
-
-  background-color: rgba(17, 17, 17, 0.8);
-  -webkit-backdrop-filter: blur(24px);
-  backdrop-filter: blur(24px);
   border-bottom: 1px solid #242424;
+  background-color: rgba(17, 17, 17, 1);
 
   position: fixed;
+
+  @media (min-width: 720px) {
+    background-color: rgba(17, 17, 17, 0.8);
+    -webkit-backdrop-filter: blur(24px);
+    backdrop-filter: blur(24px);
+  }
 `;
 
 export const ContentContainer = styled.header`
@@ -98,9 +101,9 @@ export const Navigation = styled.nav`
 
     flex-direction: column;
 
-    background-color: rgba(17, 17, 17, 0.8);
-    -webkit-backdrop-filter: blur(24px);
-    backdrop-filter: blur(24px);
+    background-color: rgba(17, 17, 17, 1);
+    /* -webkit-backdrop-filter: blur(24px); */
+    /* backdrop-filter: blur(24px); */
     border-bottom: 1px solid #242424;
     border-left: 1px solid #242424;
 

src/components/Splash/index.tsx

@@ -14,10 +14,10 @@ export function Splash() {
     const typed = new Typed(el?.current, {
       onComplete: () => setAnimation(true),
       strings: ["SenaArth", "Desenvolvedor", ""],
-      startDelay: 300,
-      typeSpeed: 50,
-      backSpeed: 50,
-      backDelay: 400,
+      startDelay: 0,
+      typeSpeed: 40,
+      backSpeed: 40,
+      backDelay: 40,
       loop: false,
       showCursor: false,
     });
@@ -51,14 +51,14 @@ export function Splash() {
         () => {
           setFade(true);
         },
-        lastSplash > 5 || lastSplash === null ? 2000 : 800
+        lastSplash > 5 || lastSplash === null ? 600 : 600
       );
 
       setTimeout(
         () => {
           setFinished(true);
         },
-        lastSplash > 5 || lastSplash === null ? 3000 : 1200
+        lastSplash > 5 || lastSplash === null ? 900 : 800
       );
 
       if (lastSplash > 5 || lastSplash === null) {

src/components/Splash/styles.ts

@@ -32,8 +32,8 @@ export const Container = styled.div`
   }
 
   span.zoom {
-    -webkit-animation: zoom 2s forwards;
-    animation: zoom 2s forwards;
+    -webkit-animation: zoom 0.6s forwards;
+    animation: zoom 0.6s forwards;
   }
 
   span.rotate {

src/pages/_app.tsx

@@ -1,5 +1,9 @@
 import React from "react";
 import { AppProps } from "next/app";
+import Link from "next/link";
+import { PrismicProvider } from "@prismicio/react";
+import { PrismicPreview } from "@prismicio/next";
+import { linkResolver, repositoryName } from "../../prismicio";
 
 import { Header } from "../components/Header";
 import { Splash } from "../components/Splash";
@@ -8,12 +12,21 @@ import GlobalStyle from "../styles/global";
 
 const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
   return (
-    <>
-      <Header />
-      <Component {...pageProps} />
-      <Splash />
-      <GlobalStyle />
-    </>
+    <PrismicProvider
+      linkResolver={linkResolver}
+      internalLinkComponent={({ href, children, ...props }) => (
+        <Link href={href}>
+          <a {...props}>{children}</a>
+        </Link>
+      )}
+    >
+      <PrismicPreview repositoryName={repositoryName}>
+        <Header />
+        <Component {...pageProps} />
+        <Splash />
+        <GlobalStyle />
+      </PrismicPreview>
+    </PrismicProvider>
   );
 };
 

src/pages/projetos/[slug].tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { createClient } from "../../../prismicio";
+
+export default function Post() {
+  return <></>;
+}
+
+export async function getServerSideProps({ previewData, params }) {
+  const client = createClient({ previewData });
+
+  const { slug } = params;
+  const project = await client.getByUID("project", slug, { ref: null });
+
+  return {
+    props: { project },
+  };
+}

src/pages/sobre.tsx

@@ -0,0 +1,156 @@
+import React from "react";
+import Head from "next/head";
+import Typed from "typed.js";
+import { PrismicRichText } from "@prismicio/react";
+import Tooltip from "@mui/material/Tooltip";
+
+import { createClient } from "../../prismicio";
+
+import { Avatar, Container, ToolsContainer, Work } from "../styles/Sobre";
+
+/**
+ * Sobre Page
+ * @return {JSX.Element}
+ */
+
+type WorkExperience = {
+  job: string;
+  date: string;
+  link: string;
+  company: string;
+};
+
+type Tool = {
+  name: string;
+  icon: string;
+};
+
+type Content = {
+  avatar: string;
+  title: string;
+  description: [];
+  typed: string[];
+  tools: Tool[];
+  work: WorkExperience[];
+};
+
+interface SobreProps {
+  content: Content;
+}
+
+export default function Sobre({ content }: SobreProps): JSX.Element {
+  const el = React.useRef(null);
+
+  React.useEffect(() => {
+    const typed = new Typed(el?.current, {
+      strings: content.typed || [],
+      typeSpeed: 50,
+      backSpeed: 50,
+      backDelay: 70,
+      loop: true,
+      showCursor: false,
+    });
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      typed.destroy();
+    };
+  }, []);
+
+  return (
+    <Container>
+      <Head>
+        <title>Sobre | Arthur Sena</title>
+      </Head>
+      <Avatar>
+        <img
+          src={content?.avatar}
+          alt="Foto de Arthur Sena"
+          className="avatar"
+        />
+        <div>
+          <h1>Arthur Sena</h1>
+          <h2>{content?.title}</h2>
+          <span ref={el} className="typed" />
+          <div className="social-media">
+            <a
+              href="https://github.com/senaarth"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img src="/images/github.png" alt="Logo Github" />
+            </a>
+            <a
+              href="https://linkedin.com/in/senaarth"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img src="/images/linkedin.png" alt="Logo Linkedin" />
+            </a>
+          </div>
+        </div>
+      </Avatar>
+      <PrismicRichText
+        field={content?.description}
+        components={{
+          paragraph: ({ children }) => <p className="desc">{children}</p>,
+        }}
+      />
+      <Work>
+        <h3>Experiência Profissional</h3>
+        {content?.work?.map((item) => {
+          return (
+            <div key={item.date}>
+              <h4>{item?.job}</h4>
+              <a href={item?.link} target="_blank" rel="noreferrer">
+                {item?.company}
+              </a>
+              <p>{item?.date}</p>
+            </div>
+          );
+        })}
+      </Work>
+      <h3>Principais Ferramentas</h3>
+      <ToolsContainer>
+        {content.tools?.map((item) => {
+          return (
+            <Tooltip title={item?.name} key={item?.name}>
+              <div>
+                <img src={item?.icon} alt={item?.name} />
+              </div>
+            </Tooltip>
+          );
+        })}
+      </ToolsContainer>
+    </Container>
+  );
+}
+
+export async function getServerSideProps({ previewData }) {
+  const client = createClient({ previewData });
+
+  const { data } = await client.getSingle("about");
+
+  const content = {
+    avatar: data?.avatar?.url,
+    description: data?.description,
+    title: data?.title,
+    typed: data?.tools_typed?.map((item) => item?.tool),
+    tools: data?.tools?.map((item) => {
+      return {
+        ...item,
+        icon: item?.icon.url,
+      };
+    }),
+    work: data?.work?.map((item) => {
+      return {
+        ...item,
+        link: item?.link.url,
+      };
+    }),
+  };
+
+  return {
+    props: { content },
+  };
+}