Skip to content

Commit

Permalink
Merge pull request #14 from GLaDO8/redesign2022
Browse files Browse the repository at this point in the history
Major Redesign
  • Loading branch information
GLaDO8 authored Oct 27, 2022
2 parents 4f8b18c + 133617d commit 1ed0e7f
Show file tree
Hide file tree
Showing 31 changed files with 954 additions and 1,243 deletions.
22 changes: 8 additions & 14 deletions components/footer.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
import React from 'react'
import SocialLinks from './social-icons'
import { useTheme } from 'next-themes'

export default function Footer() {
const { theme } = useTheme()

//dark mode link styling for footer
function darkModeLinkStyleTag(linkText, link) {
function LinkStyleTag(linkText, link) {
return (
<a
className={`cursor-pointer hover:opacity-70 font-medium transition duration-300 ${
theme === 'dark' ? 'link-styling-dark' : 'link-styling'
}`}
className="font-medium text-white transition duration-300 cursor-pointer hover:opacity-70"
href={link}
rel="noopener"
target="_blank"
Expand All @@ -24,20 +19,19 @@ export default function Footer() {
return (
<div className="bottom-0 max-w-4xl mx-auto my-36 lazy-renderer">
<footer>
<div className="text-lg lg:text-xl text-inactive-gray">
<div className="text-lg lg:text-xl text-grey-secondary">
Made from scratch using{' '}
{darkModeLinkStyleTag('Next.js', 'https://nextjs.org')},{' '}
{darkModeLinkStyleTag('Vercel', 'https://vercel.com')} and{' '}
{darkModeLinkStyleTag('Tailwind CSS', 'https://tailwindcss.com')}. The
code is{' '}
{darkModeLinkStyleTag(
{LinkStyleTag('Next.js', 'https://nextjs.org')},{' '}
{LinkStyleTag('Vercel', 'https://vercel.com')} and{' '}
{LinkStyleTag('Tailwind CSS', 'https://tailwindcss.com')}. The code is{' '}
{LinkStyleTag(
'open-source',
'https://github.com/GLaDO8/nextjs-portfolio',
)}
.
</div>
<SocialLinks />
<div className="flex justify-start text-sm font-normal text-inactive-gray">
<div className="flex justify-start text-sm font-normal text-grey-secondary">
© Shreyas Gupta 2021-2077.
</div>
</footer>
Expand Down
168 changes: 99 additions & 69 deletions components/markdown-styles.module.css
Original file line number Diff line number Diff line change
@@ -1,82 +1,112 @@
.markdown {
@apply text-base leading-relaxed;
font-weight: 400;
line-height: 1.7;
}
.markdown p {
@apply max-w-3xl mx-auto mb-4;
}
.markdown strong {
@apply font-semibold dark:font-bold;
}
@apply content-center leading-relaxed;

.markdown code {
font-size: 0.85em;
background-color: #f0f0f0;
border-radius: 4px;
padding: 0.2em 0.4em;
}
p {
@apply mb-4;
}
strong {
@apply font-medium text-white;
}

/* Lists */
.markdown ul,
.markdown ol {
@apply max-w-lg pl-6 mx-auto my-2 lg:pl-0;
}
.markdown li > p,
.markdown li > ul,
.markdown li > ol {
@apply mb-0 text-black dark:text-white;
}
.markdown ol {
@apply max-w-3xl list-decimal;
}
.markdown ul {
@apply max-w-3xl list-disc;
}
.markdown li {
@apply max-w-3xl mb-1;
}
code {
font-size: 0.85em;
background-color: #484848;
border-radius: 4px;
padding: 0.2em 0.4em;
}

/* Blockquote */
.markdown blockquote > p {
@apply p-6 my-6;
}
/* Lists */
ul,
ol {
@apply my-3 lg:pl-0;
}

/* Headings */
.markdown h2 {
@apply max-w-3xl mx-auto mt-12 mb-2 text-2xl font-semibold leading-snug tracking-tight;
}
.markdown h3 {
@apply max-w-3xl mx-auto mt-12 mb-2 text-xl font-semibold leading-snug tracking-tight;
}
.markdown h4 {
@apply max-w-3xl mx-auto mt-12 text-lg font-semibold leading-snug tracking-tight;
}
ol {
@apply list-decimal;
}
ul {
@apply list-disc;
}
li {
@apply mb-3 ml-8;
p,
ul,
ol {
@apply mb-0;
}
}

.markdown h5 {
@apply max-w-3xl mx-auto mb-2 text-base font-semibold leading-snug tracking-tight text-gray-500 dark:text-gray-500;
}
/* Blockquote */
blockquote > p {
@apply p-6 my-6;
}

/* Links */
.markdown a {
@apply transition-opacity duration-300 ease-in-out text-link-blue dark:text-dark-mode-link-blue;
}
.markdown a:hover {
border-bottom: 1.5px solid #06c;
}
/* Headings */
h2,
h3,
h4 {
@apply mt-12 mb-2 font-semibold leading-snug tracking-tight;
}
h2 {
@apply text-2xl;
}
h3 {
@apply text-xl;
}
h4 {
@apply text-lg;
}
h5 {
@apply mb-2 text-base font-semibold leading-snug tracking-tight text-gray-400;
}

/* Responsive Design */
@screen lg {
.markdown img {
@apply content-center w-full mx-auto my-6;
/* Links */
a {
@apply transition-opacity duration-300 ease-in-out text-dark-mode-link-blue;
}
.markdown p > img {
@apply content-center max-w-3xl mx-auto;
a:hover {
border-bottom: 1.5px solid #06c;
}
.markdown p {
@apply max-w-3xl;
img {
@apply my-6;
}
.markdown li {
@apply ml-8;
}

/* Responsive Design */
@screen md {
.markdown {
p,
h2,
h3,
h4,
h5,
li,
ul,
ol {
@apply max-w-xl mx-auto;
}
li {
@apply ml-8;
}
}
}
@screen lg {
.markdown {
p,
h2,
h3,
h4,
h5,
li,
ul,
ol {
@apply max-w-2xl mx-auto;
}
p > img {
@apply content-center max-w-2xl mx-auto rounded-lg;
}
li {
@apply ml-8;
}
}
}
29 changes: 4 additions & 25 deletions components/navbar.js
Original file line number Diff line number Diff line change
@@ -1,36 +1,17 @@
import React, { useState, useEffect } from 'react'
import NavButton from '@/components/navbutton'
import Link from 'next/link'
import Logo from './../public/logo.svg'
import DarkLogo from './../public/dark-logo.svg'
import { useTheme } from 'next-themes'

function Navbar({ navButtons }) {
const [mounted, setMounted] = useState(false)
const { theme, setTheme } = useTheme()

// When mounted on client, now we can show the UI
useEffect(() => setMounted(true), [])

if (!mounted) return null

return (
<>
<div className="container max-w-4xl mx-auto">
<nav className="z-10 flex items-center justify-between mt-8 mb-2 md:mb-4 lg:mb-6">
<nav className="z-10 flex flex-col items-center justify-between mt-8 mb-2 md:mb-4 lg:mb-6">
{/* Website Logo */}
<Link href="/">
<a>
<Logo
className={`h-14 w-14 md:h-16 md:w-16 lg:h-18 lg:w-18 hover:opacity-80 transition duration-300 ${
theme === 'dark' ? 'hidden' : 'flex-1'
}`}
/>
<DarkLogo
className={`h-14 w-14 md:h-16 md:w-16 lg:h-18 lg:w-18 hover:opacity-80 transition duration-300 ${
theme === 'dark' ? 'flex-1' : 'hidden'
}`}
/>
<DarkLogo className="w-20 h-20 transition duration-300 lg:h-28 lg:w-28 hover:opacity-80" />
</a>
</Link>

Expand All @@ -43,10 +24,8 @@ function Navbar({ navButtons }) {
label={button.label}
/>
))}

{/* Dark Mode Toggle Button */}
</div>
<button
{/* <button
aria-label="Toggle Dark Mode"
type="button"
className="w-10 h-10 p-3 ml-4 bg-gray-100 rounded-lg dark:bg-gray-50"
Expand Down Expand Up @@ -77,7 +56,7 @@ function Navbar({ navButtons }) {
)}
</svg>
)}
</button>
</button> */}
</nav>
</div>
</>
Expand Down
24 changes: 7 additions & 17 deletions components/post-header.js
Original file line number Diff line number Diff line change
@@ -1,33 +1,23 @@
import Date from './date'
import React, { useState, useEffect } from 'react'
import React from 'react'
import CoverImage from './cover-image'
import ReadingTime from './read-time'
import { useTheme } from 'next-themes'
export default function PostHeader({
title,
coverImage,
date,
excerpt,
content,
}) {
const [mounted, setMounted] = useState(false)
const { theme } = useTheme()
const timeLink = `https://s2.svgbox.net/materialui.svg?ic=circle&color=fff`

// When mounted on client, now we can show the UI
useEffect(() => setMounted(true), [])

if (!mounted) return null

const timeLink = `https://s2.svgbox.net/materialui.svg?ic=circle&color=${
theme === 'light' ? '000' : 'fff'
}`
return (
<>
<div className="mx-4 md:mx-8 lg:mx-12">
<div className="max-w-4xl mx-auto mt-6 lg:mt-12">
<div className="mx-4 md:mx-12">
<div className="max-w-3xl mx-auto mt-8 lg:mt-12">
<div className="flex flex-row mr-4 text-sm font-normal text-black sm:text-base dark:text-white">
<Date dateString={date} />
<div className="mx-4 mt-2">
<div className="mx-2 mt-2">
<img src={timeLink} width="6" height="6" aria-hidden="true" />
</div>
<div className="mb-2 text-sm font-normal text-black sm:text-base dark:text-white">
Expand All @@ -37,12 +27,12 @@ export default function PostHeader({
<div className="mb-2 text-2xl font-bold leading-tight tracking-tighter text-black font-title md:text-5xl lg:text-7xl md:leading-none dark:text-white">
<h1>{title}</h1>
</div>
<p className="mb-2 text-lg leading-relaxed text-black font-regular dark:text-white">
<p className="mb-2 leading-relaxed text-black md:text-lg font-regular dark:text-white">
{excerpt}
</p>
</div>
</div>
<div className="w-auto my-8 mb-24">
<div className="w-auto my-8 mb-8 md:mb-16 lg:mb-24">
<CoverImage title={title} url={coverImage.imgix_url} />
</div>
</>
Expand Down
6 changes: 3 additions & 3 deletions components/project-preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Image from 'next/image'
export default function ProjectPreview({ title, coverImage, excerpt, slug }) {
return (
<Link as={`/work/${slug}`} href="/work/[slug]">
<div className="mb-12 group">
<div className="group">
<div className="overflow-hidden transition duration-500 transform cursor-pointer group-hover:shadow-xl rounded-xl">
<Image
src={coverImage.imgix_url}
Expand All @@ -14,14 +14,14 @@ export default function ProjectPreview({ title, coverImage, excerpt, slug }) {
layout="responsive"
/>
</div>
<div className="mt-4">
{/* <div className="mt-4">
<h3 className="mb-1 text-lg font-semibold leading-snug text-black transition duration-500 cursor-pointer group-hover:underline lg:text-xl dark:text-white">
{title}
</h3>
<p className="mb-2 text-base font-normal leading-normal text-black cursor-pointer lg:text-lg dark:text-white">
{excerpt}
</p>
</div>
</div> */}
</div>
</Link>
)
Expand Down
2 changes: 1 addition & 1 deletion components/projectlist.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import ProjectPreview from './project-preview'
export default function MoreStories({ posts }) {
return (
<section className="mb-8">
<section className="">
<div>
{posts.map((post) => (
<ProjectPreview
Expand Down
Loading

1 comment on commit 1ed0e7f

@vercel
Copy link

@vercel vercel bot commented on 1ed0e7f Oct 27, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.