├── .eslintrc.json
├── .github
    └── FUNDING.yml
├── .gitignore
├── README.md
├── Software-Developer-Portfolio-Screenshot.png
├── components
    ├── Contact
    │   └── index.jsx
    ├── Experiences
    │   ├── data
    │   │   └── data.js
    │   └── index.jsx
    ├── Footer
    │   └── index.jsx
    ├── Hero
    │   └── index.jsx
    ├── Navbar
    │   └── index.jsx
    └── Works
    │   ├── data
    │       └── data.js
    │   └── index.jsx
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── api
    │   └── hello.js
    └── index.js
├── postcss.config.js
├── public
    ├── favicon.ico
    └── vercel.svg
├── styles
    ├── Navbar.module.css
    └── globals.css
└── tailwind.config.js


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # Supported funding model platforms
2 | 
3 | github: boularbahsmail
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 | # Software Developer Portfolio :100:
 2 | A responsive and open source portfolio for software developers (Next.js & Tailwind CSS version).
 3 | 
 4 | <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
 5 | 
 6 | [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
 7 | 
 8 | <!-- ALL-CONTRIBUTORS-BADGE:END -->
 9 | 
10 | ## Website Screenshot
11 | <img src="./Software-Developer-Portfolio-Screenshot.png" alt="Software-Developer-Portfolio-Screenshot" />
12 | 
13 | ## Install Dependencies:
14 | First install the needed dependencies:
15 | ```bash
16 | npm install
17 | ```
18 | 
19 | ## Getting Started
20 | Run the development server:
21 | 
22 | ```bash
23 | npm run dev
24 | # or
25 | yarn dev
26 | ```
27 | 
28 | Open http://localhost:3000 with your browser to see the result.
29 | 
30 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
31 | 
32 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
33 | 
34 | ## Learn More
35 | 
36 | To learn more about Next.js, take a look at the following resources:
37 | 
38 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
39 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
40 | 
41 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
42 | 
43 | ## Deploy on Vercel
44 | 
45 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
46 | 
47 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
48 | 
49 | &copy; 2022 - Made With ❤️ By <a href="https://ismailium.vercel.app/"><b>Ismailium</b></a>, using <a href="https://nextjs.org/"><b>Next.js</b></a> and <a href="https://tailwindcss.com/"><b>Tailwind CSS</b></a>, Deployed on <a href="https://vercel.com/"><b>Vercel</b></a>.
50 | 


--------------------------------------------------------------------------------
/Software-Developer-Portfolio-Screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/boularbahsmail/Software-Developer-Portfolio/5ea6d77d08b21074f0a546dd0faffc1a4cf0c41f/Software-Developer-Portfolio-Screenshot.png


--------------------------------------------------------------------------------
/components/Contact/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | // React Icons
 4 | import { 
 5 |         FaLinkedinIn, 
 6 |         FaCodepen,
 7 |         FaGithub,
 8 |         FaTwitter
 9 |     } from "react-icons/fa";
10 | 
11 | const Contact = () => {
12 |     return (
13 |         <div className="py-8 pb-0 px-2 max-w-6xl m-auto sm:py-20" id="contact">
14 |             <h1 className="text-3xl text-teal-500 font-bold sm:text-5xl">
15 |                 Feel free, <br /> Say hi;
16 |             </h1>
17 |             <div className="my-10 grid grid-cols-2 gap-0 lg:grid-cols-5 sm:grid-cols-3 sm:gap-4">
18 |                 <ul>
19 |                     <li className="mb-4 text-gray-300 text-md w-max" title="LinkedIn">
20 |                         <a href="" className="flex gap-2 justify-start items-center w-max ease-in-out duration-150 hover:text-teal-500">
21 |                             <FaLinkedinIn />
22 |                             <span className="text-sm font-initial">user/John-Doe</span>
23 |                         </a>
24 |                     </li>
25 |                     <li className="mb-4 text-gray-300 text-md w-max" title="Codepen">
26 |                         <a href="" className="flex gap-2 justify-start items-center w-max ease-in-out duration-150 hover:text-teal-500">
27 |                             <FaCodepen />
28 |                             <span className="text-sm font-initial">/johndoe</span>
29 |                         </a>
30 |                     </li>
31 |                 </ul>
32 |                 <ul>
33 |                     <li className="mb-4 text-gray-300 text-md w-max" title="GitHub">
34 |                         <a href="" className="flex gap-2 justify-start items-center w-max ease-in-out duration-150 hover:text-teal-500">
35 |                             <FaGithub />
36 |                             <span className="text-sm font-initial">/johndoe</span>
37 |                         </a>
38 |                     </li>
39 |                     <li className="mb-4 text-gray-300 text-md w-max" title="Twitter">
40 |                         <a href="" className="flex gap-2 justify-start items-center w-max ease-in-out duration-150 hover:text-teal-500">
41 |                             <FaTwitter />
42 |                             <span className="text-sm font-initial">/johndoe</span>
43 |                         </a>
44 |                     </li>
45 |                 </ul>
46 |                 <div className="mt-10 sm:mt-0">
47 |                     <h2 className="text-2xl text-teal-500 font-bold mb-2 sm:text-3xl">Start project?</h2>
48 |                     <h3 className="text-md text-gray-400 sm:text-xl">Hello@johndoe.com</h3>
49 |                 </div>
50 |             </div>
51 |         </div>
52 |     );
53 | }
54 | 
55 | export default Contact;


--------------------------------------------------------------------------------
/components/Experiences/data/data.js:
--------------------------------------------------------------------------------
 1 | const data = [
 2 |     {
 3 |         id: 1,
 4 |         year: 2021,
 5 |         job_title: "Back-End Enginner",
 6 |         company: "Nike",
 7 |         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 8 |     },
 9 |     {
10 |         id: 2,
11 |         year: 2020,
12 |         job_title: "Software Enginner",
13 |         company: "Google Clouds",
14 |         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
15 |     },
16 |     {
17 |         id: 3,
18 |         year: 2019,
19 |         job_title: "Full-Stack Developer",
20 |         company: "AWS",
21 |         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
22 |     },
23 |     {
24 |         id: 4,
25 |         year: 2018,
26 |         job_title: "Front-End Developer",
27 |         company: "Netflix",
28 |         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
29 |     },
30 |     {
31 |         id: 5,
32 |         year: 2017,
33 |         job_title: "Software Developer",
34 |         company: "Vercel",
35 |         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
36 |     },
37 |     {
38 |         id: 6,
39 |         year: 2016,
40 |         job_title: "Front-End Enginner",
41 |         company: "Facebook",
42 |         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
43 |     }
44 | ];
45 | 
46 | export default data;


--------------------------------------------------------------------------------
/components/Experiences/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | // Experiences Data
 4 | import experiences from "./data/data.js";
 5 | 
 6 | const Experiences = () => {
 7 |     return (
 8 |         <div className="max-w-6xl m-auto p-4 pt-8 sm:pt-20 px-2" id="experiences">
 9 |             <h1 className="text-3xl text-teal-500 font-bold sm:text-4xl sm:leading-10">
10 |                 <span className="text-5xl sm:text-6xl">#06;</span> 
11 |                 <br /> Years Of Professional Experience.
12 |             </h1>
13 |             <div className="py-6 pt-10 grid lg:grid-cols-3 sm:grid-cols-2 gap-6">
14 |                 {
15 |                     experiences ?
16 |                         experiences.map((experience, index) =>
17 |                             <div 
18 |                                 key={index} 
19 |                                 className="bg-cyan-900 p-4 rounded hover:bg-cyan-800 relative"
20 |                                 title={`${experience.job_title} @${experience.company}`}>
21 |                                 <b className="text-teal-500 text-sm bg-white py-1 px-2 rounded absolute left-3 -top-2 hover:bg-teal-500 hover:text-white">
22 |                                     {experience.company}
23 |                                 </b>
24 |                                 <h2 className="mt-4 mb-2 text-xl font-bold text-teal-500">
25 |                                     {experience.year}
26 |                                 </h2>
27 |                                 <h3 className="font-bold text-2xl text-white">
28 |                                     {experience.job_title}
29 |                                 </h3>
30 |                                 <p className="mt-2 leading-6 text-sm text-gray-200">
31 |                                     {experience.description}
32 |                                 </p>
33 |                             </div>
34 |                         )
35 |                     : null
36 |                 }
37 |             </div>
38 |         </div>
39 |     );
40 | }
41 | 
42 | export default Experiences;


--------------------------------------------------------------------------------
/components/Footer/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | // React Icons
 4 | import { 
 5 |     FaLinkedinIn, 
 6 |     FaCodepen,
 7 |     FaGithub,
 8 |     FaTwitter
 9 | } from "react-icons/fa";
10 | 
11 | const Footer = () => {
12 |     return (
13 |         <div className="px-2">
14 |             <div className="py-4 border-b border-b-gray-800 flex justify-between items-center max-w-6xl m-auto">
15 |                 <h2 className="text-md text-white font-semibold">
16 |                     <a href="">John Doe</a>
17 |                 </h2>
18 |                 <ul className="flex justify-center items-center gap-3">
19 |                     <li className="text-white text-sm" title="LinkedIn">
20 |                         <a href="" className="ease-in-out duration-150 hover:text-teal-500">
21 |                             <FaLinkedinIn />
22 |                         </a>
23 |                     </li>
24 |                     <li className="text-white text-sm" title="Codepen">
25 |                         <a href="" className="ease-in-out duration-150 hover:text-teal-500">
26 |                             <FaCodepen />
27 |                         </a>
28 |                     </li>
29 |                     <li className="text-white text-sm" title="GitHub">
30 |                         <a href="" className="ease-in-out duration-150 hover:text-teal-500">
31 |                             <FaGithub />
32 |                         </a>
33 |                     </li>
34 |                     <li className="text-white text-sm" title="Twitter">
35 |                         <a href="" className="ease-in-out duration-150 hover:text-teal-500">
36 |                             <FaTwitter />
37 |                         </a>
38 |                     </li>
39 |                 </ul>
40 |             </div>
41 | 
42 |             <div className="py-8 flex flex-col gap-4 justify-between items-center max-w-6xl m-auto sm:flex-row sm:gap-0">
43 |                 <ul className="flex justify-center items-center gap-4">
44 |                     <li className="text-gray-400 text-sm" title="Experiences">
45 |                         <a href="#experiences" className="font-bold ease-in-out duration-150 hover:text-white">
46 |                             Experiences
47 |                         </a>
48 |                     </li>
49 |                     <li className="text-gray-400 text-sm" title="Projects">
50 |                         <a href="#projects" className="font-bold ease-in-out duration-150 hover:text-white">
51 |                             Projects
52 |                         </a>
53 |                     </li>
54 |                     <li className="text-gray-400 text-sm" title="Contact">
55 |                         <a href="#ontact" className="font-bold ease-in-out duration-150 hover:text-white">
56 |                             Contact
57 |                         </a>
58 |                     </li>
59 |                 </ul>
60 |                 <h5 className="text-white font-initial text-sm">&copy; 2022 - John Doe. All Rights Reserved.</h5>
61 |             </div>
62 |             <div className="py-8 pt-0 px-2">
63 |                 <h5 className="text-white text-sm text-center leading-6">
64 |                     &copy; 2022 - Made with ❤️ by {" "}
65 |                     <a href="https://twitter.com/boularbahsmail" target="_blank" rel="noreferrer" 
66 |                         className="font-semibold text-sky-500">
67 |                         Ismailium
68 |                     </a> {" "}
69 |                     using {" "}
70 |                     <a href="https://nextjs.org/" target="_blank" rel="noreferrer" 
71 |                         className="font-semibold text-sky-500">
72 |                         Next.js
73 |                     </a> {" "}
74 |                     & {" "}
75 |                     <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer" 
76 |                         className="font-semibold text-sky-500">
77 |                         TailwindCSS
78 |                     </a>. {" "} <br />
79 |                     Deployed on {" "}
80 |                     <a href="https://vercel.com/" target="_blank" rel="noreferrer" 
81 |                         className="font-semibold text-sky-500">
82 |                         Vercel
83 |                     </a>, {" "}
84 |                     Open Sourced on {" "}
85 |                     <a href="https://github.com/boularbahsmail/Software-Developer-Portfolio" 
86 |                         target="_blank" rel="noreferrer" 
87 |                         className="font-semibold text-sky-500">
88 |                         Github
89 |                     </a>.
90 |                 </h5>
91 |             </div>
92 |         </div>
93 |     );
94 | }
95 | 
96 | export default Footer;


--------------------------------------------------------------------------------
/components/Hero/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | // React Icons
 4 | import { SiHey } from "react-icons/si";
 5 | import { RiProfileLine, RiContactsBookLine } from "react-icons/ri";
 6 | import { FiLinkedin, FiGithub, FiTwitter } from "react-icons/fi";
 7 | 
 8 | const Hero = () => {
 9 |   return (
10 |     <div className="py-12 px-2 max-w-4xl m-auto sm:pt-24">
11 |         <h2 className="flex justify-start items-center gap-2 text-xl font-bold text-teal-500 mb-4 sm:text-2xl">
12 |           <span>Hello there</span><SiHey /><span>I am</span>
13 |         </h2>
14 |         <h1 className="text-6xl font-bold text-white sm:text-7xl">
15 |           John Doe
16 |         </h1>
17 |         <p className="text-md text-gray-400 leading-7 my-4 sm:text-lg sm:leading-8">
18 |           Cuber and Self-Taught Front-end Software Developer, I enjoy building responsive 
19 |           web apps & designs using HTML5, CSS3, JavaScript, Next.js, React.js, Firebase, 
20 |           Restful APIs.., I have been working on the web for around 3 years building 
21 |           freelance/learning projects.
22 |         </p>
23 |         <div className="my-7 flex justify-start items-center gap-4 flex-wrap">
24 |           <button className="bg-teal-500 py-2 px-4 font-bold text-white border-2 border-teal-500 rounded-md ease-in-out duration-150 hover:text-white hover:bg-transparent hover:border-white" title="View Resume">
25 |             <a href="" className="flex justify-start items-center gap-1">
26 |               <span>View Resume</span>
27 |               <RiProfileLine />
28 |               </a>
29 |           </button>
30 |           <button className="bg-white py-2 px-4 font-bold text-teal-500 border-2 border-white rounded-md ease-in-out duration-150 hover:text-white hover:bg-transparent hover:border-white" title="Get in touch">
31 |             <a href="#contact" className="flex justify-start items-center gap-1">
32 |               <span>Get in touch</span>
33 |               <RiContactsBookLine />
34 |             </a>
35 |           </button>
36 |         </div>
37 |         <div className="flex flex-col justify-start items-start gap-3">
38 |           <h4 className="text-xl text-white font-bold">Find me on :</h4>
39 |           <ul className="flex justify-start items-center flex-wrap gap-4">
40 |             <li title="Twitter">
41 |               <a href="" className="text-teal-500 text-md ease-in-out duration-150 hover:text-white">
42 |                 <FiTwitter />
43 |               </a>
44 |             </li>
45 |             <li title="GitHub">
46 |               <a href="" className="text-teal-500 text-md ease-in-out duration-150 hover:text-white">
47 |                 <FiGithub />
48 |               </a>
49 |             </li>
50 |             <li title="LinkedIn">
51 |               <a href="" className="text-teal-500 text-md ease-in-out duration-150 hover:text-white">
52 |                 <FiLinkedin />
53 |               </a>
54 |             </li>
55 |           </ul>
56 |         </div>
57 |     </div>
58 |   )
59 | }
60 | 
61 | export default Hero;


--------------------------------------------------------------------------------
/components/Navbar/index.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import styles from "../../styles/Navbar.module.css";
 3 | 
 4 | const Navbar = () => {
 5 |     const [menuOpen, SetMenuOpen] = useState(false);
 6 | 
 7 |     const closeMenu = () => {
 8 |         if (!menuOpen) {
 9 |             SetMenuOpen(menuOpen);
10 |             menuOpen = true;
11 |         }
12 |         else {
13 |             SetMenuOpen(!menuOpen);
14 |             menuOpen = false;
15 |         }
16 |     }
17 | 
18 |     return (
19 |         <header className={`py-3 px-2 flex justify-between items-center flex-wrap lg:py-7 ${styles.header} ${menuOpen ? `${styles.open}` : ""}`}>
20 |             <div className="z-50">
21 |                 <h2 className="text-2xl text-white font-bold">
22 |                     <a href="" title="John Doe">John Doe</a>
23 |                 </h2>
24 |             </div>
25 |             <nav>
26 |                 <ul 
27 |                     className={`menu hidden absolute left-0 top-0 m-0 py-20 pt-16 px-4 bg-black z-40 w-full h-52 sm:w-unset sm:h-auto sm:bg-transparent sm:flex sm:py-0 sm:static sm:left-unset sm:top-unset ${styles.menu} ${menuOpen ? `${styles.open}` : ""}`}>
28 |                     <li className="mb-4 mt-2 mx-0 sm:mb-0 sm:mt-0 sm:mx-3" title="Experiences">
29 |                         <a href="#experiences" className="text-1xs text-white font-semibold ease-in-out duration-150 hover:text-teal-400" onClick={() => closeMenu()}>
30 |                             Experiences
31 |                         </a>
32 |                     </li>
33 |                     <li className="mb-4 mx-0 sm:mb-0 sm:mx-3" title="Projects">
34 |                         <a href="#projects" className="text-1xs text-white font-semibold ease-in-out duration-150 hover:text-teal-400" onClick={() => closeMenu()}>
35 |                             Projects
36 |                         </a>
37 |                     </li>
38 |                     <li className="mb-4 mx-0 sm:mb-0 sm:mx-3" title="Contact">
39 |                         <a href="#contact" className="text-1xs text-white font-semibold ease-in-out duration-150 hover:text-teal-400" onClick={() => closeMenu()}>
40 |                             Contact
41 |                         </a>
42 |                     </li>
43 |                 </ul>
44 |             </nav>
45 |             <div 
46 |                 className={`z-50 flex flex-col justify-center items-center sm:hidden ${styles.hamburger} ${menuOpen ? `${styles.open}` : ""}`} 
47 |                 onClick={() => SetMenuOpen(!menuOpen)}>
48 |                 <span className="h-0.5 w-7 mb-1.5 bg-white"></span>
49 |                 <span className="h-0.5 w-7 mb-1.5 bg-white"></span>
50 |                 <span className="h-0.5 w-7 mb-1.5 bg-white"></span>
51 |             </div>
52 |         </header>
53 |   )
54 | }
55 | 
56 | export default Navbar;


--------------------------------------------------------------------------------
/components/Works/data/data.js:
--------------------------------------------------------------------------------
 1 | const data = [
 2 |     {
 3 |         id: 1,
 4 |         image_url: "https://cdn.dribbble.com/users/2919663/screenshots/18372585/media/22afc4757735732a96d5a9563202f729.png",
 5 |         work_title: "Blockchain Platform",
 6 |         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 7 |         genre: "Digital Assets"
 8 |     },
 9 |     {
10 |         id: 2,
11 |         image_url: "https://cdn.dribbble.com/users/702789/screenshots/15916650/media/ec203705bbc00f7338ba4e356b2c8af9.png",
12 |         work_title: "Web Application",
13 |         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
14 |         genre: "Design & Dev"
15 |     },
16 |     {
17 |         id: 3,
18 |         image_url: "https://cdn.dribbble.com/users/2417352/screenshots/6918204/media/d88f537661e3ea9cc4802e31b06e0ad8.png",
19 |         work_title: "Site Optimization",
20 |         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
21 |         genre: "Interactive guide"
22 |     },
23 |     {
24 |         id: 4,
25 |         image_url: "https://cdn.dribbble.com/users/2417352/screenshots/6918204/media/d88f537661e3ea9cc4802e31b06e0ad8.png",
26 |         work_title: "Site Optimization",
27 |         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
28 |         genre: "Interactive guide"
29 |     },
30 |     {
31 |         id: 5,
32 |         image_url: "https://cdn.dribbble.com/users/2919663/screenshots/18372585/media/22afc4757735732a96d5a9563202f729.png",
33 |         work_title: "Blockchain Platform",
34 |         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
35 |         genre: "Digital Assets"
36 |     },
37 |     {
38 |         id: 6,
39 |         image_url: "https://cdn.dribbble.com/users/702789/screenshots/15916650/media/ec203705bbc00f7338ba4e356b2c8af9.png",
40 |         work_title: "Web Application",
41 |         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
42 |         genre: "Design & Dev"
43 |     },
44 | ];
45 | 
46 | export default data;


--------------------------------------------------------------------------------
/components/Works/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | // Works Data
 4 | import works from "./data/data.js";
 5 | 
 6 | // React Icons
 7 | import { HiOutlineArrowNarrowRight } from "react-icons/hi";
 8 | // 
 9 | const Works = () => {
10 |     return (
11 |         <div className="max-w-6xl m-auto p-4 pt-8 px-2 sm:pt-20" id="projects">
12 |             <h1 className="text-4xl text-teal-500 font-bold sm:text-5xl">#Latest Works</h1>
13 |             <p className="text-sm text-teal-500 font-semibold mt-4 mb-8 leading-6">
14 |                 Digital Explorers is a knowledge exchange initative
15 |                 between 2 buzzing ICT, offering.
16 |             </p>
17 |             <div className="grid grid-cols-1 gap-0 lg:grid-cols-3 sm:grid-cols-2 sm:gap-4">
18 |                 {
19 |                     works ?
20 |                         works.map((work, index) => 
21 |                             <div key={index} title={`${work.work_title} - ${work.genre}`} className="bg-cyan-900 rounded-lg p-4 max-w-4xl m-auto mb-4 w-full grid grid-cols-1 gap-0 ease-in-out duration-150 hover:bg-cyan-800 sm:mb-0">
22 |                                 <div className="w-45 felx justify-center items-center">
23 |                                     <img 
24 |                                         className="rounded-lg w-100" 
25 |                                         src={work.image_url} 
26 |                                         alt="Work-Image" />
27 |                                 </div>
28 |                                 <div className="flex flex-col justify-center items-start w-55 pb-0">
29 |                                     <h2 className="text-2xl text-white font-bold my-5 mb-2">{work.work_title}</h2>
30 |                                     <b className="text-teal-500 mb-2">⎯⎯ {work.genre}</b>
31 |                                     <p className="text-gray-300 text-sm leading-6 m-0">{work.description}</p>
32 |                                     <button className="py-2 px-4 bg-white mt-4 text-black ease-in-out duration-150 border-2 border-white rounded-md hover:bg-gray-900 hover:border-gray-900 hover:text-white" style={{width: "100%"}} title="Visit website">
33 |                                         <a href="" className="flex justify-between items-center gap-1 font-semibold text-md p-0 m-0">
34 |                                             <span>Visit website</span>
35 |                                             <HiOutlineArrowNarrowRight />
36 |                                         </a>
37 |                                     </button>
38 |                                 </div>
39 |                             </div>
40 |                         )
41 |                     : null
42 |                 }
43 |             </div>
44 |         </div>
45 |     );
46 | }
47 | 
48 | export default Works;


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: true,
 4 |   swcMinify: true,
 5 |   images: {
 6 |     domains: ["cdn.dribbble.com"]
 7 |   }
 8 | }
 9 | 
