Rohitfolio

Welcome to 'Rohitfolio'! Built with Next.js, Tailwind CSS, Sanity CMS, and animated with GSAP, this portfolio template is designed to be elegant, responsive, and easy to customize. Whether you're a developer, designer, or creative professional, this template will help you showcase your work in the best light.

Table of Contents

• Features
• Getting Started
  • Prerequisites
  • Installation
• Customization
  • Tailwind CSS
  • Fonts
  • Sanity CMS
  • Environment Variables
  • React Resend
  • Email Template
• Contributing
• License
• Contact

Features

• Responsive design
• Next.js for blazing fast performance
• Tailwind CSS for styling
• Sanity CMS for easy content management
• GSAP for smooth animations
• Fully customizable theme
• 100/100 Score in Page Speed Insights for Performance, Best Practices and SEO

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

What things you need to install the software and how to install them:

• Node.js
• Git
• Sanity CLI (for managing content with Sanity CMS)

Installation

1. Fork the repo
2. Clone the repo:

   git clone https://github.com/{your-username}/rohitfolio.git

3. Navigate to the repo:

	cd rohitfolio

4. Start the development server:
   • Yarn:

      yarn dev

   • NPM:

      npm dev

5. Add your personal flare to the portfolio and make it yours 🤝

Customization

Tailwind CSS:

Please refer to the Official Tailwind Documentation for reference

The color palletes can be changed from the tailwind.config.js:

theme: {
	extend: {
		colors: {
			primary:  "#FFFCF2",
			secondary:  "#CCC5B9",
			tertiary:  "#403D39",
			primary_dark:  "#252422",
			accent:  "#EB5E28",
		},
},

---

Fonts:

• Please refer to the Next.js official documentation for fonts
• If you wish to change the fonts, it can be changed within the file ./public/utils/FontLoader.tsx
• Default configuration of the project

   import localFont from  "next/font/local";
   export  const  generalSans  =  localFont({
   	src:"../assets/fonts/GeneralSans.ttf",
   	display:"swap",
   	variable:"--font-generalSans"
   });
   
   export  const  clashGrotesk  =  localFont({
   	src:'../assets/fonts/ClashGrotesk.ttf',
   	display:"swap",
   	variable:"--font-clashGrotesk"
   }); 

• The assets for static fonts can be configured in the path ./public/assets/fonts/

---

Sanity CMS:

• The schema that is used to create posts on the backend is defined in the file /sanity/schemas/post.ts
• Feel free to customise the schema and deploy the sanity backend and use it for dynamic content management.

---

Environment Variables:

• Create an account on sanity and use the API key to initialise the sanity CMS for the project
• Sign up for an account on React Resend and use the API key to initialise the contact form section email function.
• Create a .env.local file inside the root directory of the repository and use these environment variables to get the project up and running.

NEXT_PUBLIC_SANITY_PROJECT_ID=""
NEXT_PUBLIC_SANITY_DATASET=""
RESEND_API_KEY=""

---

React Resend:

• Sign up for an account at React Resend
• Set up a project and copy the API key and paste the value in the environment variables.

---

Email Template:

• Refer to the documentation of React Email for templates and how to configure it
• The default template of the project is located at ./lib/EmailTemplate.tsx

Contributing

Your contributions make the community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would improve this project, please fork the repo and create a pull request. You can also simply open an issue with the relevant tag. Don't forget to give the project a star! Thanks again 🫡

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

For any questions or suggestions regarding this project or if you want to collaborate on a project, please feel free to reach out!

Rohit Manivel
GitHub: @rohit-iwnl
LinkedIn: My LinkedIn