├── .eslintrc.json ├── .gitignore ├── README.md ├── components ├── Background │ ├── Edu_Card.jsx │ └── Exp_Card.jsx ├── Common │ ├── Badge.jsx │ ├── BannerLayout.jsx │ ├── CardLayout.jsx │ ├── DrawerLayout.jsx │ ├── ImageAndParagraphSkeleton.jsx │ ├── Intro │ │ ├── Contact.jsx │ │ ├── Download.jsx │ │ ├── Languages.jsx │ │ ├── LinearBar.jsx │ │ ├── Location.jsx │ │ ├── ProgressBar.jsx │ │ ├── Skills.jsx │ │ ├── Tools.jsx │ │ └── index.jsx │ ├── Nav │ │ ├── DrawerIntro.jsx │ │ ├── Nav.jsx │ │ └── NavItem.jsx │ └── ParagraphSkeleton.jsx ├── Fiverr_Icon.jsx ├── Footer.jsx ├── HomeComponents │ ├── Banner.jsx │ ├── ClientReviews │ │ ├── ClientReviews.jsx │ │ └── ReviewCard.jsx │ ├── Expertise │ │ ├── ExpertiseCard.jsx │ │ └── MyExpertise.jsx │ └── Recommendations │ │ ├── RecommendationCard.jsx │ │ └── Recommendations.jsx └── Portfolio │ └── PortfolioCard.jsx ├── constants └── constants.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── _document.js ├── api │ ├── background.js │ ├── expertise.js │ ├── portfolio.js │ ├── recommendations.js │ └── review.js ├── background.jsx ├── contact.jsx ├── index.jsx ├── layout.js └── portfolio.jsx ├── postcss.config.js ├── public ├── favicon.ico ├── fonts │ ├── Cascadia.ttf │ ├── Circular-Bold.otf │ ├── Circular-Book.otf │ ├── Circular-Light.otf │ ├── Circular-Medium.otf │ └── CircularStd-Black.otf ├── images │ ├── adam.png │ ├── background.png │ ├── card-bg.jpg │ ├── emoji.png │ ├── muhammad.jpeg │ ├── nasir.jpg │ ├── osama.jpg │ ├── shahmir.jfif │ ├── sikandar.jpeg │ └── svgs │ │ └── fiverr.svg ├── osamajavaid-resume.pdf ├── projects │ ├── absco.png │ ├── alsn.png │ ├── culyte.png │ ├── erp.png │ ├── fateh.png │ ├── firmsanad.png │ ├── jmm.png │ ├── otawix.png │ ├── spatay.png │ └── tojjar.png └── readme-images │ ├── moj.png │ └── portfolio.png ├── styles ├── Home.module.css └── globals.css ├── tailwind.config.js └── utils └── utils.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/osamajavaid/portfolio) 4 | ![GitHub stars](https://img.shields.io/github/stars/osamajavaid/portfolio?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/osamajavaid/portfolio?style=social) 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/iosamajavaid?style=social)](https://twitter.com/intent/follow?screen_name=iosamajavaid) 7 | 8 |
9 |
10 | 11 | 12 | 13 |

Muhammad Osama Javaid - Personal portfolio

14 | 15 | This website is fully responsive personal portfolio,
Responsive for all devices, built using Nextjs, TailwindCSS only. 16 | 17 | ➥ Live Demo 18 | 19 |
20 | 21 |
22 | 23 | ### Demo Screeshots 24 | 25 | ![Osama Portfolio Desktop Demo](./public/readme-images/portfolio.png "Desktop Demo") 26 | 27 | ### Prerequisites 28 | 29 | Before you begin, ensure you have met the following requirements: 30 | 31 | - [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system. 32 | 33 | ### Run Locally 34 | 35 | To run **portfolio** locally, run this command on your git bash: 36 | 37 | Linux and macOS: 38 | 39 | ```bash 40 | sudo git clone https://github.com/osamajavaid/portfolio.git 41 | ``` 42 | 43 | Windows: 44 | 45 | ```bash 46 | git clone https://github.com/osamajavaid/portfolio.git 47 | ``` 48 | 49 | ### Contact 50 | 51 | If you want to contact with me you can reach me at [X](https://www.x.com/iosamajavaid). 52 | 53 | ### License 54 | 55 | This project is **free to use** and does not contains any license. 56 | -------------------------------------------------------------------------------- /components/Background/Edu_Card.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CardLayout from '../Common/CardLayout' 3 | 4 | const Edu_Card = ({ data }) => { 5 | return ( 6 | 7 |
8 |
9 |
{data.title}
10 |
11 | {" "} 12 | {data.year}{" "} 13 |
14 |
15 |
16 | {data.degree} 17 |
18 |
19 | {data.detail} 20 |
21 |
22 | 23 | ) 24 | } 25 | 26 | export default Edu_Card -------------------------------------------------------------------------------- /components/Background/Exp_Card.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CardLayout from '../Common/CardLayout' 3 | 4 | const Exp_Card = ({ data }) => { 5 | return ( 6 | 7 |
8 |
{data.title}
9 |
10 | {data.role} 11 |
12 |
13 | 14 | {data.url} 15 | 16 |
17 |
18 | {data.desc} 19 |
20 |
21 |
{data.year}
{data.location}
22 |
23 |
24 | 25 | ) 26 | } 27 | 28 | export default Exp_Card -------------------------------------------------------------------------------- /components/Common/Badge.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Badge = ({ title }) => { 4 | return ( 5 | {title} 6 | ) 7 | } 8 | 9 | export default Badge -------------------------------------------------------------------------------- /components/Common/BannerLayout.jsx: -------------------------------------------------------------------------------- 1 | 2 | const BannerLayout = ({ children }) => { 3 | return ( 4 |
11 |
12 |
13 | {children} 14 |
15 |
16 |
17 | ) 18 | } 19 | 20 | export default BannerLayout -------------------------------------------------------------------------------- /components/Common/CardLayout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const CardLayout = ({ children, className = "h-full w-full" }) => { 4 | return ( 5 |
14 | {children} 15 |
16 | ) 17 | } 18 | 19 | export default CardLayout -------------------------------------------------------------------------------- /components/Common/DrawerLayout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const DrawerLayout = ({ setIsOpen, isOpen, children }) => { 4 | return ( 5 |
13 |
19 |
20 | {children} 21 |
22 |
23 |
{ 26 | setIsOpen(false); 27 | }} 28 | >
29 |
30 | ) 31 | } 32 | 33 | export default DrawerLayout -------------------------------------------------------------------------------- /components/Common/ImageAndParagraphSkeleton.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const ImageAndParagraphSkeleton = ({ className }) => { 4 | return ( 5 | 6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |
14 | Loading... 15 |
16 | 17 | ) 18 | } 19 | 20 | export default ImageAndParagraphSkeleton -------------------------------------------------------------------------------- /components/Common/Intro/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { CONTACTS } from '../../../constants/constants'; 3 | import Link from 'next/link'; 4 | 5 | const Contact = () => { 6 | return ( 7 |
8 |
9 | Email Address 10 | 11 | 12 | {CONTACTS.EMAIL} 13 | 14 |
15 |
16 | Phone 17 | {CONTACTS.PHONE} 18 |
19 |
20 | ); 21 | }; 22 | 23 | export default Contact; 24 | -------------------------------------------------------------------------------- /components/Common/Intro/Download.jsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | const Download = ({ icon }) => { 3 | return ( 4 | <> 5 | 6 | Download Resume 7 | {icon} 8 | 9 | 10 | ); 11 | }; 12 | 13 | export default Download; 14 | -------------------------------------------------------------------------------- /components/Common/Intro/Languages.jsx: -------------------------------------------------------------------------------- 1 | import { Progress } from "antd" 2 | import { useEffect, useState } from "react" 3 | 4 | const Languages = () => { 5 | const [urdu, setUrdu] = useState(0) 6 | const [english, setEnglish] = useState(0) 7 | 8 | useEffect(() => { 9 | const timer = setInterval(() => { 10 | if (urdu < 98) { 11 | setUrdu(prevCount => prevCount + 1); 12 | } 13 | if (english < 88) { 14 | setEnglish(prevCount => prevCount + 1); 15 | } 16 | }, 30); 17 | 18 | return () => clearInterval(timer); 19 | }, [urdu, english]) 20 | return ( 21 |
22 |
23 | Languages 24 |
25 |
26 | 27 | Urdu 28 |
29 |
30 | 31 | English 32 |
33 |
34 |
35 | 36 |
37 | ) 38 | } 39 | 40 | export default Languages -------------------------------------------------------------------------------- /components/Common/Intro/LinearBar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const LinearBar = ({ title, percent, bgColor }) => { 4 | return ( 5 |
6 |
7 | {title} 8 | {percent} 9 |
10 |
11 |
12 |
13 |
14 | ) 15 | } 16 | 17 | export default LinearBar -------------------------------------------------------------------------------- /components/Common/Intro/Location.jsx: -------------------------------------------------------------------------------- 1 | import { DETAILS } from '../../../constants/constants'; 2 | import { getObjectKeys } from '../../../utils/utils'; 3 | 4 | const Location = () => { 5 | const keys = getObjectKeys(DETAILS); 6 | return ( 7 |
8 | {keys.map((key, index) => { 9 | return ( 10 |
11 | {key} 12 | {DETAILS[key]} 13 |
14 | ); 15 | })} 16 |
17 | ); 18 | }; 19 | 20 | export default Location; 21 | -------------------------------------------------------------------------------- /components/Common/Intro/ProgressBar.jsx: -------------------------------------------------------------------------------- 1 | // import { useState } from "react"; 2 | // import ApexCharts from 'apexcharts' 3 | 4 | // const ProgressBar = () => { 5 | 6 | // const [state, setState] = useState({ 7 | // series: [76], 8 | // options: { 9 | // chart: { 10 | // type: 'radialBar', 11 | // offsetY: -20, 12 | // sparkline: { 13 | // enabled: true 14 | // } 15 | // }, 16 | // plotOptions: { 17 | // radialBar: { 18 | // startAngle: -90, 19 | // endAngle: 90, 20 | // track: { 21 | // background: "#e7e7e7", 22 | // strokeWidth: '97%', 23 | // margin: 5, // margin is in pixels 24 | // dropShadow: { 25 | // enabled: true, 26 | // top: 2, 27 | // left: 0, 28 | // color: '#999', 29 | // opacity: 1, 30 | // blur: 2 31 | // } 32 | // }, 33 | // dataLabels: { 34 | // name: { 35 | // show: false 36 | // }, 37 | // value: { 38 | // offsetY: -2, 39 | // fontSize: '22px' 40 | // } 41 | // } 42 | // } 43 | // }, 44 | // grid: { 45 | // padding: { 46 | // top: -10 47 | // } 48 | // }, 49 | // fill: { 50 | // type: 'gradient', 51 | // gradient: { 52 | // shade: 'light', 53 | // shadeIntensity: 0.4, 54 | // inverseColors: false, 55 | // opacityFrom: 1, 56 | // opacityTo: 1, 57 | // stops: [0, 50, 53, 91] 58 | // }, 59 | // }, 60 | // labels: ['Average Results'], 61 | // }, 62 | 63 | // }) 64 | 65 | // return ( 66 | //
67 | // 68 | //
69 | 70 | // ); 71 | // } 72 | 73 | // export default ProgressBar 74 | // // const domContainer = document.querySelector('#app'); -------------------------------------------------------------------------------- /components/Common/Intro/Skills.jsx: -------------------------------------------------------------------------------- 1 | import LinearBar from './LinearBar'; 2 | import { SKILLS } from '../../../constants/constants'; 3 | const Skills = () => { 4 | return ( 5 |
6 |
7 | Experties and Competencies 8 |
9 | {SKILLS.map((skill, index) => { 10 | return ; 11 | })} 12 |
13 |
14 |
15 | ); 16 | }; 17 | 18 | export default Skills; 19 | -------------------------------------------------------------------------------- /components/Common/Intro/Tools.jsx: -------------------------------------------------------------------------------- 1 | import Badge from '../Badge'; 2 | import { TECH_STACK } from '../../../constants/constants'; 3 | const Tools = () => { 4 | return ( 5 |
6 |
7 | Tools 8 |
9 | {TECH_STACK.map((item, index) => ( 10 | 11 | ))} 12 |
13 |
14 |
15 | ); 16 | }; 17 | 18 | export default Tools; 19 | -------------------------------------------------------------------------------- /components/Common/Intro/index.jsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | import { FaDownload, FaFacebook, FaGithub, FaLinkedin, FaTwitter } from 'react-icons/fa'; 3 | import Contact from './Contact'; 4 | import Download from './Download'; 5 | import Languages from './Languages'; 6 | import Location from './Location'; 7 | import Tools from './Tools'; 8 | import Skills from './Skills'; 9 | import Image from 'next/image'; 10 | import { NAME, DESIGNATION, SOCIAL_LINKS } from '../../../constants/constants'; 11 | import Osama from '../../../public/images/osama.jpg'; 12 | 13 | const Intro = () => { 14 | return ( 15 | <> 16 | {/* fixed at top */} 17 |
18 | profile picture 19 |
20 | {NAME} 21 | {DESIGNATION} 22 |
23 |
24 | 25 | {/* middle components */} 26 |
27 | 28 | 29 | 30 | 31 | 32 | } /> 33 |
34 | 35 | {/* fixed at bottom */} 36 |
37 | 38 | 39 | 40 | {/* 41 | 42 | */} 43 | {/* 44 | 45 | */} 46 | 47 | 48 | 49 |
50 | 51 | ); 52 | }; 53 | 54 | export default Intro; 55 | -------------------------------------------------------------------------------- /components/Common/Nav/DrawerIntro.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import DrawerLayout from '../DrawerLayout' 3 | import Intro from '../Intro' 4 | 5 | export const DrawerIntro = ({ setIsOpen, isOpen }) => { 6 | return ( 7 | 8 | 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /components/Common/Nav/Nav.jsx: -------------------------------------------------------------------------------- 1 | import { ImCross } from 'react-icons/im' 2 | import { FiAward } from 'react-icons/fi' 3 | import { FaHandshake } from 'react-icons/fa' 4 | import { ImHome } from 'react-icons/im' 5 | import { HiIdentification } from 'react-icons/hi' 6 | import NavItem from './NavItem' 7 | import DrawerLayout from '../DrawerLayout' 8 | 9 | 10 | const Nav = ({ setIsOpen, isOpen }) => { 11 | return ( 12 | 13 |
14 |
setIsOpen(false)} className="flex text-LightGray absolute top-0 w-full items-center justify-start pl-6 text-sm h-10 bg-EveningBlack"> 15 | 16 |
17 |
18 | } NavText={'Home'} /> 19 | } NavText={'Contact'} /> 20 | } NavText={'Background'} /> 21 | } NavText={'Portfolio'} /> 22 |
23 |
24 | 25 | 26 | ) 27 | } 28 | 29 | export default Nav -------------------------------------------------------------------------------- /components/Common/Nav/NavItem.jsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import { useRouter } from 'next/router'; 3 | import React from 'react' 4 | 5 | 6 | const NavItem = ({ NavIcon, NavText, NavRoute, setIsOpen }) => { 7 | const router = useRouter(); 8 | const className = router.asPath === `${NavRoute}` ? "rounded-xl !text-DeepNightBlack bg-Green font-bold tracking-widest" : ''; 9 | 10 | return ( 11 | setIsOpen(false)} 13 | href={NavRoute} 14 | className={`${className} transition flex items-center px-2 hover:bg-EveningBlack text-SilverGray hover:text-SilverGray rounded-xl py-1.5 font-semibold space-x-4 text-base`} 15 | > 16 | {NavIcon} 17 | {NavText} 18 | 19 | ) 20 | } 21 | 22 | export default NavItem -------------------------------------------------------------------------------- /components/Common/ParagraphSkeleton.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CardLayout from './CardLayout' 3 | 4 | const ParagraphSkeleton = ({ className }) => { 5 | return ( 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Loading... 16 |
17 | 18 | 19 | ) 20 | } 21 | 22 | export default ParagraphSkeleton -------------------------------------------------------------------------------- /components/Fiverr_Icon.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Fiverr_Icon = () => { 4 | return ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ) 13 | } 14 | 15 | export default Fiverr_Icon -------------------------------------------------------------------------------- /components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import { AiFillCopyrightCircle } from 'react-icons/ai' 2 | import { MdMail } from 'react-icons/md' 3 | import { AiOutlineWhatsApp } from 'react-icons/ai' 4 | 5 | const Footer = () => { 6 | return ( 7 |
8 |
9 |
10 |
11 | 12 |
13 | 2023 All Rights Reserved. 14 |
15 |
16 | Made with ❤️ by Osama 17 |
18 |
19 |
20 | 21 |
22 |
iosamajavaid@gmail.com
23 |
24 |
25 |
26 | ) 27 | } 28 | 29 | export default Footer -------------------------------------------------------------------------------- /components/HomeComponents/Banner.jsx: -------------------------------------------------------------------------------- 1 | import Typewriter from 'typewriter-effect'; 2 | import BannerLayout from '../Common/BannerLayout'; 3 | import { Link } from 'react-scroll'; 4 | 5 | const Banner = () => { 6 | return ( 7 | 8 |
9 |
10 |
11 |
12 |
13 |

Hello, Check This Out!

14 |
15 |
16 |
17 | {"<"}div 18 | {">"} I am a 19 | 28 | 29 | {"div{">"} 30 |
31 |
32 | Explore 33 |
34 |
35 | emoji 36 |
37 |
38 |
39 | 40 | {/* details in row */} 41 |
42 | 43 |
44 | 10+ 45 | Completed Projects 46 |
47 | 48 |
49 | 8+ 50 | Freelance Clients 51 |
52 | 53 |
54 | 5+ 55 | Honors & Awards 56 |
57 | 58 |
59 | 10+ 60 | Opensource Projects 61 |
62 | 63 |
64 |
65 | 66 | ) 67 | } 68 | 69 | export default Banner -------------------------------------------------------------------------------- /components/HomeComponents/ClientReviews/ClientReviews.jsx: -------------------------------------------------------------------------------- 1 | import ReviewCard from "./ReviewCard" 2 | import axios from "axios"; 3 | import { useQuery } from "react-query"; 4 | import ParagraphSkeleton from "../../Common/ParagraphSkeleton"; 5 | 6 | 7 | 8 | const ClientReviews = () => { 9 | 10 | const { isLoading, error, data } = useQuery('review', () => 11 | axios.get('api/review') 12 | .then(({ data }) => data) 13 | .catch(error => console.error('Error fetching testimonials:', error))) 14 | 15 | 16 | return ( 17 | <> 18 |
Clients Reviews
19 |
20 | 21 | { 22 | isLoading ? 23 | [1, 2, 3, 4, 5].map(() => ( 24 | 25 | )) 26 | : 27 | data?.map((data, key) => ( 28 | 29 | )) 30 | } 31 | 32 |
33 | 34 | 35 | ) 36 | } 37 | 38 | export default ClientReviews -------------------------------------------------------------------------------- /components/HomeComponents/ClientReviews/ReviewCard.jsx: -------------------------------------------------------------------------------- 1 | import { MdLocationOn } from 'react-icons/md' 2 | import { FaStar } from 'react-icons/fa' 3 | import CardLayout from '../../Common/CardLayout' 4 | 5 | const ReviewCard = ({ data }) => { 6 | return ( 7 | 8 |
9 |
10 |
11 | {data?.clientName} 12 |
13 | 14 | {data?.clientLocation} 15 |
16 |
17 | {data?.clientSource} 18 |
19 |
20 | {data.clientReview} 21 |
22 |
23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 | 31 | ) 32 | } 33 | 34 | export default ReviewCard -------------------------------------------------------------------------------- /components/HomeComponents/Expertise/ExpertiseCard.jsx: -------------------------------------------------------------------------------- 1 | import CardLayout from "../../Common/CardLayout" 2 | 3 | const ExpertiseCard = ({ data }) => { 4 | return ( 5 | 6 |
7 |
{data.title}
8 |
9 | {data.desc} 10 |
11 |
12 | 13 | ) 14 | } 15 | 16 | export default ExpertiseCard -------------------------------------------------------------------------------- /components/HomeComponents/Expertise/MyExpertise.jsx: -------------------------------------------------------------------------------- 1 | import ExpertiseCard from "./ExpertiseCard" 2 | import { useQuery } from "react-query"; 3 | import axios from "axios"; 4 | import ParagraphSkeleton from "../../Common/ParagraphSkeleton"; 5 | 6 | const MyExpertise = () => { 7 | 8 | const { isLoading, error, data } = useQuery('expertise', () => 9 | axios.get('api/expertise') 10 | .then(({ data }) => data) 11 | .catch(error => console.error('Error fetching testimonials:', error))) 12 | 13 | return ( 14 | <> 15 |
My Expertise
16 |
17 | 18 | { 19 | isLoading ? 20 | [1, 2, 3, 4, 5, 6].map(() => ( 21 | 22 | )) 23 | : 24 | data?.map((data, key) => ( 25 | 26 | )) 27 | } 28 | 29 |
30 | 31 | ) 32 | } 33 | 34 | export default MyExpertise -------------------------------------------------------------------------------- /components/HomeComponents/Recommendations/RecommendationCard.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CardLayout from '../../Common/CardLayout' 3 | 4 | const RecommendationCard = ({ data }) => { 5 | return ( 6 | 7 |
8 | 9 |
10 | {data?.name} 11 |
12 |
{data?.designation}
13 |
{data?.view}
14 |
15 | 16 | ) 17 | } 18 | 19 | export default RecommendationCard -------------------------------------------------------------------------------- /components/HomeComponents/Recommendations/Recommendations.jsx: -------------------------------------------------------------------------------- 1 | import RecommendationCard from "./RecommendationCard" 2 | import axios from "axios"; 3 | import { useQuery } from "react-query"; 4 | import ParagraphSkeleton from "../../Common/ParagraphSkeleton"; 5 | 6 | 7 | const Recommendations = () => { 8 | const { isLoading, error, data } = useQuery('recommendations', () => 9 | axios.get('api/recommendations') 10 | .then(({ data }) => data) 11 | .catch(error => console.error('Error fetching testimonials:', error))) 12 | 13 | 14 | return ( 15 | <> 16 |
Recommendations
17 |
18 | 19 | {isLoading ? 20 | [1, 2, 3, 4].map(() => ( 21 | 22 | )) 23 | : 24 | data?.map((data, key) => ( 25 | 26 | )) 27 | } 28 | 29 |
30 | 31 | ) 32 | } 33 | 34 | export default Recommendations -------------------------------------------------------------------------------- /components/Portfolio/PortfolioCard.jsx: -------------------------------------------------------------------------------- 1 | import Badge from "../Common/Badge" 2 | 3 | const PortfolioCard = ({ data }) => { 4 | return ( 5 |
6 | portfolio img 11 |
12 |
13 |

14 | 19 | {data?.projectName} 20 | 21 |

22 |
23 | 28 | 44 | 45 |
46 |
47 |

48 | {data?.projectDetail} 49 |

50 |
51 | {data.technologiesUsed.map((index, key) => )} 52 |
53 |
54 |
55 | ) 56 | } 57 | 58 | export default PortfolioCard -------------------------------------------------------------------------------- /constants/constants.js: -------------------------------------------------------------------------------- 1 | export const NAME = 'Muhammad Osama Javaid'; 2 | 3 | export const DESIGNATION = `MERN Stack Developer | Open Source Contributor | Tech Blogger`; 4 | 5 | export const DETAILS = { 6 | Residence: 'Pakistan', 7 | City: 'Peshawar', 8 | Age: '23', 9 | }; 10 | 11 | export const SKILLS = [ 12 | { 13 | title: 'MERN Stack Developer', 14 | level: '75%', 15 | }, 16 | { 17 | title: 'React Developer', 18 | level: '91%', 19 | }, 20 | // { 21 | // title: 'Desktop Application Developer', 22 | // level: '75%', 23 | // }, 24 | { 25 | title: 'Backend Developer', 26 | level: '54%', 27 | }, 28 | { 29 | title: 'Technical Blogger', 30 | level: '83%', 31 | }, 32 | ]; 33 | 34 | export const TECH_STACK = [ 35 | 'JavaScript', 36 | 'ReactJS', 37 | 'NextJS', 38 | 'TypeScript', 39 | 'NodeJS', 40 | 'Redux', 41 | 'Zustand', 42 | 'CSS', 43 | 'SCSS', 44 | 'TailwindCSS', 45 | 'Ant Design', 46 | 'Material UI', 47 | 'Next UI', 48 | 'REST API', 49 | 'MongoDB', 50 | 'MySQL', 51 | 'Git', 52 | 'GitHub', 53 | 'Jira', 54 | 'Figma', 55 | 'Adobe XD', 56 | ]; 57 | 58 | export const CONTACTS = { 59 | EMAIL: 'iosamajavaid@gmail.com', 60 | PHONE: '+923159591822', 61 | }; 62 | export const SOCIAL_LINKS = { 63 | GITHUB: 'https://github.com/osamajavaid', 64 | LINKEDIN: 'https://www.linkedin.com/in/iosamajavaid/', 65 | TWITTER: 'https://twitter.com/iosamajavaid', 66 | FACEBOOK: 'https://www.facebook.com/iosamajavaid', 67 | }; 68 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | eslint: { 3 | // Warning: This allows production builds to successfully complete even if 4 | // your project has ESLint errors. 5 | ignoreDuringBuilds: true, 6 | }, 7 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@next/font": "13.1.1", 13 | "antd": "^5.6.1", 14 | "axios": "^1.3.4", 15 | "eslint": "8.30.0", 16 | "eslint-config-next": "13.1.1", 17 | "next": "13.1.1", 18 | "react": "18.2.0", 19 | "react-dom": "18.2.0", 20 | "react-icons": "^4.7.1", 21 | "react-query": "^3.39.3", 22 | "react-scroll": "^1.8.9", 23 | "sass": "^1.64.2", 24 | "typewriter-effect": "^2.19.0" 25 | }, 26 | "devDependencies": { 27 | "autoprefixer": "^10.4.13", 28 | "postcss": "^8.4.20", 29 | "tailwindcss": "^3.2.4" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | import Layout from './layout' 4 | import { QueryClient, QueryClientProvider } from 'react-query' 5 | 6 | const queryClient = new QueryClient() 7 | 8 | export default function App({ Component, pageProps }) { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /pages/api/background.js: -------------------------------------------------------------------------------- 1 | const background = [ 2 | { 3 | eduCards: [ 4 | { 5 | id: 0, 6 | title: 'UET Peshawar', 7 | degree: 'BS, Computer System Engineering', 8 | detail: "Bachelor's Degree in Computer System Engineering from UET Peshawar.", 9 | year: '2018-2022' 10 | }, 11 | { 12 | id: 1, 13 | title: 'Peshawar Model Degree College', 14 | degree: 'HSSC, Pre Engineering', 15 | detail: "Completed FSC part 1 and part 2 in Pre-Engineering from Peshawar Model Degree College.", 16 | year: '2015-2017' 17 | }, 18 | { 19 | id: 2, 20 | title: 'Falcon Academy', 21 | degree: 'SSC, Science Subjects', 22 | detail: "Completed SSC part 1 and part 2 in Science subjects from Falcon Academy Seni Gumbat Kohat", 23 | year: '2013-2015' 24 | }, 25 | ] 26 | }, 27 | { 28 | expCards: [ 29 | { 30 | id: 1, 31 | title: 'JMM Technologies', 32 | role: 'Frontend Developer', 33 | url: 'https://jmm.ltd/', 34 | desc: 'As a frontend developer, I use React, Next & JavaScript to build user interfaces for web applications.', 35 | year: '02/2023 - Present', 36 | location: 'Peshawar, Pakistan' 37 | }, 38 | { 39 | id: 2, 40 | title: 'HauzaTech', 41 | role: 'Internee', 42 | url: 'no website', 43 | desc: 'As an Internee, I learned how to use React & JavaScript to build interactive websites.', 44 | year: '02/2023 - Present', 45 | location: 'Peshawar, Pakistan' 46 | }, 47 | { 48 | id: 3, 49 | title: 'Encoder Bytes', 50 | role: 'PHP Developer', 51 | url: 'https://www.encoderbytes.com/', 52 | desc: "I work there as a PHP developer, there I learned how to do CRUD'S operations in PHP, also I worked on Firebase", 53 | year: '09/2020 - 02/2021', 54 | location: 'Peshawar, Pakistan' 55 | }, 56 | 57 | ] 58 | } 59 | ] 60 | 61 | 62 | export default function handler(req, res) { 63 | res.status(200).json(background) 64 | } 65 | -------------------------------------------------------------------------------- /pages/api/expertise.js: -------------------------------------------------------------------------------- 1 | const expertise = [ 2 | { 3 | id: 0, 4 | title: 'Full Stack Development', 5 | desc: 'I am a skilled MERN stack developer with extensive experience in building robust web applications using MongoDB, Express.js, React.js, and Node.js. I possess a strong understanding of server-side rendering, API integration, and database management. With my expertise, I can deliver dynamic and efficient web solutions tailored to meet the unique requirements of clients.', 6 | }, 7 | { 8 | id: 1, 9 | title: 'Scrum and Jira', 10 | desc: "As a developer, I'm proficient in Jira and Scrum methodologies. I use Jira to simplify project management tasks like task assignment, prioritization, and progress tracking. Scrum has improved my teamwork, utilizing daily stand-ups, sprint planning, and retrospectives. My expertise ensures high-quality software products are delivered promptly.", 11 | }, 12 | { 13 | id: 2, 14 | title: 'Designing (UI/UX)', 15 | desc: 'I am proficient in using design software such as Figma, Adobe XD, and Adobe Illustrator. Through participating in hackathons and freelance work, I have gained practical experience in UI/UX design and graphic design. Designing is my passion, and it has allowed me to continue to develop my creative skills and grow in the field.', 16 | }, 17 | { 18 | id: 3, 19 | title: 'Github', 20 | desc: "GitHub is essential for version control and collaboration. Its intuitive interface and features like pull requests and issue tracking simplify the process. Continuous integration ensures up-to-date code. GitHub is vital to my success as a developer.", 21 | }, 22 | { 23 | id: 4, 24 | title: 'Open Source Contributor', 25 | desc: "Open Source is the future. I usually take some time on weekend and contribute into opensource project. It gives me opportunity to learn from best developer's practices and also gives me a chance to help others and contribute into the community for the good.", 26 | }, 27 | ] 28 | 29 | export default function handler(req, res) { 30 | res.status(200).json(expertise) 31 | } 32 | -------------------------------------------------------------------------------- /pages/api/portfolio.js: -------------------------------------------------------------------------------- 1 | const portfolio = [ 2 | { 3 | id: 0, 4 | projectName: "JMM ERP", 5 | url: "https://jmmerp.com/", 6 | image: "projects/erp.png", 7 | projectDetail: "Restructure your business with JMM ERP’s all-in-one cloud-based ERP. JMM ERP provides a robust, cost-effective online solution with state-of-the-art software to increase business value and enhance customer impact.", 8 | technologiesUsed: [ 9 | { 10 | tech: "ReactJS" 11 | }, 12 | { 13 | tech: ".net" 14 | }, 15 | { 16 | tech: "GraphQL" 17 | }, 18 | { 19 | tech: "Ant Design" 20 | }, 21 | { 22 | tech: "TailwindCSS" 23 | }, 24 | ] 25 | }, 26 | { 27 | id: 0, 28 | projectName: "ABSCO", 29 | url: "https://absco.sa/", 30 | image: "projects/absco.png", 31 | projectDetail: "ABSCO offer unparalleled business consulting solutions to meet client’s unique needs.", 32 | technologiesUsed: [ 33 | { 34 | tech: "ReactJS" 35 | }, 36 | { 37 | tech: "Ant Design" 38 | }, 39 | { 40 | tech: "TailwindCSS" 41 | }, 42 | ] 43 | }, 44 | { 45 | id: 0, 46 | projectName: "JMM Technologies", 47 | url: "https://jmm.ltd/", 48 | image: "projects/jmm.png", 49 | projectDetail: "JMM Technologies is a start-up turned technology company with extensive years of experience delivering digital solutions. As a fast-growing tech firm, we help diverse businesses and organizations. Our expertise in innovative, state-of-the-art digital services accelerates business growth and enhances customer impact.", 50 | technologiesUsed: [ 51 | { 52 | tech: "ReactJS" 53 | }, 54 | { 55 | tech: ".net" 56 | }, 57 | { 58 | tech: "REST API's" 59 | }, 60 | { 61 | tech: "Ant Design" 62 | }, 63 | { 64 | tech: "TailwindCSS" 65 | }, 66 | ] 67 | }, 68 | { 69 | id: 0, 70 | projectName: "ALSN", 71 | url: "https://alsn.app/", 72 | image: "projects/alsn.png", 73 | projectDetail: "ASLN drives digital transformation with certified document translation services. In an interconnected world where seamless communication is imperative, they are strategically positioned to cater to the needs of businesses, individuals, and organizations.", 74 | technologiesUsed: [ 75 | { 76 | tech: "ReactJS" 77 | }, 78 | { 79 | tech: ".net" 80 | }, 81 | { 82 | tech: "REST API's" 83 | }, 84 | { 85 | tech: "Ant Design" 86 | }, 87 | { 88 | tech: "TailwindCSS" 89 | }, 90 | ] 91 | }, 92 | { 93 | id: 0, 94 | projectName: "FirmSanad", 95 | url: "/domain-expired", 96 | image: "projects/firmsanad.png", 97 | projectDetail: "Invest in Saudi Arabia, Streamline Your Business Setup Process in Saudi Arabia with FirmSanad Simplify the process of obtaining licenses and starting a business in Saudi Arabia with our streamlined platform.", 98 | technologiesUsed: [ 99 | { 100 | tech: "ReactJS" 101 | }, 102 | { 103 | tech: ".net" 104 | }, 105 | { 106 | tech: "REST API's" 107 | }, 108 | { 109 | tech: "Ant Design" 110 | }, 111 | { 112 | tech: "TailwindCSS" 113 | }, 114 | ] 115 | }, 116 | { 117 | id: 0, 118 | projectName: "Fateh Al Mustaqbil", 119 | url: "https://fatehtour.com/", 120 | image: "projects/fateh.png", 121 | projectDetail: "Fateh Al Mustaqbil is a one-of-a-kind travel agency designed to cater to the interests of travelers across the globe, founded in 2023 in Riyadh, Saudi Arabia. Their expertise lies in crafting exceptional journeys tailored to each client's unique requirements, whether it be ticketing, hotel bookings, or visa assistance.", 122 | technologiesUsed: [ 123 | { 124 | tech: "ReactJS" 125 | }, 126 | { 127 | tech: ".net" 128 | }, 129 | { 130 | tech: "REST API's" 131 | }, 132 | { 133 | tech: "Ant Design" 134 | }, 135 | { 136 | tech: "TailwindCSS" 137 | }, 138 | ] 139 | }, 140 | { 141 | id: 0, 142 | projectName: "Tojjar", 143 | url: "/domain-expired", 144 | image: "projects/tojjar.png", 145 | projectDetail: "Tojjar is ecommerce website, where you can open your own store and sell products of different brands!", 146 | technologiesUsed: [ 147 | { 148 | tech: "Nextjs with SSR" 149 | }, 150 | { 151 | tech: "Laravel" 152 | }, 153 | { 154 | tech: "REST API's" 155 | }, 156 | { 157 | tech: "Ant Design" 158 | }, 159 | { 160 | tech: "TailwindCSS" 161 | }, 162 | ] 163 | }, 164 | { 165 | id: 1, 166 | projectName: "Otawix", 167 | url: "https://b2c.otawix.com/", 168 | image: "projects/otawix.png", 169 | projectDetail: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam corrupti aut veritatis, adipisci natus optio dolores cum rem? Aut perferendis fugit, eos rerum totam aspernatur iure alias temporibus ipsa perspiciatis!", 170 | technologiesUsed: [ 171 | { 172 | tech: "NextJS" 173 | }, 174 | { 175 | tech: "NodeJS" 176 | }, 177 | { 178 | tech: "REST API's" 179 | }, 180 | { 181 | tech: "MUI" 182 | }, 183 | { 184 | tech: "TailwindCSS" 185 | }, 186 | ] 187 | }, 188 | { 189 | id: 2, 190 | projectName: "Spatay", 191 | url: "https://spatay.com/", 192 | image: "projects/spatay.png", 193 | projectDetail: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam corrupti aut veritatis, adipisci natus optio dolores cum rem? Aut perferendis fugit, eos rerum totam aspernatur iure alias temporibus ipsa perspiciatis!", 194 | technologiesUsed: [ 195 | { 196 | tech: "ReactJS" 197 | }, 198 | { 199 | tech: "NodeJS" 200 | }, 201 | { 202 | tech: "REST API's" 203 | }, 204 | { 205 | tech: "Ant Design" 206 | }, 207 | { 208 | tech: "TailwindCSS" 209 | }, 210 | ] 211 | }, 212 | // { 213 | // id: 2, 214 | // projectName: "Culyte", 215 | // url: "https://culyte.com", 216 | // image: "projects/culyte.png", 217 | // projectDetail: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam corrupti aut veritatis, adipisci natus optio dolores cum rem? Aut perferendis fugit, eos rerum totam aspernatur iure alias temporibus ipsa perspiciatis!", 218 | // technologiesUsed: [ 219 | // { 220 | // tech: "ReactJS" 221 | // }, 222 | // { 223 | // tech: "NodeJS" 224 | // }, 225 | // { 226 | // tech: "Ant Design" 227 | // }, 228 | // { 229 | // tech: "TailwindCSS" 230 | // }, 231 | // ] 232 | // }, 233 | ] 234 | export default function handler(req, res) { 235 | res.status(200).json(portfolio) 236 | } 237 | -------------------------------------------------------------------------------- /pages/api/recommendations.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | const recommendationCard = [ 3 | { 4 | id: 0, 5 | name: 'Shahmir Minhas', 6 | image: "images/shahmir.jfif", 7 | designation: 'React JS | NEXT JS | Node | GraphQL', 8 | view: "Hey everyone! I wanted to take a moment to recommend Osama Javaid for any React.js opportunities. I had the pleasure of working with him on multiple projects where he showcased a strong understanding of React.js and Next.js concepts and delivered high-quality code. He consistently demonstrated a willingness to learn and grow, and his enthusiasm for tackling new challenges was contagious. Osama is a reliable and dedicated team member who would be a great asset to any React.js team. Highly recommended! 👍! 🌟", 9 | linkednURL: "https://www.linkedin.com/in/shahmir-minhas/" 10 | }, 11 | { 12 | id: 1, 13 | name: 'Sikandar Hayat', 14 | image: "images/sikandar.jpeg", 15 | designation: 'Data Scientist | Machine Learning Engineer | Python Developer', 16 | view: "I had the privilege of working alongside Osama on multiple university projects, and I must say, his talent and work ethic truly stood out. Recently, we were both part of the dynamic team at JMM Technologies, where Osama's professionalism and attention to detail shone brightly. I wholeheartedly endorse Osama for any opportunity that calls for a highly skilled and dedicated individual.", 17 | linkednURL: "https://www.linkedin.com/in/sikandar-hayat-381407179/" 18 | }, 19 | { 20 | id: 2, 21 | name: 'Nasir Khan', 22 | image: "images/nasir.jpg", 23 | designation: 'MERN | JavaScript | Tailwind | Sass | Bootstrap', 24 | view: "I wholeheartedly recommend Osama as a talented React frontend developer with an incredible flair for UI/UX design. His proficiency in Node.js further enhances his capabilities, allowing him to build robust and scalable applications. Osama's attention to detail, problem-solving skills, and dedication to delivering exceptional results make him a valuable addition to any development team.", 25 | linkednURL: "https://www.linkedin.com/in/nasirkhan22/" 26 | }, 27 | { 28 | id: 3, 29 | name: 'Muhammad Ullah', 30 | image: "images/muhammad.jpeg", 31 | designation: 'MERN Stack Developer at Productbox', 32 | view: "I highly recommend Osama Javed for web frontend development positions. Their expertise in ReactJS and Next.js, combined with their professionalism and dedication, make them an invaluable asset to any team.", 33 | linkednURL: "https://www.linkedin.com/in/muhammadullahafridi/" 34 | }, 35 | ] 36 | export default function handler(req, res) { 37 | res.status(200).json(recommendationCard) 38 | } 39 | -------------------------------------------------------------------------------- /pages/api/review.js: -------------------------------------------------------------------------------- 1 | const review = [ 2 | { 3 | id: 0, 4 | clientName: 'Mustafash', 5 | clientLocation: 'Egypt', 6 | clientSource: 'Fiverr', 7 | clientReview: 'It is always nice to work with him. The work is finished quickly and he does more than is asked of him. It is also clear that he has a lot of knowledge of the work he does. I look forward to our next collaboration.' 8 | }, 9 | { 10 | id: 2, 11 | clientName: 'Melissabrown255', 12 | clientLocation: 'United States', 13 | clientSource: 'Fiverr', 14 | clientReview: 'He is very good with communication and experienced website developer, great experience to work with him. ' 15 | }, 16 | { 17 | id: 3, 18 | clientName: 'Jake Corry', 19 | clientLocation: 'Germany', 20 | clientSource: 'Fiverr', 21 | clientReview: "Osama is extremely knowledgeable and helpful. He knows in and out of web app development . His understanding of different technologies and frameworks in the space is also very impressive. I hope I get the chance to work with him again" 22 | }, 23 | { 24 | id: 4, 25 | clientName: 'Blaise Labriola', 26 | clientLocation: 'France', 27 | clientSource: 'Fiverr', 28 | clientReview: 'I have worked with Osama and he is very professional and excellent software developer. I admire his speed of development and quality of work when given an assignment.' 29 | }, 30 | ] 31 | export default function handler(req, res) { 32 | res.status(200).json(review) 33 | } 34 | -------------------------------------------------------------------------------- /pages/background.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import Edu_Card from "../components/Background/Edu_Card"; 3 | import Exp_Card from "../components/Background/Exp_Card"; 4 | import BannerLayout from "../components/Common/BannerLayout"; 5 | import Footer from "../components/Footer"; 6 | import { useQuery } from "react-query"; 7 | import axios from "axios"; 8 | import { Skeleton } from "antd"; 9 | import ParagraphSkeleton from "../components/Common/ParagraphSkeleton"; 10 | 11 | function Background() { 12 | 13 | const { isLoading, error, data } = useQuery('background', () => 14 | axios.get('api/background') 15 | .then(({ data }) => data) 16 | .catch(error => console.error('Error fetching testimonials:', error))) 17 | 18 | return ( 19 | 20 |
21 |
22 |
Education
23 | {isLoading ? 24 | [1, 2, 3].map(() => ( 25 | 26 | )) 27 | : 28 | data && data[0]?.eduCards?.map((data, key) => ( 29 | 30 | )) 31 | } 32 | 33 |
34 |
35 |
36 |
Experience
37 | 38 | {isLoading ? 39 | [1, 2, 3].map(() => ( 40 | 41 | )) 42 | : 43 | data && data[1]?.expCards?.map((data, key) => ( 44 | 45 | )) 46 | } 47 | 48 |
49 |
50 |
51 |