Skip to content

Commit

Permalink
Added Custom500 and Service Worker👻 (#129)
Browse files Browse the repository at this point in the history
just updating the lastest changes from dev branch to main branch✅
  • Loading branch information
muhammad-fiaz authored Sep 7, 2023
1 parent 6b084dd commit cc1a3dd
Show file tree
Hide file tree
Showing 19 changed files with 1,325 additions and 264 deletions.
4 changes: 2 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Portfolio Changelog - Release Notes

## v1.0.3 (coming soon)
## v1.0.3
- Added Custom 500 and 404 Error Pages👻
- improved UI and Functionality❤️
- improvement in performance✨
- fixed some bugs✌🏻
- Full Changelog: [v1.0.2...v1.0.3](https://github.com/muhammad-fiaz/portfolio/compare/v1.0.2...v1.0.3)

Expand Down
1 change: 1 addition & 0 deletions assets/lottie/looking.json

Large diffs are not rendered by default.

21 changes: 15 additions & 6 deletions next.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
module.exports = {
const withPWA = require('next-pwa')({
dest: 'public',
scope: '/',
sw: 'service-worker.js', // Service worker file name
register: true, // Register service worker

})

module.exports = withPWA({

webpack: (config) => {
// Add your custom Webpack configurations here

Expand All @@ -12,7 +21,7 @@ module.exports = {
},
swcMinify: true,
/*
Don't remove these this use the protocol that are need to function properly
Don't remove these this uses the protocol that are need to function properly
* https://nextjs.org/docs/pages/building-your-application/optimizing/images#adding-structured-data
*/
Expand Down Expand Up @@ -57,15 +66,15 @@ Don't remove these this use the protocol that are need to function properly
};
},
output: {
// Configure your export settings here
// Configure your export settings here,
// For example, if you want to export to the "out" directory:
directory: 'out',
},

/*
// https://nextjs.org/docs/messages/swc-disabled
experimental: {
forceSwcTransforms: true,
},

}
*/
});
1,380 changes: 1,135 additions & 245 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"js-cookie": "^3.0.5",
"next": "^13.4.19",
"next-compose-plugins": "^2.2.1",
"next-pwa": "^5.6.0",
"nprogress": "^0.2.0",
"postcss-loader": "^7.3.3",
"react": "^18.2.0",
Expand Down
12 changes: 12 additions & 0 deletions pages/500.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@

import Title500 from "./title.500";
import Custom500 from "../src/components/blocks/errors/custom500";

export default function InternalServerError() {
return (
<div>
<Title500/>
<Custom500/>
</div>
);
};
35 changes: 28 additions & 7 deletions pages/_document.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,20 @@ export default function Document() {
GitHub: Visit the GitHub repository at https://github.com/muhammad-fiaz/portfolio/ for more details.
license: MIT License
*/}
<title>Muhammad Fiaz</title>
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
{/* eslint-disable-next-line @next/next/no-title-in-document-head */}
<title>Muhammad Fiaz</title>
<meta name="description" content="Muhammad Fiaz - A dedicated Full Stack Developer proficient in App/Web, Cloud, DevOps, AL/ML, and Design. Join my journey." />

{/*These are need for PWA*/}
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="Muhammad Fiaz" />
<meta name="format-detection" content="telephone=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="msapplication-config" content="/favicon/browserconfig.xml" />
<meta name="msapplication-tap-highlight" content="no" />

<meta name="theme-color" content="#000000" />
<meta httpEquiv="Content-Type" content="text/html; charset=utf-8"/>
Expand All @@ -37,7 +48,9 @@ export default function Document() {
<meta name="googlebot" content="index, follow" />
<meta name="bingbot" content="index, follow" />

<link rel="apple-touch-icon" sizes="180x180" href="/favicon/favicon.jpg" />
<link rel="apple-touch-icon" href="/img/logo_rounded.png" />

<link rel="apple-touch-icon" sizes="180x180" href="/img/logo_rounded.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon.jpg" />
<link rel="icon" href="/favicon/favicon-org.ico" type="image/x-icon"></link>
Expand All @@ -54,9 +67,8 @@ export default function Document() {

<meta property="og:title" content="Muhammad Fiaz" key="title" />
<meta property="og:description" content="Muhammad Fiaz - A dedicated Full Stack Developer proficient in App/Web, Cloud, DevOps, AI/ML, and Design. Join my journey." />
<meta property="og:image" content="https://muhammadfiaz.com/img/fiaz-org.jpeg" />
<meta property="og:image" content="https://muhammadfiaz.com/img/fiaz_roundedImage.png" />
<meta property="og:image:secure_url" content="https://muhammadfiaz.com/img/fiaz-org.jpeg" />
<meta property="og:image" content="https://muhammadfiaz.com/img/muhammadfiaz.jpeg" />
<meta property="og:image:secure_url" content="https://muhammadfiaz.com/img/muhammadfiaz.jpeg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Muhammad Fiaz" />
<meta property="og:image:width" content="300" />
Expand All @@ -72,10 +84,19 @@ export default function Document() {
<meta name="twitter:site" content="https://twitter.com/muhammadfiaz_" />
<meta name="twitter:title" content="Muhammad Fiaz" />
<meta name="twitter:description" content="Muhammad Fiaz - A dedicated Full Stack Developer proficient in App/Web, Cloud, DevOps, AI/ML, and Design. Join my journey." />
<meta name="twitter:image" content="https://muhammadfiaz.com/img/fiaz-org.jpeg" />
<meta name="twitter:image" content="https://muhammadfiaz.com/img/muhammadfiaz.jpeg" />
<meta name="twitter:creator" content="https://twitter.com/muhammadfiaz_" />
<meta name="twitter:domain" content="https://muhammadfiaz.com" />


<link rel='apple-touch-startup-image' href='/img/logo_rounded.png' sizes='2048x2732' />
<link rel='apple-touch-startup-image' href='/img/logo_rounded.png' sizes='1668x2224' />
<link rel='apple-touch-startup-image' href='/img/logo_rounded.png' sizes='1536x2048' />
<link rel='apple-touch-startup-image' href='/img/logo_rounded.png' sizes='1125x2436' />
<link rel='apple-touch-startup-image' href='/img/logo_rounded.png' sizes='1242x2208' />
<link rel='apple-touch-startup-image' href='/img/logo_rounded.png' sizes='750x1334' />
<link rel='apple-touch-startup-image' href='/img/logo_rounded.png' sizes='640x1136' />

{/*These are the Keywords that will Boost your SEO in Ranking, so Make Sure to include and Update it up to your preference or don't mind this! 😴*/}
<meta name="keywords" content="
Muhammad Fiaz, Full Stack Engineer, Full Stack Developer, DevOps Engineer, Software Engineer,
Expand Down Expand Up @@ -229,7 +250,7 @@ export default function Document() {
"name": "Muhammad Fiaz",
"alternateName": "fiaz",
"url": "https://muhammadfiaz.com",
"logo": "https://muhammadfiaz.com/img/fiaz-org.jpeg",
"logo": "https://muhammadfiaz.com/img/muhammadfiaz.jpeg",
"sameAs": [
"https://www.linkedin.com/in/muhammad-fiaz-/"
] }
Expand Down
29 changes: 29 additions & 0 deletions pages/title.500.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import Head from 'next/head';
import React from 'react';

export default function Title500() {
return (
<Head>

{/*
Author: Muhammad Fiaz
GitHub: Visit the GitHub repository at https://github.com/muhammad-fiaz/portfolio/ for more details.
license: MIT License
*/}
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>500: internal server error | Muhammad Fiaz</title>
<meta name="description" content="The requested page was occur internal server error " />
{/*These are the Keywords that will Boost your SEO in Ranking, so Make Sure to include and Update it up to your preference or don't mind this! 😴*/}
<meta name="keywords" content="500, internal server error, Muhammad Fiaz, Portfolio,broken link ,missing page,link not found" />







</Head>
);
}
Binary file removed public/favicon/fiaz.jpeg
Binary file not shown.
Binary file removed public/favicon/fiaz192.jpeg
Binary file not shown.
Binary file removed public/favicon/fiaz512.jpeg
Binary file not shown.
Binary file removed public/img/fiaz-org.jpeg
Binary file not shown.
Binary file removed public/img/fiaz_roundedImage.png
Binary file not shown.
Binary file added public/img/logo_rounded.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 10 additions & 3 deletions public/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,28 @@
{
"src": "favicon/favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
"type": "image/x-icon",
"purpose": "any maskable"

},
{
"src": "favicon/favicon.jpg",
"type": "image/png",
"sizes": "192x192"
"sizes": "192x192",
"purpose": "any maskable"

},
{
"src": "favicon/favicon.jpg",
"type": "image/png",
"sizes": "512x512"
"sizes": "512x512",
"purpose": "any maskable"

}
],
"start_url": ".",
"display": "standalone",
"description": "Muhammad Fiaz - A dedicated Full Stack Developer proficient in App/Web, Cloud, DevOps, AL/ML, and Design. Join my journey.",
"theme_color": "#000000",
"background_color": "#ffffff"
}
1 change: 1 addition & 0 deletions public/service-worker.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions public/workbox-7c2a5a06.js

Large diffs are not rendered by default.

89 changes: 89 additions & 0 deletions src/components/blocks/errors/custom500.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import React from "react";
import {useRouter} from "next/router";
import {Player} from "@lottiefiles/react-lottie-player";
import image1 from "../../../../assets/lottie/looking.json";
import image2 from "../../../../assets/lottie/ghost.json";
import image3 from "../../../../assets/lottie/ufo.json";

function Custom500() {
const router = useRouter();

const handlerefresh = () => {
window.location.reload(); // refresh page
};

return (
<div className="image404">


<div className="area" >
<ul className="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div >
<div className="centered-image404">
<Player
autoplay
loop
src={image1}
style={{
width: "50%",
height: "50%",
maxWidth: "800px",
maxHeight: "800px",
}}
/>
<h1 className="not-found-title404">500 - Internal Server Error Occurred!</h1>
<p className="not-found-text404">
{/* eslint-disable-next-line react/no-unescaped-entities */}
Oops! It seems like you've stumbled upon server error on my
portfolio website.
</p>
<p style={{ fontSize: '14px' }}>
If you think this issues or bugs, please report them{' '}
<a href="https://github.com/muhammad-fiaz/portfolio/issues/new">@muhammad-fiaz</a>
</p>
<button className="go-back-button404" onClick={handlerefresh}>
Refresh Page
</button>
</div>
<div className="anim">
<div className="ufo">
<Player
autoplay
loop
src={image3}
style={{
width: "80px",
height: "80px",
}}
/>
</div>
<div className="ghost">
<Player
autoplay
loop
src={image2}
style={{
width: "80px",
height: "80px",
}}
/>
</div>

</div>

</div>
);
}

export default Custom500;
2 changes: 1 addition & 1 deletion src/components/sections/index/home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function Home() {
/>
<section className={about.content}>
<div className={about.image}>
<Image src="/img/fiaz-org.jpeg" width={600} height={800} alt="Muhammad Fiaz" loading="eager" />
<Image src="/img/muhammadfiaz.jpeg" width={600} height={800} alt="Muhammad Fiaz" loading="eager" />
</div>
<div className={about.copy}>
<CopyBlock
Expand Down

0 comments on commit cc1a3dd

Please sign in to comment.