diff --git a/next.config.js b/next.config.js index 3d5d040..2ae9c0a 100644 --- 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 index 42d4461..59cf324 100644 --- 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 ( <> + sandevistan diff --git a/pages/_document.page.js b/pages/_document.page.js index 8b7dc0d..d43c7f5 100644 --- 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 new file mode 100644 index 0000000..924cfba --- /dev/null +++ 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() + + 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() + + 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 new file mode 100644 index 0000000..fa738e4 --- /dev/null +++ b/pages/about/index.page.tsx @@ -0,0 +1,42 @@ +import Layout from '../../src/layout/index' +import * as S from './styles' + +const About = () => { + return ( + +
+

Sandevistan

+ About + +

+ 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. +

+ +

+ 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 "stop" 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. +

+ + GitHub repository + + +
+ + ) +} + +export default About diff --git a/pages/about/styles.ts b/pages/about/styles.ts new file mode 100644 index 0000000..adb83e8 --- /dev/null +++ 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 index 918fe89..3c7aa60 100644 --- 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 index dd263a4..7f87789 100644 --- a/src/layout/index.tsx +++ b/src/layout/index.tsx @@ -9,15 +9,13 @@ type LayoutProps = { children: ReactNode | ReactNode[] } -const Layout = ({ children }: LayoutProps) => { - return ( - -
- - {children} -