feat: add glassmorphism effect, add new color palette

retr00exe · Sep 4, 2021 · 573dc87 · 573dc87
1 parent 90e2bf6
commit 573dc87
Show file tree

Hide file tree

Showing 13 changed files with 31 additions and 88 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,9 +1,4 @@
 {
 	"presets": ["next/babel"],
-	"plugins": [
-		[
-			"styled-components",
-			{ "ssr": true, "displayName": true, "preprocess": false }
-		]
-	]
+	"plugins": [["styled-components", { "ssr": true, "displayName": true, "preprocess": false }]]
 }
diff --git a/components/_layout/MainLayout.tsx b/components/_layout/MainLayout.tsx
@@ -13,23 +13,15 @@ interface Props {
 	navbar?: boolean;
 }
 
-const DynamicLayout = ({
-	children,
-	title,
-	post,
-	navbar,
-}: Props): JSX.Element => {
+const DynamicLayout = ({ children, title, post, navbar }: Props): JSX.Element => {
 	const [clearance, HeaderRef, FooterRef] = useClearance(0);
 
 	return (
 		<>
 			<Head>
 				{title && <title>{title} — Mekel Ilyasa</title>}
 				<meta property="og:type" content="article" />
-				<meta
-					property="og:title"
-					content={post ? post.title : 'Mekel Ilyasa Personal Blog'}
-				/>
+				<meta property="og:title" content={post ? post.title : 'Mekel Ilyasa Personal Blog'} />
 				<meta
 					property="og:image"
 					content={
@@ -40,17 +32,10 @@ const DynamicLayout = ({
 				/>
 				<meta
 					property="og:url"
-					content={
-						post
-							? `${process.env.HOSTNAME}/post/${post.slug}`
-							: `${process.env.HOSTNAME}`
-					}
+					content={post ? `${process.env.HOSTNAME}/post/${post.slug}` : `${process.env.HOSTNAME}`}
 				/>
 				<meta name="twitter:type" content="article" />
-				<meta
-					name="twitter:title"
-					content={post ? post.title : 'Mekel Ilyasa Personal Blog'}
-				/>
+				<meta name="twitter:title" content={post ? post.title : 'Mekel Ilyasa Personal Blog'} />
 				<meta
 					name="twitter:image"
 					content={
@@ -61,16 +46,10 @@ const DynamicLayout = ({
 				/>
 				<meta
 					name="twitter:url"
-					content={
-						post
-							? `${process.env.HOSTNAME}/post/${post.slug}`
-							: `${process.env.HOSTNAME}`
-					}
+					content={post ? `${process.env.HOSTNAME}/post/${post.slug}` : `${process.env.HOSTNAME}`}
 				/>
 			</Head>
-			<header ref={HeaderRef}>
-				{navbar ? <Navbar active title={post.title} /> : <Navbar />}
-			</header>
+			<header ref={HeaderRef}>{navbar ? <Navbar active title={post.title} /> : <Navbar />}</header>
 			<Main clearance={clearance} post={post}>
 				{children}
 			</Main>
@@ -88,8 +67,7 @@ interface MainProps {
 
 const Main = styled.main<MainProps>`
 	min-height: calc(100vh - ${({ clearance }) => clearance}px);
-	background-color: ${({ post }) =>
-		post ? 'var(--backgroundPost);' : 'var(--background)'};
+	background-color: ${({ post }) => (post ? 'var(--backgroundPost);' : 'var(--background)')};
 	transition-duration: 0.6s;
 	transition-timing-function: ease;
 `;

diff --git a/components/_shared/AuthorCard.tsx b/components/_shared/AuthorCard.tsx
@@ -10,22 +10,11 @@ interface Props {
 	readtime: string;
 }
 
-const AuthorCard: React.FC<Props> = ({
-	name,
-	image,
-	date,
-	readtime,
-}: Props): JSX.Element => {
+const AuthorCard: React.FC<Props> = ({ name, image, date, readtime }: Props): JSX.Element => {
 	return (
 		<AuthorCardWrapper>
 			<div className="content-header">
-				<Image
-					src={image}
-					alt={name}
-					width={50}
-					height={50}
-					className="profile-image"
-				/>
+				<Image src={image} alt={name} width={50} height={50} className="profile-image" />
 				<div className="content-profile">
 					<p id="author">{name}</p>
 					<p id="date">{formatDate(date)}</p>

diff --git a/components/contact/Contact.tsx b/components/contact/Contact.tsx
@@ -1,12 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { motion } from 'framer-motion';
-import {
-	FaGithub,
-	FaLinkedin,
-	FaInstagram,
-	FaFacebookSquare,
-} from 'react-icons/fa';
+import { FaGithub, FaLinkedin, FaInstagram, FaFacebookSquare } from 'react-icons/fa';
 import { fadeInUp, stagger } from '@core/utils/animate';
 
 const Contact: React.FC = () => {
@@ -21,9 +16,8 @@ const Contact: React.FC = () => {
 			<div className="header">
 				<motion.h1 variants={fadeInUp}>Contact Me</motion.h1>
 				<motion.p variants={fadeInUp}>
-					Hi there, you can reach me by follow my social media or email me at
-					[email protected]. I am quite active at Facebook and Instagram,
-					feel free to leave me a message :)
+					Hi there, you can reach me by follow my social media or email me at [email protected].
+					I am quite active at Facebook and Instagram, feel free to leave me a message :)
 				</motion.p>
 			</div>
 			<motion.div variants={fadeInUp} className="icons">

diff --git a/components/footer/index.tsx b/components/footer/index.tsx
@@ -31,7 +31,8 @@ const FooterWrapper = styled(motion.p)`
 	margin: 0 auto;
 	font-size: 0.75rem;
 	text-align: center;
-	background-color: var(--navColor);
+	color: var(--colorPrimary);
+	background-color: var(--footerColor);
 	transition-duration: 0.6s;
 	transition-timing-function: ease;
 	p {

diff --git a/components/navbar/index.tsx b/components/navbar/index.tsx
@@ -16,7 +16,7 @@ const Navbar: React.FC = (): JSX.Element => {
 			<div className="container">
 				<motion.span variants={fadeInDown} className="nav-logo">
 					<Link href="/">
-						<a>MKL.</a>
+						<a>MKL.dev</a>
 					</Link>
 				</motion.span>
 				<motion.ul variants={fadeInDown} className="link-container">
@@ -51,6 +51,7 @@ const NavbarItems = styled(motion.nav)`
 	transition-duration: 0.6s;
 	transition-timing-function: ease-in-out;
 	justify-content: space-between;
+	backdrop-filter: blur(20px);
 	.container {
 		height: 100%;
 		width: 100%;
@@ -86,6 +87,7 @@ const NavbarItems = styled(motion.nav)`
 		color: white;
 		padding: 0.35rem 0.5rem;
 		margin: 0 1rem 0 0;
+		font-family: Gotham;
 		&:hover {
 			background-color: #e200e2;
 			cursor: pointer;

diff --git a/components/post/ContentHeader.tsx b/components/post/ContentHeader.tsx
@@ -8,10 +8,7 @@ interface Props {
 	readtime: string;
 }
 
-const ContentHeader: React.FC<Props> = ({
-	post,
-	readtime,
-}: Props): JSX.Element => {
+const ContentHeader: React.FC<Props> = ({ post, readtime }: Props): JSX.Element => {
 	return (
 		<div className="header-container">
 			<motion.h1 variants={fadeInUp}>{post.title}</motion.h1>

diff --git a/components/post/elements/Anchor.tsx b/components/post/elements/Anchor.tsx
@@ -6,12 +6,7 @@ interface Props {
 
 const Anchor: React.FC<Props> = ({ href, children }: Props) => {
 	return (
-		<a
-			style={{ color: 'blue' }}
-			href={href}
-			target="_blank"
-			rel="noopener noreferrer"
-		>
+		<a style={{ color: 'blue' }} href={href} target="_blank" rel="noopener noreferrer">
 			{children}
 		</a>
 	);

diff --git a/core/hooks/useClearance.ts b/core/hooks/useClearance.ts
@@ -13,8 +13,7 @@ const useClearance = (initial: number): ReturnTuple => {
 	const FooterRef = useRef<HTMLElement>(null);
 
 	useEffect(() => {
-		const offset =
-			HeaderRef.current.offsetHeight + FooterRef.current.offsetHeight;
+		const offset = HeaderRef.current.offsetHeight + FooterRef.current.offsetHeight;
 		setClearance(offset);
 	}, [HeaderRef, FooterRef]);
 

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -44,8 +44,9 @@ const GlobalStyle = createGlobalStyle`
     --colorSecondary: rgba(55, 65, 81, 1);
     --colorTertiary: rgba(75, 85, 99, 1);
     --colorQuarternary: rgba(112, 112, 112, 1);
-    --navColor: #fff;
-    --navHoverColor: #673ab7;
+    --navColor: rgba(255, 255, 255, 0.8);
+    --footerColor: rgba(255, 255, 255, 1);
+    --navHoverColor: #e200e2;
     --linkColor:#0000cc;
     -quoteBackground: rgba(243, 244, 246, 1);
     --border: rgba(218,218,218,1)
@@ -58,7 +59,8 @@ const GlobalStyle = createGlobalStyle`
     --colorSecondary:rgba(229, 231, 235, 1);
     --colorTertiary: rgba(209, 213, 219, 1);
     --colorQuarternary: rgba(243, 244, 246, 1);
-    --navColor: #202020;
+    --navColor: rgba(32, 32, 32, 0.5);
+    --footerColor: rgba(32, 32, 32, 1);
     --navHoverColor: #e200e2;
     --linkColor:#e200e2;
     --quoteBackground: #3b3b3b;
@@ -76,7 +78,7 @@ const GlobalStyle = createGlobalStyle`
   }
 
   .article-image {
-		border-radius: 1rem;
+		border-radius: 1.25rem;
     object-fit: cover;
   }
 

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,11 +1,5 @@
 import React from 'react';
-import Document, {
-	Html,
-	Head,
-	Main,
-	NextScript,
-	DocumentContext,
-} from 'next/document';
+import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
 
 export default class MyDocument extends Document {
@@ -16,8 +10,7 @@ export default class MyDocument extends Document {
 		try {
 			ctx.renderPage = () =>
 				originalRenderPage({
-					enhanceApp: (App) => (props) =>
-						sheet.collectStyles(<App {...props} />),
+					enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
 				});
 
 			const initialProps = await Document.getInitialProps(ctx);

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 const Home: React.FC<Props> = ({ posts }: Props): JSX.Element => {
 	return (
-		<MainLayout title="Home">
+		<MainLayout title="Blog">
 			<Cards
 				as={motion.div}
 				exit={{ opacity: 0 }}

diff --git a/pages/sitemap.xml.tsx b/pages/sitemap.xml.tsx
@@ -7,9 +7,7 @@ interface Post {
 	date: Date;
 }
 
-const getSitemap: (posts: Post[]) => string = (
-	posts
-) => `<?xml version="1.0" encoding="utf-8"?>
+const getSitemap: (posts: Post[]) => string = (posts) => `<?xml version="1.0" encoding="utf-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>${process.env.NEXT_PUBLIC_HOSTNAME}</loc>