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.

✨ 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

1. Clone the repository

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

2. Install dependencies

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

3. 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: "your.email@example.com",
       currentFocus: [
         "Building scalable web applications",
         "Contributing to open source",
         // ... your current focus areas
       ],
       funFact: "Your fun fact here! 🎉"
     },
     // ... more configuration
   };

4. 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.

5. Start development server

   npm run dev

   Your site will be available at http://localhost:4321

6. 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@example.com",          // 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

1. Install GitHub CLI: https://cli.github.com/

2. 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

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

2. 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.

3. The blog will be automatically discovered by Astro's content collections

4. 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)

1. Push to GitHub
2. Connect to Vercel
3. Deploy automatically with Astro preset

Netlify

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

GitHub Pages

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

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

2. Build: npm run build
3. 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.

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. 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:

1. Check the documentation above
2. Search existing Issues
3. 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