├── screenshot.png
├── public
    ├── portfolio1.jpeg
    ├── portfolio2.jpg
    ├── portfolio3.png
    ├── portfolio4.png
    ├── portfolio5.jpeg
    ├── portfolio6.jpeg
    └── ryan-ray-profile2.jpeg
├── .gitignore
├── jsconfig.json
├── README.md
├── src
    ├── pages
    │   ├── _app.js
    │   ├── 404.js
    │   ├── _error.js
    │   ├── _document.js
    │   ├── blog.js
    │   ├── github.js
    │   └── index.js
    ├── global.css
    ├── post.js
    ├── components
    │   ├── Navbar.js
    │   └── Layout.js
    └── profile.js
└── package.json


/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fazt/next-simple-portfolio/HEAD/screenshot.png


--------------------------------------------------------------------------------
/public/portfolio1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fazt/next-simple-portfolio/HEAD/public/portfolio1.jpeg


--------------------------------------------------------------------------------
/public/portfolio2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fazt/next-simple-portfolio/HEAD/public/portfolio2.jpg


--------------------------------------------------------------------------------
/public/portfolio3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fazt/next-simple-portfolio/HEAD/public/portfolio3.png


--------------------------------------------------------------------------------
/public/portfolio4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fazt/next-simple-portfolio/HEAD/public/portfolio4.png


--------------------------------------------------------------------------------
/public/portfolio5.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fazt/next-simple-portfolio/HEAD/public/portfolio5.jpeg


--------------------------------------------------------------------------------
/public/portfolio6.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fazt/next-simple-portfolio/HEAD/public/portfolio6.jpeg


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # node
 2 | node_modules
 3 | 
 4 | # next
 5 | out
 6 | .next
 7 | 
 8 | 
 9 | .env
10 | .env.local


--------------------------------------------------------------------------------
/public/ryan-ray-profile2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fazt/next-simple-portfolio/HEAD/public/ryan-ray-profile2.jpeg


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "baseUrl": ".",
4 |     "paths": {
5 |       "@/*": ["./src/*"]
6 |     }
7 |   }
8 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Next Simple Portfolio
 2 | ![](./screenshot.png)
 3 | 
 4 | # Tools
 5 | 
 6 | - Nextjs
 7 | - Bootswatch 4
 8 | 
 9 | ## Resources
