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

SCSS variables + Fixed contact form

Browse Source
dependabot/npm_and_yarn/typescript-eslint/parser-4.33.0
Guusvanmeerveld 3 years ago
parent 8c309699cc
commit 827e3fa21e
14 changed files with 137 additions and 119 deletions
Show Stats Download Patch File Download Diff File

66
src/components/Contact.tsx
Unescape View File

@ -1,66 +0,0 @@
import ReCAPTCHA from 'react-google-recaptcha';
import { useTheme } from 'next-themes';
import { FC } from 'react';
import styles from './Contact.module.scss';
const formURL = 'https://forms.guusvanmeerveld.dev/portfolio';
const Contact: FC = () => {
const { theme } = useTheme();
return (
<div className={styles.contact}>
<div className="container">
<div className={styles.header} id="contact">
Contact
</div>
<form
encType="application/x-www-form-urlencoded"
action={formURL}
className="content"
method="POST"
name="contact"
>
<label htmlFor="email">Email</label>
<input
className={styles.input}
name="email"
type="email"
required
placeholder="Your email address"
id="email"
/>
<label htmlFor="type">Message type</label>
<select className={styles.input} name="type[]" id="type">
<option value="bug">Bug</option>
<option value="question">Question</option>
<option value="suggestion">Suggestion</option>
<option value="other">Other</option>
</select>
<label htmlFor="message">Message</label>
<textarea
className={styles.textarea}
required
name="message"
placeholder="Your message"
></textarea>
<ReCAPTCHA
theme={theme as 'light' | 'dark'}
sitekey={process.env.NEXT_PUBLIC_CAPTCHA_KEY}
/>
<button className={styles.submit + ' button'} type="submit">
Send
</button>
</form>
</div>
</div>
);
};
export default Contact;

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

