From aa46c5d3825d424de9ca8a438a9f5b03205281c9 Mon Sep 17 00:00:00 2001 From: Pranshu Patel Date: Thu, 9 May 2024 12:28:46 +0530 Subject: [PATCH] Refactor image loading and update image elements in components --- README.md | 3 +- package-lock.json | 26 ++++++++-------- package.json | 4 +-- src/pages/404.tsx | 1 - src/pages/about/index.tsx | 21 ++----------- src/pages/gallery/index.tsx | 6 ---- src/pages/guestbook/index.tsx | 6 ---- src/pages/index.tsx | 10 ++----- src/pages/music/index.tsx | 8 ----- src/pages/posts/index.tsx | 6 ---- src/styles/globals.css | 56 +++++++++++------------------------ 11 files changed, 38 insertions(+), 109 deletions(-) diff --git a/README.md b/README.md index fcc677b..99c5720 100644 --- a/README.md +++ b/README.md @@ -1,2 +1 @@ -A portfolio made with NextJS + Tailwind + MDX + TypeScript - +A portfolio made with NextJS + Tailwind + MDX + TypeScript \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 4c8b839..cdf5448 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,8 +13,8 @@ "gray-matter": "^4.0.3", "next": "14.1.0", "next-mdx-remote": "^4.4.1", - "react": "^18", - "react-dom": "^18", + "react": "^18.3.1", + "react-dom": "^18.3.1", "react-icons": "^5.0.1", "rehype-highlight": "^7.0.0" }, @@ -5958,9 +5958,9 @@ ] }, "node_modules/react": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", - "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "dependencies": { "loose-envify": "^1.1.0" }, @@ -5969,15 +5969,15 @@ } }, "node_modules/react-dom": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", - "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "dependencies": { "loose-envify": "^1.1.0", - "scheduler": "^0.23.0" + "scheduler": "^0.23.2" }, "peerDependencies": { - "react": "^18.2.0" + "react": "^18.3.1" } }, "node_modules/react-icons": { @@ -6409,9 +6409,9 @@ } }, "node_modules/scheduler": { - "version": "0.23.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", - "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", "dependencies": { "loose-envify": "^1.1.0" } diff --git a/package.json b/package.json index 2482934..bd5d903 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ "gray-matter": "^4.0.3", "next": "14.1.0", "next-mdx-remote": "^4.4.1", - "react": "^18", - "react-dom": "^18", + "react": "^18.3.1", + "react-dom": "^18.3.1", "react-icons": "^5.0.1", "rehype-highlight": "^7.0.0" }, diff --git a/src/pages/404.tsx b/src/pages/404.tsx index c8fc508..5fbf1bc 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import Link from 'next/link'; import Image from 'next/image'; diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx index a64e05c..4a7fe95 100644 --- a/src/pages/about/index.tsx +++ b/src/pages/about/index.tsx @@ -1,34 +1,17 @@ -import type { Metadata } from 'next' import TechStack from '@/components/(about)/TechStack' import Image from 'next/image' -export const metadata: Metadata = { - title: 'Pranshu05 // About', - description: 'About me, Pranshu Patel!', -} - const AboutPage: React.FC = () => { return (

About me!

-

- me - Hey there! 👋🏻 I'm Pranshu, a passionate full-stack developer and college fresher based in India. Currently working - on a few projects and pursuing B.Tech. in ICT from{' '}DA-IICT. -
-
I started my coding journey in 2020 when I was 14 during the{' '}Covid{' '} - pandemic. I started with the basics of C and programming and then moved to web development. I have been working with web technologies like HTML, CSS, JavaScript, React, and Node.js. I also have experience with discord bot development using discord.js and Node.js and have worked with databases like - MongoDB and Firebase. I'm currently exploring Next.js and TypeScript. I'm also passionate about UI/UX and its design and development. -

+

meHey there! 👋🏻 I'm Pranshu, a passionate full-stack developer and college fresher based in India. Currently working on a few projects and pursuing B.Tech. in ICT from{' '}DA-IICT.

I started my coding journey in 2020 when I was 14 during the{' '}Covid{' '}pandemic. I started with the basics of C and programming and then moved to web development. I have been working with web technologies like HTML, CSS, JavaScript, React, and Node.js. I also have experience with discord bot development using discord.js and Node.js and have worked with databases like MongoDB and Firebase. I'm currently exploring Next.js and TypeScript. I'm also passionate about UI/UX and its design and development.

Tech Stack

Below is a list of technologies which I use for development and programming purpose. Including languages, frameworks, IDEs, apps and various softwares.

-

- I am always open to learning new technologies and love to work on new projects. If you have any project ideas or want to - collaborate, feel free to reach out to me on{' '}Twitter {' '}[I may be delayed in responding at times]. -

+

I am always open to learning new technologies and love to work on new projects. If you have any project ideas or want to collaborate, feel free to reach out to me on{' '}Twitter{' '}[I may be delayed in responding at times].

) } diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index 6e675ca..be38bf2 100644 --- a/src/pages/gallery/index.tsx +++ b/src/pages/gallery/index.tsx @@ -1,11 +1,5 @@ -import type { Metadata } from 'next'; import ImageGallery from '../../components/(gallery)/ImageGallery'; -export const metadata: Metadata = { - title: 'Pranshu05 // Gallary', - description: 'My Gallary, feel free to explore!', -}; - const ImageGalleryPage: React.FC = () => { return (
diff --git a/src/pages/guestbook/index.tsx b/src/pages/guestbook/index.tsx index 8a4629b..60c73a8 100644 --- a/src/pages/guestbook/index.tsx +++ b/src/pages/guestbook/index.tsx @@ -1,15 +1,9 @@ -import type { Metadata } from "next"; import LoginContainer from "@/components/(guestbook)/LoginContainer"; import MessageList from "@/components/(guestbook)/MessageList"; import PostMessage from "@/components/(guestbook)/PostMessage"; import { useState, useEffect } from "react"; import { getAuth, onAuthStateChanged, User } from "firebase/auth"; -export const metadata: Metadata = { - title: "Pranshu05 // Guestbook", - description: "My guestbook, feel free to leave a message!", -}; - const Guestbook: React.FC = () => { const [isSignedIn, setIsSignedIn] = useState(false); const [myUser, setMyUser] = useState(null); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 97c6ac9..97a2e02 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,14 +1,8 @@ -import type { Metadata } from "next"; import dynamic from "next/dynamic"; const HomeContainer = dynamic(() => import("@/components/(home)/HomeContainer"), { - ssr: false, - }); - -export const metadata: Metadata = { - title: 'Pranshu05', - description: 'Portfolio website of Pranshu05', -}; + ssr: false, +}); const Home: React.FC = () => () diff --git a/src/pages/music/index.tsx b/src/pages/music/index.tsx index f66b0ce..5e5808d 100644 --- a/src/pages/music/index.tsx +++ b/src/pages/music/index.tsx @@ -1,14 +1,7 @@ -import type { Metadata } from 'next'; import RecentlyPlayed from '@/components/(music)/RecentlyPlayed'; import RecentTracks from '@/components/(music)/RecentTracks'; -// import TopTracks from '@/components/(music)/TopTracks'; import TopAlbums from '@/components/(music)/TopAlbums'; -export const metadata: Metadata = { - title: 'Pranshu05 // Music', - description: 'My Music Activity, feel free to explore!', -}; - const MusicPage: React.FC = () => { return (
@@ -18,7 +11,6 @@ const MusicPage: React.FC = () => {
- {/* */}
); diff --git a/src/pages/posts/index.tsx b/src/pages/posts/index.tsx index 3b31a33..7b90d6d 100644 --- a/src/pages/posts/index.tsx +++ b/src/pages/posts/index.tsx @@ -1,5 +1,4 @@ import { useEffect, useState } from 'react'; -import { Metadata } from 'next'; import fs from 'fs'; import path from 'path'; import matter from 'gray-matter'; @@ -20,11 +19,6 @@ interface Post { frontmatter: Frontmatter; } -export const metadata: Metadata = { - title: 'Pranshu05 // Posts', - description: 'My personal Blogs', -}; - const Blog: React.FC<{ posts: Post[] }> = ({ posts }) => { const [viewCounts, setViewCounts] = useState<{ [key: string]: number }>({}); diff --git a/src/styles/globals.css b/src/styles/globals.css index 5908891..2d64150 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -24,62 +24,45 @@ transition-duration: 300ms; } -.link:hover { +.link:hover, +.post a:hover { text-decoration-color: rgb(212, 212, 216); } -.post h1 { - font-size: 1.5rem; +.post h1, +.post h2, +.post h3, +.post h4, +.post h5, +.post h6 { margin-top: 1.5rem; margin-bottom: 1.5rem; - line-height: 1.5rem; font-weight: 700; color: rgb(244 244 245); } +.post h1 { + font-size: 1.5rem; +} + .post h2 { font-size: 1.25rem; - margin-top: 1.5rem; - margin-bottom: 1.5rem; - line-height: 1.25rem; - font-weight: 700; - color: rgb(244 244 245); } .post h3 { font-size: 1.125rem; - margin-top: 1.5rem; - margin-bottom: 1.5rem; - line-height: 1.125rem; - font-weight: 700; - color: rgb(244 244 245); } .post h4 { font-size: 1rem; - margin-top: 1.5rem; - margin-bottom: 1.5rem; - line-height: 1rem; - font-weight: 700; - color: rgb(244 244 245); } .post h5 { font-size: 0.875rem; - margin-top: 1.5rem; - margin-bottom: 1.5rem; - line-height: 0.875rem; - font-weight: 700; - color: rgb(244 244 245); } .post h6 { font-size: 0.75rem; - margin-top: 1.5rem; - margin-bottom: 1.5rem; - line-height: 0.75rem; - font-weight: 700; - color: rgb(244 244 245); } .post p { @@ -90,24 +73,21 @@ font-weight: 400; } -.post ul { +.post ul, +.post ol { font-size: 1rem; font-weight: 400; margin-top: 1rem; margin-bottom: 1rem; - line-height: 1.5rem; - list-style: disc; margin-left: 1rem; } +.post ul { + list-style: disc; +} + .post ol { - font-size: 1rem; - font-weight: 400; - margin-top: 1rem; - margin-bottom: 1rem; - line-height: 1.5rem; list-style: decimal; - margin-left: 1rem; } .post li {