10 | 
11 | - [NProgress change color](https://github.com/rstacruz/nprogress/issues/187)
12 | - [Nextjs 100%](https://gist.github.com/dmurawsky/d45f068097d181c733a53687edce1919)
13 | 


--------------------------------------------------------------------------------
/src/pages/_app.js:
--------------------------------------------------------------------------------
1 | // importing bootswatch
2 | import 'bootswatch/dist/cosmo/bootstrap.min.css'
3 | import 'animate.css/animate.min.css'
4 | import '../global.css'
5 | 
6 | // This default export is required in a new `pages/_app.js` file.
7 | export default function MyApp({ Component, pageProps }) {
8 |   return <Component {...pageProps} />
9 | }


--------------------------------------------------------------------------------
/src/pages/404.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import Layout from "../components/Layout";
 3 | 
 4 | const custom404 = () => (
 5 |   <Layout title="Page Not Found">
 6 |     <div className="text-center">
 7 |       <h1 className="display-1">404</h1>
 8 |       <p>
 9 |         This page does not exists. Please return to <Link href="/">Home</Link>
10 |       </p>
11 |     </div>
12 |   </Layout>
13 | );
14 | 
15 | export default custom404;
16 | 


--------------------------------------------------------------------------------
/src/pages/_error.js:
--------------------------------------------------------------------------------
 1 | import Layout from "../components/Layout";
 2 | 
 3 | const _error = ({ statusCode }) => {
 4 |   return (
 5 |     <Layout title="Something Goes Wrong" footer={false}>
 6 |       <p className="text-center">
 7 |         {statusCode
 8 |           ? `Could not load your user data: Status code ${statusCode}`
 9 |           : "Coud not get that page, sorry."}
10 |       </p>
11 |     </Layout>
12 |   );
13 | };
14 | 
15 | export default _error;
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-simple-portfolio",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "license": "MIT",
 6 |   "dependencies": {
 7 |     "animate.css": "^4.1.1",
 8 |     "bootswatch": "^5.3.1",
 9 |     "classnames": "^2.3.2",
10 |     "next": "^13.4.19",
11 |     "nprogress": "^0.2.0",
12 |     "prop-types": "^15.8.1",
13 |     "react": "^18.2.0",
14 |     "react-dom": "^18.2.0"
15 |   },
16 |   "scripts": {
17 |     "dev": "next dev",
18 |     "start": "next start",
19 |     "build": "next build"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/global.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body,
 3 | body > div:first-child,
 4 | div#__next,
 5 | div#__next > div {
 6 |   height: 100%;
 7 | }
 8 | 
 9 | .overflow {
10 |   height: 50%;
11 |   overflow: hidden;
12 | }
13 | 
14 | .overflow .card-img-top {
15 |   transform: scale(1);
16 |   transition: all 0.2s ease-in-out;
17 | }
18 | 
19 | .overflow .card-img-top:hover {
20 |   transform: scale(1.8);
21 | }
22 | 
23 | #nprogress .bar {
24 |   background: #ff5367 !important;
25 | }
26 | 
27 | #nprogress .spinner-icon {
28 |   border-top-color: #ffbb00;
29 |   border-left-color: #ffbb00;
30 | }
31 | 


--------------------------------------------------------------------------------
/src/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Html, Head, Main, NextScript } from "next/document";
 2 | 
 3 | class MyDocument extends Document {
 4 |   render() {
 5 |     return (
 6 |       <Html>
 7 |         <Head>
 8 |           <meta name="description" content="Ryan Ray Portfolio WEbsite" />
 9 |           {/* Nprogress css */}
10 |           <link
11 |             rel="stylesheet"
12 |             href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.css"
13 |           />
14 |         </Head>
15 |         <body>
16 |           <Main />
17 |           <NextScript />
18 |         </body>
19 |       </Html>
20 |     );
21 |   }
22 | }
23 | 
24 | export default MyDocument;
25 | 


--------------------------------------------------------------------------------
/src/post.js:
--------------------------------------------------------------------------------
 1 | import Layout from "../components/Layout";
 2 | import { useRouter } from "next/router";
 3 | import { posts } from "@/profile";
 4 | 
 5 | const Post = () => {
 6 |   const router = useRouter();
 7 | 
 8 |   const currentPost = posts.filter(
 9 |     (post) => post.title === router.query.title
10 |   )[0];
11 | 
12 |   if (!currentPost) {
13 |     return {
14 |       redirect: {
15 |         destination: "/",
16 |         permanent: false,
17 |       },
18 |     }
19 |   } 
20 | 
21 |   return (
22 |     <Layout title={router.query.title} footer={false}>
23 |       <div className="text-center">
24 |         <img
25 |           src={currentPost.imageURL}
26 |           alt=""
27 |           style={{ width: "50%" }}
28 |           className="img-fluid"
29 |         />
30 |         <p className="p-4">{currentPost.content}</p>
31 |       </div>
32 |     </Layout>
33 |   );
34 | };
35 | 
36 | export default Post;
37 | 


