Terminal Portfolio

A modern, terminal-style portfolio website built with Astro that's fully configurable through a single configuration file. Perfect for developers who want to showcase their skills and projects in a unique way with blazing-fast performance.

Demo

✨ Features

🖥️ Interactive Terminal Interface - Navigate through your portfolio using terminal commands
📱 Fully Responsive - Works perfectly on desktop, tablet, and mobile
⚙️ Easy Configuration - Everything configurable through profile.config.ts
🔄 GitHub Integration - Displays your GitHub stats and projects from static data
🎨 Customizable Themes - Dark, light, matrix, and cyberpunk themes
📝 Blog Support - Built-in blog functionality with MDX support
🔍 SEO Optimized - Perfect for social media sharing with automatic sitemap generation
🚀 Lightning Fast - Built with Astro for optimal performance and SEO
💾 Smart Caching - GitHub data served from static files for optimal performance
🏗️ Component-Based - Modular Astro components for easy customization

🚧 Development Status

Note: This Astro version is currently under active development. The terminal command interface and blog features are still being migrated from React to Astro.

For full functionality, please use the React branch which has complete implementations of:

Interactive terminal commands

Full blog system with markdown processing

All interactive features

Contributions Welcome! 🎉 Pull requests are highly encouraged to help complete the Astro migration. Check out our issues or submit PRs to help bring these features to the Astro version.

🚀 Quick Start

Prerequisites

Node.js 18+
npm, yarn, pnpm, or bun

Installation

Clone the repository

git clone https://github.com/iamdhakrey/terminal-portfolio.git
cd terminal-portfolio

Install dependencies

npm install
# or
yarn install
# or
pnpm install
# or
bun install

Configure your profile

Edit profile.config.ts with your information:

export const profileConfig: ProfileConfig = {
  profile: {
    name: "Your Name",
    username: "yourusername",
    title: "Full Stack Developer",
    description: "Passionate developer creating awesome solutions",
    bio: "Your bio here...",
    image: "/your-profile-image.jpg",
    website: "https://yourwebsite.dev",
    location: "Your Location",
    email: "[email protected]",
    currentFocus: [
      "Building scalable web applications",
      "Contributing to open source",
      // ... your current focus areas
    ],
    funFact: "Your fun fact here! 🎉"
  },
  // ... more configuration
};

Update GitHub data

First, install and authenticate with GitHub CLI:

# Install GitHub CLI (if not already installed)
# Visit https://cli.github.com/ for installation instructions

# Authenticate with GitHub
gh auth login

# Fetch your GitHub data
npm run update-github

This will automatically populate /public/github-projects.json with your repositories and stats.

Start development server
```
npm run dev
```
Your site will be available at http://localhost:4321
Build for production
```
npm run build
```
The built site will be in the dist/ directory.

📋 Configuration Guide

Profile Configuration

All configuration is done through the profile.config.ts file. Here's a complete overview:

Basic Profile Information

profile: {
  name: "Your Name",                    // Your full name
  username: "yourusername",             // GitHub username
  title: "Full Stack Developer",        // Your professional title
  description: "Short description",     // Meta description for SEO
  bio: "Longer bio text...",           // Displayed in about section
  image: "/profile.jpg",               // Path to your profile image
  website: "https://yourwebsite.dev",  // Your website URL
  location: "Your Location",           // Your location
  email: "[email protected]",          // Your email
  currentFocus: ["Item 1", "Item 2"],  // What you're currently working on
  funFact: "Your fun fact! 🎉"        // A fun fact about you
}

Social Links

socialLinks: {
  github: "https://github.com/username",
  linkedin: "https://linkedin.com/in/username",
  twitter: "https://twitter.com/username",
  telegram: "https://t.me/username",
  website: "https://yourwebsite.dev",
  // Add any social platform
}

Skills & Technologies

skills: [
  "JavaScript", "TypeScript", "React", "Node.js",
  "Python", "Docker", "AWS", "Linux"
]

Terminal Configuration

terminal: {
  hostname: "localhost",
  username: "user",
  theme: "dark",
  welcomeMessage: [
    "Welcome to my interactive terminal!",
    "Type 'help' to see available commands."
  ],
  customCommands: {
    "custom-cmd": {
      description: "Custom command description",
      output: ["Command output line 1", "Line 2"]
    }
  }
}

Navigation & Footer

navigation: {
  brandName: "yoursite.dev",
  brandUrl: "/",
  links: [
    { name: "projects", path: "/projects", color: "text-orange-400" },
    // ... more navigation links
  ]
},

footer: {
  statusMessage: "Connected",
  madeWithLove: {
    enabled: true,
    text: "Made with ❤️ and ⚡",
    location: "Your Location"
  }
}

🎨 Customization

Themes

Choose from built-in themes or create your own:

terminal: {
  theme: "dark" | "light" | "matrix" | "cyberpunk"
}

Custom Colors

theme: {
  primaryColor: "#22c55e",
  secondaryColor: "#3b82f6",
  accentColor: "#eab308",
  backgroundColor: "#000000",
  // ... more color options
}

📊 GitHub Integration

This portfolio displays GitHub data from a static JSON file for optimal performance. To update your GitHub data:

GitHub CLI Prerequisites

Install GitHub CLI: https://cli.github.com/
Authenticate with GitHub CLI:
```
gh auth login
```

Updating GitHub Data

Method 1: Using npm script (Recommended)

npm run update-github

Method 2: Using the script directly

bash scripts/fetch-github-data.sh

Method 3: Manual update

Manually update /public/github-projects.json with your latest repositories.

