hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update folder structure for pages and some components

Browse Source
This commit is contained in:
Hazem Krimi
2021-12-17 16:59:45 +01:00
parent 66929e45d8
commit d17951b37e
36 changed files with 833 additions and 821 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/404.tsx
+1 -25
View File
@@ -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();
pages/about.tsx
+1 -61
View File
@@ -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 }>({
pages/blog/[slug].tsx
+2 -93
View File
@@ -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();
pages/blog/index.tsx
+1 -35
View File
@@ -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();
pages/index.tsx
+1 -48
View File
@@ -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 (
<>
pages/portfolio/[slug].tsx
+2 -81
View File
@@ -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();
pages/portfolio/index.tsx
+1 -35
View File
@@ -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();
pages/styles/404.tsx
+25
View File
@@ -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;
}
`;
pages/styles/about.tsx
+61
View File
@@ -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;
}
}
`;
pages/styles/blog/index.tsx
+35
View File
@@ -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;
}
`;
pages/styles/blog/slug.tsx
+90
View File
@@ -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;
}
}
`;
pages/styles/home.tsx
+48
View File
@@ -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;
}
`;
pages/styles/portfolio/index.tsx
+35
View File
@@ -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;
}
`;
pages/styles/portfolio/slug.tsx
+78
View File
@@ -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;
}
}
`;