Tech Certification Study Notes

Comprehensive study notes for various technology certifications, built with VitePress and hosted on GitHub Pages.

Features

Clean, Professional Design - Optimized for readability and study
Progress Tracking - Track your study progress with browser localStorage (private to you)
Fully Searchable - Built-in search to quickly find topics
Mobile Responsive - Study on any device
SEO Optimized - Better visibility in search engines
Easy to Update - Simple markdown files
Fast & Modern - Powered by VitePress
Dark Mode - Easy on the eyes during late-night study sessions

Available Study Notes

Active Study

GitHub Certifications
- GH-200: GitHub Actions - CI/CD workflows, automation, and best practices

Completed Certifications ✅

AWS Certifications
- CLF-C02: AWS Cloud Practitioner - Completed Oct 2024
- AIF-C01: AWS AI Practitioner - Completed Jan 2026

Study notes remain available as reference material. More certifications to be added!

Getting Started

Prerequisites

Node.js 18+ installed
Git installed
Basic knowledge of markdown

Installation

Clone the repository:

bash

git clone https://github.com/yourusername/Notes.git
cd Notes

Install dependencies:

bash

npm install

Start the development server:

bash

npm run docs:dev

Open your browser and visit http://localhost:5173

Building for Production

bash

npm run docs:build

This will generate static files in .vitepress/dist directory.

Preview Production Build

bash

npm run docs:preview

Adding New Certification Notes

Step 1: Create Directory Structure

bash

mkdir -p certifications/[provider]/[exam-code]

Example:

bash

mkdir -p certifications/google/pca

Step 2: Copy Templates

bash

# Copy all three template files
cp TEMPLATE-index.md certifications/[provider]/[exam-code]/index.md
cp TEMPLATE-objectives.md certifications/[provider]/[exam-code]/objectives.md
cp TEMPLATE-notes.md certifications/[provider]/[exam-code]/notes.md

Step 3: Fill in Your Content

index.md - Main page with:

Exam information and official link
Overview and prerequisites
Links to objectives and notes pages
Progress tracker
Additional resources

objectives.md - Exam objectives:

Official exam domains
Specific objectives under each domain
Exam weighting breakdown

notes.md - Detailed study notes:

Detailed explanations
Code examples
Best practices
Tips and warnings
Quick reference

Edit .vitepress/config.mts and add your certification to:

Navigation bar (if needed)
Sidebar configuration

Example:

typescript

sidebar: {
  '/certifications/': [
    {
      text: 'Google Cloud',
      collapsed: false,
      items: [
        { text: 'Professional Cloud Architect', link: '/certifications/google/pca/' }
      ]
    },
    // ... other providers
  ]
}

Step 5: Update Index Pages

Add your certification to:

/certifications/index.md
/index.md (home page)

Project Structure

Notes/
├── .github/
│   └── workflows/
│       └── deploy.yml          # GitHub Actions deployment
├── .vitepress/
│   ├── config.mts              # VitePress configuration
│   └── theme/
│       ├── index.ts            # Theme entry
│       └── custom.css          # Custom styles
├── certifications/
│   ├── index.md                # Certifications overview
│   └── github/
│       └── gh-actions/
│           ├── index.md        # Exam info + progress
│           ├── objectives.md   # Exam objectives
│           ├── notes.md        # Study notes
│           └── exam-tips.md    # Exam tips & strategies
├── resources/
│   ├── study-tips.md
│   └── exam-strategies.md
├── public/
│   └── robots.txt              # SEO - Search engine directives
├── ADDING_CERTIFICATIONS.md    # Guide for adding new certifications
├── LICENSE                     # MIT License
├── index.md                    # Home page
├── package.json
└── README.md

Progress Tracking

Each certification page includes a visual progress tracker that saves your progress locally in your browser using localStorage. This means:

✅ Your progress is private - it never leaves your browser
✅ Each certification tracks progress independently
✅ Progress persists across browser sessions
⚠️ Clearing browser data will reset your progress
⚠️ Progress is not synced across devices

Using the Progress Tracker

The progress tracker appears at the bottom of each certification page and shows:

Visual progress bar with percentage
Completed vs total items count
Expandable domains with sub-topics
Reset button to clear all progress

Adding Progress Tracker to Your Notes

Use the ProgressTracker component in your markdown files:

vue

<ProgressTracker
  title="Your Exam Study Progress"
  storage-key="your-exam-code-progress"
  :items="[
    {
      id: 'domain-1',
      label: 'Domain 1: Topic Name',
      children: [
        { id: 'domain-1-1', label: 'Subtopic 1' },
        { id: 'domain-1-2', label: 'Subtopic 2' }
      ]
    },
    { id: 'practice', label: 'Practice exam completed' }
  ]"
/>

Important: Use a unique storage-key for each certification to keep progress separate.

Markdown Features

VitePress supports extended markdown features:

Custom Containers

markdown

::: tip Exam Tip
Important information for the exam
:::

::: warning Common Pitfall
Watch out for this mistake
:::

::: danger Critical
This is critical information
:::

Code Blocks with Syntax Highlighting

markdown

