diff --git a/ansible-sandbox.html b/ansible-sandbox.html index 1b0fd74..ecbd4af 100644 --- a/ansible-sandbox.html +++ b/ansible-sandbox.html @@ -85,9 +85,137 @@ padding: 0 1.5rem; } + /* Navigation Bar */ + .navbar { + background-color: rgba(15, 23, 42, 0.9); + backdrop-filter: var(--glass-effect); + -webkit-backdrop-filter: var(--glass-effect); + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + padding: 1rem 0; + border-bottom: 1px solid var(--border); + } + + .navbar .container { + display: flex; + justify-content: space-between; + align-items: center; + } + + .logo { + font-weight: 600; + font-size: 1.5rem; + } + + .logo a { + color: var(--text-primary); + text-decoration: none; + display: flex; + align-items: center; + } + + .logo-text { + background: var(--accent-gradient); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + } + + .logo-dot { + color: var(--text-secondary); + } + + .nav-menu { + display: flex; + gap: 2rem; + } + + .nav-link { + color: var(--text-secondary); + text-decoration: none; + font-size: 0.95rem; + font-weight: 500; + transition: all var(--transition-normal); + position: relative; + } + + .nav-link::after { + content: ""; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background: var(--accent-gradient); + transition: width var(--transition-normal); + } + + .nav-link:hover { + color: var(--text-primary); + } + + .nav-link:hover::after { + width: 100%; + } + + .nav-link.active { + color: var(--accent); + } + + .nav-link.active::after { + width: 100%; + } + + .nav-buttons { + display: flex; + align-items: center; + gap: 1rem; + } + + .dashboard-link { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + font-size: 0.9rem; + font-weight: 500; + color: var(--text-primary); + background-color: rgba(59, 130, 246, 0.1); + border: 1px solid rgba(59, 130, 246, 0.2); + border-radius: 0.5rem; + text-decoration: none; + transition: all var(--transition-normal); + } + + .dashboard-link:hover { + background-color: rgba(59, 130, 246, 0.2); + border-color: rgba(59, 130, 246, 0.3); + } + + .live-indicator { + width: 8px; + height: 8px; + background-color: var(--success); + border-radius: 50%; + animation: pulse 2s infinite; + } + + .menu-toggle { + display: none; + background: none; + border: none; + color: var(--text-primary); + font-size: 1.25rem; + cursor: pointer; + } + /* Sandbox Specific Styles */ .sandbox-container { padding: 5rem 0 2rem; + margin-top: 4rem; } .sandbox-header { @@ -630,31 +758,64 @@ } /* Footer */ - .sandbox-footer { + .footer { + background-color: var(--secondary-bg); + border-top: 1px solid var(--border); + padding: 3rem 0 1.5rem; + margin-top: 5rem; + } + + .footer-content { display: flex; justify-content: space-between; align-items: center; - margin-top: 2rem; + margin-bottom: 2rem; + } + + .footer-logo { + font-weight: 600; + font-size: 1.5rem; + } + + .footer-links { + display: flex; + gap: 2rem; + } + + .footer-links a { + color: var(--text-secondary); + text-decoration: none; + font-size: 0.95rem; + transition: color var(--transition-normal); + } + + .footer-links a:hover { + color: var(--accent); + } + + .footer-social { + display: flex; + gap: 1.25rem; + } + + .footer-social a { + color: var(--text-secondary); + font-size: 1.25rem; + transition: color var(--transition-normal); + } + + .footer-social a:hover { + color: var(--accent); + } + + .footer-bottom { padding-top: 1.5rem; border-top: 1px solid var(--border); - font-size: 0.85rem; + text-align: center; + font-size: 0.9rem; color: var(--text-secondary); } - - .back-to-site { - display: flex; - align-items: center; - gap: 0.5rem; - color: var(--accent); - font-weight: 500; - transition: all var(--transition-normal); - } - - .back-to-site:hover { - color: var(--accent-darker); - transform: translateX(-3px); - } - + /* Animation */ @keyframes pulse { 0% { @@ -679,6 +840,29 @@ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } + + .nav-menu { + position: fixed; + top: 75px; + left: 0; + right: 0; + background-color: var(--primary-bg); + flex-direction: column; + align-items: center; + padding: 2rem 0; + gap: 1.5rem; + transition: transform var(--transition-normal); + transform: translateY(-150%); + border-bottom: 1px solid var(--border); + } + + .nav-menu.show { + transform: translateY(0); + } + + .menu-toggle { + display: block; + } } @media (max-width: 768px) { @@ -696,555 +880,638 @@ .preview-tabs { display: none; } + + .footer-content { + flex-direction: column; + gap: 2rem; + align-items: flex-start; + } + + .footer-links { + flex-wrap: wrap; + justify-content: center; + gap: 1.5rem; + row-gap: 1rem; + } } -
+ + + +
+
+
+
+

Ansible Sandbox

+
+ +
+ + + Help + + + + Documentation + +
+
+ +
+
+
+
+

Web Server Deployment

+ Basic +
+

+ Deploy a Nginx web server with a sample website in a controlled environment. +

+
+
+ + Runtime: ~3 min +
+
+ + 1 VM +
+
+
+ +
+
+

Docker Compose Stack

+ Intermediate +
+

+ Deploy a multi-container application using Docker Compose with automatic configuration. +

+
+
+ + Runtime: ~5 min +
+
+ + 1 VM +
+
+
+ +
+
+

K3s Kubernetes Cluster

+ Advanced +
+

+ Deploy a lightweight Kubernetes cluster with basic services and sample application. +

+
+
+ + Runtime: ~8 min +
+
+ + 3 VMs +
+
+
+ +
+
+

LAMP Stack

+ Intermediate +
+

+ Deploy a Linux, Apache, MySQL, and PHP stack with a sample application. +

+
+
+ + Runtime: ~4 min +
+
+ + 1 VM +
+
+
+ +
+
+

Security Hardening

+ Advanced +
+

+ Apply security best practices to a Linux server including firewall, SSH hardening, and more. +

+
+
+ + Runtime: ~6 min +
+
+ + 1 VM +
+
+
+
+ +
+
+
+
+ + Web Server Deployment +
+
+
Playbook
+
Configuration
+
Output
+
VM Status
+
+
+
+
+
+
+ 1 + --- +
+
+ 2 + # Web Server Deployment Playbook +
+
+ 3 + # This playbook installs and configures a basic Nginx web server +
+
+ 4 + +
+
+ 5 + - name: Deploy Web Server +
+
+ 6 + hosts: all +
+
+ 7 + become: yes +
+
+ 8 + vars: +
+
+ 9 + web_domain: example.local +
+
+ 10 + web_root: /var/www/html +
+
+ 11 + enable_https: false +
+
+ 12 + web_color: blue +
+
+ 13 + +
+
+ 14 + tasks: +
+
+ 15 + - name: Update apt cache +
+
+ 16 + apt: +
+
+ 17 + update_cache: yes +
+
+ 18 + cache_valid_time: 3600 +
+
+ 19 + +
+
+ 20 + - name: Install Nginx and required packages +
+
+ 21 + apt: +
+
+ 22 + name: +
+
+ 23 + - nginx +
+
+ 24 + - curl +
+
+ 25 + state: present +
+
+ 26 + +
+
+ 27 + - name: Create web root directory +
+
+ 28 + file: +
+
+ 29 + path: "{{ web_root }}" +
+
+ 30 + state: directory +
+
+ 31 + mode: '0755' +
+
+ 32 + +
+
+ 33 + - name: Create sample website +
+
+ 34 + template: +
+
+ 35 + src: templates/index.html.j2 +
+
+ 36 + dest: "{{ web_root }}/index.html" +
+
+ 37 + mode: '0644' +
+
+ 38 + +
+
+ 39 + - name: Configure Nginx virtual host +
+
+ 40 + template: +
+
+ 41 + src: templates/nginx.conf.j2 +
+
+ 42 + dest: /etc/nginx/sites-available/{{ web_domain }} +
+
+ 43 + notify: restart nginx +
+
+ 44 + +
+
+ 45 + - name: Enable Nginx virtual host +
+
+ 46 + file: +
+
+ 47 + src: /etc/nginx/sites-available/{{ web_domain }} +
+
+ 48 + dest: /etc/nginx/sites-enabled/{{ web_domain }} +
+
+ 49 + state: link +
+
+ 50 + notify: restart nginx +
+
+ 51 + +
+
+ 52 + - name: Start Nginx +
+
+ 53 + service: +
+
+ 54 + name: nginx +
+
+ 55 + state: started +
+
+ 56 + enabled: yes +
+
+ 57 + +
+
+ 58 + handlers: +
+
+ 59 + - name: restart nginx +
+
+ 60 + service: +
+
+ 61 + name: nginx +
+
+ 62 + state: restarted +
+
+
+ +
+
+
+ + +
Domain name for the Nginx virtual host.
+
+ +
+ + +
Directory path where website files will be stored.
+
+ +
+ +
+ + +
+
+ +
+ + +
Color theme for the sample website.
+
+ +
+ + +
Operating system for the virtual machine.
+
+ +
+ + +
Resource allocation for the virtual machine.
+
+
+
+ +
+
+ PLAY [Deploy Web Server] *************************************************** + + TASK [Gathering Facts] ***************************************************** + ok: [webserver] + + TASK [Update apt cache] **************************************************** + ok: [webserver] + + TASK [Install Nginx and required packages] ******************************** + ok: [webserver] + + TASK [Create web root directory] ******************************************* + ok: [webserver] + + TASK [Create sample website] *********************************************** + changed: [webserver] + + TASK [Configure Nginx virtual host] **************************************** + changed: [webserver] + + TASK [Enable Nginx virtual host] ******************************************* + changed: [webserver] + + TASK [Start Nginx] ********************************************************* + ok: [webserver] + + RUNNING HANDLER [restart nginx] ******************************************** + changed: [webserver] + + PLAY RECAP ***************************************************************** + webserver : ok=9 changed=4 unreachable=0 failed=0 skipped=0 rescued=0 ignored=0 + + VERIFICATION ************************************************************** + Testing website availability... + Website is accessible at: http://192.168.122.10 + Website deployed successfully! +
+
+ +
+
+
+
+ +
+
+
webserver (Ubuntu 22.04 LTS)
+
1 vCPU, 1GB RAM, 20GB Storage
+
+
+
+
+
Running
+
+ +
+
Sandbox environment active for 15 more minutes
+
+
+
+
+
+
+
+
+
+
+ Ready to deploy +
+
+ + +
+
+
+
+
+ + + + diff --git a/resume.html b/resume.html index d3c027b..97489c8 100644 --- a/resume.html +++ b/resume.html @@ -24,10 +24,19 @@