🚀 Deployment

INFRASTRUCTURE.md

@@ -0,0 +1,162 @@
+# Infrastructure Architecture - volcode.org
+
+## Overview
+
+This document outlines the cloud infrastructure architecture powering the volcode.org platform. The system is designed with a focus on scalability, security, and maintainable deployment processes.
+
+## Architecture Diagram
+
+```
+                          ┌───────────────┐
+                          │   DNS Provider│
+                          │  (Namecheap)  │
+                          └───────┬───────┘
+                                  │
+                                  │ CNAME Records
+                                  ▼
+┌─────────────────┐      ┌───────────────┐     ┌────────────────┐
+│ ACM Certificate │◄─────│   CloudFront  │────►│ S3 Bucket      │
+│ (SSL/TLS)       │      │ Distribution  │     │ (Static Files) │
+└─────────────────┘      └───────────────┘     └────────────────┘
+                                  ▲
+                                  │
+                                  │
+                   ┌──────────────┴──────────────┐
+                   │                             │
+           ┌───────────────┐             ┌───────────────┐
+           │  volcode.org  │             │staging.volcode│
+           │ www.volcode.org│             │    .org      │
+           └───────────────┘             └───────────────┘
+               Production                     Staging
+```
+
+## Core Infrastructure Components
+
+### Content Delivery Network (CDN)
+
+**Amazon CloudFront** is used as the CDN to deliver content with low latency across global edge locations:
+
+- **Configuration Highlights:**
+  - Custom security policy (TLSv1.2_2021)
+  - HTTP/2 and HTTP/3 support
+  - Default root object: index.html
+  - Custom origins for staging and production environments
+
+### SSL/TLS Security
+
+**AWS Certificate Manager (ACM)** provides SSL/TLS certificates:
+
+- Single certificate covering multiple domains:
+  - volcode.org
+  - www.volcode.org
+  - staging.volcode.org
+- DNS validation method
+- Automatic renewal
+
+### Domain Management
+
+External DNS provider (Namecheap) with the following configuration:
+
+- **Primary domains:**
+  - volcode.org (production)
+  - www.volcode.org (production)
+  - staging.volcode.org (staging)
+- **DNS Records:**
+  - CNAME records pointing to CloudFront distributions
+  - Certificate validation records
+  - Additional service records as needed
+
+### Content Storage
+
+**Amazon S3** for static content hosting:
+
+- Private buckets with CloudFront Origin Access Identity (OAI)
+- Versioned objects for rollback capability
+- Structured content organization
+
+## CI/CD Pipeline
+
+### GitHub Actions Workflow
+
+Automated deployment pipeline with environment-specific configurations:
+
+```yaml
+# Simplified workflow representation
+name: Deploy Website
+
+on:
+  push:
+    branches: [main, staging]
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set environment variables
+        run: |
+          if [[ $GITHUB_REF == 'refs/heads/main' ]]; then
+            echo "NUXT_PUBLIC_IS_STAGING=false" >> $GITHUB_ENV
+          else
+            echo "NUXT_PUBLIC_IS_STAGING=true" >> $GITHUB_ENV
+          fi
+
+      # Build and deployment steps follow...
+```
+
+- **Environment Detection:**
+  - Production: Triggered by main branch
+  - Staging: Triggered by staging branch
+- **Build Process:**
+  - Environment-specific configurations
+  - Optimized assets
+  - Proper cache invalidation
+
+## Environment Separation
+
+### Production Environment
+
+- **Domains:** volcode.org, www.volcode.org
+- **Features:**
+  - Search engine indexing enabled
+  - Production-optimized caching policies
+  - Full CDN capabilities
+
+### Staging Environment
+
+- **Domain:** staging.volcode.org
+- **Features:**
+  - Search engine indexing disabled via robots configuration
+  - Reduced cache TTLs for testing
+  - Same infrastructure as production for accurate testing
+
+## Security Measures
+
+- **HTTPS Enforcement:** All traffic encrypted via HTTPS
+- **Modern TLS:** TLSv1.2_2021 security policy
+- **Access Control:** S3 buckets not publicly accessible
+- **Origin Protection:** CloudFront OAI/OAC for S3 access
+- **Headers Management:** Security headers set via CloudFront response headers policy
+
+## Monitoring and Logging
+
+- **CloudFront Logs:** Detailed access logs for performance analysis
+- **CloudWatch Metrics:** Performance monitoring
+- **Error Tracking:** Client-side and infrastructure error monitoring
+
+## Future Enhancements
+
+Planned infrastructure improvements:
+
+1. **Edge Functions:** CloudFront Functions for request/response manipulation
+2. **WAF Integration:** Web Application Firewall for enhanced security
+3. **Lambda@Edge:** For dynamic content customization
+4. **Regional Failover:** Multi-region setup for high availability
+
+## Technologies Used
+
+- **AWS Services:** CloudFront, S3, ACM, Route 53 (optional)
+- **CI/CD:** GitHub Actions
+- **Frontend:** Nuxt.js, Vue.js
+- **Build Tools:** Vite, Webpack
+- **Infrastructure as Code:** Terraform 

