DevOps — Constanza Valiente P.

1 Overview

This project is a professional portfolio website built from scratch using HTML5, CSS3, and vanilla JavaScript. The site showcases cloud infrastructure, AI, DevOps, automation, containers, and IaC projects developed by Constanza Valiente P.

The original template (HTML5 UP — Prologue) was fully redesigned with a custom dark design system inspired by modern developer portfolios. The final site is deployed as a static website on AWS S3, with automated publishing via a GitHub Actions CI/CD pipeline triggered on every push to the main branch.

The development process was assisted by Amazon Q Developer (AI coding assistant inside VS Code), which accelerated HTML/CSS generation, refactoring, and documentation.

2 Application Architecture and Tools

2.1 Frontend Stack

Layer	Technology
Markup	HTML5 — semantic: `<aside>`, `<main>`, `<section>`, `<article>`, `<figure>`
Styling	CSS3 — custom design system with CSS Variables, Flexbox, Grid
Typography	Inter (Google Fonts) — weights 300 / 400 / 500 / 600 / 700 / 800
Icons	Font Awesome 5 (self-hosted webfonts)
Scripting	Vanilla JavaScript — sidebar toggle, smooth scroll, IntersectionObserver

2.2 Design System (style.css) — CSS Variables

--bg:        #0d1117   /* page background        */
--bg2:       #161b22   /* sidebar background      */
--bg3:       #1c2128   /* card / section surface  */
--surface:   #21262d
--border:    #30363d
--text:      #e6edf3
--muted:     #8b949e
--heading:   #f0f6fc
--a1:        #58a6ff   /* accent blue             */
--a2:        #bc8cff   /* accent purple           */
--grad:      linear-gradient(135deg, #58a6ff, #bc8cff)
--grad-hero: linear-gradient(135deg, #0d1117 60%, #1c2128)
--grad-btn:  linear-gradient(90deg, #58a6ff, #bc8cff)
--sidebar-w: 275px

2.3 Site Structure

MySite_HTMl5_IA/
├── index.html                      # Main portfolio page
├── projects-AI.html                # AI projects (MCP, Bedrock, Amazon Q)
├── projects-cloud.html             # Cloud projects (ECS-Fargate, WordPress)
├── projects-automations.html       # Automation projects (N8N, MAKE)
├── projects-contenedores-kub.html  # Containers (Docker, ECS, Kubernetes)
├── projects-IAC.html               # IaC (Terraform)
├── projects-devops.html            # DevOps — this page
├── assets/
│   ├── css/
│   │   ├── style.css               # Main design system
│   │   ├── projects-styles.css     # Shared styles for all project pages
│   │   └── fontawesome-all.min.css
│   ├── webfonts/                   # Font Awesome self-hosted fonts
│   └── js/
├── images/                         # All project and profile images
└── .github/
    └── workflows/
        └── deploy.yml              # GitHub Actions CI/CD pipeline

2.4 Layout Pattern

Sidebar (fixed, 275px): avatar, name, role, nav links, social icons
Main content (margin-left: 275px): sections stacked vertically
Mobile (< 768px): sidebar slides off-canvas, hamburger toggle button

2.5 CI/CD Pipeline

Developer (local) → git push → GitHub (main branch)
                                      ↓
                            GitHub Actions Workflow
                                      ↓
                    aws-actions/configure-aws-credentials@v4
                    (IAM credentials from GitHub Secrets)
                                      ↓
                    aws s3 sync . s3://<BUCKET> --delete
                    (excludes .git/* and .github/*)
                                      ↓
                            AWS S3 Static Website

GitHub Secrets required:

Secret	Description
`AWS_ACCESS_KEY_ID`	IAM user access key
`AWS_SECRET_ACCESS_KEY`	IAM user secret key
`AWS_S3_BUCKET`	Target S3 bucket name

AWS Region: us-east-1

2.6 AI Tools Used

Tool	Usage
Amazon Q Developer (VS Code)	HTML/CSS generation, refactoring, documentation
Amazon Bedrock	Featured in AI projects section of the portfolio
MCP Server (Model Context Protocol)	Featured project — AI tool integration

3 Final Implementation

3.1 index.html — Main Portfolio Page

Sections:

Hero — name, role badge, subtitle, CTA buttons, tech tags
Portfolio — 6 project cards grid (AI, DevOps, Cloud, Automations, Containers, IaC)
About Me — 2-column grid with image + bio text + skill pills
Work Experience — role card (Colombian Air Force, 20+ years) + technical skills badges grid (20 AWS/DevOps skills)
Quote — blockquote by Andy Jassy (AWS CEO)
Footer — Optimising by ocvpprofessional.cloud — HTML5 2026

JavaScript features:

Sidebar open/close toggle with overlay
Smooth scroll for anchor links
IntersectionObserver for active nav link highlighting

3.2 Project Pages

All project pages share:

Identical sidebar HTML (same nav, avatar, social icons)
projects-styles.css for consistent layout
.project-hero — full-width header with thumbnail image + title + description
.project-block — dark card with numbered badge, structured lists, images, GitHub link, meta row
.project-back — back button to index.html

Page	Projects Covered
`projects-AI.html`	MCP Server (VS Code + Claude), AI Assistant (Bedrock + Amazon Q)
`projects-cloud.html`	ECS-Fargate website, WordPress Docker, Professional Portfolio (S3)
`projects-automations.html`	PDF extraction with AI (MAKE), N8N automation workflows
`projects-IAC.html`	WordPress deployed by Terraform (EC2 + RDS + ALB)
`projects-contenedores-kub.html`	ECS-Fargate static site, N8N Docker container with ALB
`projects-devops.html`	This documentation page

3.3 Deployment Flow

Code edited locally in VS Code with Amazon Q Developer assistance
git add . && git commit -m "message" && git push origin main
GitHub Actions workflow triggers automatically
AWS credentials configured via configure-aws-credentials@v4
aws s3 sync uploads all files to S3 bucket, removes deleted files (--delete)
Site is live at the S3 static website endpoint / custom domain

4 Graphical Technical Design

Page Layout — Browser View

┌─────────────────────────────────────────────────────────────────┐
│                        BROWSER (Client)                         │
│                                                                 │
│  ┌──────────────┐   ┌────────────────────────────────────────┐  │
│  │   SIDEBAR    │   │              MAIN CONTENT              │  │
│  │  (275px fix) │   │                                        │  │
│  │              │   │  ┌──────────────────────────────────┐  │  │
│  │  [Avatar]    │   │  │  HERO  — gradient text + CTA     │  │  │
│  │  Name        │   │  └──────────────────────────────────┘  │  │
│  │  Role        │   │  ┌──────────────────────────────────┐  │  │
│  │              │   │  │  PORTFOLIO — 6-card grid         │  │  │
│  │  Nav Links   │   │  └──────────────────────────────────┘  │  │
│  │  ─ Intro     │   │  ┌──────────────────────────────────┐  │  │
│  │  ─ Portfolio │   │  │  ABOUT ME — 2-col + pills        │  │  │
│  │  ─ About     │   │  └──────────────────────────────────┘  │  │
│  │  ─ Experience│   │  ┌──────────────────────────────────┐  │  │
│  │              │   │  │  EXPERIENCE — role card + badges │  │  │
│  │  Social Icons│   │  └──────────────────────────────────┘  │  │
│  └──────────────┘   │  ┌──────────────────────────────────┐  │  │
│                     │  │  QUOTE — blockquote              │  │  │
│                     │  └──────────────────────────────────┘  │  │
│                     │  ┌──────────────────────────────────┐  │  │
│                     │  │  FOOTER                          │  │  │
│                     │  └──────────────────────────────────┘  │  │
│                     └────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘

CI/CD Pipeline — End to End

┌──────────┐    push     ┌──────────────┐    Actions    ┌────────┐
│  VS Code │ ──────────► │    GitHub    │ ────────────► │ AWS S3 │
│ + Amazon │             │  (main)      │  s3 sync      │ Static │
│    Q     │             │              │  --delete     │  Site  │
└──────────┘             └──────────────┘               └────────┘
                              │
                    ┌─────────┴──────────┐
                    │  GitHub Secrets    │
                    │  AWS_ACCESS_KEY_ID │
                    │  AWS_SECRET_KEY    │
                    │  AWS_S3_BUCKET     │
                    └────────────────────┘

Graphical Architecture

Optiimising_mySitie_IA_wf_GITHUBACTION.jpeg

Keywords

AWS S3 Static Website Hosting GitHub Actions CI/CD Pipeline HTML5 CSS3 CSS Variables Dark Theme Responsive Design Inter Font Font Awesome Vanilla JavaScript IntersectionObserver Sidebar Layout Amazon Q Developer Amazon Bedrock MCP Server Model Context Protocol Terraform Docker ECS Fargate N8N MAKE Automation IaC DevOps Portfolio ocvpprofessional.cloud