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

Moved to Next.js css modules

Browse Source
dependabot/npm_and_yarn/typescript-eslint/parser-4.33.0
Guusvanmeerveld 3 years ago
parent 250cae301e
commit 90c2d3161d
20 changed files with 264 additions and 260 deletions
Show Stats Download Patch File Download Diff File

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

@ -0,0 +1,28 @@
.header {
font-size: 4rem;
text-align: center;
margin-bottom: 3rem;
padding-top: 4rem;
}
.input,
.textarea {
border-color: var(--borders);
color: var(--foreground);
background-color: var(--secondary);
}
.textarea {
resize: none;
height: 10rem;
}
.submit {
margin-top: 1.5rem;
}
.contact {
height: 100vh;
padding-top: 10rem;
}

26
src/components/Contact.tsx
Unescape View File

@ -3,15 +3,17 @@ 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="contact">
<div className={styles.contact}>
<div className="container">
<div className="header" id="contact">
<div className={styles.header} id="contact">
Contact
</div>
<form
@ -22,10 +24,17 @@ const Contact: FC = () => {
name="contact"
>
<label htmlFor="email">Email</label>
<input name="email" type="email" required placeholder="Your email address" id="email" />
<input
className={styles.input}
name="email"
type="email"
required
placeholder="Your email address"
id="email"
/>
<label htmlFor="type">Message type</label>
<select name="type[]" id="type">
<select className={styles.input} name="type[]" id="type">
<option value="bug">Bug</option>
<option value="question">Question</option>
<option value="suggestion">Suggestion</option>
@ -33,14 +42,19 @@ const Contact: FC = () => {
</select>
<label htmlFor="message">Message</label>
<textarea required name="message" placeholder="Your message" id="message"></textarea>
<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="button submit" type="submit">
<button className={styles.submit + ' button'} type="submit">
Send
</button>
</form>

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

@ -0,0 +1,31 @@
.body {
background-color: var(--secondary);
border-top: 0.1rem solid var(--borders);
padding: 3rem;
}
.profile {
width: 5rem;
height: 5rem;
}
.branding {
display: inline-block;
font-size: 2rem;
margin-left: 1rem;
vertical-align: top;
}
.socials {
margin-left: 4rem;
display: inline-block;
height: 100%;
padding: 1rem 0;
}
.socialLink {
height: 3rem;
width: 3rem;
margin-right: 2rem;
}

18
src/components/Footer.tsx
Unescape View File

@ -2,36 +2,38 @@ import { FaTwitter, FaYoutube, FaCoffee, FaGithub } from 'react-icons/fa';
import { FC } from 'react';
import styles from './Footer.module.scss';
const Footer: FC = () => {
return (
<footer className="footer">
<footer className={styles.body}>
<div className="container">
<img
src="/assets/images/profile.svg"
width="100%"
height="100%"
alt=""
className="profile"
className={styles.profile + ' profile'}
/>
<div className="branding">
<div className={styles.branding}>
Guus van Meerveld <br />
&#169; 2021
</div>
<div className="socials">
<div className={styles.socials}>
<a href="https://twitter.com/GuusvanMeerveld" aria-label="twitter link">
<FaTwitter className="img" />
<FaTwitter className={styles.socialLink} />
</a>
<a
href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ"
aria-label="youtube link"
>
<FaYoutube className="img" />
<FaYoutube className={styles.socialLink} />
</a>
<a href="https://ko-fi.com/guusvanmeerveld" aria-label="kofi link">
<FaCoffee className="img" />
<FaCoffee className={styles.socialLink} />
</a>
<a href="https://github.com/guusvanmeerveld" aria-label="github link">
<FaGithub className="img" />
<FaGithub className={styles.socialLink} />
</a>
</div>
</div>

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

@ -0,0 +1,47 @@
.bar {
z-index: 1;
background-color: var(--secondary);
border-bottom: 0.1rem solid var(--borders);
position: fixed;
top: 0;
padding: 1.5rem 0;
width: 100%;
}
.header {
font-size: 1.75rem;
}
.items {
float: right;
display: flex;
justify-content: center;
a {
margin-left: 1rem;
}
}
.moon,
.sun {
font-size: 2rem;
margin-left: 1rem;
margin-top: 0.25rem;
cursor: pointer;
}
.moon {
display: none;
}
[data-theme='dark'] {
.sun {
display: none;
}
.moon {
display: inline-block !important;
}
}

12
src/components/Navbar.tsx
Unescape View File

@ -4,21 +4,23 @@ import { ImSun } from 'react-icons/im';
import { FC } from 'react';
import styles from './Navbar.module.scss';
const Navbar: FC = () => {
const { theme, setTheme } = useTheme();
const switchTheme = (): void => setTheme(theme == 'dark' ? 'light' : 'dark');
return (
<nav className="navigation">
<nav className={styles.bar}>
<div className="container">
<span className="header">Portfolio</span>
<div className="items">
<span className={styles.header}>Portfolio</span>
<div className={styles.items}>
<a href="/#projects">Projects</a>
<a href="/contact">Contact</a>
<a href="https://github.com/guusvanmeerveld/portfolio">Source code</a>
<BiMoon onClick={switchTheme} className="dark-switch moon" />
<ImSun onClick={switchTheme} className="dark-switch sun" />
<BiMoon onClick={switchTheme} className={styles.moon} />
<ImSun onClick={switchTheme} className={styles.sun} />
</div>
</div>
</nav>

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

@ -0,0 +1,56 @@
.body {
border-top: 0.1rem solid var(--borders);
padding: 5rem 0;
}
.title {
font-size: 4rem;
}
.right {
text-align: right;
}
.content {
display: flex;
}
.info,
.right {
font-size: 2rem;
width: 50%;
}
.button:not(:last-child) {
margin-right: 1rem;
}
.cover {
width: 50%;
img {
display: block;
margin: auto;
height: 20rem;
width: 20rem;
}
}
@media only screen and (max-width: 600px) {
.cover,
.info {
width: 100%;
margin: 2rem 0;
text-align: center;
img {
height: 15rem;
width: 15rem;
}
}
.content {
display: block;
}
}

14
src/components/Project.tsx
Unescape View File

@ -2,27 +2,29 @@ import { FC } from 'react';
import ProjectType from '@models/project';
import styles from './Project.module.scss';
interface ProjectComponent extends ProjectType {
right: boolean;
}
const Project: FC<ProjectComponent> = ({ name, description, buttons, cover, right }) => {
return (
<div className="project">
<div className="content">
<div className={right ? 'info right' : 'info'}>
<div className="title">{name}</div>
<div className={styles.body}>
<div className={styles.content}>
<div className={right ? styles.right : styles.info}>
<div className={styles.title}>{name}</div>
{description}
<br />
<br />
{buttons.map((button, i) => (
<a href={button.link} className="button" key={i}>
<a href={button.link} className={styles.button + ' button'} key={i}>
{button.text}
</a>
))}
</div>
{cover ? (
<div className="cover">
<div className={styles.cover}>
<img src={`/assets/images/${cover}`} width="100%" height="100%" alt="" />
</div>
) : null}

40
src/pages/Home.module.scss
Unescape View File

@ -0,0 +1,40 @@
.body {
background: var(--secondary);
margin-top: 6rem;
text-align: center;
}
.content {
padding: 7rem 3rem;
}
.profile {
height: 10rem;
width: 10rem;
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;
text-align: center;
margin-bottom: 3rem;
}
.projects {
margin-top: 3rem;
}

2
src/pages/_app.tsx
Unescape View File

@ -5,7 +5,7 @@ import type { AppProps } from 'next/app';
import 'milligram';
import '@styles/raleway.css';
import '@styles/sass/index.scss';
import '@styles/globals.scss';
function App({ Component, pageProps }: AppProps): JSX.Element {
return (

4
src/pages/contact.tsx
Unescape View File

@ -8,9 +8,7 @@ const Contact: NextPage = () => {
return (
<Page description="Contact me" title="Contact">
<Layout>
<div className="contact-page">
<ContactForm />
</div>
<ContactForm />
</Layout>
</Page>
);

16
src/pages/index.tsx
Unescape View File

@ -6,17 +6,19 @@ import Page from '@components/Page';
import Project from '@components/Project';
import projects from '@config/projects.json';
import styles from './Home.module.scss';
const Home: NextPage = () => (
<Page description="A simple portfolio website to display my projects." title="Home">
<Layout>
<div className="landing">
<div className="container">
<span className="profile">
<div className={styles.body}>
<div className={styles.content + ' container'}>
<span className={styles.profile + ' profile'}>
<img src="/assets/images/profile.svg" width="100%" height="100%" alt="" />
</span>
<span className="title">Guus van Meerveld</span>
<span className="subtitle">
<span className={styles.title}>Guus van Meerveld</span>
<span className={styles.subtitle}>
TypeScript / Dart developer, <br />
currently working on Argo.
</span>
@ -27,9 +29,9 @@ const Home: NextPage = () => (
</div>
</div>
<div className="projects">
<div className={styles.projects}>
<div className="container">
<div className="header" id="projects">
<div className={styles.header} id="projects">
Projects
</div>

15
src/styles/sass/index.scss → src/styles/globals.scss
Unescape View File

@ -1,8 +1,8 @@
:root {
--primary: #9a36d8;
--background: white;
--secondary: #f4f5f6;
--borders: #e4e4e4;
--links: #9a36d8;
--foreground: #606c76;
}
@ -11,8 +11,8 @@
filter: invert(1);
}
--primary: #00b8d4;
--background: #212123;
--links: #c181e8;
--secondary: #1c1c1c;
--borders: #3c3838;
--foreground: rgb(236, 235, 235);
@ -22,17 +22,12 @@ body {
margin: 0;
background-color: var(--background);
color: var(--foreground);
font-family: 'Raleway';
}
a {
color: var(--links);
color: var(--primary);
}
@import 'nav.scss';
@import 'landing.scss';
@import 'project.scss';
@import 'contact.scss';
@import 'footer.scss';
@import 'upload.scss';
@import 'page.scss';

3
src/styles/sass/page.scss → src/styles/page.scss
Unescape View File

@ -1,7 +1,6 @@
.page {
font-family: 'Raleway';
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;

34
src/styles/sass/contact.scss
Unescape View File

@ -1,34 +0,0 @@
.contact {
.header {
font-size: 4rem;
text-align: center;
margin-bottom: 3rem;
// border-top: 0.1rem solid var(--borders);
padding-top: 4rem;
}
input,
textarea,
select {
border-color: var(--borders);
color: var(--foreground);
background-color: var(--secondary);
}
.submit {
margin-top: 1.5rem;
}
font-family: 'Raleway';
#message {
resize: none;
height: 10rem;
}
}
.contact-page {
height: 100vh;
padding-top: 10rem;
}

33
src/styles/sass/footer.scss
Unescape View File

@ -1,33 +0,0 @@
.footer {
background-color: var(--secondary);
border-top: 0.1rem solid var(--borders);
padding: 3rem;
font-family: 'Raleway';
.profile {
width: 5rem;
height: 5rem;
}
.branding {
display: inline-block;
font-size: 2rem;
margin-left: 1rem;
vertical-align: top;
}
.socials {
margin-left: 4rem;
display: inline-block;
height: 100%;
padding: 1rem 0;
.img {
height: 3rem;
width: 3rem;
margin-right: 2rem;
}
}
}

31
src/styles/sass/landing.scss
Unescape View File

@ -1,31 +0,0 @@
.landing {
background: var(--secondary);
margin-top: 6rem;
.container {
padding: 7rem 3rem;
}
.profile {
height: 10rem;
width: 10rem;
margin: auto;
margin-bottom: 3rem;
display: block;
}
text-align: center;
font-family: 'Raleway';
.title {
font-size: 4rem;
display: block;
}
.subtitle {
margin-top: 2rem;
margin-bottom: 4rem;
display: block;
font-size: 2rem;
}
}

47
src/styles/sass/nav.scss
Unescape View File

@ -1,47 +0,0 @@
.navigation {
z-index: 1;
background-color: var(--secondary);
border-bottom: 0.1rem solid var(--borders);
position: fixed;
top: 0;
font-family: 'Raleway';
padding: 1.5rem 0;
width: 100%;
.header {
font-size: 1.75rem;
}
.items {
float: right;
display: flex;
justify-content: center;
.moon {
display: none;
}
.dark-switch {
font-size: 2rem;
margin-left: 1rem;
margin-top: 0.25rem;
cursor: pointer;
}
a {
margin-left: 1rem;
}
}
}
[data-theme='dark'] {
.sun {
display: none;
}
.moon {
display: inline-block !important;
}
}

64
src/styles/sass/project.scss
Unescape View File

@ -1,64 +0,0 @@
.projects {
.header {
font-size: 4rem;
text-align: center;
margin-bottom: 3rem;
}
font-family: 'Raleway';
margin-top: 3rem;
.project {
border-top: 0.1rem solid var(--borders);
padding: 5rem 0;
.title {
font-size: 4rem;
}
.right {
text-align: right;
}
.content {
display: flex;
.info {
font-size: 2rem;
width: 50%;
.button:not(:last-child) {
margin-right: 1rem;
}
}
.cover {
width: 50%;
img {
display: block;
margin: auto;
height: 20rem;
width: 20rem;
}
}
@media only screen and (max-width: 600px) {
.cover,
.info {
width: 100%;
margin: 2rem 0;
text-align: center;
img {
height: 15rem;
width: 15rem;
}
}
display: block;
}
}
}
}

3
src/styles/sass/upload.scss
Unescape View File

@ -1,3 +0,0 @@
.upload {
padding-top: 6rem;
}
Write Preview
Loading…
Cancel
Save