README.md

@@ -3,60 +3,17 @@ Volcode is a high-performance, modular portfolio template for devevelopers.
 
 It improves setup efficiency and simplifies maintenance, helping developers showcase their work with minimal effort.
 
-## Infastructure
-| Layer | Tool(s) | Purpose |
-|-------|---------|---------|
-| Hosting | AWS S3 + CloudFront | Serve static assets securely |
-| Access Control | IAM + CloudFront signed URLs / HTTP Basic Auth | Restrict access to staging |
-| IaC | Terraform | Provision S3, CloudFront, IAM |
-| CI/CD | GitHub Actions | Automate deployment from staging branch |
-
-### High Level Architecture
-
-#### Diagram
-``` 
-┌───────────────────┐           ┌───────────────────────┐
-│ Namecheap DNS     │           │ AWS Certificate       │
-│ • CNAME records   │◀───┐      │ Manager (ACM public)  │
-└───────────────────┘    │      │ • Certificates for    │
-                         │      │   volcode.org &       │
-                         │      │   staging.volcode.org │
-                         │      └───────────────────────┘
-                         │
-                         │      ┌───────────────────────┐
-                         └─────▶│ Terraform‑provisioned │
-                                │ S3 + CloudFront       │
-                                │ • Private S3 buckets  │
-                                │ • 2 CloudFront distros │
-                                │   (prod + staging)    │
-                                │ • Attach ACM cert     │
-                                └───────────────────────┘
-                                         ▲
-                                         │
-                         ┌───────────────┴───────────────┐
-                         │ GitHub Actions (CI/CD)       │
-                         │ • main → prod S3/CF distro   │
-                         │ • staging → staging S3/CF    │
-                         │ • Cache invalidation         │
-                         └───────────────────────────────┘
-```
+## Infrastructure
+
+This project is powered by a modern cloud architecture designed for scalability, security, and performance. Key features:
+
+- **Global CDN:** CloudFront distribution for low-latency content delivery
+- **Secure by Default:** HTTPS-only with modern TLS policies
+- **Environment Separation:** Distinct production and staging environments
+- **Automated Deployments:** CI/CD pipeline via GitHub Actions
+- **Infrastructure as Code:** Terraform-managed AWS resources
 
-#### Objectives
-* Deploy `staging` branch to a secure S3 bucket
-* Serve it via CloudFront (for HTTPS + performance)
-* Restrict access (IAM, OAI, or signed URLs)
-* Use Terraform to manage all infra
-* Automate deployments from GitHub Actions
-
-##### Terraform
-Provision the following resources:
-| Resource | Purpose |
-|----------|---------|
-| aws_s3_bucket | Host static website for staging |
-| aws_cloudfront_distribution | Serve via CDN with HTTPS |
-| aws_iam_user + aws_iam_policy | Push permission for CI |
-| aws_s3_bucket_policy | Restrict access via OAI or signed URLs |
-| (Optional) aws_secretsmanager_secret | Store credentials for GitHub Actions |
+📑 [View complete infrastructure documentation](./INFRASTRUCTURE.md)
 
 ## Setup
 

app.vue

@@ -23,16 +23,32 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
 
 const isPageTransitionOff = ref(true);
 
 onMounted(() => {
+  // First make sure all content is visible
+  document.documentElement.classList.add('content-visible');
+
+  // Force content to be visible after a delay, regardless of transition state
   setTimeout(() => {
     isPageTransitionOff.value = false;
+    document.documentElement.classList.add('transitions-ready');
+
+    // Try to re-trigger animations after a delay
+    setTimeout(() => {
+      const elements = document.querySelectorAll('.page-transition');
+      elements.forEach((el) => {
+        el.style.opacity = '0';
+        setTimeout(() => {
+          el.style.opacity = '1';
+        }, 50);
+      });
+    }, 500);
   }, 200);
 });
 
@@ -52,10 +68,15 @@ router.afterEach(() => {
 @use '~/assets/styles/responsive.scss';
 @use '~/assets/styles/colors' as colors;
 
+html.transitions-ready .page {
+  opacity: 1 !important;
+}
+
 .page-transition {
   position: relative;
   transition: all 0.4s cubic-bezier(0.38, 0.98, 0.6, 0.9);
   transition-delay: 0.1s;
+  opacity: 1; /* Ensure content is visible by default */
 
   &--on {
     opacity: 0;

components/AppFooter.vue

@@ -101,7 +101,7 @@ onMounted(() => {
 
   span {
     color: colors.$textGray;
-    // margin-top: 1rem;
+    padding: 1rem 0;
     display: block;
   }