Feat/fetch GitHub repo

components/layout/navbar/navbar.tsx

@@ -88,7 +88,7 @@ const Navbar = ({ DesHeight }) => {
         </div>
         <Link shallow href="/">
           <a className={className}>
-            <Img className="inner-logo" src="/images/logo-2.0.svg" />
+            <Img layout="fill" className="inner-logo" src="/images/logo-2.0.svg" />
           </a>
         </Link>
       </div>

components/projectPage/ProjectPage.model.tsx

@@ -0,0 +1,6 @@
+export default interface githubFullinfo {
+  stars: number;
+  license: string;
+  languages: object[];
+  projectname: string;
+}

components/projectPage/ProjectPage.module.scss

@@ -16,15 +16,15 @@
 .star {
   width: 51px;
   height: 51px;
-  background-image: url("../../public/Star\ 1.svg");
+  background-image: url("../../public/Star.svg");
   margin: -30px 0 0 -15px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .star::after {
-  content: "30K";
+  content: attr(data-stars);
   transform: rotate(30deg);
   font-size: 12px;
   color: black;

components/projectPage/projectPage.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import Technologies from './technologies/Technologies';
 import style from './ProjectPage.module.scss';
+import githubFullinfo from './ProjectPage.model';
 
-function ProjectsPage() {
+function ProjectsPage({ stars, license, languages, projectname }: githubFullinfo) {
   return (
     <div className={style.descriptionContainer}>
       <h3 className={style.title}>
-        <div className={style.star} />
-        Vest
+        <div data-stars={stars} className={style.star} />
+        {projectname}
       </h3>
       <p dir="auto" className={style.description}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
@@ -21,8 +22,8 @@ function ProjectsPage() {
       </p>
 
       <div className={style.infoContainer}>
-        <Technologies />
-        <div className={style.license}>Mozilla Public License 2.0</div>
+        <Technologies lang={languages} />
+        <div className={style.license}>{license}</div>
       </div>
     </div>
   );

components/projectPage/technologies/Technologies.model.tsx

@@ -0,0 +1,3 @@
+export default interface TechnologiesProps {
+  lang: object[];
+}

components/projectPage/technologies/Technologies.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
+import TechnologiesProps from './Technologies.model';
 import style from './Technologies.module.scss';
 
-function Technologies() {
-  const technologies = ['HTML', 'CSS', 'JavaScript']; //in the future: API
+function Technologies(props: TechnologiesProps) {
+  const technologies = props.lang;
 
   return (
     <ul className={style.listContainer}>
       {technologies.map((technologie, index) => (
         <li key={index} className={style.technologies}>
-          {technologie}
+          {Object.keys(technologie)[0]}
         </li>
       ))}
     </ul>

docs/contributing.md

@@ -52,4 +52,35 @@ export const Component = (props: Props): ReactElement => {
 }
 ```
 
+## GitHub API
+
+In case you get an error from GitHub like this:
+
+```json
+{
+  "message": "API rate limit exceeded for xxx.xxx.xxx.xxx."
+}
+```
+
+you may need to add a github token to your local enviroment to increase your rate limit.
+
+### Use Locally:
+
+#### Setup
+
+- first, you need to create your own [personal token](https://docs.github.com/en/[email protected]/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)
+- create `.env.local` file in the project's root
+- add this line to the `.env.local` file: `GITHUB_API_KEY=<personal-token>`
+- restart your local server
+
+#### Usage
+
+```tsx
+import { getOctokit } from '<relative path>/services/github';
+
+const octokit = getOctokit();
+```
+
+> learn more about octokit [here](https://github.com/octokit/octokit.js#octokitrest-endpoint-methods).
+
 We hope you will have a great time contributing to this project.