--------------------------------------------------------------------------------
/src/pages/blog.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import Layout from "../components/Layout";
 3 | 
 4 | import { posts } from "../profile";
 5 | 
 6 | const PostCard = ({ post }) => (
 7 |   <div className="col-md-4">
 8 |     <div className="card">
 9 |       <div className="overflow">
10 |         <img src={post.imageURL} alt="" className="card-img-top" />
11 |       </div>
12 |       <div className="card-body">
13 |         <h1>{post.title}</h1>
14 |         <p>{post.content}</p>
15 |         <Link href={`/post?title=${post.title}`}>
16 |           <button className="btn btn-light">Read</button>
17 |         </Link>
18 |       </div>
19 |     </div>
20 |   </div>
21 | );
22 | 
23 | const blog = () => {
24 |   return (
25 |     <Layout title="My Blog" footer={false} dark>
26 |       <div className="row">
27 |         {posts.map((post, i) => (
28 |           <PostCard post={post} key={i} />
29 |         ))}
30 |       </div>
31 |     </Layout>
32 |   );
33 | };
34 | 
35 | export default blog;
36 | 


--------------------------------------------------------------------------------
/src/components/Navbar.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | const Navbar = () => {
 4 |   return (
 5 |     <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
 6 |       <div className="container">
 7 |         <Link href="/" className="navbar-brand">
 8 |           Simple Portfolio
 9 |         </Link>
10 |         <button
11 |           className="navbar-toggler"
12 |           type="button"
13 |           data-bs-toggle="collapse"
14 |           data-bs-target="#navbarNav"
15 |           aria-controls="navbarNav"
16 |           aria-expanded="false"
17 |           aria-label="Toggle navigation"
18 |         >
19 |           <span className="navbar-toggler-icon"></span>
20 |         </button>
21 |         <div className="collapse navbar-collapse" id="navbarNav">
22 |           <ul className="navbar-nav ml-auto">
23 |             <li className="nav-item">
24 |               <Link
25 |                 href="/blog"
26 |                 className="nav-link active"
27 |                 aria-current="page"
28 |               >
29 |                 Blog
30 |               </Link>
31 |             </li>
32 |             <li className="nav-item">
33 |               <Link href="/github" className="nav-link">
34 |                 Github
35 |               </Link>
36 |             </li>
37 |           </ul>
38 |         </div>
39 |       </div>
40 |     </nav>
41 |   );
42 | };
43 | 
44 | export default Navbar;
45 | 


--------------------------------------------------------------------------------
/src/pages/github.js:
--------------------------------------------------------------------------------
 1 | import Layout from "../components/Layout";
 2 | import Error from "./_error";
 3 | 
 4 | const Github = ({ user, statusCode }) => {
 5 |   if (statusCode) {
 6 |     return <Error statusCode={statusCode} />;
 7 |   }
 8 | 
 9 |   return (
10 |     <Layout title="My Github" footer={false} dark>
11 |       <div className="row">
12 |         <div className="col-md-4 offset-md-4">
13 |           <div className="card card-body text-center">
14 |             <h1>{user.name}</h1>
15 |             <img src={user.avatar_url} alt="" style={{ width: "100%" }} />
16 |             <p>{user.bio}</p>
17 |             <a
18 |               href={user.blog}
19 |               target="_blank"
20 |               className="btn btn-outline-secondary my-2"
21 |             >
22 |               My Blog
23 |             </a>
24 |             <a
25 |               href={user.html_url}
26 |               target="_blank"
27 |               className="btn btn-outline-secondary"
28 |             >
29 |               Go to Github
30 |             </a>
31 |           </div>
32 |         </div>
33 |       </div>
34 |     </Layout>
35 |   );
36 | };
37 | 
38 | Github.proptypes = {};
39 | 
40 | export async function getServerSideProps() {
41 |   const res = await fetch(
42 |     "https://api.github.com/users/fazttech"
43 |   );
44 |   const data = await res.json();
45 | 
46 |   const statusCode = res.status > 200 ? res.status : false;
47 | 
48 |   return {
49 |     props: {
50 |       user: data,
51 |       statusCode,
52 |     },
53 |   };
54 | }
55 | 
56 | export default Github;
57 | 


