/react-portfolio

Kenneth Jordan's Portfolio Deployed with Netlify

Primary LanguageJavaScript

Table Of Contents

Getting Started

Welcome to the portfolio of Kenneth Jordan. I am eager to enhance my knowledge in tech development, with a particular interest in sports and gaming. As a competitive individual with a strong passion for learning, I am open to exploring opportunities in Frontend, Backend, or Full Stack positions.

Features

  • Custom Font CSS
  • Contact form integrated with Getform.io
  • Fully Responsive on desktop and mobile

Code Snippet


  const [nav,setNav]= useState(false);

  const links = [
    {
      id: 1,
      link: 'home'
    },
    {
      id: 2,
      link: 'about'
    },
    {
      id: 3,
      link: 'skills'
    },
    {
      id: 4,
      link: 'portfolio'
    },
    {
      id: 5,
      link: 'contact'
    },
  ]
  return (
    <div className="flex justify-between items-center w-full h-20 px-4 text-white bg-blue fixed">
      <div>
          <h1 className="text-5xl font-signature ml-2">Kenneth</h1>
      </div>

      <ul className="hidden md:flex">
        {/* Mapping over our id's and links */}
        {links.map(({id, link}) => (
          <li 
            key ={id} 
            className="px-4 cursor-pointer capitalize font-medium text-white hover:text-sky-400 hover:scale-105 duration-200">

            <Link 
              to={link} 
              smooth duration={500}>
              {link}
            </Link>
          </li>
        ))}
      </ul>

    <div onClick ={() => setNav(!nav)} className="cursor-pointer pr-4 z-10 text-white md:hidden">
      {nav ? <FaTimes size={30} /> : <FaBars size={30} /> }
    </div>

Installation Steps

  1. Clone the repository
git clone https://github.com/LoopFruits/react-portfolio.git
  1. Change the working directory
cd react-portfolio
  1. Install dependencies
npm install
  1. Running the application
npm start

Technologies

  • React.JSX
  • TailwindCSS
  • React-icons
  • React-scroll
  • Getform.io

Socials


show references

References