Guusvanmeerveld
/
Portfolio
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Major improvements to SCSS code

Browse Source
dependabot/npm_and_yarn/typescript-eslint/parser-4.33.0
Guusvanmeerveld 3 years ago
parent 5a56643ead
commit 8c309699cc
21 changed files with 119 additions and 112 deletions
Show Stats Download Patch File Download Diff File

7
src/components/Contact.module.scss
Unescape View File

@ -5,13 +5,6 @@
padding-top: 4rem;
}
.input,
.textarea {
border-color: var(--borders);
color: var(--foreground);
background-color: var(--secondary);
}
.textarea {
resize: none;
height: 10rem;

9
src/components/Navbar.module.scss
Unescape View File

@ -10,6 +10,15 @@
width: 100%;
}
.select {
border-color: var(--borders);
color: var(--foreground);
background-color: var(--secondary);
width: 7.5rem;
margin-bottom: 0;
}
.header {
font-size: 1.75rem;
}

7
src/components/Navbar.tsx
Unescape View File

@ -21,6 +21,11 @@ const Navbar: FC = () => {
<div className="container">
<span className={styles.header}>Portfolio</span>
<div className={styles.items}>
<select id="" className={styles.select}>
<option value="nl">NL</option>
<option value="en">EN</option>
</select>
<Link href="/#projects">
<a>{t('nav.projects')}</a>
</Link>
@ -42,6 +47,8 @@ const Navbar: FC = () => {
export const getStaticProps: GetStaticProps = async ({ locale }) => {
const { default: lngDict = {} } = await import(`../locales/${locale}.json`);
console.log(lngDict);
return {
props: { lngDict },
};

21
src/components/PageBuilder.module.scss
Unescape View File

@ -0,0 +1,21 @@
.body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.header {
font-size: 5rem;
}
.subtitle {
font-size: 3rem;
}
.link {
margin-top: 1.5rem;
}

20
src/components/PageBuilder.tsx
Unescape View File

@ -0,0 +1,20 @@
import Link from 'next/link';
import { FC } from 'react';
import styles from './PageBuilder.module.scss';
const PageBuilder: FC<{ header: string; subtitle: string }> = ({ header, subtitle, children }) => (
<div className={styles.body}>
<div>
{children}
<div className={styles.header}>{header}</div>
<div className={styles.subtitle}>{subtitle}</div>
<Link href="/">
<a className={styles.link + ' button'}>Go back</a>
</Link>
</div>
</div>
);
export default PageBuilder;

4
src/components/Project.module.scss
Unescape View File

@ -4,8 +4,8 @@
padding: 5rem 0;
}
.title {
font-size: 4rem;
.description {
margin-bottom: 2rem;
}
.right {

7
src/components/Project.tsx
Unescape View File

@ -16,10 +16,9 @@ const Project: FC<ProjectComponent> = ({ name, description, buttons, cover, righ
<div className={styles.body}>
<div className={styles.content}>
<div className={right ? styles.right : styles.info}>
<div className={styles.title}>{name}</div>
{description}
<br />
<br />
<h2>{name}</h2>
<div className={styles.description}>{description}</div>
{buttons.map((button, i) => (
<Link href={button.link} key={i}>
<a className={styles.button + ' button'}>{button.text}</a>

16
src/pages/404.tsx
Unescape View File

@ -1,22 +1,16 @@
import Link from 'next/link';
import { FC } from 'react';
import Page from '@components/Page';
import Layout from '@components/Layout';
import PageBuilder from '@components/PageBuilder';
const NotFound: FC = () => (
<Page title="Page not found" description="This page either doesn't exist or has been deleted">
<Layout>
<div className="page">
<div>
<div className="header">Not found</div>
<div className="subtitle">This page either doesn&apos;t exist or has been deleted</div>
<Link href="/">
<a className="link button">Go back</a>
</Link>
</div>
</div>
<PageBuilder
header="Not found"
subtitle="This page either doesn't exist or has been deleted"
/>
</Layout>
</Page>
);

11
src/pages/Home.module.scss → src/pages/home.module.scss
Unescape View File

@ -12,23 +12,14 @@
.profile {
margin: auto;
margin-bottom: 3rem;
display: block;
}
.title {
font-size: 4rem;
display: block;
}
.subtitle {
margin-top: 2rem;
margin-bottom: 4rem;
display: block;
font-size: 2rem;
}
.header {
font-size: 4rem;
.projectsHeader {
text-align: center;
margin-bottom: 3rem;
}

16
src/pages/index.tsx
Unescape View File

@ -10,7 +10,7 @@ import Page from '@components/Page';
import Project from '@components/Project';
import projects from '@config/projects.json';
import styles from './Home.module.scss';
import styles from './home.module.scss';
const Home: NextPage = () => {
const { t } = useI18n();
@ -20,12 +20,12 @@ const Home: NextPage = () => {
<Layout>
<div className={styles.body}>
<div className={styles.content + ' container'}>
<span className={styles.profile + ' profile'}>
<div className={styles.profile + ' profile'}>
<Image src="/assets/images/profile.svg" width={100} height={100} alt="" />
</span>
</div>
<span className={styles.title}>Guus van Meerveld</span>
<span className={styles.subtitle}>{t('pages.home.subtitle')}</span>
<h1>Guus van Meerveld</h1>
<h4 className={styles.subtitle}>{t('pages.home.subtitle')}</h4>
<a href="#projects" className="button">
{t('pages.home.projects.button')}
@ -35,9 +35,9 @@ const Home: NextPage = () => {
<div className={styles.projects}>
<div className="container">
<div className={styles.header} id="projects">
Projects
</div>
<h1 className={styles.projectsHeader} id="projects">
{t('nav.projects')}
</h1>
{projects.map((project, i) => {
const props = { ...project, right: (i + 1) % 2 == 0 };

0
src/pages/Shifts.module.scss → src/pages/shifts.module.scss
Unescape View File

2
src/pages/shifts.tsx
Unescape View File

@ -14,7 +14,7 @@ import Page from '@components/Page';
import Shift from '@models/shifts';
import styles from './Shifts.module.scss';
import styles from './shifts.module.scss';
interface APIResponse {
updated: Date;

3
src/pages/thanks.module.scss
Unescape View File

@ -0,0 +1,3 @@
.icon {
font-size: 10rem;
}

17
src/pages/thanks.tsx
Unescape View File

@ -1,26 +1,21 @@
import { NextPage } from 'next';
import Link from 'next/link';
import Page from '@components/Page';
import Layout from '@components/Layout';
import PageBuilder from '@components/PageBuilder';
import styles from './thanks.module.scss';
const Thanks: NextPage = () => (
<Page title="Thanks!" description="Thanks for submitting your contact form!">
<Layout>
<div className="page">
<div>
<div className="icon">
<PageBuilder header="Thank you!" subtitle="Your submission is greatly appreciated!">
<div className={styles.icon}>
<span role="img" aria-label="heart emoji">
❤️
</span>
</div>
<div className="header">Thank you!</div>
<div className="subtitle">Your submission is greatly appreciated!</div>
<Link href="/">
<a className="link button">Go back</a>
</Link>
</div>
</div>
</PageBuilder>
</Layout>
</Page>
);

7
src/styles/global/body.scss
Unescape View File

@ -0,0 +1,7 @@
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: 'Raleway';
}

4
src/styles/global/button.scss
Unescape View File

@ -0,0 +1,4 @@
.button {
background-color: var(--primary);
border-color: var(--primary);
}

7
src/styles/global/input.scss
Unescape View File

@ -0,0 +1,7 @@
input,
textarea,
select {
&:focus {
border-color: var(--primary);
}
}

3
src/styles/global/link.scss
Unescape View File

@ -0,0 +1,3 @@
a {
color: var(--primary);
}

4
src/styles/global/table.scss
Unescape View File

@ -0,0 +1,4 @@
td,
th {
border-color: var(--borders);
}

35
src/styles/globals.scss
Unescape View File

@ -16,35 +16,10 @@
--secondary: #1c1c1c;
--borders: #3c3838;
--foreground: rgb(236, 235, 235);
td,
th {
border-color: var(--borders);
}
}
body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: 'Raleway';
}
a {
color: var(--primary);
}
.button {
background-color: var(--primary);
border-color: var(--primary);
}
input:focus,
textarea:focus,
select:focus,
input[type='email']:focus {
border-color: var(--primary);
}
@import 'page.scss';
@import './global/body.scss';
@import './global/link.scss';
@import './global/input.scss';
@import './global/table.scss';
@import './global/button.scss';

25
src/styles/page.scss
Unescape View File

@ -1,25 +0,0 @@
.page {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
.icon {
font-size: 10rem;
}
.header {
font-size: 5rem;
}
.subtitle {
font-size: 3rem;
}
.link {
margin-top: 1.5rem;
}
}
Write Preview
Loading…
Cancel
Save