How I Built My Technical Writing Portfolio Website Using GitHub Pages

As a technical writer and software engineer, I wanted a portfolio site that showcased my skills, articles, and publications in a way that felt modern and personal. I built it with HTML + CSS, hosted it on GitHub Pages, and added extra features like animations, Google Search Console, Analytics, and a sitemap.

Here’s exactly how I built it, step-by-step — no frameworks, no CMS, just code and care.

🛠️ Tools I Used

  • HTML + CSS — fully custom, no frameworks
  • GitHub Pages — free, fast hosting
  • Google Search Console — to help get discovered on Google
  • Google Analytics (GA4) — to track visitors
  • VS Code — for writing code
  • A simple animated avatar PNG — for personality ✨

🧱 Step 1: Create a GitHub Pages Repo

  1. Go to https://github.com

  2. Create a new repo named:yourusername.github.io
    Make sure it’s public.

  3. You can either:

  4. Clone it locally (git clone)

  5. Or drag-and-drop files directly into GitHub’s interface

💻 Step 2: Create index.html

This is the homepage. Here's the full code I used (copy it to a file called index.html):

Your Name | Technical Writer






 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', 'G-XXXXXXXXXX');







 html {
   scroll-behavior: smooth;
 }
 @keyframes fadeSlideUp {
   from { opacity: 0; transform: translateY(20px); }
   to { opacity: 1; transform: translateY(0); }
 }
 #work-section {
   animation: fadeSlideUp 1.5s ease-in-out both;
 }
 h2 {
   position: relative;
   animation: slideIn 0.9s ease forwards;
   opacity: 0;
 }
 @keyframes slideIn {
   from { opacity: 0; transform: translateX(-20px); }
   to { opacity: 1; transform: translateX(0); }
 }
 a {
   color: #4dd0e1;
   text-decoration: none;
   position: relative;
   transition: color 0.3s ease;
 }
 a:hover {
   color: #ffffff;
 }
 a::after {
   content: "";
   position: absolute;
   width: 0%;
   height: 2px;
   left: 0;
   bottom: -4px;
   background: linear-gradient(to right, #4dd0e1, #f97316);
   transition: width 0.4s ease;
 }
 a:hover::after {
   width: 100%;
 }
 .emoji-bg {
   position: absolute;
   top: 120px;
   right: 30px;
   font-size: 3rem;
   opacity: 0.05;
   z-index: 0;
   pointer-events: none;
   animation: float 6s ease-in-out infinite;
 }
 @keyframes float {
   0% { transform: translateY(0px); }
   50% { transform: translateY(-15px); }
   100% { transform: translateY(0px); }
 }




🧠


 
   
   Your Name
 
 
   Home
   Contact
   GitHub
 



 Hello, I'm [Your Name]
 
   I’m a software engineer and technical writer with a focus on backend architecture and developer experience.
   I build scalable systems and write structured documentation to make complex tools easier to use.
 

 What I Do
 
   Technical Writing: API docs, onboarding guides, tutorials
   Software Engineering: Python, JavaScript, and backend systems
   Dev Tools: Markdown, LaTeX, Confluence, GitHub Actions
 

 Featured Articles
 
   How I Built This Portfolio
   API Documentation Template
 

 Publication
 
   The Influence of Micro-expressions on Deception Detection
 

 Why I Do This
 
   I’m driven by a passion for making technology accessible. My goal is to bridge the gap between complex systems and the people who use them — whether they're developers or stakeholders.
 

 
   Let's Work Together
   
     I’m available for freelance and contract-based technical writing. Email me at  
     youremail@example.com or check out  
     my GitHub.
   
 


© 2025 Your Name






    Enter fullscreen mode
    


    Exit fullscreen mode
    




🎨 Step 3: Add Styling in style.csscopy this to a file called style.css

body {
  background-color: #121212;
  color: #f5f5f5;
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
}

nav {
  background: linear-gradient(to right, #6a11cb, #2575fc);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}



    Enter fullscreen mode
    


    Exit fullscreen mode
    




📬 Step 4: Add a Contact PageCreate a contact.html file and mirror the design — just include your email address and links.🌍 Step 5: Add Your SitemapCreate a file called sitemap.xml:



  
    https://yourusername.github.io/
  
  
    https://yourusername.github.io/contact.html
  




    Enter fullscreen mode
    


    Exit fullscreen mode
    




Upload it to your GitHub repo root.📈 Step 6: Submit to Google
Go to Google Search Console
Add your site as a URL prefix
Choose HTML tag → Paste into 
Go to “Sitemaps” → Add sitemap.xml
Done!!!.
Let me know if you want to build something similar! I’d love to help others make docs look as great as the code they explain.For Clarity, you can go to my GitHub repo https://github.com/SandraMeshack/sandrameshack.github.io