GitHub Data Structure

The script generates a comprehensive JSON structure:

{
  "lastUpdated": "2025-07-10T00:00:00Z",
  "user": {
    "login": "username",
    "name": "Your Name",
    "bio": "Your bio",
    "public_repos": 25,
    "followers": 100,
    "following": 50
  },
  "repositories": [...],
  "stats": {
    "totalRepos": 25,
    "totalStars": 150,
    "totalForks": 30,
    "languages": ["JavaScript", "TypeScript", "Python"]
  },
  "featured": [...],
  "byLanguage": {...}
}

Automation

For automatic updates, you can set up a GitHub Action to run the update script and commit the changes periodically.

📝 Blog Setup

Astro uses content collections for managing blog posts. Add markdown or MDX files to /src/content/blog/ and configure them in profile.config.ts.

Blog Configuration

blogs: {
  enabled: true,                    // Enable/disable blog functionality
  featuredPosts: [                  // Featured blog posts (shown prominently)
    "react-typescript-guide",
    "linux_commands", 
    "sudoko"
  ],
  categories: [                      // Available blog categories
    "React", "TypeScript", "Linux", "DevOps", "Tutorial"
  ],
  availableBlogs: [                  // List of available blog files
    "linux_commands.md",
    "react-typescript-guide.md", 
    "sudoko.md"
  ]
}

Blog Linking & Cross-References

The blog system includes powerful linking capabilities to connect related posts:

Inter-Blog Linking

Reference other blogs in your markdown content using these methods:

1. Simple Blog Reference

{{blog:react-typescript-guide}}

This creates a link with the blog's title as the link text.

2. Custom Link Text

{{blog:linux_commands|Check out my Linux guide}}

This creates a link with custom text.

3. Manual Links

[Custom Link Text](/blogs/react-typescript-guide)

Standard markdown links to blog posts.

Automatic Features

Related Posts: Automatically suggests related content based on title/description similarities
Navigation: Previous/next post navigation at the bottom of each blog
Featured Posts: Highlight important posts in the blog list
Smart Processing: Blog references are automatically converted to proper links

Blog Utilities

The system provides several utility functions for advanced blog management:

// Get related posts
const related = await getRelatedBlogs('current-blog', 3);

// Generate blog links
const link = createBlogLink('react-guide', 'Custom Text');

// Get navigation
const nav = await getBlogNavigation('current-blog');

// Get all available blog links
const allLinks = await getAllBlogLinks();

Adding New Blog Posts

Create a .md or .mdx file in /src/content/blog/

Add frontmatter to your markdown file:

---
title: "Your Blog Post Title"
pubDate: "2025-07-10"
description: "Brief description of your post"
author: "Your Name"
tags: ["astro", "tutorial", "web-dev"]
---

# Your Content Here

You can use MDX components and regular markdown syntax.

The blog will be automatically discovered by Astro's content collections
Update featuredPosts in profile.config.ts for prominence

Blog Features

Content Collections: Astro's type-safe content management
MDX Support: Full MDX with component support and syntax highlighting
Featured Posts: Highlight important posts
Automatic Discovery: Blogs are automatically loaded from content collections
Responsive Design: Mobile-friendly blog layout
RSS Feed: Automatically generated RSS feed for your blog
Table of Contents: Auto-generated for longer posts

🚀 Deployment

Vercel (Recommended)

Push to GitHub
Connect to Vercel
Deploy automatically with Astro preset

Netlify

Build the project: npm run build
Deploy the dist folder to Netlify
Or use Netlify's Git integration with automatic builds

GitHub Pages

Add the GitHub Pages adapter to astro.config.mjs:

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'static',
  base: '/your-repo-name',
});

Build: npm run build
Deploy the dist folder to GitHub Pages

Docker

FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

🛠️ Development

Project Structure

src/
├── components/          # Astro components
├── content/            # Content collections (blogs)
├── layouts/            # Astro layouts
├── pages/              # Astro pages (file-based routing)
├── utils/              # Utility functions
├── assets/             # Static assets
├── styles/             # CSS styles
└── data/               # Static data files

public/
├── github-projects.json # GitHub data
└── fonts/              # Custom fonts

Available Scripts

npm run dev - Start Astro development server (localhost:4321)
npm run build - Build for production
npm run preview - Preview production build locally
npm run astro - Run Astro CLI commands
npm run update-github - Fetch latest GitHub data

Technologies Used

Astro 5 with TypeScript for static site generation
MDX for enhanced markdown with components
Tailwind CSS for utility-first styling
Sharp for optimized image processing
Highlight.js for syntax highlighting in blogs

🔧 Performance

⚡ Lightning-fast builds and rendering with Astro
📱 Mobile-optimized responsive design
🎯 Zero JavaScript by default, enhanced progressively
💾 Static GitHub data for instant loading
🔍 SEO optimized with automatic sitemap generation
🖼️ Optimized images with Sharp integration

📈 SEO Features

Meta tags for social media sharing
Structured data for search engines
Optimized images and assets
Fast loading times
Mobile-friendly design

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit changes: git commit -m 'Add amazing feature'
Push to branch: git push origin feature/amazing-feature
Open a Pull Request

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

If you have any questions or need help:

Check the documentation above
Search existing Issues
Create a new issue if needed

🙏 Acknowledgments

Built with modern web technologies
Inspired by terminal interfaces
Thanks to the open source community

⭐ Star this repository if you found it helpful!

🐛 Found a bug? Open an issue

💡 Have a feature request? Start a discussion

terminal-portfolio terminal-portfolio copied to clipboard

Metadata