gabrielduete · gabrielduete · Nov 3, 2023 · Nov 1, 2023 · Nov 3, 2023
diff --git a/next.config.js b/next.config.js
@@ -5,6 +5,9 @@ const nextConfig = {
   compiler: {
     styledComponents: true,
   },
+  images: {
+    domains: ['cdn.discordapp.com'],
+  },
   pageExtensions: ['page.jsx', 'page.js', 'page.tsx', 'page.ts'],
 }
 

diff --git a/pages/_app.page.tsx b/pages/_app.page.tsx
@@ -2,10 +2,12 @@ import type { AppProps } from 'next/app'
 import Head from 'next/head'
 
 import GlobalStyle from '../src/styles/GlobalStyle'
+import TextsStyle from '../src/styles/TextsStyle'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
+      <TextsStyle />
       <GlobalStyle />
       <Head>
         <title>sandevistan</title>

diff --git a/pages/_document.page.js b/pages/_document.page.js
@@ -13,10 +13,14 @@ export default class MyDocument extends Document {
         })
 
       const initialProps = await Document.getInitialProps(ctx)
-
       return {
         ...initialProps,
-        styles: [initialProps.styles, sheet.getStyleElement()],
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
       }
     } finally {
       sheet.seal()

diff --git a/pages/about/about.spec.tsx b/pages/about/about.spec.tsx
@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react'
+
+import About from './index.page'
+
+describe('About page', () => {
+  it('should render the title, subtitle, and content', () => {
+    render(<About />)
+
+    expect(screen.getByText('Sandevistan')).toBeInTheDocument()
+    expect(
+      screen.getByText(/My Virtual Library of Software Engineering Studies./i)
+    ).toBeInTheDocument()
+  })
+
+  it('should render the GitHub repository link', () => {
+    render(<About />)
+
+    const linkElement = screen.getByText('GitHub repository')
+
+    expect(linkElement).toBeInTheDocument()
+    expect(linkElement).toHaveAttribute(
+      'href',
+      'https://github.com/gabrielduete/sandevistan'
+    )
+  })
+})
diff --git a/pages/about/index.page.tsx b/pages/about/index.page.tsx
@@ -0,0 +1,42 @@
+import Layout from '../../src/layout/index'
+import * as S from './styles'
+
+const About = () => {
+  return (
+    <Layout>
+      <section>
+        <h1>Sandevistan</h1>
+        <S.SubTitle>About</S.SubTitle>
+        <S.Content>
+          <p>
+            My Virtual Library of Software Engineering Studies. This project
+            aims to document all my studies that will be stored on this Notion
+            page. It will be automatically updated whenever I make any changes.
+          </p>
+          <S.Image
+            src='https://cdn.discordapp.com/attachments/778024116140769331/1169037507028066365/SandevistanApogee.webp?ex=6553f205&is=65417d05&hm=cc4b60e4129c26e12d1e2bbe59f163a06f04bfb44e0af0d14c15f44cd8e64e57&'
+            alt='Militech apogee Sandevistan'
+          />
+          <p>
+            The name of the project was inspired by the Sandevistan Operating
+            System implant from the Cyberpunk 2077 game. It was my favorite
+            implant during my gameplay. This implant can &quot;stop&quot; time
+            and make everything slow, except the user, which is somewhat similar
+            to this project, as if I stopped time to go back and review
+            something I studied and left documented. I was out of ideas for what
+            name to put, and this came to mind.
+          </p>
+          <a
+            href='https://github.com/gabrielduete/sandevistan'
+            target='_blank'
+            rel='noreferrer'
+          >
+            GitHub repository
+          </a>
+        </S.Content>
+      </section>
+    </Layout>
+  )
+}
+
+export default About
diff --git a/pages/about/styles.ts b/pages/about/styles.ts
@@ -0,0 +1,16 @@
+import styled from 'styled-components'
+
+export const SubTitle = styled.h2`
+  font-size: 34px;
+  font-weight: 100;
+`
+
+export const Content = styled.div`
+  margin-top: var(--spacing-basic);
+  display: flex;
+  flex-direction: column;
+`
+
+export const Image = styled.img`
+  align-self: center;
+`
diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts
@@ -11,6 +11,10 @@ export const Header = styled.header`
   height: 60px;
   background-color: var(--green);
   padding-left: var(--spacing-basic);
+
+  position: fixed;
+  top: 0;
+  left: 0;
 `
 
 export const Link = styled.a<{ isPath: boolean }>`

diff --git a/src/layout/index.tsx b/src/layout/index.tsx
@@ -9,15 +9,13 @@ type LayoutProps = {
   children: ReactNode | ReactNode[]
 }
 
-const Layout = ({ children }: LayoutProps) => {
-  return (
-    <S.Container>
-      <Header />
-      <NavBar />
-      <S.WrapperContent>{children}</S.WrapperContent>
-      <Footer />
-    </S.Container>
-  )
-}
+const Layout = ({ children }: LayoutProps) => (
+  <S.Container>
+    <Header />
+    <NavBar />
+    <S.WrapperContent>{children}</S.WrapperContent>
+    <Footer />
+  </S.Container>
+)
 
 export default Layout
diff --git a/src/layout/styles.ts b/src/layout/styles.ts
@@ -10,9 +10,8 @@ export const Container = styled.main`
 export const WrapperContent = styled.main`
   width: 100%;
   max-width: ${breakpoints.Desktop};
-  margin: 0 auto;
+  margin: 70px auto;
   word-wrap: break-word;
-  margin-bottom: 80px;
 
   @media (max-width: ${breakpoints.Tablet}) {
     padding: 0 var(--spacing-basic);

diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts
@@ -12,6 +12,10 @@ const GlobalStyle = createGlobalStyle`
 
   html{
     background-color: var(--green-dark);
+
+    ::-webkit-scrollbar {
+      display: none; 
+    }
   }
 
   :root{

diff --git a/src/styles/TextsStyle.ts b/src/styles/TextsStyle.ts
@@ -0,0 +1,27 @@
+import { createGlobalStyle } from 'styled-components'
+
+const TextsStyle = createGlobalStyle`
+  h1, h2, h3, h4, h5, h6 {
+    font-size: 64px;
+    letter-spacing: 10px;
+    font-weight: 700;
+  }
+
+  p{
+    font-size: 20px;
+    font-weight: 500;
+    margin: var(--spacing-basic) 0;
+  }
+
+  a{
+    color: var(--green-white);
+    text-decoration: none;
+    transition:  0.3s;
+  }
+
+  a:hover{
+    color: var(--white);
+  }
+`
+
+export default TextsStyle