@ -1,6 +1,8 @@
@import '../styles/colors.scss';
.body {
background-color: var(--secondary);
border-top: 0.1rem solid var(--borders);
background-color: $bg-secondary;
border-top: 0.1rem solid $borders;
padding: 3rem;
}
@ -20,9 +22,6 @@
}
.socialLink {
// color: var(--primary);
// cursor: pointer;
height: 3rem;
width: 3rem;
margin-right: 2rem;

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

@ -1,7 +1,9 @@
@import '../styles/colors.scss';
.bar {
z-index: 1;
background-color: var(--secondary);
border-bottom: 0.1rem solid var(--borders);
background-color: $bg-secondary;
border-bottom: 0.1rem solid $borders;
position: fixed;
top: 0;
@ -10,25 +12,32 @@
width: 100%;
}
.select {
border-color: var(--borders);
color: var(--foreground);
background-color: var(--secondary);
.content {
display: flex;
width: 7.5rem;
margin-bottom: 0;
align-items: center;
}
.header {
font-size: 1.75rem;
flex: 1;
// height: max-content;
font-size: 2rem;
}
.select {
width: 7.5rem;
margin-bottom: 0;
}
.items {
float: right;
display: flex;
justify-content: center;
align-items: center;
a {
font-size: 1.75rem;
margin-left: 1rem;
}
}
@ -36,8 +45,7 @@
.moon,
.sun {
font-size: 2rem;
margin-left: 1rem;
margin-top: 0.25rem;
margin: 0.25rem 1.5rem;
cursor: pointer;
}

42
src/components/Navbar.tsx
Unescape View File

@ -19,25 +19,27 @@ const Navbar: FC = () => {
return (
<nav className={styles.bar}>
<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>
<Link href="/contact">
<a>{t('nav.contact')}</a>
</Link>
<Link href="https://github.com/guusvanmeerveld/portfolio">
<a>{t('nav.github')}</a>
</Link>
<BiMoon onClick={switchTheme} className={styles.moon} />
<ImSun onClick={switchTheme} className={styles.sun} />
<div className={styles.content}>
<div className={styles.header}>Portfolio</div>
<div className={styles.items}>
<Link href="/#projects">
<a>{t('nav.projects')}</a>
</Link>
<Link href="/contact">
<a>{t('nav.contact')}</a>
</Link>
<Link href="https://github.com/guusvanmeerveld/portfolio">
<a>{t('nav.github')}</a>
</Link>
<BiMoon onClick={switchTheme} className={styles.moon} />
<ImSun onClick={switchTheme} className={styles.sun} />
<select className={styles.select}>
<option value="nl">NL</option>
<option value="en">EN</option>
</select>
</div>
</div>
</div>
</nav>
@ -47,8 +49,6 @@ const Navbar: FC = () => {
export const getStaticProps: GetStaticProps = async ({ locale }) => {
const { default: lngDict = {} } = await import(`../locales/${locale}.json`);
console.log(lngDict);
return {
props: { lngDict },
};

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

@ -35,7 +35,8 @@
@media only screen and (max-width: 600px) {
.cover,
.info {
.info,
.right {
width: 100%;
margin: 2rem 0;
text-align: center;

2
src/components/Project.tsx
Unescape View File

@ -27,7 +27,7 @@ const Project: FC<ProjectComponent> = ({ name, description, buttons, cover, righ
</div>
{cover ? (
<div className={styles.cover}>
<Image src={`/assets/images/${cover}`} width={200} height={200} alt="" />
<Image src={`/assets/images/${cover}`} width={200} height={200} alt={name} />
</div>
) : null}
</div>

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

@ -11,10 +11,10 @@
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid var(--foreground);
border: 8px solid $text;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: var(--foreground) transparent transparent transparent;
border-color: $text transparent transparent transparent;
&:nth-child(1) {
animation-delay: -0.45s;

5
src/pages/_app.tsx
Unescape View File

@ -6,12 +6,13 @@ import { useRouter } from 'next/router';
import type { AppProps } from 'next/app';
import 'milligram';
import '@styles/raleway.css';
import '@styles/roboto.css';
import '@styles/globals.scss';
function App({ Component, pageProps }: AppProps): JSX.Element {
const App = ({ Component, pageProps }: AppProps): JSX.Element => {
const router = useRouter();
const { lngDict, ...rest } = pageProps;
@ -22,6 +23,6 @@ function App({ Component, pageProps }: AppProps): JSX.Element {
</ThemeProvider>
</I18nProvider>
);
}
};
export default App;

0
src/components/Contact.module.scss → src/pages/contact.module.scss
Unescape View File

60
src/pages/contact.tsx
Unescape View File

@ -1,14 +1,70 @@
import { NextPage } from 'next';
import { useTheme } from 'next-themes';
import ReCAPTCHA from 'react-google-recaptcha';
import Page from '@components/Page';
import Layout from '@components/Layout';
import ContactForm from '@components/Contact';
import styles from './contact.module.scss';
const formURL = 'https://forms.guusvanmeerveld.dev/portfolio';
const Contact: NextPage = () => {
const { theme } = useTheme();
return (
<Page description="Contact me" title="Contact">
<Layout>
<ContactForm />
<div className={styles.contact}>
<div className="container">
<div className={styles.header} id="contact">
Contact
</div>
<form
encType="application/x-www-form-urlencoded"
action={formURL}
className="content"
method="POST"
name="contact"
>
<label htmlFor="email">Email</label>
<input
className={styles.input}
name="email"
type="email"
required
placeholder="Your email address"
id="email"
/>
<label htmlFor="type">Message type</label>
<select className={styles.input} name="type[]" id="type">
<option value="bug">Bug</option>
<option value="question">Question</option>
<option value="suggestion">Suggestion</option>
<option value="other">Other</option>
</select>
<label htmlFor="message">Message</label>
<textarea
className={styles.textarea}
required
name="message"
placeholder="Your message"
></textarea>
<ReCAPTCHA
theme={theme as 'light' | 'dark'}
sitekey={process.env.NEXT_PUBLIC_CAPTCHA_KEY}
/>
<button className={styles.submit + ' button'} type="submit">
Send
</button>
</form>
</div>
</div>
</Layout>
</Page>
);

5
src/styles/colors.scss
Unescape View File

@ -0,0 +1,5 @@
$primary: var(--primary);
$bg-primary: var(--background);
$bg-secondary: var(--secondary);
$borders: var(--borders);
$text: var(--text);

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

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

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

@ -2,6 +2,18 @@ input,
textarea,
select {
&:focus {
border-color: var(--primary);
border-color: $primary !important;
}
color: $text;
border-color: $borders !important;
font-family: 'Roboto';
font-size: 1.5rem;
}
select {
&:focus {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23388e3c" d="M0,0l6,8l6-8"/></svg>');
}
}

10
src/styles/globals.scss
Unescape View File

@ -1,9 +1,9 @@
:root {
--primary: #9ccc65;
--background: white;
--secondary: #f4f5f6;
--background: white;
--borders: #e4e4e4;
--foreground: #606c76;
--text: #606c76;
}
[data-theme='dark'] {
@ -12,12 +12,14 @@
}
--primary: #388e3c;
--background: #212123;
--secondary: #1c1c1c;
--background: #212123;
--borders: #3c3838;
--foreground: rgb(236, 235, 235);
--text: rgb(236, 235, 235);
}
@import './colors.scss';
@import './global/body.scss';
@import './global/link.scss';
@import './global/input.scss';

Write Preview
Loading…
Cancel
Save