--------------------------------------------------------------------------------
/src/components/Layout.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | import { useRouter } from "next/router";
 3 | import Navbar from "./Navbar";
 4 | import PropTypes from "prop-types";
 5 | import NProgress from "nprogress";
 6 | import nProgress from "nprogress";
 7 | import classNames from "classnames";
 8 | 
 9 | const Layout = ({ children, title, footer = true, dark = false }) => {
10 |   const router = useRouter();
11 | 
12 |   useEffect(() => {
13 |     const handleRouteChange = (url) => {
14 |       console.log(url);
15 |       NProgress.start();
16 |     };
17 | 
18 |     router.events.on("routeChangeStart", handleRouteChange);
19 | 
20 |     router.events.on("routeChangeComplete", () => NProgress.done());
21 | 
22 |     router.events.on("routeChangeError", () => nProgress.done());
23 | 
24 |     return () => {
25 |       router.events.off("routeChangeStart", handleRouteChange);
26 |     };
27 |   }, []);
28 | 
29 |   return (
30 |     <div className={classNames({ "bg-dark": dark, "bg-light": !dark })}>
31 |       <Navbar />
32 |       <main className="container py-4">
33 |         {/* Title */}
34 |         {title && (
35 |           <h1 className={classNames("text-center", { "text-light": dark })}>
36 |             {title}
37 |           </h1>
38 |         )}
39 | 
40 |         {/* Content */}
41 |         {children}
42 |       </main>
43 | 
44 |       {footer && (
45 |         <footer className="bg-dark text-light text-center">
46 |           <div className="container p-4">
47 |             <h1>&copy; Ryan Ray Portfolio</h1>
48 |             <p>2000 - {new Date().getFullYear()}</p>
49 |             <p>All rights Reserved.</p>
50 |           </div>
51 |         </footer>
52 |       )}
53 |     </div>
54 |   );
55 | };
56 | 
57 | Layout.proptypes = {
58 |   children: PropTypes.node,
59 |   title: PropTypes.string,
60 |   footer: PropTypes.bool,
61 | };
62 | 
63 | export default Layout;
64 | 


