✨ feat : added new pages

🚧 feat : work in progress

frontend/.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
 
 # Editor directories and files
 .vscode/*

frontend/package.json

@@ -32,6 +32,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1",
     "react-scroll": "^1.9.0",
+    "react-tabs": "^6.0.2",
     "react-toggle-dark-mode": "^1.1.1",
     "typed.js": "^2.1.0"
   },

frontend/sonar-project.properties

@@ -3,11 +3,12 @@ sonar.organization=dev-madhurendra
 
 sonar.host.url=https://sonarcloud.io
 sonar.projectVersion=1.0
-sonar.exclusions=**/node_modules/**,**/*.stories.tsx,**/src/utils/**, **/src/main.tsx, **/src/App.tsx,**/src/services/**,**/src/interfaces/**
+sonar.exclusions=**/node_modules/**,**/*.stories.tsx,**/src/utils/**, **/src/main.tsx, **/src/App.tsx,**/src/services/**,**/src/interfaces/**,**/src/pages/**
 sonar.sourceEncoding=UTF-8
 sonar.sources=./src
 sonar.tests=./src
 sonar.test.inclusions=**/*.test.ts,**/*.test.tsx
 sonar.test.exclusions=**/*.stories.tsx
 sonar.language=ts
-sonar.javascript.lcov.reportPaths=./coverage/lcov.info
+sonar.javascript.lcov.reportPaths=./coverage/lcov.info
+sonar.scanner.force-deprecated-java-version=true

frontend/src/App.tsx

@@ -1,12 +1,16 @@
 import React, { useEffect } from 'react';
 import Navbar from './components/molecules/Navbar';
 import HomeSection from './pages/Home';
-import './App.css';
 import { DarkModeProvider } from './services/context/DarkMode';
 import { useDarkMode } from './services/customhook/useDarkMode';
 import About from './pages/About';
 import Education from './pages/Education';
 import SkillSection from './pages/Skills';
