Craftfolio: Your Personalized Portfolio Builder

Craftfolio is not just a portfolio website; it's your digital canvas, designed for effortless personalization. With a simple data.js file, you can dynamically transform every aspect of your portfolio—from project details to skills and personal information—without touching the code. Crafted with ease of use in mind, Craftfolio lets you toggle between sections and their corresponding code, making it a breeze to understand, modify, and make it uniquely yours. Embrace the power of seamless customization and showcase your journey, projects, and skills with Craftfolio.

How do I make this portfolio mine?

• Step1
  Click on the "My Portfolio button"

• Step2
  Sign in to CraftFolio with your github account and click on the authorize clerk button. (You have successfully signed in ^_^)

  

• Step3
  Here you get access to the existing default code and you are able to edit it to fit your description! Make sure to add your own text,images and socials replacing the default placeholders.

• Step4
  Click on the Modify button to push the changes you've made and voila your portfolio is done :)

• Step5
  You can access your portfolio by either clicking on the /userName button at the top or you can use the navigation menu in the bottom right to do so.

  

  

• Step6
  After accessing your portfolio, if you wanna make any other changes, you can do so by using the edit portfolio option in the menu bar which will redirect you to the portfolio editor.

  • Note
    If you are facing issues and need some help, you can use the Ask AI button to access CraftBot2. This chatbot can generate your data.json from your resume text and help you resolve any issues in this context.

  

• Step7
  Craftfolio also lets you add blogs to your portfolio :)

  • To do so, click on the navigation menu and select the add blog option.

  • This will lead you to the blog editor which has standard editing options. This editor lets you add text, url's as well as images.

  • Craftfolio also provides three viewing options to make your blog writing more efficient!! Firstly, an option which only lets you see the code you are entering.

    

    Secondly, an option which lets you see the code you are writing as well as the live blog side-by-side.

    

    Lastly, an option which lets you see the live blog only.

    

    You can also make the editor fit the entire page by using the fullscreen toggle button.

    

  • After writing your blog and perfecting it, click on the publish blog option and make sure add an intriguing title and description ^_^

  

  

  • You can access all your blogs by clicking the Manage Blogs option.

  

  Here you can view, edit or delete any of the blogs you've written.

  

• Visitors of your blog have an option to view your portfolio, while also visitors oo your portfolio have an option to view your blogs!

How do I make this portfolio mine (Way 2: You would have to and host yourself.)

• Step1
  Fork this repository

• Step2
  if you have git installed run

     git clone <forked repo ssh link>
  

  if you dont have git installed simply click on the green code button in the the forked repository and

     click download ZIP file.
     Extract it
  

• Step 3
  Open the project in the code editor of your choice, if you are using cli and what to open the current directory use

     code .
  

• Step 4
  You are almost done, all you have to do is now install all the required dependencies react-icons, shadcn ui, framer motion, or simply run the below command in the terminal.

     npm install
  

• Step 5
  To run the project locally on your system use the below command

     npm run dev
  

• Step 6
  The installation is successfull, now to make the portfolio yours just change the various fields in the data.js file and you will observe the portoflio change or ask chatgpt to change the data.js file for you but give it some reference like your resume and replace the gpt provided code in data.js and there you go, your own portfolio in under 5mins.

Screenshots

The webiste has Dark, light and system Theme Modes (Default = system) and animations which gives the portoflio a clean and amazing feel.

Dark Mode

Light Mode

Tech Stack

Frontend: Nextjs 14, Redux, Tailwind CSS, Shadcn UI, React Icons, react-fast-marquee and Framer Motion.

How to Contribute & Other Stuff

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

Authors

• @Kartikeya Saini