Skip to content

Updated portfolio using Nextjs, Framer Motion, Typescript, TailwindCSS, and React Email

Notifications You must be signed in to change notification settings

chriscodingxyz/2024-portfolio

Repository files navigation

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 https://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

  3. next

    • next
    • React framework for production.
  4. react-email

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

  6. react-intersection-observer

  7. react-vertical-timeline-component

  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

About

Updated portfolio using Nextjs, Framer Motion, Typescript, TailwindCSS, and React Email

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published