DEV Community

Cover image for Terminal Style CV Using GitHub Pages
Zane
Zane

Posted on • Updated on

Terminal Style CV Using GitHub Pages

#webdev #javascript #programming #tutorial

Introduction

Developing an engaging GitHub Page CV is an effective way to showcase your professional journey and technical skill set. Here’s an example of how you can create an interactive GitHub Page.

Terminal GH GIF

Step 1: Setting Up Your GitHub Page

Start by creating a repository named .github.io. This naming convention automatically sets it up as a GitHub Page. Then, initialize your page with an index.html file, which will be the main landing page for visitors.

Image description

Step 2: Crafting a Custom HTML Layout with a Retro Terminal Theme

Personalize your page with HTML to create a distinct layout. Consider elements like a navigation bar, a custom footer, or an eye-catching header. Our example features a retro computer terminal theme, achieved through external CSS links, JavaScript libraries for interactivity, ASCII art using 'pre' tags, and a clear 'h1' header.

Our file structure for this design includes:

Your_Repository/
│
├── .gitignore     # Instructions for Git to ignore certain files
├── index.html     # Main HTML document for your GitHub Page
├── scripts.js     # JavaScript file for dynamic interactions
└── styles.css     # CSS file for custom styling
Enter fullscreen mode Exit fullscreen mode

Step 3: Lets write the HTML

Creating a personalized layout using HTML can transform your GitHub page into a distinctive showcase. Here’s how to build a design that captivates:

  • HTML Customization: Your HTML skills are key to developing a unique layout for your GitHub page. Incorporate elements like a streamlined navigation bar, a custom footer, or an engaging header to elevate the aesthetic and functionality of your page.

  • Retro Terminal Theme Implementation: Our example demonstrates a layout that echoes the feel of a vintage computer terminal, achieved through:

    • External CSS Links: We've integrated external CSS files for tailored styling, aligning with our retro theme.
    • JavaScript Libraries for Enhanced Interactivity: JavaScript libraries have been utilized to construct a terminal-like interface that is both interactive and engaging.
    • ASCII Art Utilizing <pre> Tags: To evoke the nostalgia of classic computer screens, ASCII art is displayed using <pre> tags.
    • Prominent Heading with an <h1> Tag: A clear and bold heading is presented at the top of the page, capturing visitor attention right from the start.

  • Our Example Implementation:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Sets the character encoding for the document -->
  <meta charset="UTF-8">
  <!-- Ensures proper rendering and touch zooming on mobile devices -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The title of the document, displayed in the browser's title bar or tab -->
  <title>Retro Computer Terminal</title>
  <!-- Link to an external CSS file for styling -->
  <link rel="stylesheet" href="styles.css">
  <!-- Link to xterm.css, a stylesheet for the xterm.js library -->
  <link rel="stylesheet" href="https://unpkg.com/xterm@5.2.1/css/xterm.css">
  <!-- JavaScript Libraries -->
  <!-- Link to xterm.js, a library for creating a terminal-like interface -->
  <script src="https://unpkg.com/xterm@5.2.1/lib/xterm.js"></script>
  <!-- Addon for xterm.js to fit the terminal to its container -->
  <script src="https://unpkg.com/xterm-addon-fit@0.7.0/lib/xterm-addon-fit.js"></script>
  <!-- Addon for xterm.js to enable web links within the terminal -->
  <script src="https://unpkg.com/xterm-addon-web-links@0.8.0/lib/xterm-addon-web-links.js"></script>
  <!-- Link to a custom JavaScript file for additional functionality -->
  <script src="js/scripts.js"></script>
