mirror of
https://github.com/hazemKrimi/personal-website.git
synced 2026-05-01 18:00:26 +00:00
Update folder structure for pages and some components
This commit is contained in:
Hazem Krimi
@@ -0,0 +1,33 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../../components/DarkMode';
|
||||
import { Props } from './types';
|
||||
import { Btn } from './styles';
|
||||
import Link from 'next/link';
|
||||
|
||||
const Button: FC<Props & { className?: string }> = ({
|
||||
variant = 'text',
|
||||
href,
|
||||
target,
|
||||
onClick,
|
||||
children,
|
||||
className
|
||||
}) => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
return (
|
||||
<Link href={href} passHref>
|
||||
<Btn
|
||||
as='a'
|
||||
target={target}
|
||||
variant={variant}
|
||||
dark={dark}
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</Btn>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -1,17 +1,7 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../components/DarkMode';
|
||||
import styled from 'styled-components';
|
||||
import Link from 'next/link';
|
||||
import { Props } from './types';
|
||||
|
||||
interface Props {
|
||||
variant?: 'outline' | 'text';
|
||||
href: string;
|
||||
target?: HTMLAnchorElement['target'];
|
||||
onClick?: () => void;
|
||||
dark?: boolean;
|
||||
}
|
||||
|
||||
const Btn = styled.button<Omit<Props, 'href'>>`
|
||||
export const Btn = styled.button<Omit<Props, 'href'>>`
|
||||
position: relative;
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
@@ -53,31 +43,3 @@ const Btn = styled.button<Omit<Props, 'href'>>`
|
||||
transform: scaleX(1);
|
||||
}
|
||||
`;
|
||||
|
||||
const Button: FC<Props & { className?: string }> = ({
|
||||
variant = 'text',
|
||||
href,
|
||||
target,
|
||||
onClick,
|
||||
children,
|
||||
className
|
||||
}) => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
return (
|
||||
<Link href={href} passHref>
|
||||
<Btn
|
||||
as='a'
|
||||
target={target}
|
||||
variant={variant}
|
||||
dark={dark}
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</Btn>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -0,0 +1,7 @@
|
||||
export type Props = {
|
||||
variant?: 'outline' | 'text';
|
||||
href: string;
|
||||
target?: HTMLAnchorElement['target'];
|
||||
onClick?: () => void;
|
||||
dark?: boolean;
|
||||
};
|
||||
@@ -1,102 +0,0 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../components/DarkMode';
|
||||
import styled from 'styled-components';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
tags?: string[];
|
||||
href: string;
|
||||
target?: HTMLAnchorElement['target'];
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 150px;
|
||||
align-items: stretch;
|
||||
transition: color 0ms ease-in-out;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
|
||||
&:hover {
|
||||
& > div {
|
||||
background: ${({ theme }) => theme.colors.blue};
|
||||
color: ${({ theme }) => theme.colors.dark.text};
|
||||
}
|
||||
|
||||
img {
|
||||
filter: ${({ image }) => (image ? 'grayscale(80%)' : 'none')};
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
padding: 1rem 0rem;
|
||||
background: var(--secondary-background);
|
||||
display: grid;
|
||||
row-gap: 0.5rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0.75rem 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
p,
|
||||
.tags-wrapper {
|
||||
padding: 0rem 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.tags-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const Card: FC<Props> = ({ title, description, image, tags, href, target, onClick }) => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
return (
|
||||
<Link href={href} passHref>
|
||||
<StyledCard as='a' target={target} dark={dark} onClick={onClick} image={!!image}>
|
||||
<div>
|
||||
<h3>{title}</h3>
|
||||
<p>{description}</p>
|
||||
{tags && (
|
||||
<div className='tags-wrapper'>
|
||||
{tags.map((tag, index) => (
|
||||
<span key={index}>#{tag} </span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{image ? (
|
||||
<Image src={image} width='100%' height='100%' layout='responsive' />
|
||||
) : (
|
||||
<Image src='/no-image.png' width='100%' height='100%' layout='responsive' />
|
||||
)}
|
||||
</StyledCard>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default Card;
|
||||
@@ -0,0 +1,44 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../../components/DarkMode';
|
||||
import { StyledCard } from './styles';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
tags?: string[];
|
||||
href: string;
|
||||
target?: HTMLAnchorElement['target'];
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const Card: FC<Props> = ({ title, description, image, tags, href, target, onClick }) => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
return (
|
||||
<Link href={href} passHref>
|
||||
<StyledCard as='a' target={target} dark={dark} onClick={onClick} image={!!image}>
|
||||
<div>
|
||||
<h3>{title}</h3>
|
||||
<p>{description}</p>
|
||||
{tags && (
|
||||
<div className='tags-wrapper'>
|
||||
{tags.map((tag, index) => (
|
||||
<span key={index}>#{tag} </span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{image ? (
|
||||
<Image src={image} width='100%' height='100%' layout='responsive' />
|
||||
) : (
|
||||
<Image src='/no-image.png' width='100%' height='100%' layout='responsive' />
|
||||
)}
|
||||
</StyledCard>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default Card;
|
||||
@@ -0,0 +1,59 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 150px;
|
||||
align-items: stretch;
|
||||
transition: color 0ms ease-in-out;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
|
||||
&:hover {
|
||||
& > div {
|
||||
background: ${({ theme }) => theme.colors.blue};
|
||||
color: ${({ theme }) => theme.colors.dark.text};
|
||||
}
|
||||
|
||||
img {
|
||||
filter: ${({ image }) => (image ? 'grayscale(80%)' : 'none')};
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
padding: 1rem 0rem;
|
||||
background: var(--secondary-background);
|
||||
display: grid;
|
||||
row-gap: 0.5rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0.75rem 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
p,
|
||||
.tags-wrapper {
|
||||
padding: 0rem 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.tags-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
`;
|
||||
@@ -1,30 +1,7 @@
|
||||
import { FC } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import Highlight, { defaultProps, Language } from 'prism-react-renderer';
|
||||
import theme from 'prism-react-renderer/themes/vsDark';
|
||||
|
||||
const Pre = styled.pre`
|
||||
text-align: left;
|
||||
margin: 1em 0;
|
||||
padding: 0.5em;
|
||||
overflow: scroll;
|
||||
`;
|
||||
|
||||
const Line = styled.div`
|
||||
display: table-row;
|
||||
`;
|
||||
|
||||
const LineNo = styled.span`
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
padding-right: 1em;
|
||||
user-select: none;
|
||||
opacity: 0.5;
|
||||
`;
|
||||
|
||||
const LineContent = styled.span`
|
||||
display: table-cell;
|
||||
`;
|
||||
import { Line, LineContent, LineNo, Pre } from './styles';
|
||||
|
||||
const CodeBlock: FC<{ className: string }> = ({ children, className }) => {
|
||||
const language = className.replace(/language-/, '') as Language;
|
||||
@@ -0,0 +1,24 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Pre = styled.pre`
|
||||
text-align: left;
|
||||
margin: 1em 0;
|
||||
padding: 0.5em;
|
||||
overflow: scroll;
|
||||
`;
|
||||
|
||||
export const Line = styled.div`
|
||||
display: table-row;
|
||||
`;
|
||||
|
||||
export const LineNo = styled.span`
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
padding-right: 1em;
|
||||
user-select: none;
|
||||
opacity: 0.5;
|
||||
`;
|
||||
|
||||
export const LineContent = styled.span`
|
||||
display: table-cell;
|
||||
`;
|
||||
@@ -1,47 +1,7 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../components/DarkMode';
|
||||
import styled from 'styled-components';
|
||||
import IconButton from '../components/IconButton';
|
||||
|
||||
const StyledFooter = styled.footer`
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
min-height: 100px;
|
||||
width: 85%;
|
||||
margin: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: 2rem;
|
||||
justify-content: flex-end;
|
||||
align-content: center;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 16px);
|
||||
column-gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
display: inline;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
`;
|
||||
import { DarkModeContext } from '../../components/DarkMode';
|
||||
import { StyledFooter } from './styles';
|
||||
import IconButton from '../../components/IconButton';
|
||||
|
||||
const Footer: FC = () => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
@@ -0,0 +1,41 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const StyledFooter = styled.footer`
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
min-height: 100px;
|
||||
width: 85%;
|
||||
margin: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: 2rem;
|
||||
justify-content: flex-end;
|
||||
align-content: center;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 16px);
|
||||
column-gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
display: inline;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
`;
|
||||
@@ -1,72 +0,0 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../components/DarkMode';
|
||||
import styled from 'styled-components';
|
||||
import Image from 'next/image';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
min-height: 45vh;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
align-items: center;
|
||||
height: auto;
|
||||
text-align: left;
|
||||
|
||||
@media (max-width: 425px) {
|
||||
min-height: 65vh;
|
||||
grid-template-columns: auto;
|
||||
|
||||
.illustration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: ${({ theme }) => theme.colors.blue};
|
||||
}
|
||||
`;
|
||||
|
||||
const Hero: FC = () => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<div className='intro'>
|
||||
<h2>Hi, I am Hazem</h2>
|
||||
<h2>I Like Building Things</h2>
|
||||
<h2 className='blue'>Software Developer</h2>
|
||||
<h2 className='blue'>Life Long Learner</h2>
|
||||
</div>
|
||||
<div className='illustration'>
|
||||
<Image
|
||||
src={dark ? '/dark-illustration.svg' : '/light-illustration.svg'}
|
||||
width='100%'
|
||||
height='100%'
|
||||
layout='responsive'
|
||||
/>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
@@ -0,0 +1,29 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../../components/DarkMode';
|
||||
import { Wrapper } from './styles';
|
||||
import Image from 'next/image';
|
||||
|
||||
const Hero: FC = () => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<div className='intro'>
|
||||
<h2>Hi, I am Hazem</h2>
|
||||
<h2>I Like Building Things</h2>
|
||||
<h2 className='blue'>Software Developer</h2>
|
||||
<h2 className='blue'>Life Long Learner</h2>
|
||||
</div>
|
||||
<div className='illustration'>
|
||||
<Image
|
||||
src={dark ? '/dark-illustration.svg' : '/light-illustration.svg'}
|
||||
width='100%'
|
||||
height='100%'
|
||||
layout='responsive'
|
||||
/>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
@@ -0,0 +1,44 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 45vh;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
align-items: center;
|
||||
height: auto;
|
||||
text-align: left;
|
||||
|
||||
@media (max-width: 425px) {
|
||||
min-height: 65vh;
|
||||
grid-template-columns: auto;
|
||||
|
||||
.illustration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: ${({ theme }) => theme.colors.blue};
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,39 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../../components/DarkMode';
|
||||
import { Props } from './types';
|
||||
import { Btn } from './styles';
|
||||
import Link from 'next/link';
|
||||
|
||||
const MDXButton: FC<Props & { className?: string }> = ({
|
||||
variant = 'text',
|
||||
type = 'button',
|
||||
link,
|
||||
target,
|
||||
children,
|
||||
disabled,
|
||||
className
|
||||
}) => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
return link ? (
|
||||
<Link href={link} passHref>
|
||||
<Btn
|
||||
as='a'
|
||||
target={target}
|
||||
variant={variant}
|
||||
type={type}
|
||||
dark={dark}
|
||||
disabled={disabled}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</Btn>
|
||||
</Link>
|
||||
) : (
|
||||
<Btn variant={variant} type={type} dark={dark} disabled={disabled} className={className}>
|
||||
{children}
|
||||
</Btn>
|
||||
);
|
||||
};
|
||||
|
||||
export default MDXButton;
|
||||
@@ -1,18 +1,7 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../components/DarkMode';
|
||||
import Link from 'next/link';
|
||||
import styled from 'styled-components';
|
||||
import { Props } from './types';
|
||||
|
||||
interface Props {
|
||||
variant?: 'outline' | 'text' | 'action';
|
||||
type?: 'button' | 'submit';
|
||||
link?: string;
|
||||
target?: HTMLAnchorElement['target'];
|
||||
dark?: boolean;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const Btn = styled.button<Props>`
|
||||
export const Btn = styled.button<Props>`
|
||||
cursor: pointer;
|
||||
display: ${({ variant }) =>
|
||||
['action', 'outline'].includes(variant as string) ? 'block' : 'inline'};
|
||||
@@ -46,37 +35,3 @@ const Btn = styled.button<Props>`
|
||||
['action', 'outline'].includes(variant as string) ? '.5rem .75rem' : '0rem'};
|
||||
}
|
||||
`;
|
||||
|
||||
const MDXButton: FC<Props & { className?: string }> = ({
|
||||
variant = 'text',
|
||||
type = 'button',
|
||||
link,
|
||||
target,
|
||||
children,
|
||||
disabled,
|
||||
className
|
||||
}) => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
return link ? (
|
||||
<Link href={link} passHref>
|
||||
<Btn
|
||||
as='a'
|
||||
target={target}
|
||||
variant={variant}
|
||||
type={type}
|
||||
dark={dark}
|
||||
disabled={disabled}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</Btn>
|
||||
</Link>
|
||||
) : (
|
||||
<Btn variant={variant} type={type} dark={dark} disabled={disabled} className={className}>
|
||||
{children}
|
||||
</Btn>
|
||||
);
|
||||
};
|
||||
|
||||
export default MDXButton;
|
||||
@@ -0,0 +1,8 @@
|
||||
export type Props = {
|
||||
variant?: 'outline' | 'text' | 'action';
|
||||
type?: 'button' | 'submit';
|
||||
link?: string;
|
||||
target?: HTMLAnchorElement['target'];
|
||||
dark?: boolean;
|
||||
disabled?: boolean;
|
||||
};
|
||||
@@ -1,53 +1,9 @@
|
||||
import { FC, useContext, useRef, useEffect } from 'react';
|
||||
import { DarkModeContext } from './DarkMode';
|
||||
import styled from 'styled-components';
|
||||
import IconButton from './IconButton';
|
||||
import Button from './Button';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
close: () => void;
|
||||
}
|
||||
|
||||
interface StyledProps {
|
||||
dark: boolean;
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
const Bar = styled.nav<StyledProps>`
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform-origin: right;
|
||||
transform: ${({ open }) => (open ? 'translateX(0%)' : 'translateX(100%)')};
|
||||
width: 80%;
|
||||
height: 100vh;
|
||||
background: var(--text);
|
||||
transition: transform 250ms ease-in-out;
|
||||
display: grid;
|
||||
grid-template-rows: 30% repeat(4, 50px);
|
||||
padding: 1rem 1rem 5rem 1rem;
|
||||
|
||||
@media (orientation: landscape) {
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
.close {
|
||||
justify-self: flex-end;
|
||||
align-self: flex-start;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mobile-button-wrapper {
|
||||
display: flex;
|
||||
margin: 0rem 1rem;
|
||||
|
||||
a {
|
||||
color: var(--text-inverted) !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
import { DarkModeContext } from '../DarkMode';
|
||||
import { Props } from './types';
|
||||
import { Bar } from './styles';
|
||||
import IconButton from '../IconButton';
|
||||
import Button from '../Button';
|
||||
|
||||
const MobileNav: FC<Props> = ({ open, close }) => {
|
||||
const { dark, toggle } = useContext(DarkModeContext);
|
||||
@@ -0,0 +1,37 @@
|
||||
import styled from 'styled-components';
|
||||
import { StyledProps } from './types';
|
||||
|
||||
export const Bar = styled.nav<StyledProps>`
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform-origin: right;
|
||||
transform: ${({ open }) => (open ? 'translateX(0%)' : 'translateX(100%)')};
|
||||
width: 80%;
|
||||
height: 100vh;
|
||||
background: var(--text);
|
||||
transition: transform 250ms ease-in-out;
|
||||
display: grid;
|
||||
grid-template-rows: 30% repeat(4, 50px);
|
||||
padding: 1rem 1rem 5rem 1rem;
|
||||
|
||||
@media (orientation: landscape) {
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
.close {
|
||||
justify-self: flex-end;
|
||||
align-self: flex-start;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mobile-button-wrapper {
|
||||
display: flex;
|
||||
margin: 0rem 1rem;
|
||||
|
||||
a {
|
||||
color: var(--text-inverted) !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,9 @@
|
||||
export type Props = {
|
||||
open: boolean;
|
||||
close: () => void;
|
||||
};
|
||||
|
||||
export type StyledProps = {
|
||||
dark: boolean;
|
||||
open: boolean;
|
||||
};
|
||||
@@ -1,69 +1,11 @@
|
||||
import { FC, useContext, useState } from 'react';
|
||||
import { DarkModeContext } from './DarkMode';
|
||||
import styled from 'styled-components';
|
||||
import { DarkModeContext } from '../DarkMode';
|
||||
import { Bar } from './styles';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import Button from './Button';
|
||||
import IconButton from './IconButton';
|
||||
import MobileNav from './MobileNav';
|
||||
|
||||
const Bar = styled.nav`
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
div,
|
||||
a.logo {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
column-gap: 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
a.logo {
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
grid-template-columns: repeat(5, auto);
|
||||
justify-content: flex-end;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-buttons {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
`;
|
||||
import Button from '../Button';
|
||||
import IconButton from '../IconButton';
|
||||
import MobileNav from '../MobileNav';
|
||||
|
||||
const Nav: FC = () => {
|
||||
const [mobileNavOpen, setMobileNavOpen] = useState<boolean>(false);
|
||||
@@ -0,0 +1,59 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Bar = styled.nav`
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
div,
|
||||
a.logo {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
column-gap: 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
a.logo {
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
grid-template-columns: repeat(5, auto);
|
||||
justify-content: flex-end;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-buttons {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -2,7 +2,7 @@ import { CodePen, Gist, YouTube, CodeSandbox, Vimeo, Tweet } from 'mdx-embed';
|
||||
import Image from 'next/image';
|
||||
import MDXButton from './MDXButton';
|
||||
|
||||
const All = {
|
||||
export default {
|
||||
Button: MDXButton,
|
||||
Image,
|
||||
CodePen,
|
||||
@@ -12,5 +12,3 @@ const All = {
|
||||
Tweet,
|
||||
YouTube
|
||||
};
|
||||
|
||||
export default All;
|
||||
+1
-25
@@ -1,32 +1,8 @@
|
||||
import { FC } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import styled from 'styled-components';
|
||||
import Head from 'next/head';
|
||||
import IconButton from '../components/IconButton';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
min-height: 65vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.back {
|
||||
cursor: pointer;
|
||||
color: #3f9aee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
}
|
||||
`;
|
||||
import { Wrapper } from './styles/404';
|
||||
|
||||
const NotFound: FC = () => {
|
||||
const router = useRouter();
|
||||
|
||||
+1
-61
@@ -2,71 +2,11 @@ import React, { FC, useContext, useState } from 'react';
|
||||
import { DarkModeContext } from '../components/DarkMode';
|
||||
import { useForm, ValidationError } from '@formspree/react';
|
||||
import Head from 'next/head';
|
||||
import styled from 'styled-components';
|
||||
import { Wrapper } from './styles/about';
|
||||
import Image from 'next/image';
|
||||
import Input from '../components/Input';
|
||||
import MDXButton from '../components/MDXButton';
|
||||
|
||||
const Wrapper = styled.div<{ dark: boolean }>`
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: 2rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0rem;
|
||||
grid-template-columns: auto;
|
||||
column-gap: 0rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.photo {
|
||||
order: initial;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.about,
|
||||
.contact {
|
||||
margin: 1rem 0rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #73d26b;
|
||||
align-self: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
row-gap: 1.5rem;
|
||||
|
||||
.error {
|
||||
color: #d75050;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const About: FC = () => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
const [form, setForm] = useState<{ name: string; email: string; message: string }>({
|
||||
|
||||
+2
-93
@@ -7,9 +7,9 @@ import { MDXEmbedProvider } from 'mdx-embed';
|
||||
import { GetStaticPaths, GetStaticProps } from 'next';
|
||||
import renderToString from 'next-mdx-remote/render-to-string';
|
||||
import hydrate from 'next-mdx-remote/hydrate';
|
||||
import styled from 'styled-components';
|
||||
import { Wrapper } from '../styles/blog/slug';
|
||||
import matter from 'gray-matter';
|
||||
import AllComponents from '../../components/All';
|
||||
import components from '../../components';
|
||||
import Head from 'next/head';
|
||||
import IconButton from '../../components/IconButton';
|
||||
import CodeBlock from '../../components/CodeBlock';
|
||||
@@ -22,97 +22,6 @@ interface Props {
|
||||
text: string;
|
||||
}
|
||||
|
||||
const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
row-gap: 2rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: #3f9aee;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
p,
|
||||
.tags-wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.tags-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0.1rem;
|
||||
opacity: 0.3;
|
||||
margin: 1rem auto 0rem auto;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin: 1rem auto 0rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin: 0.5rem 0rem;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
p * {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const components = AllComponents;
|
||||
|
||||
const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
|
||||
const content = hydrate(source, { components });
|
||||
const router = useRouter();
|
||||
|
||||
+1
-35
@@ -1,7 +1,7 @@
|
||||
import React, { FC } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import { getBlogPosts } from '../../utils/blog';
|
||||
import styled from 'styled-components';
|
||||
import { Wrapper } from '../styles/blog';
|
||||
import Card from '../../components/Card';
|
||||
import IconButton from '../../components/IconButton';
|
||||
import Head from 'next/head';
|
||||
@@ -18,40 +18,6 @@ interface Props {
|
||||
}[];
|
||||
}
|
||||
|
||||
const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: #3f9aee;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
grid-column: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.articles-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
align-items: stretch;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const Index: FC<Props> = ({ blogPosts }) => {
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
+1
-48
@@ -2,7 +2,7 @@ import { FC } from 'react';
|
||||
import { getPortfolioProjects } from '../utils/portfolio';
|
||||
import { getBlogPosts } from '../utils/blog';
|
||||
import { GetStaticProps } from 'next';
|
||||
import styled from 'styled-components';
|
||||
import { Wrapper } from './styles/home';
|
||||
import Hero from '../components/Hero';
|
||||
import Button from '../components/Button';
|
||||
import Card from '../components/Card';
|
||||
@@ -26,53 +26,6 @@ interface Props {
|
||||
}[];
|
||||
}
|
||||
|
||||
const Wrapper = styled.div`
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
row-gap: 1rem;
|
||||
|
||||
h1 {
|
||||
display: inline;
|
||||
font-size: 1.7rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
grid-column: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: ${({ theme }) => theme.colors.blue};
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.portfolio,
|
||||
.blog {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
.portfolio {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.projects-wrapper,
|
||||
.articles-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
align-items: stretch;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const Index: FC<Props> = ({ blogPosts, portfolioProjects }) => {
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -7,9 +7,9 @@ import { MDXEmbedProvider } from 'mdx-embed';
|
||||
import { GetStaticPaths, GetStaticProps } from 'next';
|
||||
import renderToString from 'next-mdx-remote/render-to-string';
|
||||
import hydrate from 'next-mdx-remote/hydrate';
|
||||
import styled from 'styled-components';
|
||||
import matter from 'gray-matter';
|
||||
import AllComponents from '../../components/All';
|
||||
import components from '../../components';
|
||||
import { Wrapper } from '../styles/portfolio/slug';
|
||||
import Head from 'next/head';
|
||||
import IconButton from '../../components/IconButton';
|
||||
import CodeBlock from '../../components/CodeBlock';
|
||||
@@ -20,85 +20,6 @@ interface Props {
|
||||
frontMatter: any;
|
||||
}
|
||||
|
||||
const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
row-gap: 2rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: #3f9aee;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0.1rem;
|
||||
opacity: 0.3;
|
||||
margin: 1rem auto 0rem auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin: 0.5rem 0rem;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
p * {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const components = AllComponents;
|
||||
|
||||
const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
|
||||
const content = hydrate(source, { components });
|
||||
const router = useRouter();
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { FC } from 'react';
|
||||
import { getPortfolioProjects } from '../../utils/portfolio';
|
||||
import { useRouter } from 'next/router';
|
||||
import styled from 'styled-components';
|
||||
import { Wrapper } from '../styles/portfolio';
|
||||
import Card from '../../components/Card';
|
||||
import IconButton from '../../components/IconButton';
|
||||
import Head from 'next/head';
|
||||
@@ -17,40 +17,6 @@ interface Props {
|
||||
}[];
|
||||
}
|
||||
|
||||
const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: #3f9aee;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
grid-column: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.projects-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
align-items: stretch;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const Index: FC<Props> = ({ portfolioProjects }) => {
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
min-height: 65vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.back {
|
||||
cursor: pointer;
|
||||
color: #3f9aee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,61 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div<{ dark: boolean }>`
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: 2rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0rem;
|
||||
grid-template-columns: auto;
|
||||
column-gap: 0rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.photo {
|
||||
order: initial;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.about,
|
||||
.contact {
|
||||
margin: 1rem 0rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #73d26b;
|
||||
align-self: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
row-gap: 1.5rem;
|
||||
|
||||
.error {
|
||||
color: #d75050;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,35 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: #3f9aee;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
grid-column: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.articles-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
align-items: stretch;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,90 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
row-gap: 2rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: #3f9aee;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
p,
|
||||
.tags-wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.tags-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0.1rem;
|
||||
opacity: 0.3;
|
||||
margin: 1rem auto 0rem auto;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin: 1rem auto 0rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin: 0.5rem 0rem;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
p * {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,48 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
row-gap: 1rem;
|
||||
|
||||
h1 {
|
||||
display: inline;
|
||||
font-size: 1.7rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
grid-column: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: ${({ theme }) => theme.colors.blue};
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.portfolio,
|
||||
.blog {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
.portfolio {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.projects-wrapper,
|
||||
.articles-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
align-items: stretch;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,35 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: #3f9aee;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
grid-column: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.projects-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
align-items: stretch;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,78 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
row-gap: 2rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: #3f9aee;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0.1rem;
|
||||
opacity: 0.3;
|
||||
margin: 1rem auto 0rem auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin: 0.5rem 0rem;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
p * {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
Reference in New Issue
Block a user