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 card and content pages layout

Browse Source
This commit is contained in:
Hazem Krimi
2021-09-04 23:05:30 +01:00
parent bed28f8248
commit 5d0f99d18d
10 changed files with 89 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_portfolio/sample.mdx
+1
View File
@@ -2,6 +2,7 @@
title: 'Sample Portfolio Project'
description: 'Sample description'
date: '2020-01-14'
image: 'https://res.cloudinary.com/dun9hhyz1/image/upload/v1630772436/personal-website/portfolio/sample_jpdjsw.jpg'
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dignissim orci, a aliquet leo vehicula in. Proin accumsan, justo luctus tristique ornare, tortor eros sodales arcu, quis maximus nunc tellus eu erat. Proin nisl lorem, congue at dignissim tempor, condimentum nec augue. Duis vulputate, metus eu luctus facilisis, elit mauris cursus felis, ullamcorper tempor diam est vel felis. Sed scelerisque, risus quis semper consectetur, eros lectus ornare turpis, et accumsan turpis nisi et erat. Donec sit amet elementum nunc. Nam eget dolor quis dolor rhoncus molestie id ut nisi. Vivamus suscipit ligula in sem tempor, sit amet lacinia augue luctus. Ut quis urna varius, volutpat sem eget, tincidunt augue. Duis porta dui nec sem tincidunt, ac porttitor magna molestie. Pellentesque massa ligula, malesuada ut urna nec, blandit volutpat libero. Cras sed laoreet massa.
components/Card.tsx
+27 -17
View File
@@ -11,29 +11,35 @@ interface Props {
onClick?: () => void;
}
const StyledCard = styled.div<{ dark: boolean }>`
const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
cursor: pointer;
padding: 1rem 0rem;
width: 100%;
display: grid;
align-items: center;
background: ${({ dark, theme }) => (dark ? '#2f2f2f' : theme.colors.dark.text)};
grid-template-columns: auto 150px;
align-items: stretch;
box-shadow: ${({ dark }) => !dark && `1px 1px 10px 0px rgba(0, 0, 0, 0.15)`};
transition: box-shadow 250ms ease-in-out, color 0ms ease-in-out;
@media (max-width: 768px) {
padding: 0.5rem 0rem;
}
&:hover {
background: #1573ca;
color: ${({ theme }) => theme.colors.dark.text};
box-shadow: ${({ dark }) => !dark && '5px 2px 26px 6px rgba(21, 115, 202, 0.30)'};
& > div {
background: #1573ca;
color: ${({ theme }) => theme.colors.dark.text};
}
img {
filter: ${({ image }) => (image ? 'grayscale(80%)' : 'none')};
}
}
div {
& > div {
padding: 1rem 0rem;
background: ${({ dark, theme }) => (dark ? '#2f2f2f' : theme.colors.dark.text)};
display: grid;
row-gap: 0.5rem;
@media (max-width: 768px) {
padding: 0.75rem 0rem;
}
}
h3,
@@ -66,19 +72,23 @@ const Card: FC<Props> = ({ title, description, image, tags, onClick }) => {
const { dark } = useContext(DarkModeContext);
return (
<StyledCard dark={dark} onClick={onClick}>
<StyledCard dark={dark} onClick={onClick} image={!!image}>
<div>
<h3>{title}</h3>
{image && (
<Image src={image} className='image' width='auto' height='auto' layout='responsive' />
)}
<p>{description}</p>
{tags && (
<div className='tags-wrapper'>
{tags && tags.map((tag, index) => <span key={index}>#{tag}&nbsp;</span>)}
{tags.map((tag, index) => (
<span key={index}>#{tag}&nbsp;</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>
);
};
next.config.js
+5 -1
View File
@@ -1,6 +1,10 @@
const withMDX = require('@next/mdx')({
extension: /\.mdx?$/
});
module.exports = withMDX({
pageExtensions: ['ts', 'tsx', 'md', 'mdx']
pageExtensions: ['ts', 'tsx', 'md', 'mdx'],
images: {
domains: ['res.cloudinary.com']
}
});
pages/404.tsx
+2 -2
View File
@@ -56,9 +56,9 @@ const NotFound: FC = () => {
</Head>
<Wrapper>
<h1>404: This page could not be found</h1>
<div className='back' onClick={() => router.back()}>
<div className='back' onClick={() => router.push('/')}>
<IconButton icon='/icons/arrow-left.svg' />
<span>Go Back</span>
<span>Go Home</span>
</div>
</Wrapper>
</>
pages/blog/[slug].tsx
+24 -2
View File
@@ -41,6 +41,23 @@ const Wrapper = styled.div`
align-items: center;
}
.image {
height: 0;
width: 100%;
overflow: hidden;
padding-top: calc(591.44 / 1127.34 * 100%);
position: relative;
margin-bottom: 1rem;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
h1,
p,
.tags-wrapper {
@@ -145,6 +162,11 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
</Head>
<Wrapper>
<div className='meta'>
{frontMatter.image ? (
<div className='image'>
<img src={frontMatter.image} alt='portfolio project image' />
</div>
) : null}
<div className='back' onClick={() => router.back()}>
<IconButton icon='/icons/arrow-left.svg' />
<span>Back</span>
@@ -154,13 +176,13 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
<p>
By <b>{frontMatter.author}</b> on <b>{frontMatter.date}</b> ({stats.text})
</p>
{frontMatter.tags && (
{frontMatter.tags ? (
<div className='tags-wrapper'>
{frontMatter.tags.map((tag: string, index: number) => (
<span key={index}>#{tag}&nbsp;</span>
))}
</div>
)}
) : null}
<hr />
</div>
<MDXProvider components={{ code: CodeBlock }}>
pages/blog/index.tsx
+1
View File
@@ -11,6 +11,7 @@ interface Props {
title: string;
author: string;
description: string;
image?: string;
slug: string;
date: string;
tags?: string[];
pages/portfolio/[slug].tsx
+27 -4
View File
@@ -1,4 +1,4 @@
import { FC, useEffect } from 'react';
import { FC, useEffect, useRef } from 'react';
import { getPortfolioPorjectsSlugs, getPortfolioProjectdata } from '../../utils/portfolio';
import { useRouter } from 'next/router';
import { MdxRemote } from 'next-mdx-remote/types';
@@ -39,6 +39,23 @@ const Wrapper = styled.div`
align-items: center;
}
.image {
height: 0;
width: 100%;
overflow: hidden;
padding-top: calc(591.44 / 1127.34 * 100%);
position: relative;
margin-bottom: 1rem;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
h1,
p {
text-align: left;
@@ -88,6 +105,7 @@ const components = AllComponents;
const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
const content = hydrate(source, { components });
const router = useRouter();
const metaRef = useRef<HTMLDivElement>(null);
useEffect(() => {
window.scrollTo(0, 0);
@@ -125,20 +143,25 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
<title>{frontMatter.title} | Hazem Krimi</title>
</Head>
<Wrapper>
<div className='meta'>
<div className='meta' ref={metaRef}>
{frontMatter.image ? (
<div className='image'>
<img src={frontMatter.image} alt='portfolio project image' />
</div>
) : null}
<div className='back' onClick={() => router.back()}>
<IconButton icon='/icons/arrow-left.svg' />
<span>Back</span>
</div>
<h1>{frontMatter.title}</h1>
<p>{frontMatter.description}</p>
{frontMatter.tags && (
{frontMatter.tags ? (
<div className='tags-wrapper'>
{frontMatter.tags.map((tag: string, index: number) => (
<span key={index}>#{tag}&nbsp;</span>
))}
</div>
)}
) : null}
<hr />
</div>
<MDXProvider components={{ code: CodeBlock }}>
pages/portfolio/index.tsx
+1
View File
@@ -10,6 +10,7 @@ interface Props {
portfolioProjects: {
title: string;
description: string;
image?: string;
slug: string;
date: string;
tags?: string[];
public/no-image.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

utils/blog.ts
+1
View File
@@ -15,6 +15,7 @@ export const getBlogPosts = () => {
const { data } = matter(fileContents);
const options = { month: 'long', day: 'numeric', year: 'numeric' };
// @ts-ignore
const formattedDate = new Date(data.date).toLocaleDateString('en-IN', options);
const frontmatter = {