2024 Portfolio

This is an updated portfolio project using Next.js, Framer Motion, TypeScript, Tailwind CSS, and React Email. It showcases various projects and skills with a modern and dynamic interface.

Live Demo

Check out the live demo of the application here.

Features

• Dynamic Animations: Smooth and interactive animations using Framer Motion.
• Responsive Design: Mobile-first design with Tailwind CSS.
• Email Integration: Functional email features using React Email.
• Timeline Component: Visual project timeline with react-vertical-timeline-component.

Installation

To set up the project locally, follow these steps:

Prerequisites

• Node.js
• npm (or yarn)

Installation Steps

1. Clone the repository:

   git clone https://github.com/chriscodingxyz/2024-portfolio.git

2. Navigate to the project directory:

   cd 2024-portfolio

3. Install dependencies:

   npm install

4. Run the development server:

   npm run dev

Usage

Once the development server is running, you can access the application at http://localhost:3000.

Folder Structure

• public: Static assets
• src: Source code
  • components: React components
  • pages: Application pages
  • styles: Tailwind CSS styles
  • utils: Utility functions

Technologies Used

• Next.js
• TypeScript
• Tailwind CSS
• Framer Motion
• React Email

npm Packages Used

1. clsx

   • clsx
   • Utility for constructing className strings conditionally.

2. framer-motion

   • framer-motion
   • Powerful animation library for React.

3. next

   • next
   • React framework for production.

4. react-email

   • react-email
   • Simplifies creating and sending emails in React.

5. react-icons

   • react-icons
   • Popular icons as React components.

6. react-intersection-observer

   • react-intersection-observer
   • Monitor elements' visibility.

7. react-vertical-timeline-component

   • react-vertical-timeline-component
   • Timeline component for React.

8. resend

   • resend
   • Email sending service for developers.

9. sonner

   • sonner
   • Notification library for React.

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create your feature branch:

   git checkout -b feature/YourFeature

3. Commit your changes:

   git commit -m 'Add some feature'

4. Push to the branch:

   git push origin feature/YourFeature

5. Open a pull request.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Chris Coding - chriscodingxyz - [email protected]

Project Link: https://github.com/chriscodingxyz/2024-portfolio