Build your portfolio.
Make it yours.

Introduction

Devfolio is a lightweight developer portfolio platform designed to make creating and publishing a personal portfolio simple.

Showcase your profile, projects, skills, social links, experience, and other developer information without building everything from scratch.

Getting started

Get Devfolio running locally in just a few steps.

Requirements

Make sure you have Node.js 18.18 or newer, npm, and Git installed.

Clone the repository

git clone https://github.com/logicnestxvoidlure/devfolio.git
cd devfolio

Install dependencies

npm install

Start the development server

npm run dev

Open http://localhost:3000 once the development server has started.

Development workflow

Devfolio uses Next.js with TypeScript and Tailwind CSS and follows the Next.js App Router architecture.

npm run dev

Changes made inside the application are reflected automatically by the development server.

Portfolio data

The starter portfolio currently uses demo data stored inside lib/demo-data.ts .

This is the primary place to customize the example portfolio before connecting Devfolio to a database.

Available information

Example

export const demoPortfolio: Portfolio = {
  username: "yourusername",
  displayName: "Your Name",
  headline: "Roblox Developer",
  bio: "I create Roblox experiences and systems.",
  avatar: "YOUR_AVATAR_URL",

  skills: [
    "Luau",
    "Roblox Studio",
    "UI/UX",
    "Building"
  ],

  socials: {
    roblox: "YOUR_ROBLOX_URL",
    discord: "YOUR_DISCORD_URL",
    github: "YOUR_GITHUB_URL"
  },

  projects: [
    {
      id: "1",
      title: "My Roblox Game",
      description: "A Roblox project I worked on.",
      role: "Scripter",
      image: "YOUR_IMAGE_URL",
      tags: ["Luau", "Roblox"],
      link: "YOUR_GAME_URL",
      featured: true
    }
  ]
};

Projects

Projects are part of the portfolio data structure. Each project contains information used by the project card component.

Routes

Devfolio currently includes three primary application routes.

Public profiles

Username-based portfolios can be accessed through the dynamic route.

/u/logicnest

The current implementation uses demo data. A database implementation can use the username to retrieve the corresponding portfolio.

Styling

Global styling is located inside app/globals.css .

You can customize colors, typography, spacing, animations, backgrounds, cards, navigation, portfolio sections, and responsive behavior.

Components

Reusable UI components are located inside the components/ directory.

Project structure

The repository keeps application routes, reusable components, and data definitions separated.

Deployment

Devfolio can be deployed to platforms such as Vercel.

Build the project

npm run build

Start production

npm start

Vercel

Fork the repository, import it into Vercel, configure your environment variables, and deploy the project.

Environment variables

If your version requires environment variables, copy .env.example to .env.local and add the required values.

Roadmap

These planned features can turn Devfolio from a starter project into a complete portfolio platform.

Contributing

Contributions are welcome. Keep changes focused, clean, and consistent with the existing project structure.

Fork and clone

git clone https://github.com/YOUR-USERNAME/devfolio.git
cd devfolio
npm install

Create a branch

git checkout -b feature/my-feature

Test your changes

npm run dev

Commit and push

git add .
git commit -m "Add my feature"
git push origin feature/my-feature

After pushing your branch, open a Pull Request on GitHub.

License

Devfolio is released under the MIT License.

See the repository's LICENSE file for the complete license text.