Description

The project just as a dark mode

Additional information

Tasks:

• Add a toggle to switch between light and dark mode
• Configure the colours according to the mode chosen

👀 Have you checked if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read and understood the rules in the Contributing Guidelines

Are you willing to work on this issue ?

No response

Description

Add a readme file, it should have:
— what the project is about
— technologies used (they are: react, email.js)
— how to install & run

Screenshots

No response

Additional information

No response

👀 Have you checked if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read and understood the rules in the Contributing Guidelines

Are you willing to work on this issue ?

No response

Description

In Mobile View the heading is getting cut at the top.

I have attached the screenshot below for reference.
Please have a look.

Issues in code

-.Projects {margin-top: -1.5rem;}
+-.Projects {margin-top: -1rem;}

Screenshots

Additional information

There are other updates that we can do to make the UI much better. I will be raising the requests one by one.

🥦 Browser

Google Chrome

👀 Have you checked if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read and understood the rules in the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

Description

Project boxes are not responsive and have a blank right sided empty space.

Form contact could be 50/50 on desktop and full-width on mobile for better view, also have a blank space on the left side

Screenshots

Additional information

skills box should take the entire space

🥦 Browser

Mozilla Firefox

👀 Have you checked if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read and understood the rules in the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

What would you like to share?

I want to make the projectsInfo an array of objects that way it makes it easier to create an object for a new Project and also easier to render the projects

Current Code

src/Components/Projects.jsx

const Projects = () => {
  const projectsInfo = {
    one: {
      name: 'Project 1',
      desc: 'congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat sed',
      liveLink: 'website url',
      githubLink: 'https://github.com/',
      techs: ['HTML', 'CSS', 'TypeScript'],
      isOpenSource: true
    },
    two: {
      name: 'Project 2',
      desc: 'congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat sed',
      liveLink: 'website url',
      githubLink: 'https://github.com/',
      techs: ['React', 'Node', 'MongoDB', 'Socket.io', 'Redux'],
      isOpenSource: true
    }
  }
  return (
    <div className="Projects" id="projects" >
      <h2>My Projects</h2>
      <div>
        <Project info={projectsInfo.one} />
        <Project info={projectsInfo.two} />
      </div>
    </div>
  )
}

src/Components/Project.jsx

const Project = ({ info }) => {
  return (
    <div className="project">
      <h2>{info.name}</h2>
      <p>{info.desc}</p>
      <div className="tech-stack">
        {info.techs.map(item => <div key={item}>{item}</div>)}
      </div>
      <div className="btns">
        <a href={info.liveLink} target="_blank" rel="noreferrer">Live</a>
        <a href={info.githubLink} target="_blank" rel="noreferrer">Github</a>
      </div>
      {info.isOpenSource && <div className="open">Open Source</div>}
    </div>
  )
}

Proposed Code

src/Components/Projects.jsx

const Projects = () => {
  const projectsInfo = [
    {
      name: 'Project 1',
      desc: 'congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat sed',
      liveLink: 'website url',
      githubLink: 'https://github.com/',
      techs: ['HTML', 'CSS', 'TypeScript'],
      isOpenSource: true
    },
    {
      name: 'Project 2',
      desc: 'congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat sed',
      liveLink: 'website url',
      githubLink: 'https://github.com/',
      techs: ['React', 'Node', 'MongoDB', 'Socket.io', 'Redux'],
      isOpenSource: true
    }
  ]
  return (
    <div className="Projects" id="projects" >
      <h2>My Projects</h2>
      <div>
        {projects.map(project => <Project {...project} />)}
      </div>
    </div>
  )
}

src/Components/Project.jsx

const Project = ({ name, desc, techs, liveLink, githubLink, isOpenSource }) => {
  return (
    <div className="project">
      <h2>{name}</h2>
      <p>{desc}</p>
      <div className="tech-stack">
        {techs.map(item => <div key={item}>{item}</div>)}
      </div>
      <div className="btns">
        <a href={liveLink} target="_blank" rel="noreferrer">Live</a>
        <a href={githubLink} target="_blank" rel="noreferrer">Github</a>
      </div>
      {isOpenSource && <div className="open">Open Source</div>}
    </div>
  )
}

Additional information

No response

👀 Have you checked if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read and understood the rules in the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

Description

The "emailjs-com" package used in this project has been deprecated and the package to be used is "@emailjs/browser"

The code in the Mail.jsx file can be updated like this using the new package

Old Code

import { send } from 'emailjs-com';

send(serviceID, templateID, {
  subject: toSend.subject,
  name: toSend.name,
  email: toSend.email,
  message: toSend.message,
}, publicKey);

New Code

import emailjs from '@emailjs/browser';

emailjs.send(serviceID, templateID, toSend, publicKey)
  .then((response) => {
	   console.log('SUCCESS!', response.status, response.text);
  }, (err) => {
	   console.log('FAILED...', err);
});

Note: The code above hasn't been tested in the codebase.

You can also use react-toastify to display success or failed to the user.

Screenshots

Additional information

No response

🥦 Browser

Google Chrome

👀 Have you checked if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read and understood the rules in the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

Description

The Validation Function of "Mail.jsx" does not have "yahoo.co.in" an does function doesn't allows that email.

Screenshots

No response

Additional information

No response

🥦 Browser

Microsoft Edge

👀 Have you checked if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read and understood the rules in the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!