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.
-
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.
- Note
-
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!
-
Step1
Fork this repository -
Step2
if you have git installed rungit 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 usecode . -
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 commandnpm 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.
The webiste has Dark, light and system Theme Modes (Default = system) and animations which gives the portoflio a clean and amazing feel.
Frontend: Nextjs 14, Redux, Tailwind CSS, Shadcn UI, React Icons, react-fast-marquee and Framer Motion.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen 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.
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!
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.