10 | module.exports = nextConfig
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "portfolio-nextjs-tailwindcss",
 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": "12.2.2",
13 |     "react": "18.2.0",
14 |     "react-dom": "18.2.0",
15 |     "react-icons": "^4.4.0"
16 |   },
17 |   "devDependencies": {
18 |     "autoprefixer": "^10.4.7",
19 |     "eslint": "8.19.0",
20 |     "eslint-config-next": "12.2.2",
21 |     "postcss": "^8.4.14",
22 |     "tailwindcss": "^3.1.6"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | 
3 | function MyApp({ Component, pageProps }) {
4 |   return <Component {...pageProps} />
5 | }
6 | 
7 | export default MyApp
8 | 


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head';
 2 | 
 3 | // Components
 4 | import Navbar from '../components/Navbar';
 5 | import Hero from '../components/Hero';
 6 | import Experiences from '../components/Experiences';
 7 | import Works from '../components/Works';
 8 | import Contact from '../components/Contact';
 9 | import Footer from '../components/Footer';
10 | 
11 | export default function Home() {
12 |   return (
13 |     <div className="p-2">
14 |       <Head>
15 |         <title>John Doe - Software Developer</title>
16 |         <meta 
17 |           name="description" 
18 |           content="Software developer portfolio using Next.js & tailwind CSS." />
19 |         <link rel="icon" href="/favicon.ico" />
20 |       </Head>
21 | 
22 |       <div className="max-w-7xl m-auto">
23 |         <Navbar />
24 |         <Hero />
25 |         <Experiences />
26 |         <Works />
27 |         <Contact />
28 |         <Footer />
29 |       </div>
30 |     </div>
31 |   )
32 | }
33 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/boularbahsmail/Software-Developer-Portfolio/5ea6d77d08b21074f0a546dd0faffc1a4cf0c41f/public/favicon.ico


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/styles/Navbar.module.css:
--------------------------------------------------------------------------------
 1 | /* Toggle Menu */
 2 | .hamburger.open span:nth-child(1) {
 3 |     transform: rotate(-45deg);
 4 |     transform-origin: center;
 5 | }
 6 | 
 7 | .hamburger.open span:nth-child(2) {
 8 |     display: none;
 9 | }
10 | 
11 | .hamburger.open span:nth-child(3) {
12 |     transform: rotate(45deg);
13 |     transform-origin: center;
14 |     margin-top: -7.8px;
15 | }
16 | 
17 | .menu.open {
18 |     display: block;
19 | }
20 | /* 
21 | .brand.open {
22 |     position: fixed;
23 |     padding-top: 32px;
24 | } */


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | /* Tailwind CSS Config */
 2 | @tailwind base;
 3 | @tailwind components;
 4 | @tailwind utilities;
 5 | 
 6 | /* Google Font */
 7 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 8 | 
 9 | html,
10 | body {
11 |   padding: 0;
12 |   margin: 0;
13 |   background-color: #11162b;
14 |   background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='teal' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E");
15 |   scroll-behavior: smooth;
16 | }
17 | 
18 | a {
19 |   color: inherit;
20 |   text-decoration: none;
21 | }
22 | 
23 | * {
24 |   box-sizing: border-box;
25 |   font-family: 'Roboto', sans-serif;
26 | }


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./pages/**/*.{js,ts,jsx,tsx}",
 5 |     "./components/**/*.{js,ts,jsx,tsx}",
 6 |   ],
 7 |   theme: {
 8 |     extend: {},
 9 |   },
10 |   plugins: [],
11 | }
12 | 


--------------------------------------------------------------------------------