Skip to content

My portfolio website built with Next.js and TypeScript features a clean design showcasing my skills, projects, and experience. It's fully responsive and available on GitHub for easy customization. I also use Material UI and framer motion for cleaner design

License

Notifications You must be signed in to change notification settings

pvhuwung/nextjs-ts-portforlio

Repository files navigation

Personal Portfolio using NextJS and TypeScript

This is my personal portfolio website, created to showcase my skills and projects. This portfolio website created by using Next.js, TypeScript, TailwindCSS Material UI, EmailJS API and Framer Motion.


Check out my already deployed through Vercel personal portfolio here

Technologies Used

  • Next.js: This website is built using the Next.js framework, which provides server-side rendering and easy deployment.

  • TypeScript: TypeScript is used to add static typing to the project, making it easier to catch errors before runtime.

  • Tailwind CSS: Tailwind CSS is a utility-first CSS framework used to quickly style the website.

  • Material UI: Material UI is a popular React UI library that provides pre-built components and styling.

  • Framer Motion: Framer Motion is used to add smooth animations to the website.

  • EmailJS API: The EmailJS API is used to send emails from the contact form.

  • Hero Icons: Hero Icons is a set of free SVG icons that can be used in web projects. It provides a variety of icons for social media, navigation, and other common use cases.

Features

  • Responsive Design: This website is optimized for a variety of screen sizes, making it accessible to users on desktop, tablet, and mobile devices.

  • Dynamic Content: The projects and skills sections are generated dynamically from data stored in a JSON file.

  • Contact Form: The website includes a contact form that uses the EmailJS API to send messages directly to my email.

  • Social Icons: The website includes social icons from Hero Icons, making it easy for users to find me on social media.

  • Customizable: This website can be easily customized by updating the data in the JSON file and making changes to the layout and styling.

Running the Project Locally

To run the project locally, follow these steps:

  1. Clone the repository to your local machine.
git clone https://github.com/pham0084/nextjs-ts-portforlio.git
  1. Install the dependencies using npm or yarn.
cd nextjs-ts-portforlio
npm install

or

cd nextjs-ts-portforlio
yarn
  1. Start the development server.
npm run dev

or

yarn dev
  1. Open http://localhost:3000 in your web browser to view the website.

Deploying the Project to Vercel

To deploy the project to Vercel, follow these steps:

  1. Create a new project in your Vercel dashboard.

  2. Connect your GitHub account to Vercel and select the repository.

  3. Configure the project settings, including environment variables if necessary.

  4. Deploy the project.

Once the deployment is complete, you can view the website at the URL provided by Vercel.
They gave me a really nice URL free : https://pvh.vercel.app/ which make me feel really happy and lucky.

Conclusion

These are the main technologies used in this project. By combining these tools, I was able to create a fast, responsive, and visually appealing personal portfolio website. If you're interested in learning more about any of these technologies, I encourage you to check out their respective documentation pages.

License

This project is licensed under the Apache License 2.0.

The Apache License is a permissive open-source software license that allows you to use, modify, and distribute the software licensed under it. It requires that you include a copy of the license and any copyright notices with any distribution of the software. The license also provides an explicit patent grant and an explicit disclaimer of warranties and liability.

For more information, see the LICENSE file.

About

My portfolio website built with Next.js and TypeScript features a clean design showcasing my skills, projects, and experience. It's fully responsive and available on GitHub for easy customization. I also use Material UI and framer motion for cleaner design

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published