Giter VIP home page Giter VIP logo

harshal255 / nextsanity-blogfolio Goto Github PK

View Code? Open in Web Editor NEW
10.0 1.0 3.0 3.92 MB

Introducing NextSanity Blogfolio - an open source project powered by NextJS, Tailwind CSS, and Framer Motion for the frontend, and backed by Sanity Headless CMS and GROQ query language for the backend.

Home Page: https://harshalkahar.vercel.app/

License: MIT License

TypeScript 1.24% JavaScript 98.17% CSS 0.59%
framer-motion nextjs nodejs reactjs sanity-io seo-friendly serverside-rendering tailwindcss ssr theme-switcher

nextsanity-blogfolio's Introduction

Portfolio

· NextSanity Blogfolio built in Next.js + SanityCMS + Tailwind CSS ·

IntroductionLoacal DevelopmentDeploymentLicense

Introduction 👋

Why ??

📚 Embrace the Power of Open Source:

NextSanity blogfolio is not just another portfolio builder; it's an open source project crafted with love and dedication. We believe in the power of giving back to the community, and that's why we're making this platform freely available for all aspiring students out there. You don't need to be a seasoned developer to showcase your skills anymore - NextSanity blogfolio simplifies the process for you!

🎨 Seamless Integration of Cutting-Edge Technologies:

Our tech stack is built with excellence in mind. NextJS ensures blazing-fast server-side rendering, while Tailwind CSS adds a touch of elegance and responsiveness to your portfolio's design. To create eye-catching animations, we leverage the power of Framer Motion, bringing life to your projects and experiences.

💻 Powering the Backend with Sanity Headless CMS & GROQ Query Language:

Behind the scenes, we've incorporated Sanity Headless CMS, providing you with a seamless content management experience. Now you can effortlessly update your portfolio content without diving into complex codebases. With GROQ query language, fetching and displaying your data is a breeze, giving you more time to focus on creating the perfect narrative for your story.

📝 Your Journey, Your Story:

NextSanity blogfolio understands that you are more than just a resume. That's why we've thoughtfully designed sections for "About," "Experience," "Projects," "Blogs," and even a special space for your "School & College Story." Let your personality shine through, and showcase not just your achievements but also your unique journey that has shaped you into the extraordinary individual you are today."

Local Development 💻

Here are the steps to run the portfolio locally. (In your PC doesn't install nodeJS & yarn package manager then you should first install NodeJS & yarn to run the project)

Step 1. Fork this repository.

Step 2. Clone your forked copy of the repo

git clone https://github.com/<yourusername>/NextSanity-Blogfolio.git

Step 3. Creating a Sanity Project:

Create a sanity project on https://www.sanity.io.

Step 4. Copy Project ID (Secret): To proceed, you need to redirect to https://www.sanity.io/manage/personal and copy your project's projectId.

Step 5. Run the Backend (SanityIO): Create a .env file in the backend of SanityIO.

cd NextSanity-Blogfolio
cd backend SanityIO
touch .env

Fill up the .env file with your Sanity project ID. You don't need to change the dataset variable.

SANITY_STUDIO_PROJECT_ID = "xxxxxxxx";
SANITY_STUDIO_DATASET = "production";

Then, run.

yarn install
yarn run dev

( don't use npm package )

Step 6. After opening Sanity Studio, log in to your Sanity account and then fill up all schema fields. (All fields are mandatory.)

Your desk for maintaining sanity looks like this:

sanity1

sanity2

sanity3

sanity4

Step 7. Run the NextJS application. Go to the NextSanity-Blogfolio directory and then proceed.

cd ..
cd frontend NextJS
touch .env

After creating a .env file, fill it up with your Sanity project ID.

NEXT_SANITY_PROJECT_ID="xxxxxxxx”
yarn install
yarn run dev

Deployment 🚀

Step 1. Create a Vercel account and select "Import Project"

Step 2. Select the forked repository and deploy

Step 3. Add the following environment variables in the Vercel dashboard:

NEXT_SANITY_PROJECT_ID="xxxxxxxx”

Congratulations your applicaton is ready✨

License 📄

This project is licensed under the MIT License - see the LICENSE.md

Contact 📬

If you want to contact me, you can reach me through below handles.

linkedin

Check Notion Page 🤝

Notion

Support 🙌

If you like this portfolio, please consider giving it a ⭐ on GitHub and sharing it with your friends via social media.

Show some  ❤️  by starring this repo!

nextsanity-blogfolio's People

Contributors

harshal255 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

nextsanity-blogfolio's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.