</head>
<body>
  <!-- Main container for the terminal-like design -->
  <div id="terminal">
    <!-- ASCII art representation of a computer terminal -->
    <pre>
      ███████╗░█████╗░███╗░░██╗███████╗
      ╚════██║██╔══██╗████╗░██║██╔════╝
      ░░███╔═╝███████║██╔██╗██║█████╗░░
      ██╔══╝░░██╔══██║██║╚████║██╔══╝░░
      ███████╗██║░░██║██║░╚███║███████╗
      ╚══════╝╚═╝░░╚═╝╚═╝░░╚══╝╚══════╝
   </pre>
   <pre>
      ██████╗░███████╗░█████╗░██████╗░████████╗░█████╗░███╗░░██╗
      ██╔══██╗██╔════╝██╔══██╗██╔══██╗╚══██╔══╝██╔══██╗████╗░██║
      ██████╔╝█████╗░░███████║██████╔╝░░░██║░░░██║░░██║██╔██╗██║
      ██╔═══╝░██╔══╝░░██╔══██║██╔══██╗░░░██║░░░██║░░██║██║╚████║
      ██║░░░░░███████╗██║░░██║██║░░██║░░░██║░░░╚█████╔╝██║░╚███║
      ╚═╝░░░░░╚══════╝╚═╝░░╚═╝╚═╝░░╚═╝░░░╚═╝░░░░╚════╝░╚═╝░░╚══╝
   </pre>
    <!-- Heading for the webpage -->
    <h1> DevOps | Software Engineering | Automation </h1>
  </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 4: Styling with CSS for a Retro Terminal Look

Use CSS to give your GitHub Page a distinctive retro computer terminal appearance. Implement a monospace font for a classic look, and use a color scheme that mimics the style of vintage computer terminals. Ensure your design is responsive for different device sizes.

  • Monospace Font: Utilizes the classic 'VT323' monospace font, reminiscent of old computer terminals, to give your page an authentic retro feel.
  • Color Scheme: The iconic green text on a black background, typical of vintage terminals, is employed for visual impact.

  • Responsive Design: Ensures that your GitHub Page maintains its visual integrity across various devices, from desktops to mobile phones.

  • Our Example Implementation:

/* Basic styling for the body and HTML to fill the page, center content, and set a black background */
body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000; /* Black background for the terminal effect */
}

/* Styling for the <pre> tag inside the terminal to mimic the green text on black background typical of old terminals */
#terminal pre {
  color: #00ff00; /* Green text */
  font-family: 'VT323', monospace; /* Retro monospace font */
  margin: 0; /* Remove default margin */
  padding: 0; /* Align with terminal content padding */
  white-space: pre-wrap; /* Wrap long lines and preserve spaces/line breaks */
  word-break: keep-all; /* Prevent breaking ASCII art */
}

/* Styling for the heading inside the terminal */
#terminal h1 {
  color: #00ff00; /* Green text */
  font-family: 'VT323', monospace; /* Retro monospace font */
  font-size: 1.2em; /* Slightly larger text for the heading */
  margin-bottom: 0.5em; /* Space below the heading */
}

/* Styling for any additional headers if needed */
#terminal h2 {
  color: #00ff00; /* Green text */
  font-family: 'VT323', monospace; /* Retro monospace font */
  font-size: 0.5em; /* Smaller text for subheadings */
  margin-bottom: 0.5em; /* Space below the heading */
}

/* Positioning and sizing of the terminal */
#terminal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%; /* Adjust as needed */
  height: 90%; /* Adjust as needed */
  transform: translate(-50%, -50%);
  background-color: #000000; /* Black background */
}

/* Font face import for VT323 font */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/vt323@latest/latin-400-normal.woff2) format('woff2'),
       url(https://cdn.jsdelivr.net/fontsource/fonts/vt323@latest/latin-400-normal.woff) format('woff');
}

/* Applying VT323 font to terminal text */
#terminal {
  font-family: 'VT323', monospace;
  font-size: 1em; /* Adjust size as necessary */
}

/* Responsive design for mobile devices */
@media screen and (max-width: 480px) {
  #terminal {
    width: 100%; /* Full width on small screens */
    height: auto; /* Flexible height */
    transform: translate(-50%, -50%);
  }

  #terminal pre {
    font-size: 0.5em; /* Smaller font size for ASCII art on mobile */
    line-height: 1; /* Adjust line height for structure */
    /* Additional adjustments as needed */
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 5: Incorporating Interactive Elements with JavaScript

Enhance your GitHub Page CV's interactivity using JavaScript to create dynamic features and engaging animations. This step-by-step guide helps you build an interactive terminal, adding a unique touch to your online presence.

JavaScript Implementation: Interactive Terminal

  • Class Definition: Begin by defining a JavaScript class CVTerminal that encapsulates all functionalities of your interactive terminal. 
   class CVTerminal {
     // Define properties and methods here
   }
