Creating an Engaging GitHub Page CV: A Step-by-Step Guide


Developing an engaging GitHub Page CV is an effective way to showcase your professional journey and technical prowess in the digital age. This guide offers a detailed roadmap to help you create a dynamic and visually appealing GitHub Page, exemplified by My GitHub Page CV. My GitHub Page CV.

Terminal GH GIF

Step 1: Setting Up Your GitHub Page

Start by creating a repository named 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:

├── .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 4: 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

       Tags: To evoke the nostalgia of classic computer screens, ASCII art is displayed using 
    • Prominent Heading with an

      Tag: A clear and bold heading is presented at the top of the page, capturing visitor attention right from the start.

  • Our Example Implementation:


   name="viewport" content="width=device-width, initial-scale=1">
  </span>Retro Computer Terminal<span class="nt">
   rel="stylesheet" href="styles.css">
   rel="stylesheet" href="">




DevOps | Software Engineering | Automation

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.

This CSS configuration not only captures the essence of a bygone tech era but also sets a creative tone for your GitHub Page CV. While this is a great starting point, you're encouraged to personalize and refine these styles. Tailor them to suit your individual flair and the overarching vibe you desire for your GitHub Page.

  • 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 
 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( format('woff2'),
       url( 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 4: 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 {
     // 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;
     // 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 5: 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 =[sectionName];
    // ... handle other sections ...

  // Method to display experience data
  displayExperience(experienceData) {
    experienceData.forEach(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 6: Deploying with GitHub Actions

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

GitHub Actions

Step 7: Regular Updates

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


End your GitHub Page CV with a statement reflecting your passion for technology and openness to new opportunities. A well-crafted GitHub Page CV, not only showcases your technical abilities but also your personal brand and professional growth.

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post

12 Must-Have Resources for Mastering Milvus – Your Gateway to Seamless Vector Workloads

Next Post

CRO Misconceptions Every SEO Should Know — Whiteboard Friday

Related Posts