\`\`\`python
def hello_world():
    print("Hello, World!")
\`\`\`

Tables

markdown

| Feature | Description |
|---------|-------------|
| Search | Built-in search |
| Dark Mode | Automatic theme switching |

Task Lists

markdown

- [x] Completed task
- [ ] Pending task

Collapsible Sections

markdown

<details>
<summary>Click to expand</summary>

Hidden content here

</details>

Deployment to GitHub Pages

Initial Setup

Create GitHub Repository
- Go to GitHub and create a new repository named "Notes"
- Make it public

Update Configuration

Edit .vitepress/config.mts:

typescript

export default defineConfig({
  base: '/Notes/', // Your repo name
  // ... other config
})

Update robots.txt:

Sitemap: https://[yourusername].github.io/Notes/sitemap.xml

Push to GitHub

bash

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/Notes.git
git push -u origin main

Enable GitHub Pages
- Go to repository Settings > Pages
- Source: GitHub Actions
- The site will automatically deploy when you push to main
Access Your Site
- Your site will be available at: https://yourusername.github.io/Notes/

Updating Content

Simply push changes to the main branch:

bash

git add .
git commit -m "Update certification notes"
git push

GitHub Actions will automatically rebuild and deploy your site.

Customization

Changing Colors

Edit .vitepress/theme/custom.css:

css

:root {
  --vp-c-brand-1: #your-color;
  --vp-c-brand-2: #your-color;
  --vp-c-brand-3: #your-color;
}

Adding Custom Components

Create component in .vitepress/theme/components/
Register in .vitepress/theme/index.ts

Edit .vitepress/config.mts:

nav - Top navigation bar
sidebar - Side navigation
socialLinks - Social media links

SEO Optimization

The site includes:

Automatic sitemap generation
Meta tags for each page
Semantic HTML structure
robots.txt file
Open Graph tags
Clean URLs

To improve SEO:

Add descriptive titles and descriptions to each page
Use proper heading hierarchy (H1 > H2 > H3)
Include keywords naturally
Add alt text to images
Internal linking between related topics

Tips for Great Study Notes

Be Consistent - Use the template for uniformity
Include Examples - Code examples help understanding
Add Practice Questions - Test your knowledge
Use Visual Aids - Diagrams, tables, and charts
Link Resources - Official docs and additional materials
Track Progress - Use checkboxes for each topic
Update Regularly - Keep notes current with exam changes

Contributing

These are personal study notes, but feel free to:

Report issues or typos
Suggest improvements
Share your own study tips

Resources

License

These study notes are for personal educational use.

Happy studying! Good luck with your certifications! 🎓

Tech Certification Study Notes

Features

Available Study Notes

Active Study

Completed Certifications ✅

Getting Started

Prerequisites

Installation

Building for Production

Preview Production Build

Adding New Certification Notes

Step 1: Create Directory Structure

Step 2: Copy Templates

Step 3: Fill in Your Content

Step 4: Update Navigation

Step 5: Update Index Pages

Project Structure

Progress Tracking

Using the Progress Tracker

Adding Progress Tracker to Your Notes

Markdown Features

Custom Containers

Code Blocks with Syntax Highlighting

Tables

Task Lists

Collapsible Sections

Deployment to GitHub Pages

Initial Setup

Updating Content

Customization

Changing Colors

Adding Custom Components

Modifying Navigation

SEO Optimization

Tips for Great Study Notes

Contributing

Resources

License

Tech Certification Study Notes ​

Features ​

Available Study Notes ​

Active Study ​

Completed Certifications ✅ ​

Getting Started ​

Prerequisites ​

Installation ​

Building for Production ​

Preview Production Build ​

Adding New Certification Notes ​

Step 1: Create Directory Structure ​

Step 2: Copy Templates ​

Step 3: Fill in Your Content ​

Step 4: Update Navigation ​

Step 5: Update Index Pages ​

Project Structure ​

Progress Tracking ​

Using the Progress Tracker ​

Adding Progress Tracker to Your Notes ​

Markdown Features ​

Custom Containers ​

Code Blocks with Syntax Highlighting ​

Tables ​

Task Lists ​

Collapsible Sections ​

Deployment to GitHub Pages ​

Initial Setup ​

Updating Content ​

Customization ​

Changing Colors ​

Adding Custom Components ​

Modifying Navigation ​

SEO Optimization ​

Tips for Great Study Notes ​

Contributing ​

Resources ​

License ​

Tech Certification Study Notes

Features

Available Study Notes

Active Study

Completed Certifications ✅

Getting Started

Prerequisites

Installation

Building for Production

Preview Production Build

Adding New Certification Notes

Step 1: Create Directory Structure

Step 2: Copy Templates

Step 3: Fill in Your Content

Step 4: Update Navigation

Step 5: Update Index Pages

Project Structure

Progress Tracking

Using the Progress Tracker

Adding Progress Tracker to Your Notes

Markdown Features

Custom Containers

Code Blocks with Syntax Highlighting

Tables

Task Lists

Collapsible Sections

Deployment to GitHub Pages

Initial Setup

Updating Content

Customization

Changing Colors

Adding Custom Components

Modifying Navigation

SEO Optimization

Tips for Great Study Notes

Contributing

Resources

License