Zane

Posted on Jan 15 • Edited on Jan 17

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.

Website:Checkout My GitHub Page Curriculum vitae
Repository:Checkout My GitHub Page Repository
Github Pages: Link to Github Pages

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.

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

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>

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 */
  }
}

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
   }

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
   }

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
   }

   initializeProperties() {
     this.terminal = new Terminal(this.config.terminal);
     // Further initialization
   }

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
   }

   handleInput(key) {
     // Manage character inputs in the terminal
   }

   writePrompt() {
     // Display command prompt
   }

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
   }

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
   };

   window.onload = () => {
     const terminalConfigurations = {
       terminal: terminalSettings,
       cv: cvInteraction,
       // More configurations
     };
     new CVTerminal(terminalConfigurations);
   };

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.

*Our Example Data Collected from My Linkedin *:

// 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);
};

Step 7: Deploying with GitHub Actions

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

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 😎

DEV Community

Terminal Style CV Using GitHub Pages

Introduction

Step 1: Setting Up Your GitHub Page

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

Step 3: Lets write the HTML

Step 4: Styling with CSS for a Retro Terminal Look

Step 5: Incorporating Interactive Elements with JavaScript

Step 6: Sourcing and Integrating Data

Step 7: Deploying with GitHub Actions

Step 8: Regular Updates

Conclusion

Top comments (0)

Read next

Coming Full Circle: It starts and ends with Git and GitHub

Why Monorepo Projects Sucks: Performance Considerations with Nx

🚀 Introducing Odysseus-CLI: Simplified Deployment for Laravel, React and other Applications

Day 18: Deploying Docker to the Cloud