From 3e4113a9d85dbb36d56960189f0cbbd75ccf8a07 Mon Sep 17 00:00:00 2001 From: kalecream Date: Wed, 30 Aug 2023 10:28:18 -0500 Subject: [PATCH 01/47] refactor!: remove Blog --- src/pages/blog.tsx | 114 --------------------------------- src/pages/index.tsx | 77 +--------------------- src/styles/articles.module.css | 23 ------- 3 files changed, 1 insertion(+), 213 deletions(-) delete mode 100644 src/pages/blog.tsx delete mode 100644 src/styles/articles.module.css diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx deleted file mode 100644 index 4488fc585..000000000 --- a/src/pages/blog.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { Page } from 'src/containers/layout'; -import { FullSection } from 'src/components/_basics/Basics'; -import { PostType } from 'src/types/post'; -import { getAllPosts } from '@utils/api'; -import { GetStaticProps } from 'next'; -import '../styles/articles.module.css'; -import styled from '@emotion/styled'; - -type BlogProps = { - posts: PostType[]; -}; - -const BlogContainer = styled.div` - display: flex; - flex-wrap: wrap; - gap: 1rem; - justify-content: center; -`; - -const FormerFeaturedArticle = styled.button` - display: flex; - width: 500px; - padding: 0.5rem; - border: var(--border); - background-color: var(--background); - border-radius: var(--border-radius-small); - - &:hover { - cursor: pointer; - background-color: var(--accent); - color: var(--background); - border: var(--border); - } - - & > img { - margin: auto 5px; - width: 100px; - object-fit: cover; - border-radius: var(--border-radius); - } - - & > .former-featured-article-content { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 1rem; - - & > .post-date { - font-size: 0.8rem; - font-weight: 600; - margin: 0.5rem 0; - color: var(--muted); - } - - & > h2 { - font-size: 1.3rem; - font-weight: 600; - margin: 0.5rem 0; - text-align: center; - } - - & > p { - font-size: 1rem; - text-align: justify; - opacity: 0.8; - } - } - - @media (max-width: 768px) { - width: 300px; - & > img { - display: none; - } - } -`; - -export const BlogPage = ({ posts }: BlogProps): JSX.Element => { - const GoToArticle = (slug: string) => { - console.log(slug); - }; - - return ( - - -

Blog

- - {posts.map((post) => { - return ( - GoToArticle} className="former-featured-article"> - -
-

{post.date}

-

{post.title}

-

{post.description}

-
- - ); - })} - - - - ); -}; - -export const getStaticProps: GetStaticProps = async () => { - const posts = getAllPosts(['date', 'description', 'slug', 'title', 'coverImage', 'tags']); - - return { - props: { posts } - }; -}; - -export default BlogPage; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 6090abaa9..25724212f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,86 +1,19 @@ - import Page from '@containers/layout/page'; -import Image from 'next/image'; - -import { format, parseISO } from 'date-fns'; -import { GetStaticProps } from 'next'; -import Link from 'next/link'; -import { getAllPosts } from '../utils/api'; -import { PostType } from '../types/post'; import Hero from '@components/hero/hero'; - import ProjectList from '@components/projects/projectsList'; import '../styles/animations.module.css'; import 'animate.css'; -type IndexProps = { - posts: PostType[]; -}; - - - - - const imageLoader = ({ src, width, quality }) => { return `https://sabrinamedwinter.com/${src}?w=${width}&q=${quality || 75}`; }; -export const Home = ({ posts }: IndexProps): JSX.Element => { +export const Home = (): JSX.Element => { return ( - - - {posts.length > 0 && ( -
-

Blog

-
- {posts.slice(0, 3).map((post) => ( -
- {post.coverImage && ( -
- src} - sizes="100vw" - style={{ width: 'auto', height: '400px' }} - src={post.coverImage} - alt={post.alt ? post.alt : ''} - className="blog--article__image" - /> -
- )} -
- {post.date && ( - {format(parseISO(post.date), 'MMMM dd, yyyy')} - )} - -

{post.title}

- - -

{post.description}

- - {post.tags && ( -
- {post.tags.slice(0, 2).map((tag) => ( - - {tag} - - ))} - {/* create tag pages */} -
- )} -
-
- ))} -
- {/* TODO: Add weeklogs and tutorials */} - {/* More Posts ⟶ */} -
- )}

Things I've Made

@@ -90,12 +23,4 @@ export const Home = ({ posts }: IndexProps): JSX.Element => { ); }; -export const getStaticProps: GetStaticProps = async () => { - const posts = getAllPosts(['date', 'description', 'slug', 'title', 'coverImage', 'tags']); - - return { - props: { posts } - }; -}; - export default Home; diff --git a/src/styles/articles.module.css b/src/styles/articles.module.css deleted file mode 100644 index df26e8859..000000000 --- a/src/styles/articles.module.css +++ /dev/null @@ -1,23 +0,0 @@ - -.former-featured-article { - width: 300px; - height: auto; - padding: 10px; - margin-bottom: 10px; - border: var(--border); - border-radius: var(--border-radius); - opacity: 0.5; -} - -.regular-article { - width: 300px; - height: auto; - padding: 10px; - margin-bottom: 10px; - border: var(--border); - border-radius: var(--border-radius); -} - -.blog-top { - width: 100%; -} From 6a74c0b29d60fba826349b7e9b8872a3d657d897 Mon Sep 17 00:00:00 2001 From: kalecream Date: Wed, 30 Aug 2023 11:11:31 -0500 Subject: [PATCH 02/47] chore: move heroName to hero folder --- src/components/hero/hero.module.scss | 61 +++++++++++ src/components/hero/hero.tsx | 55 ++++------ src/components/heroName/heroName.module.scss | 108 ------------------- src/components/heroName/heroName.tsx | 35 ------ 4 files changed, 80 insertions(+), 179 deletions(-) create mode 100644 src/components/hero/hero.module.scss delete mode 100644 src/components/heroName/heroName.module.scss delete mode 100644 src/components/heroName/heroName.tsx diff --git a/src/components/hero/hero.module.scss b/src/components/hero/hero.module.scss new file mode 100644 index 000000000..a68d51808 --- /dev/null +++ b/src/components/hero/hero.module.scss @@ -0,0 +1,61 @@ +.wrapper { + background: transparent; + // background-size: cover; + // background-position: center; + // background-repeat: no-repeat; + // background: url('../../..//public/img/project/009.webp'); +} + +.container { + display: flex; + flex-wrap: wrap; + place-items: center; + + @media (max-width: 1024px) { + flex-direction: column; + } + + @media (min-width: 1024px) { + margin: 0 auto; + flex-direction: row; + } +} + +.hero-half { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + padding: 2rem; + + @media (min-width: 1024px) { + width: 50%; + height: 100vh; + } +} + +@media (max-width: 1024px) { + .hero-half { + width: 100%; + } +} + +.glassmorphic { + flex: 1 1 15rem; + padding: var(--padding); + background: rgba(255, 255, 255, 0.2); + // box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-radius: var(--border-radius-small); + border: 1px solid rgba(255, 255, 255, 0.23); + /* From https://css.glass */ + background: rgba(255, 255, 255, 0.07); + border-radius: 16px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.23); +} diff --git a/src/components/hero/hero.tsx b/src/components/hero/hero.tsx index 76c9939ce..31bb5f609 100644 --- a/src/components/hero/hero.tsx +++ b/src/components/hero/hero.tsx @@ -11,25 +11,7 @@ import { ScrollDown } from '@components/scrollDown'; import { Model } from '@assets/models/me'; import { Suspense } from 'react'; - -const HeroContainer = styled.section` - width: 100%; - background-size: cover; - background-position: center; - background-repeat: no-repeat; - display: flex; - flex-wrap: wrap; - place-items: center; - - @media (max-width: 1024px) { - flex-direction: column; - } - - @media (min-width: 1024px) { - margin: 0 auto; - flex-direction: row; - } -`; +import styles from './hero.module.scss'; const HeroSection = styled.div` height: auto; @@ -129,28 +111,29 @@ export const Rotate3DModel = () => { const Hero = () => { return ( - <> - +
+
-
- {/*

Sabrina Medwinter

*/} - + {/* */} +
+

+ Web developer and 3D artist based in Kingston, Jamaica. +

+

+ {' '} + I strive to enhance my skills concurrently by creating functional resources to benefit the broader + community. An ongoing journey of exploration drives me to constantly embrace novel technologies and refine + my capabilities. +

-

- Web developer and 3D artist based in Kingston, Jamaica. -

-

- {' '} - I strive to enhance my skills concurrently by creating functional resources to benefit the broader - community. An ongoing journey of exploration drives me to constantly embrace novel technologies and refine - my capabilities. -

- + {/* */} @@ -180,9 +163,9 @@ const Hero = () => { - +
- +
); }; diff --git a/src/components/heroName/heroName.module.scss b/src/components/heroName/heroName.module.scss deleted file mode 100644 index 62cd7e5cd..000000000 --- a/src/components/heroName/heroName.module.scss +++ /dev/null @@ -1,108 +0,0 @@ -@use '@styles/variables.scss' as *; -@use '@styles/typography.scss' as *; - - -.icons { - display: none; -} - -.container { - position: relative; - width: 100vw; - max-width: 600px; - height: 300px; -} -.container .text-container, -.container .shadow-container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} -.container .text { - position: absolute; - top: 50%; - font-size: clamp(4rem, 25vw, 8rem); - font-family: $accent-font; - font-weight: bold; - -webkit-text-stroke: 2px var(--muted); - letter-spacing: -4px; - user-select: none; - pointer-events: none; -} -.container .text .icon { - position: absolute; - width: clamp(2rem, 1.5vw, 10rem); - height: clamp(2rem, 1.5vw, 10rem); - stroke-width: 25px; - stroke: var(--muted); - transform: translate(-50%, -50%); - animation: scaleUpdown 2000ms ease-in-out infinite; -} - -.container .text .icon:nth-child(1) { - top: 13%; - left: 64%; - animation-delay: 0; -} - -.container .text-container { - z-index: 1; -} -.container .text-container .text .icon { - fill: var(--body); -} -.container .text-container .text:nth-child(1) { - opacity: 0; - left: 42.5%; - transform: translate(-50%, -50%); - animation: upDown 2000ms ease-in-out infinite; - animation-delay: calc(0s + (0.1s * 1)); - z-index: -1; -} -.container .text-container .text:nth-child(2) { - opacity: 0; - left: 45%; - transform: translate(-45%, -50%); - animation: upDown 2000ms ease-in-out infinite; - animation-delay: calc(0s + (0.1s * 2)); - z-index: -2; -} -.container .text-container .text:nth-child(3) { - opacity: 0; - left: 47.5%; - transform: translate(-45%, -50%); - animation: upDown 2000ms ease-in-out infinite; - animation-delay: calc(0s + (0.1s * 3)); - z-index: -3; -} -.container .text-container .text:nth-child(4) { - opacity: 0; - left: 50%; - transform: translate(-45%, -50%); - animation: upDown 2000ms ease-in-out infinite; - animation-delay: calc(0s + (0.1s * 4)); - z-index: -4; -} - -@keyframes upDown { - 0%, 100% { - opacity: 1; - transform: translate(-45%, -60%); - } - 50% { - transform: translate(-45%, -30%); - } -} -@keyframes scaleUpdown { - 0% { - transform: translate(-45%, -50%) scale(1) rotate(0); - } - 50% { - transform: translate(-45%, -50%) scale(1.4) rotate(90deg); - } - 100% { - transform: translate(-45%, -50%) scale(1) rotate(180deg); - } -} diff --git a/src/components/heroName/heroName.tsx b/src/components/heroName/heroName.tsx deleted file mode 100644 index 5f66589f4..000000000 --- a/src/components/heroName/heroName.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useRef } from 'react'; -import styles from './heroName.module.scss'; - -const HeroName = ({ name }) => { - const textArray = useRef(null); - const colorArr = ['var(--body)', '#FED100', '#009B3A', '#000000']; - - return ( - <> -
-
- {Array.from({ length: 4 }).map((_, index) => ( - <> - - {name} -
- - - -
- - - ))} -
-
- - - - - - - ); -}; - -export default HeroName; From 6b36e5a86f1c7f384294b5f722765a1a89edd917 Mon Sep 17 00:00:00 2001 From: kalecream Date: Wed, 30 Aug 2023 11:23:11 -0500 Subject: [PATCH 03/47] Revert "refactor!: remove Blog" This reverts commit 3e4113a9d85dbb36d56960189f0cbbd75ccf8a07. --- src/pages/blog.tsx | 114 +++++++++++++++++++++++++++++++++ src/pages/index.tsx | 77 +++++++++++++++++++++- src/styles/articles.module.css | 23 +++++++ 3 files changed, 213 insertions(+), 1 deletion(-) create mode 100644 src/pages/blog.tsx create mode 100644 src/styles/articles.module.css diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx new file mode 100644 index 000000000..4488fc585 --- /dev/null +++ b/src/pages/blog.tsx @@ -0,0 +1,114 @@ +import { Page } from 'src/containers/layout'; +import { FullSection } from 'src/components/_basics/Basics'; +import { PostType } from 'src/types/post'; +import { getAllPosts } from '@utils/api'; +import { GetStaticProps } from 'next'; +import '../styles/articles.module.css'; +import styled from '@emotion/styled'; + +type BlogProps = { + posts: PostType[]; +}; + +const BlogContainer = styled.div` + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: center; +`; + +const FormerFeaturedArticle = styled.button` + display: flex; + width: 500px; + padding: 0.5rem; + border: var(--border); + background-color: var(--background); + border-radius: var(--border-radius-small); + + &:hover { + cursor: pointer; + background-color: var(--accent); + color: var(--background); + border: var(--border); + } + + & > img { + margin: auto 5px; + width: 100px; + object-fit: cover; + border-radius: var(--border-radius); + } + + & > .former-featured-article-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 1rem; + + & > .post-date { + font-size: 0.8rem; + font-weight: 600; + margin: 0.5rem 0; + color: var(--muted); + } + + & > h2 { + font-size: 1.3rem; + font-weight: 600; + margin: 0.5rem 0; + text-align: center; + } + + & > p { + font-size: 1rem; + text-align: justify; + opacity: 0.8; + } + } + + @media (max-width: 768px) { + width: 300px; + & > img { + display: none; + } + } +`; + +export const BlogPage = ({ posts }: BlogProps): JSX.Element => { + const GoToArticle = (slug: string) => { + console.log(slug); + }; + + return ( + + +

Blog

+ + {posts.map((post) => { + return ( + GoToArticle} className="former-featured-article"> + +
+

{post.date}

+

{post.title}

+

{post.description}

+
+ + ); + })} + + + + ); +}; + +export const getStaticProps: GetStaticProps = async () => { + const posts = getAllPosts(['date', 'description', 'slug', 'title', 'coverImage', 'tags']); + + return { + props: { posts } + }; +}; + +export default BlogPage; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 25724212f..6090abaa9 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,19 +1,86 @@ + import Page from '@containers/layout/page'; +import Image from 'next/image'; + +import { format, parseISO } from 'date-fns'; +import { GetStaticProps } from 'next'; +import Link from 'next/link'; +import { getAllPosts } from '../utils/api'; +import { PostType } from '../types/post'; import Hero from '@components/hero/hero'; + import ProjectList from '@components/projects/projectsList'; import '../styles/animations.module.css'; import 'animate.css'; +type IndexProps = { + posts: PostType[]; +}; + + + + + const imageLoader = ({ src, width, quality }) => { return `https://sabrinamedwinter.com/${src}?w=${width}&q=${quality || 75}`; }; -export const Home = (): JSX.Element => { +export const Home = ({ posts }: IndexProps): JSX.Element => { return ( + + + {posts.length > 0 && ( +
+

Blog

+
+ {posts.slice(0, 3).map((post) => ( +
+ {post.coverImage && ( +
+ src} + sizes="100vw" + style={{ width: 'auto', height: '400px' }} + src={post.coverImage} + alt={post.alt ? post.alt : ''} + className="blog--article__image" + /> +
+ )} +
+ {post.date && ( + {format(parseISO(post.date), 'MMMM dd, yyyy')} + )} + +

{post.title}

+ + +

{post.description}

+ + {post.tags && ( +
+ {post.tags.slice(0, 2).map((tag) => ( + + {tag} + + ))} + {/* create tag pages */} +
+ )} +
+
+ ))} +
+ {/* TODO: Add weeklogs and tutorials */} + {/* More Posts ⟶ */} +
+ )}

Things I've Made

@@ -23,4 +90,12 @@ export const Home = (): JSX.Element => { ); }; +export const getStaticProps: GetStaticProps = async () => { + const posts = getAllPosts(['date', 'description', 'slug', 'title', 'coverImage', 'tags']); + + return { + props: { posts } + }; +}; + export default Home; diff --git a/src/styles/articles.module.css b/src/styles/articles.module.css new file mode 100644 index 000000000..df26e8859 --- /dev/null +++ b/src/styles/articles.module.css @@ -0,0 +1,23 @@ + +.former-featured-article { + width: 300px; + height: auto; + padding: 10px; + margin-bottom: 10px; + border: var(--border); + border-radius: var(--border-radius); + opacity: 0.5; +} + +.regular-article { + width: 300px; + height: auto; + padding: 10px; + margin-bottom: 10px; + border: var(--border); + border-radius: var(--border-radius); +} + +.blog-top { + width: 100%; +} From 21170f858b95320e284b0dbeb503995f664ca602 Mon Sep 17 00:00:00 2001 From: kalecream Date: Thu, 31 Aug 2023 10:06:34 -0500 Subject: [PATCH 04/47] styling: add media query breakpoints --- src/styles/_mediaQuery.scss | 79 +++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 src/styles/_mediaQuery.scss diff --git a/src/styles/_mediaQuery.scss b/src/styles/_mediaQuery.scss new file mode 100644 index 000000000..d36a5165f --- /dev/null +++ b/src/styles/_mediaQuery.scss @@ -0,0 +1,79 @@ +// Code fount at https://stackoverflow.com/questions/62528918/media-query-scss-breakpoints-best-practice +// 2023-08-31 + +$break-points: ( + origin: 0, + phone: 480px, + tablet: 720px, + desktopSmall: 960px, + desktop: 1240px, + desktopLarge: 1920px, +); + + +/** Helper to build @media query. Use named arguments only! */ +@mixin breakpoint-range($mode: screen, $from: false, $to: false, $extra: ()) { + /** Checking arguments consistency */ + @each $key in ($from, $to) { + @if $key and not map-has-key($break-points, $key) { + @error "Available values for ($from, $to) args are: #{map-keys($break-points)}"; + }; + }; + + /** Accumulator */ + $conditions: $mode; + + /** Combining breakpoints dependencies */ + @each $key, $value in ( + min-width: $from, + max-width: $to, + ) { + @if $value { + $modifier: if($key == 'max-width', -1px, 0px); + $condition: " and (#{$key}: #{map-get($break-points, $value) - $modifier})"; + $conditions: str-insert($conditions, $condition, -1); + } + } + + /** Combining rest dependencies */ + @each $key, $value in $extra { + $condition: " and (#{$key}: #{$value})" + } + + /** Building final media query */ + @media #{$conditions} { @content; } +} + +/** +* +** Usage example +* +**/ + +.element { + /** Both bp arguments */ + @include breakpoint-range($from: mobile, $to: desktop) { + /* Result: @media screen and (min-width: 480px) and (max-width: 1240px) */ + } + /** One bp argument */ + @include breakpoint-range($to: desktop) { + /* Result: @media screen and (max-width: 1240px) */ + } + /** Just changing view mode */ + @include breakpoint-range($mode: print) { + /* Result: @media print */ + } + /** Or add anything else */ + @include breakpoint-range( + $from: mobile, + $to: desktop, + $extra: (orientation: landscape) + ) { + /* Result: @media screen + and (min-width: 480px) + and (max-width: 1240px) + and (orientation: landscape) + */ + } +} + From 6e14bb169ed5126164557ebe4737f16e037f226b Mon Sep 17 00:00:00 2001 From: kalecream Date: Thu, 31 Aug 2023 10:07:52 -0500 Subject: [PATCH 05/47] feat: Add model from sketchfab --- src/assets/models/me.jsx | 10 ++- src/components/threeJS/scene.tsx | 145 +++++++++++++++++++++++++++++++ 2 files changed, 151 insertions(+), 4 deletions(-) create mode 100644 src/components/threeJS/scene.tsx diff --git a/src/assets/models/me.jsx b/src/assets/models/me.jsx index f04d1e2ee..a69568086 100644 --- a/src/assets/models/me.jsx +++ b/src/assets/models/me.jsx @@ -4,12 +4,14 @@ Command: npx gltfjsx@6.1.3 me.glb */ import React, { useRef } from 'react'; -import { useGLTF } from '@react-three/drei'; +import { useGLTF, useAnimations } from '@react-three/drei'; -export function Model(props) { - const { nodes, materials } = useGLTF('/me.glb'); +export function Model() { + const group = useRef(); + const { nodes, materials} = useGLTF('/me.glb'); + return ( - + { + return angle * (Math.PI / 180); +}; + +export const Rotate3DModel = () => { + useFrame((state) => { + state.camera.position.x = Math.sin(state.clock.getElapsedTime()) * 5; + state.camera.position.z = Math.cos(state.clock.getElapsedTime()) * 5; + state.camera.lookAt(0, 0, 0); + }); + + requestAnimationFrame(() => { + document.getElementById('hero')?.scrollIntoView(); + }); + + const orbitControlsRef = useRef(null); + + useFrame((state) => { + if (!!orbitControlsRef.current) { + const { x } = state.mouse; + orbitControlsRef.current.setAzimuthalAngle(angletoRadian(-x * 20)); + orbitControlsRef.current.update(); + } + }); + + useEffect(() => { + if (!!orbitControlsRef.current) { + orbitControlsRef.current.setAzimuthalAngle(angletoRadian(0)); + } + }, [orbitControlsRef.current]); + + return ; +}; + +export const Scene = ({ modelPath, scale = 40, position = [0, 0, 0] }) => { + const ref = useRef(null); + const gltf = useLoader(GLTFLoader, modelPath); + const [hovered, hover] = useState(false); + + useFrame((state, delta) => (ref.current.rotation.y += 0.003)); + + return ( + <> + hover(true)} + onPointerOut={(event) => hover(false)} + /> + + ); +}; + +export const SceneViewer = ({ modelPath, scale = 40, position = [0, 0, 0] }): JSX.Element => { + return ( + + + + + + + + + + ); +}; + +export const SiteBackground = (): JSX.Element => { + return ( + + {/* */} + + + + + + + + + ); +}; + +const HeroCanvas = styled(Canvas)` + @media (min-width: 768px) { + width: fit-content; + height: 100%; + } + + @media (max-width: 768px) { + display: none; + } +`; + +export const HeroModel = (): JSX.Element => { + return ( + + + + + + + {/* */} + + + + ); +}; From a51e407bdb82981456e6d6a1e34faf2ce58bd000 Mon Sep 17 00:00:00 2001 From: kalecream Date: Thu, 31 Aug 2023 11:25:34 -0500 Subject: [PATCH 06/47] feat(SEO): Add proper metatag formatting --- src/components/Head.tsx | 68 ++++++++++++++++++++++++++++++++++ src/containers/layout/page.tsx | 32 ++++++---------- 2 files changed, 79 insertions(+), 21 deletions(-) create mode 100644 src/components/Head.tsx diff --git a/src/components/Head.tsx b/src/components/Head.tsx new file mode 100644 index 000000000..469974f46 --- /dev/null +++ b/src/components/Head.tsx @@ -0,0 +1,68 @@ +// format taken from https://github.com/hyamero/portfolio-3d/blob/main/src/config.tsx + +import Head from 'next/head'; +import { HeadProps } from 'src/types/layout'; + +const titleDefault = 'Sabrina Medwinter'; +const defaultDescription = + 'Unlocking the digital realm with a fusion of Jamaican web development prowess and captivating 3D artistry.'; +export const WEBSITE_HOST_URL = 'https://www.sabrinamedwinter.com'; + +const Header = ({ title = titleDefault, description = defaultDescription, url, author }: HeadProps): JSX.Element => { + return ( + <> + + {/* Recommended Meta Tags */} + + + + + + + + {/* Search Engine Optimization Meta Tags */} + {title} + + + + + {/* + Facebook Open Graph meta tags + documentation: https://developers.facebook.com/docs/sharing/opengraph */} + + + + + + + + + + + + + + + + {/* Meta Tags for HTML pages on Mobile */} + {/* + */} + + + + + {/* + Twitter Summary card + documentation: https://dev.twitter.com/cards/getting-started + Be sure validate your Twitter card markup on the documentation site. */} + + + + + ); +}; + +export default Header; diff --git a/src/containers/layout/page.tsx b/src/containers/layout/page.tsx index 58bc1df31..e96acdecb 100644 --- a/src/containers/layout/page.tsx +++ b/src/containers/layout/page.tsx @@ -1,24 +1,26 @@ import React, { useEffect, useState } from 'react'; import { Header, Footer } from '@components/navigation'; import { MetaProps } from '../../types/layout'; -import Head from 'next/head'; +import { Header as MetaHead } from '@components/navigation'; import dynamic from 'next/dynamic'; import { Analytics } from '@vercel/analytics/react'; type LayoutProps = { children: React.ReactNode; - customMeta?: MetaProps; title?: string; description?: string; + url: string; + author?: string; }; -export const WEBSITE_HOST_URL = 'https://www.sabrinamedwinter.com'; const Preloader = dynamic(() => import('../../components/preloader/preloader'), { ssr: false }); -export const Page = ({ children, title, description, customMeta }: LayoutProps) => { +export const Page = ({ + children +}: LayoutProps) => { const [loading, setLoading] = useState(true); useEffect(() => { @@ -33,29 +35,17 @@ export const Page = ({ children, title, description, customMeta }: LayoutProps) return ( <> + {loading ? ( setLoading(false)} /> ) : ( <> - - {title ? `SM | ${title}` : 'SM'} - - - {description ? ( - - ) : ( - - )} - -
-
{children}
-