Enter fullscreen mode Exit fullscreen mode
  • Initial Properties: Initialize essential properties such as the terminal object, animation status, and user commands within the class. 
   class CVTerminal {
     terminal;
     isAnimating;
     command;
     // Other properties
   }
Enter fullscreen mode Exit fullscreen mode
  • Constructor and Initialization Methods: The constructor sets up the terminal and its properties. Initialize all essential components here. 
   constructor(config) {
     this.config = config;
     this.initializeProperties();
     // Additional initialization
   }
Enter fullscreen mode Exit fullscreen mode 
   initializeProperties() {
     this.terminal = new Terminal(this.config.terminal);
     // Further initialization
   }
Enter fullscreen mode Exit fullscreen mode
  • Handling User Interactions: Implement functions to handle key events and process user commands, enhancing the terminal's interactivity. 
   handleKeyEvent({ key, domEvent }) {
     // Logic for key event processing
   }

   handleCommand() {
     // Logic for executing commands
   }
Enter fullscreen mode Exit fullscreen mode 
   handleInput(key) {
     // Manage character inputs in the terminal
   }

   writePrompt() {
     // Display command prompt
   }
Enter fullscreen mode Exit fullscreen mode
  • Animation and Display Functions: Add functions for starting and resetting CV display, and create a typing animation effect for text display. 
   startFullCV() {
     // Start full CV display
   }

   resetFullCV() {
     // Reset CV display to initial state
   }

   animateTyping(text, pos, callback) {
     // Typing effect for text
   }

   interruptAnimation() {
     // Stop ongoing animations
   }
Enter fullscreen mode Exit fullscreen mode
  • Configuring and Initializing the Terminal: Set up terminal configurations and initialize the CVTerminal class on window load. 
   const terminalSettings = {
     fontSize: 9,
     fontFamily: "'VT323', monospace",
     // Additional settings
   };

   const cvInteraction = {
     commands: ["about", "experience", "projects"],
     // Other interactions
   };
Enter fullscreen mode Exit fullscreen mode 
   window.onload = () => {
     const terminalConfigurations = {
       terminal: terminalSettings,
       cv: cvInteraction,
       // More configurations
     };
     new CVTerminal(terminalConfigurations);
   };
Enter fullscreen mode Exit fullscreen mode

Step 6: Sourcing and Integrating Data

Populate your GitHub Page CV with relevant data from your GitHub repositories, professional experiences and personal projects. Use JavaScript to dynamically display this information on your page.

// Part of the CVTerminal class
class CVTerminal {
  // ... other properties and methods ...

  // Method to handle the 'experience' command
  writeSection(sectionName) {
    if (sectionName === "experience") {
      const experienceData = this.cv[sectionName];
      this.displayExperience(experienceData);
    }
    // ... handle other sections ...
  }

  // Method to display experience data
  displayExperience(experienceData) {
    experienceData.forEach(item => {
      this.terminal.writeln(item);
    });
  }

  // ... rest of the class ...
}

// Example usage
const terminalConfigurations = {
  // ... other configurations ...
  cv: {
    // ... other sections ...
    experience: [
      "DevOps Engineer | Accenture (Apr 2023 - Present)",
      "Key Responsibilities: Deployment Delivery, Pipeline Maintenance, Tool Assessment",
      "Technologies: AWS, Azure, Docker, CI/CD with GitHub Actions",
      // Add more experience items here
    ],
    // ... other sections ...
  }
};

window.onload = () => {
  new CVTerminal(terminalConfigurations);
};
Enter fullscreen mode Exit fullscreen mode

Step 7: Deploying with GitHub Actions

Utilize GitHub Actions for automated deployment and updates to your GitHub Page.

GitHub Actions

Step 8: Regular Updates

Keep your GitHub Page CV up-to-date with your latest projects, skills, and accomplishments.

Conclusion

A well-crafted GitHub Page CV, not only showcases your technical abilities but also your personal brand and professional growth. Happy coding 😎

Top comments (0)

Read next

joelbonetr profile image

Design Patterns demystified with examples

JoelBonetR 🥇 -

karenpayneoregon profile image

Regex timeout - C#

Karen Payne -

sudhi_ranjangupta_adc8df profile image

Session Management, Tokens & Refresh Tokens

Sudhi Ranjan Gupta -

shanu001x profile image

Your Session has Expired !!

Shanu -