+import Project from './pages/Project';
+import Experience from './pages/Experience';
+import ContactMeSection from './pages/ContactMe';
+import Footer from './components/organisms/Footer';
+import './App.css';
 
 
 function App() {
@@ -22,7 +26,8 @@ const AppContent: React.FC = () => {
 
   useEffect(() => {
     document.body.style.color = isDark ? '#fff' : '#000',
-    document.body.style.backgroundColor =  isDark ? "#1f1d27" : "#fff"
+    document.body.style.fontWeight = isDark ? '500' : 'inherit',
+    document.body.style.backgroundColor =  isDark ? "#003950" : "#fff"
   },[isDark])
 
   return (
@@ -32,6 +37,10 @@ const AppContent: React.FC = () => {
       <About />
       <Education />
       <SkillSection />
+      <Project />
+      <Experience />
+      <ContactMeSection />
+      <Footer />
     </>
   );
 };

frontend/src/components/atoms/Chip/index.tsx

@@ -4,8 +4,6 @@ import { MUI_CHIP } from '../../../utils/constants';
 import { IChipProp } from '../../../interfaces/types';
 import { getRandomLightColor } from '../../../services/functions/functions';
 
-
-
 const MyChip = (props: IChipProp) => 
     <Chip
         size={props.size}

frontend/src/components/atoms/LInk/index.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom'
+import Link from '.';
+
+describe('Link Component', () => {
+  const testUrl = 'https://example.com';
+  const testChildren = 'Click me';
+
+  it('renders link with correct props', () => {
+    render(<Link url={testUrl}>{testChildren}</Link>);
+
+    const link = screen.getByRole('link', { name: testChildren });
+    expect(link).toHaveAttribute('href', testUrl);
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+});

frontend/src/components/atoms/LInk/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ILinkProps } from '../../../interfaces/types';
+import { BLANK } from '../../../utils/constants';
+import { StyledMuiButton } from '../../../utils/styled';
+
+const Link = (props: ILinkProps) => {
+  return (
+    <div>
+      <a href={props.url} target={BLANK} rel="noopener noreferrer">
+        <StyledMuiButton>{props.children}</StyledMuiButton>
+      </a>
+    </div>
+  );
+};
+
+export default Link;

frontend/src/components/atoms/StyledSeparator/index.test.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import StyledSeparator from ".";
+import { StyledHorizontalSmallLine, StyledHorizontalLargeLine } from "../../../utils/styled";
+
+describe("StyledSeparator Component", () => {
+  it("renders StyledSeparator with correct styles", () => {
+    const { container } = render(<StyledSeparator />);
+
+    const smallLine = container.querySelectorAll(".css-1j2jhaj")[0];
+    const largeLine = container.querySelectorAll(".css-1ak5guh")[0];
+
+    expect(smallLine).toHaveStyle(
+      "border: 1px solid orange; width: 40%; margin-bottom: 10px;"
+    );
+    expect(largeLine).toHaveStyle("border: 1px solid orange; width: 50%;");
+  });
+
+  it("renders StyledHorizontalSmallLine with correct styles", () => {
+    const { container } = render(<StyledHorizontalSmallLine />);
+
+    const smallLine = container.querySelectorAll(".css-1j2jhaj")[0];
+
+    expect(smallLine).toHaveStyle(
+      "border: 1px solid orange; width: 40%; margin-bottom: 10px;"
+    );
+  });
+
+  it("renders StyledHorizontalLargeLine with correct styles", () => {
+    const { container } = render(<StyledHorizontalLargeLine />);
+
+    const largeLine = container.querySelectorAll(".css-1ak5guh")[0];
+
+    expect(largeLine).toHaveStyle("border: 1px solid orange; width: 50%;");
+  });
+});

frontend/src/components/atoms/StyledSeparator/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { StyledHorizontalSmallLine, StyledHorizontalLargeLine } from '../../../utils/styled';
+
+const StyledSeparator = () => {
+  return (
+    <div>
+      <StyledHorizontalSmallLine />
+      <StyledHorizontalLargeLine />
+    </div>
+  );
+}
+
+export default StyledSeparator

frontend/src/components/atoms/Toggle/index.tsx

@@ -3,9 +3,7 @@ import { DarkModeSwitch } from 'react-toggle-dark-mode';
 import { IDarkModeToggle } from '../../../interfaces/types';
 import { DARK_MODE_TOGGLE_COMPONENT } from '../../../utils/constants';
 
-
 const DarkModeToggle = (props: IDarkModeToggle) => {
-
   return (
     <DarkModeSwitch
         data-testid = {DARK_MODE_TOGGLE_COMPONENT}      

frontend/src/components/molecules/IconList/index.tsx

@@ -8,6 +8,7 @@ import LogoGif from '../../../../public/gif/Logo.gif';
 import { useDarkMode } from '../../../services/customhook/useDarkMode';
 import { ICON_COMPONENT_HOME } from '../../../utils/constants';
 import { Link } from 'react-scroll';
+import { navLinks } from '../../../services/mocks/mocks';
 
 const HomeIconsList = () => {
   const { isDark, toggleMode } = useDarkMode();
@@ -18,27 +19,11 @@ const HomeIconsList = () => {
         <Icon src={LogoGif} sx={StyledNavIcon} />
       </LeftDiv>
       <MiddleDiv>
-        <Link to="home" spy smooth duration={500}>
-          <FontAwesomeIcon icon={faHouse} />
-        </Link>
-        <Link to="about" spy smooth duration={500}>
-          <FontAwesomeIcon icon={faInfo} />
-        </Link>
-        <Link to="education" spy smooth duration={500}>
-          <FontAwesomeIcon icon={faUserGraduate} />
-        </Link>
-        <Link to="code" spy smooth duration={500}>
-          <FontAwesomeIcon icon={faCode} />
-        </Link>
-        <Link to="projects" spy smooth duration={500}>
-          <FontAwesomeIcon icon={faLaptopCode} />
-        </Link>
-        <Link to="experience" spy smooth duration={500}>
-          <FontAwesomeIcon icon={faBriefcase} />
-        </Link>
-        <Link to="contact" spy smooth duration={500}>
-          <FontAwesomeIcon icon={faEnvelope} />
-        </Link>
+        {navLinks.map((link, index) => (
+          <Link key={index} to={link.to} spy smooth duration={500}>
+            <FontAwesomeIcon icon={link.icon} />
+          </Link>
+        ))}
       </MiddleDiv>
       <RightDiv>
         <DarkModeToggle checked={isDark} onChange={toggleMode} />

frontend/src/components/organisms/Contact/index.test.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Contact from ".";
+
+describe("Contact Component", () => {
+  it("renders form fields correctly", () => {
+    render(<Contact />);
+
+    const nameLabel = screen.getByText("Name");
+    expect(nameLabel).toBeInTheDocument();
+  });
+
+  it("submits the form correctly", async () => {
+    render(<Contact />);
+
+    const nameInput = screen.getByText("Name");
+    const messageInput = screen.getByText("Message");
+    const phoneNumber = screen.getByText("Phone Number");
+    const sendButton = screen.getByText("Send Message");
+
+    expect(nameInput).toBeInTheDocument();
+    expect(messageInput).toBeInTheDocument();
+    expect(phoneNumber).toBeInTheDocument();  
+    expect(sendButton).toBeInTheDocument();
+
+  });
+});

frontend/src/components/organisms/Contact/index.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { formFields } from "../../../services/mocks/mocks";
+import { Form, FormGroup } from "react-bootstrap";
+import { StyledContact, FormContainer, InputWrapper, SendButton } from "../../../utils/styled";
+import { CONTACT } from "../../../utils/constants";
+
+const Contact = () => {
+  return (
+    <StyledContact id={CONTACT}>
+      <FormContainer>
+        <Form
+          action="https://getform.io/f/57d00a1e-cb8c-494a-9257-d5277f3d6880"
+          method="POST"
+          encType="multipart/form-data"
+        >
+            <FormGroup>
+                {formFields.map((field) => (
+                    <InputWrapper key={field.field}>
+                        <label htmlFor={field.field}>{field.name}</label>
+                        {field.type === "textarea" ? (
+                            <textarea rows={10} name={field.field} />
+                        ) : (
+                            <input type={field.type} name={field.field} />
+                        )}
+                    </InputWrapper>
+                ))}
+            </FormGroup>
+            <SendButton type="submit">Send Message</SendButton>
+        </Form>
+      </FormContainer>
+    </StyledContact>
+  );
+};
+
+export default Contact;
+

frontend/src/components/organisms/ContactCard/index.test.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import ContactCard from ".";
+import { CONTACT_DESC } from "../../../utils/constants";
+
+describe("ContactCard Component", () => {
+  it("renders contact details correctly", () => {
+    render(<ContactCard />);
+
+    expect(screen.getByText("Madhurendra Nath Tiwari")).toBeInTheDocument();
+    expect(screen.getByText("Software Engineer")).toBeInTheDocument();
+    expect(screen.getByText(CONTACT_DESC)).toBeInTheDocument();
+  });
+});

frontend/src/components/organisms/ContactCard/index.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+    StyledContactSection,
+    ContactGrid,
+    LeftColumn,
+    ImageContainer,
+    ContactDetails,
+    SocialLinks
+} from "../../../utils/styled";
+import {
+    BLANK,
+    CONTACT_DESC,
+    CONTACT_IMAGE_URL,
+    MADHURENDRA_NATH_TIWARI,
+    SOFTWARE_ENGINEER
+} from "../../../utils/constants";
+import { socialLinks } from "../../../services/mocks/mocks";
+
+const ContactCard = () => {
+  return (
+    <StyledContactSection>
+      <ContactGrid>
+        <LeftColumn>
+          <ImageContainer>
+            <img src={CONTACT_IMAGE_URL} alt="/" />
+          </ImageContainer>
+          <ContactDetails>
+            <h3>{MADHURENDRA_NATH_TIWARI}</h3>
+            <p>{SOFTWARE_ENGINEER}</p>
+            <p>{CONTACT_DESC}</p>
+          </ContactDetails>
+          <SocialLinks>
+            {socialLinks.map((social, index) => (
+              <a
+                key={index}
+                href={social.link}
+                target={BLANK}
+              >
+                <div>
+                  <FontAwesomeIcon icon={social.icon} />
+                </div>
+              </a>
+            ))}
+          </SocialLinks>
+        </LeftColumn>
+      </ContactGrid>
+    </StyledContactSection>
+  );
+};
+
+export default ContactCard;

frontend/src/components/organisms/Footer/index.test.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { fireEvent, render, waitFor, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Footer from ".";
+
+jest.mock("../../../services/apicalls/getcall", () => ({
+  getQuotes: jest.fn(() =>
+    Promise.resolve({ data: [{ content: "Mocked quote" }] })
+  ),
+}));
+
+describe("Footer it", () => {
+  it("Developer name and role are rendered", () => {
+    render(<Footer />);
+    expect(screen.getByText("Madhurendra Nath Tiwari")).toBeInTheDocument();
+    expect(screen.getByText("Software Engineer")).toBeInTheDocument();
+  });
+
+  it("Social links are rendered", () => {
+    render(<Footer />);
+    expect(screen.getAllByRole("link")).toHaveLength(4);
+  });
+
+  it("Quotes are fetched and displayed", async () => {
+    render(<Footer />);
+    await waitFor(() => {
+      expect(screen.getByText("Mocked quote")).toBeInTheDocument();
+    });
+  });
+});