Merge pull request #9 from Pratham82/feat/integrate-projects

Feat/integrate projects

.prettierrc

@@ -5,5 +5,13 @@
   "singleQuote": false,
   "trailingComma": "all",
   "printWidth": 80,
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "importOrder": [
+    "<THIRD_PARTY_MODULES>",
+    "^@internal/(.*)$",
+    "^[./].*(?<!\\.(c|le|sc)ss)$",
+    "^[.]/[-a-zA-Z0-9_]+[.](module)[.](css|scss|less)$"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }

components/Header.tsx

@@ -1,12 +1,12 @@
-import { useRouter } from "next/router";
 import classNames from "classnames";
+import { motion } from "framer-motion";
 import Head from "next/head";
 import Link from "next/link";
+import { useRouter } from "next/router";
 
-import { motion } from "framer-motion";
-import ThemeToggler from "./ThemeSwitcher";
 import { tabsData } from "../src/data/headerData";
 import { getCurrentHeadTitle } from "../src/helpers";
+import ThemeToggler from "./ThemeSwitcher";
 
 const Header = () => {
   const { pathname, push } = useRouter();

components/ProjectCard.tsx

@@ -0,0 +1,50 @@
+import Link from "next/link";
+import { GithubLogo, LinkSimple } from "phosphor-react";
+
+import { IProject } from "../interface/projects.interface";
+
+const ProjectCard = (props: IProject) => {
+  const { title, subTitle, techStackUsed, githubURL, liveURL } = props;
+  return (
+    <div className="border dark:border-slate-100 border-slate-300 p-3 rounded-xl shadow-lg dark:shadow-lg dark:shadow-slate-500">
+      <h3 className="text-lg font-semibold">{title}</h3>
+      <h4 className="font-thin">{subTitle}</h4>
+      <div className="flex my-2">
+        {liveURL?.link && (
+          <Link
+            href={liveURL?.link}
+            rel="noopener noreferrer"
+            target="_blank"
+            className="flex border p-1 mr-2 cursor-pointer rounded-xl px-2 text-sm border-slate-300"
+          >
+            <LinkSimple size={20} />
+            <span className="pl-1">Live</span>
+          </Link>
+        )}
+        {githubURL?.link && (
+          <Link
+            href={githubURL?.link}
+            rel="noopener noreferrer"
+            target="_blank"
+            className="flex border p-1 mr-2 cursor-pointer rounded-xl px-2 text-sm"
+          >
+            <GithubLogo size={20} />
+            <span className="pl-1">Github</span>
+          </Link>
+        )}
+      </div>
+      <div className="flex gap-1 flex-wrap mt-2">
+        {techStackUsed?.map((techStack) => (
+          <h5
+            className="text-sm dark:bg-slate-100 bg-slate-900 text-slate-100  dark:text-slate-900 font-normal py-1 px-1.5 rounded-md"
+            key={techStack}
+          >
+            {techStack}
+          </h5>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCard;

components/SocialLinks.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { TwitterLogo, GithubLogo, LinkedinLogo } from "phosphor-react";
+import { GithubLogo, LinkedinLogo, TwitterLogo } from "phosphor-react";
 
 import { socialLinks } from "../src/data/headerData";
 

components/ThemeSwitcher.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from "next-themes";
+import { MoonStars, Sun } from "phosphor-react";
 import { useEffect, useState } from "react";
-import { Sun, MoonStars } from "phosphor-react";
 
 const ThemeSwitcher = () => {
   const [mounted, setMounted] = useState(false);

interface/projects.interface.ts

@@ -0,0 +1,23 @@
+export interface IAllProject {
+  __typename: string;
+  projectName: string;
+  project: IProject;
+}
+export interface IProject {
+  __typename: string;
+  title: string;
+  mark: string;
+  subTitle: string;
+  techStackUsed?: string[] | null;
+  projectCategory: string;
+  githubURL: IUrl;
+  liveURL: IUrl;
+}
+export interface IUrl {
+  __typename: string;
+  linkText: string;
+  link: string;
+}
+export interface IProjectsPage {
+  allProject?: IAllProject[] | null;
+}