--------------------------------------------------------------------------------
/src/profile.js:
--------------------------------------------------------------------------------
  1 | export const skills = [
  2 |   {
  3 |     skill: "Javascript",
  4 |     percentage: 100,
  5 |   },
  6 |   {
  7 |     skill: "Golang",
  8 |     percentage: 80,
  9 |   },
 10 |   {
 11 |     skill: "Nodejs",
 12 |     percentage: 90,
 13 |   },
 14 |   {
 15 |     skill: "Blockchain",
 16 |     percentage: 40,
 17 |   },
 18 |   {
 19 |     skill: "Physics",
 20 |     percentage: 70,
 21 |   },
 22 |   {
 23 |     skill: "Economics",
 24 |     percentage: 70,
 25 |   },
 26 |   {
 27 |     skill: "Machine Learning",
 28 |     percentage: 70,
 29 |   },
 30 | ];
 31 | 
 32 | export const experiences = [
 33 |   {
 34 |     title: "Software developer at Microsoft",
 35 |     description:
 36 |       "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint excepturi ea explicabo. Illum suscipit illo, porro quisquam voluptatem officiis fugiat vel animi aliquam inventore rem. Quo laudantium temporibus cupiditate. Aut?",
 37 |     from: 2000,
 38 |     to: 2005,
 39 |   },
 40 |   {
 41 |     title: "Software developer at Google",
 42 |     description:
 43 |       "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint excepturi ea explicabo. Illum suscipit illo, porro quisquam voluptatem officiis fugiat vel animi aliquam inventore rem. Quo laudantium temporibus cupiditate. Aut?",
 44 |     from: 2005,
 45 |     to: 2007,
 46 |   },
 47 |   {
 48 |     title: "Software developer at SpaceX",
 49 |     description:
 50 |       "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint excepturi ea explicabo. Illum suscipit illo, porro quisquam voluptatem officiis fugiat vel animi aliquam inventore rem. Quo laudantium temporibus cupiditate. Aut?",
 51 |     from: 2010,
 52 |   },
 53 | ];
 54 | 
 55 | export const projects = [
 56 |   {
 57 |     name: "Awesome Website 1",
 58 |     description:
 59 |       "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint excepturi ea explicabo. Illum suscipit illo, porro quisquam voluptatem",
 60 |     image: "portfolio1.jpeg",
 61 |   },
 62 |   {
 63 |     name: "Awesome Website 2",
 64 |     description:
 65 |       "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint excepturi ea explicabo. Illum suscipit illo, porro quisquam voluptatem",
 66 |     image: "portfolio2.jpg",
 67 |   },
 68 |   {
 69 |     name: "Awesome Website 3",
 70 |     description:
 71 |       "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint excepturi ea explicabo. Illum suscipit illo, porro quisquam voluptatem",
 72 |     image: "portfolio3.png",
 73 |   },
 74 |   {
 75 |     name: "Awesome Website 4",
 76 |     description:
 77 |       "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint excepturi ea explicabo. Illum suscipit illo, porro quisquam voluptatem",
 78 |     image: "portfolio4.png",
 79 |   },
 80 |   {
 81 |     name: "Awesome Website 5",
 82 |     description:
 83 |       "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint excepturi ea explicabo. Illum suscipit illo, porro quisquam voluptatem",
 84 |     image: "portfolio5.jpeg",
 85 |   },
 86 |   {
 87 |     name: "Awesome Website 6",
 88 |     description:
 89 |       "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint excepturi ea explicabo. Illum suscipit illo, porro quisquam voluptatem",
 90 |     image: "portfolio6.jpeg",
 91 |   },
 92 | ];
 93 | 
 94 | export const posts = [
 95 |   {
 96 |     title: "React",
 97 |     content:
 98 |       "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint excepturi ea explicabo. Illum suscipit illo, porro quisquam voluptatem",
 99 |     imageURL:
100 |       "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Faie.edu.au%2Fwp-content%2Fuploads%2F2018%2F03%2Fgame-programming-03.jpg",
101 |   },
102 |   {
103 |     title: "Angular",
104 |     content:
105 |       "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint excepturi ea explicabo. Illum suscipit illo, porro quisquam voluptatem",
106 |     imageURL:
107 |       "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Faie.edu.au%2Fwp-content%2Fuploads%2F2018%2F03%2Fgame-programming-03.jpg",
108 |   },
109 |   {
110 |     title: "Nextjs",
111 |     content:
112 |       "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint excepturi ea explicabo. Illum suscipit illo, porro quisquam voluptatem",
113 |     imageURL:
114 |       "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Faie.edu.au%2Fwp-content%2Fuploads%2F2018%2F03%2Fgame-programming-03.jpg",
115 |   },
116 | ];
117 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
  1 | import Layout from "../components/Layout";
  2 | import Link from "next/link";
  3 | 
  4 | import { skills, experiences, projects } from "../profile";
  5 | 
  6 | const Index = () => (
  7 |   <Layout>
  8 |     {/* Header Card */}
  9 |     <header className="row">
 10 |       <div className="col-md-12">
 11 |         <div className="card card-body bg-secondary text-light animate__animated animate__fadeIn">
 12 |           <div className="row">
 13 |             <div className="col-md-4">
 14 |               <img src="/ryan-ray-profile2.jpeg" alt="" className="img-fluid" />
 15 |             </div>
 16 |             <div className="col-md-8">
 17 |               <h1>Ryan Ray</h1>
 18 |               <h3>Full Stack Developer</h3>
 19 |               <p>
 20 |                 Lorem, ipsum dolor sit amet consectetur adipisicing elit.
 21 |                 Molestiae atque ullam perferendis harum, nisi porro voluptate,
 22 |                 iste consequuntur enim reprehenderit architecto consectetur cum?
 23 |                 Totam ad molestias natus illum illo officia.
 24 |               </p>
 25 |               <Link href="/hireme" className="btn btn-outline-light">
 26 |                 Hire Me
 27 |               </Link>
 28 |             </div>
 29 |           </div>
 30 |         </div>
 31 |       </div>
 32 |     </header>
 33 | 
 34 |     {/* Second section */}
 35 | 
 36 |     <section className="row">
 37 |       <div className="col-md-4 py-2">
 38 |         <div className="card bg-light animate__animated animate__fadeInLeft">
 39 |           <div className="card-body">
 40 |             <h1>Skills</h1>
 41 | 
 42 |             {/* Skill Progress  */}
 43 |             {skills.map(({ skill, percentage }, i) => (
 44 |               <div className="py-3" key={i}>
 45 |                 <h5>{skill}</h5>
 46 |                 <div className="progress ">
 47 |                   <div
 48 |                     className="progress-bar"
 49 |                     role="progressbar"
 50 |                     style={{ width: `${percentage}%` }}
 51 |                     aria-valuenow="50"
 52 |                     aria-valuemin="0"
 53 |                     aria-valuemax="100"
 54 |                   ></div>
 55 |                 </div>
 56 |               </div>
 57 |             ))}
 58 |           </div>
 59 |         </div>
 60 |       </div>
 61 | 
 62 |       <div className="col-md-8 py-2">
 63 |         {/* Experience */}
 64 |         <div className="card bg-light animate__animated animate__fadeInRight">
 65 |           <div className="card-body">
 66 |             <h1>Experience</h1>
 67 | 
 68 |             <ul>
 69 |               {/* List Item Experience */}
 70 |               {experiences.map(({ title, from, to }, index) => (
 71 |                 <li key={index}>
 72 |                   <h3>{title}</h3>
 73 |                   <h5>
 74 |                     {from} {to ? `- ${to}` : "- current"}
 75 |                   </h5>
 76 |                   <p>
 77 |                     Lorem, ipsum dolor sit amet consectetur adipisicing elit.
 78 |                     Sint excepturi ea explicabo. Illum suscipit illo, porro
 79 |                     quisquam voluptatem officiis fugiat vel animi aliquam
 80 |                     inventore rem. Quo laudantium temporibus cupiditate. Aut?
 81 |                   </p>
 82 |                 </li>
 83 |               ))}
 84 |             </ul>
 85 |             <Link href="/hireme" className="btn btn-light">
 86 |               Know More
 87 |             </Link>
 88 |           </div>
 89 |         </div>
 90 |       </div>
 91 |     </section>
 92 |     {/* Porfolio */}
 93 |     <section>
 94 |       <div className="row">
 95 |         <div className="col-md-12">
 96 |           <div className="card card-body bg-dark">
 97 |             <div className="row">
 98 |               <div className="col-md-12 my-2">
 99 |                 <h1 className="text-center text-light">Portfolio</h1>
100 |               </div>
101 |               {projects.map(({ name, description, image }, index) => (
102 |                 <div className="col-md-4 p-2" key={index}>
103 |                   <div className="card h-100">
104 |                     <div className="overflow">
105 |                       <img src={`/${image}`} alt="" className="card-img-top" />
106 |                     </div>
107 |                     <div className="card-body">
108 |                       <h3>{name}</h3>
109 |                       <p>{description}</p>
110 |                       <a href="#!">Know More</a>
111 |                     </div>
112 |                   </div>
113 |                 </div>
114 |               ))}
115 | 
116 |               <div className="col-md-12 mt-4">
117 |                 <div className="text-center">
118 |                   <Link href="/portfolio" className="btn btn-outline-light">
119 |                     More Projects
120 |                   </Link>
121 |                 </div>
122 |               </div>
123 |             </div>
124 |           </div>
125 |         </div>
126 |       </div>
127 |     </section>
128 |   </Layout>
129 | );
130 | 
131 | export default Index;
132 | 


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