Bump version

Add hotjar support

LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2021 MD. Ariful Alam
+   Copyright 2022 Ariful Alam
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
@@ -198,4 +198,4 @@
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
-   limitations under the License.
+   limitations under the License.

README.md

@@ -24,6 +24,7 @@ It's all possible using [GitHub API](https://developer.github.com/v3/) (for auto
 
 ✓ [21 Themes](#themes)\
 ✓ [Google Analytics](#google-analytics)\
+✓ [Hotjar](#hotjar)\
 ✓ [Meta Tags](#meta-tags)\
 ✓ [Avatar and Bio](#avatar-and-bio)\
 ✓ [Social Links](#social-links)\
@@ -43,8 +44,9 @@ These instructions will get you a copy of the project and deploy your website on
 
   - **[Fork](https://docs.github.com/en/get-started/quickstart/fork-a-repo)** the repo so you have your own project to customize by clicking the fork icon on the top right side. A "fork" is a copy of a repository.
   - Rename your forked repository to <code>username.github.io</code> in github, where <code>username</code> is your GitHub username (or organization name).
-  - Go to your repo's **Actions** page and enable workflows.\
-  ![Workflows](https://arifszn.github.io/assets/img/hosted/ezprofile/workflows.png)
+  - Go to your repo's **Actions** page and enable workflows.
+  
+    ![Workflows](https://arifszn.github.io/assets/img/hosted/ezprofile/workflows.png)
 
   - Open <code>package.json</code>, and change <code>homepage</code>'s value to <code>https://username.github.io</code>.
   
@@ -60,14 +62,14 @@ These instructions will get you a copy of the project and deploy your website on
   - The CI/CD pipeline will publish your page at the gh-pages branch automatically.
   - Go to your repo's **Settings** -> **Pages** -> **Source** and change the branch to gh-pages and click **save**.
   - Your personal portfolio will be live at <code>username.github.io</code>.
-  - Any time you commit a change to the **main** branch the website will automatically update.
+  - Any time you commit a change to the **main** branch, the website will be automatically updated.
 
   
 You can skip the above steps and do a manual deployment by running <code>npm run deploy</code>. For more info, visit [here](https://create-react-app.dev/docs/deployment/#github-pages).
 
 As this is a create react app, you can also host your website to Netlify, Vercel, Heroku, or other popular services. Please refer to this [doc](https://create-react-app.dev/docs/deployment) for a detailed deployment guide to other services.
 
-If you see only <code>README</code> at <code>username.github.io</code>, be sure to change your GitHub Page's source to <code>gh-pages</code> branch. See [how to](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site).
+If you see only <code>README</code> at <code>username.github.io</code>, be sure to change your GitHub Page's source to <code>gh-pages</code> branch. See [how to](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site). Also, if you face any issue rendering the website, double-check the `homepage` value in the package.json.
 
 
 
@@ -146,6 +148,10 @@ module.exports = {
     // GA3 tracking id/GA4 tag id
     id: '' // UA-XXXXXXXXX-X | G-XXXXXXXXXX
   },
+  hotjar: {
+    id: '',
+    snippetVersion : 6 
+  },
   themeConfig: {
     default: 'light',
 
@@ -238,6 +244,20 @@ Besides tracking visitors, ezFolio will track click events on projects and blog
 <br/>
 ![Event](https://www.arifszn.com/assets/img/hosted/ezprofile/event.png)
 
+### Hotjar
+
+ezProfile supports hotjar. If you do not want to use Hotjar, keep the <code>id</code> empty.
+
+```js
+// config.js
+module.exports = {
+  // ...
+  hotjar: {
+    id: '',
+    snippetVersion : 6 
+  },
+}
+```
 
 ### Meta Tags
 
@@ -389,7 +409,7 @@ The posts are fetched by [Article-api](https://github.com/arifszn/article-api).
 
 ## 📢 Please Read
 
-I intend to keep my works open source. Please do not discourage me by claiming this work by copying it as your own or removing/changing the footer notice. However You are open to use this project by forking it and change any code necessary(except footer notice). Go through the [License](https://github.com/arifszn/ezprofile/blob/main/LICENSE) before thinking of stealing this project. For every stolen copy found, an issue will be created on the concerned repo and a [DMCA Takedown](https://www.dmca.com/FAQ/What-is-a-DMCA-Takedown) notice will be sent. Do not fall into this [list](https://github.com/arifszn/ezprofile/issues/2).
+I intend to keep my works open source. Please do not discourage me by claiming this work by copying it as your own. However, You are open to use this project by forking it and change any code necessary by giving attribute to the original author. Please see this [issue](https://github.com/arifszn/ezprofile/issues/11) for more info.
 
 
 ## 💖 Support
@@ -403,4 +423,4 @@ Any contributors who want to make this project better can make contributions, wh
 
 ## 📄 License
 
-ezProfile is licensed under the [Apache-2.0 License](https://github.com/arifszn/ezprofile/blob/main/LICENSE).
+**ezProfile** is licensed under the [Apache-2.0 License](https://github.com/arifszn/ezprofile/blob/main/LICENSE).

package.json

@@ -1,6 +1,6 @@
 {
     "name": "ezprofile",
-    "version": "1.0.1",
+    "version": "1.1.1",
     "description": "Kickstart your personal portfolio with Github Api and blog",
     "homepage": "https://arifszn.github.io/ezprofile",
     "private": true,
@@ -16,7 +16,7 @@
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
         "article-api": "^1.0.5",
-        "axios": "^0.21.1",
+        "axios": "^0.23.0",
         "daisyui": "^1.12.1",
         "gh-pages": "^3.2.3",
         "moment": "^2.29.1",
@@ -24,6 +24,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-helmet-async": "^1.1.0",
+        "react-hotjar": "^3.0.1",
         "react-icons": "^4.2.0",
         "react-scripts": "4.0.3",
         "sass": "^1.38.0",

src/App.js

@@ -90,7 +90,7 @@ function App() {
             });
 
             if (error.response.status === 403) {
-                setError(403);
+                setError(429);
             } else if (error.response.status === 404) {
                 setError(404);
             } else {
@@ -111,7 +111,7 @@ function App() {
                         <ErrorPage
                             status={`${error}`}
                             title={(error === 404) ? 'The Github Username is Incorrect' : (
-                                error === 403 ? 'Too Many Request.' : `Ops!!`
+                                error === 429 ? 'Too Many Requests.' : `Ops!!`
                             )}
                             subTitle={
                                 (error === 404) ? (
@@ -119,7 +119,7 @@ function App() {
                                         Please provide correct github username in <code>src\config.js</code>
                                     </p>
                                 ) : (
-                                    error === 403 ? (
+                                    error === 429 ? (
                                         <p>
                                             Oh no, you hit the{' '}
                                             <a
@@ -161,7 +161,7 @@ function App() {
                                     </div>
                                 </div>
                             </div>
-                            {/* DO NOT REMOVE/MODIFY THE FOOTER */}
+                            {/* DO NOT REMOVE/MODIFY THE FOOTER. FOR MORE INFO https://github.com/arifszn/ezprofile#-please-read */}
                             <footer className="p-4 footer bg-base-200 text-base-content footer-center">
                                 <div>
                                     <p className="font-mono text-sm">Made with <a className="text-primary" href="https://github.com/arifszn/ezprofile" target="_blank" rel="noreferrer">ezProfile</a> and ❤️</p>

src/components/Blog.js

@@ -95,7 +95,7 @@ const Blog = () => {
                 key={index}
                 onClick={() => {
                     try {
-                        if (config.googleAnalytics.id) {
+                        if (config.googleAnalytics?.id) {
                             ga.event({
                                 action: "Click Blog Post",
                                 params: {

src/components/MetaTags.js

@@ -14,12 +14,12 @@ const MetaTags = (props) => {
                 props.profile && (
                     <Helmet>
                         {
-                            config.googleAnalytics.id && (
+                            config.googleAnalytics?.id && (
                                 <script async src={`https://www.googletagmanager.com/gtag/js?id=${config.googleAnalytics.id}`}></script>
                             )
                         }
                         {
-                            config.googleAnalytics.id && (
+                            config.googleAnalytics?.id && (
                                 <script>
                                     {
                                         `

src/components/Project.js

@@ -57,7 +57,7 @@ const Project = (props) => {
                 key={index}
                 onClick={() => {
                     try {
-                        if (config.googleAnalytics.id) {
+                        if (config.googleAnalytics?.id) {
                             ga.event({
                                 action: "Click project",
                                 params: {

src/components/ThemeChanger.js

@@ -12,7 +12,7 @@ const ThemeChanger = () => {
     const changeTheme = (e, selectedTheme) => {
         e.preventDefault();
         document.querySelector('html').setAttribute('data-theme', selectedTheme);
-        localStorage.setItem('ezprofileTheme', selectedTheme);
+        localStorage.setItem('ezprofile-theme', selectedTheme);
 
         setTheme(selectedTheme);
     }

src/config.js

@@ -6,7 +6,7 @@ module.exports = {
         limit: 8, // How many projects to display.
         exclude: {
             forks: false, // Forked projects will not be displayed if set to true.
-            projects: [] // These projects will not be displayed. example: ['my-project1', 'my-project2']
+            projects: ['laravel-ecommerce'] // These projects will not be displayed. example: ['my-project1', 'my-project2']
         }
     },
     social: {
@@ -16,21 +16,20 @@ module.exports = {
         dribbble: '',
         behance: '',
         medium: '',
-        devto: '',
+        devto: 'arifszn',
         website: 'https://arifszn.github.io',
         phone: '',
-        email: 'contact@arifszn.com'
+        email: 'arifulalamszn@gmail.com'
     },
     skills: [
         'PHP',
         'Laravel',
         'JavaScript',
         'React.js',
-        'Vue.js',
         'Node.js',
-        'Jquery',
         'MySQL',
         'Git',
+        'Docker',
         'CSS',
         'Antd',
         'Tailwind',
@@ -39,12 +38,12 @@ module.exports = {
     experiences: [
         { 
             company: 'Monstarlab Bangladesh',
-            position: 'Software Engineer',
+            position: 'Backend Engineer II',
             from: 'September 2021',
             to: 'Present'
         },
         { 
-            company: 'Orangetoolz - My Offer 360 Degree',
+            company: 'Orangetoolz',
             position: 'Jr. Full Stack Engineer',
             from: 'July 2019',
             to: 'August 2021'
@@ -80,11 +79,15 @@ module.exports = {
         // Display blog posts from your medium or dev.to account. (Optional)
         source: 'dev.to', // medium | dev.to
         username: 'arifszn',
-        limit: 2 // How many posts to display. Max is 10.
+        limit: 3 // How many posts to display. Max is 10.
     },
     googleAnalytics: {
         // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
-        id: 'G-WLLB5E14M6' // Please remove this and use your own tag id
+        id: 'G-WLLB5E14M6' // Please remove this and use your own tag id or keep it empty
+    },
+    hotjar: {
+        id: '2617601', //  Please remove this and use your own id or keep it empty
+        snippetVersion : 6
     },
     themeConfig: {
         default: 'light',
@@ -122,4 +125,4 @@ module.exports = {
             'dracula'
         ]
     }
-}
+}

src/helpers/utils.js

@@ -1,13 +1,14 @@
 import config from "../config";
 import colors from './colors.json';
+import { hotjar } from 'react-hotjar';
 
 export const getInitialTheme = () => {
     if (config.themeConfig.disableSwitch) {
         return config.themeConfig.default;
     }
 
-    if (localStorage.hasOwnProperty('ezprofileTheme')) {
-        let theme = localStorage.getItem('ezprofileTheme');
+    if (localStorage.hasOwnProperty('ezprofile-theme')) {
+        let theme = localStorage.getItem('ezprofile-theme');
         return theme;
     }
 
@@ -67,4 +68,12 @@ export const isThemeDarkish = (theme) => {
     } else {
         return false;
     }
+}
+
+export const setupHotjar = () => {
+    if (config.hotjar?.id) {
+        let snippetVersion = config.hotjar?.snippetVersion ? config.hotjar?.snippetVersion : 6;
+        
+        hotjar.initialize(config.hotjar.id, snippetVersion);
+    }
 }

src/index.css

@@ -1,4 +1,10 @@
-@use "sass:meta";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+    scrollbar-width: thin;
+}
 
 ::-webkit-scrollbar-track {
     box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
@@ -13,7 +19,7 @@
         background-color: #f1f1f1;
     }
 }
- 
+
 ::-webkit-scrollbar-thumb {
     background-color: #888;
     border-radius: 10px;
@@ -26,7 +32,6 @@ body {
     sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    --z-primary: red;
 }
 
 code {
@@ -34,10 +39,6 @@ code {
     monospace;
 }
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .text-base-content-important {
     color: hsla(var(--bc) / var(--tw-text-opacity)) !important;
 }

src/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.scss';
+import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { HelmetProvider } from 'react-helmet-async';
 import { ThemeProvider } from './contexts/ThemeContext';
 import { LoadingProvider } from './contexts/LoadingContext';
+import { setupHotjar } from './helpers/utils';
 
 ReactDOM.render(
     <React.StrictMode>
@@ -21,3 +22,4 @@ ReactDOM.render(
 );
 
 reportWebVitals();
+setupHotjar();

tailwind.config.js

@@ -11,6 +11,6 @@ module.exports = {
         require('daisyui')
     ],
     daisyui: {
-      logs: false
+        logs: false
     },
 }