npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

portosaurus

v1.18.16

Published

Complete portfolio cum personal website solution for your digital personality.

Readme

🧩 Features

  • 📝 Full-featured Portfolio Site — Showcase your work, skills, experience, social identity.
  • 🎨 Beautiful UI — Responsive design with Catppuccin color scheme.
  • 🖼️ Project Showcase — Interactive project cards with support for featured projects, project status badges, and tags
  • 📚 Knowledge Base — Integrated notes system with custom icons and categorization
  • ✏️ Blog Platform — Built-in blogging capabilities.
  • 📋 Task Tracking — Track your plans with priority levels and completion status
  • 🛠️ Highly Configurable — Extensive customization options in a central config file
  • 🔍 Powerful Search — Integrated search functionality for notes and blog content
  • 📱 Mobile-Friendly — Fully responsive design works on all devices
  • 🚀 Auto Deployment — Ready for GitHub Pages or any static hosting

� Getting Started

1. Create a New Project

Run the initialization command to set up your portfolio:

# With Bun
bunx portosaurus init my-portfolio

# with npm
npx portosaurus init my-portfolio

Options:

  • -ngh, --no-github-pages: Skip setting up GitHub Actions workflow for deployment.
  • -ni, --no-install: Skip automatic dependency installation.

2. Start Development Server

Navigate to your project and start the development server:

cd my-portfolio

# With npm
npm run dev

# With Bun
bun run dev

Your site will be available at http://localhost:3000.

3. Build & Deploy

GitHub Pages

  1. Create a repository on GitHub named yourUsername.github.io.
  2. Go to the repo's Settings > Pages > Build and deployment > Source > GitHub Actions.
  3. Push your code:
    git remote add origin https://github.com/yourUsername/yourUsername.github.io.git
    git branch -M main
    git push -u origin main

Other Providers

A portosaurus project can be deployed to any static hosting provider like:

  • Netlify
  • Vercel
  • Cloudflare Pages
  • Other static providers

To generate the static site for production:

# With Bun
bun run build

# With npm
npm run build

The output will be in the build/ directory.

To preview the production build locally:

# With Bun
bun run serve

# With npm
npm run serve

⚙️ Configuration

Portosaurus is configured via config.js in your project root.

module.exports = {
  usrConf: {
    hero_section: {
      title: "Your Name",
      description: "Software Engineer",
      // ...
    },
    // ...
  },
};

📄 Credits

  • Docusaurus - The static site builder framework this is built upon.
  • React - UI library for building the interactive components.
  • React Icons - Icon library used throughout the site.
  • Libraries listed in package.json - Essential dependencies.
  • Hugo Profile - Design inspiration.
  • Catppuccin - Color scheme that inspired the site's palette.
  • Deepseek R1 hosted using Ollama - prism.js theme & project card component.
  • Inkscape - Icon drawing.
  • Countless Internet forum posts - Filling me with information.