Skip to content

Final Project Submission - rojanjose@mulearn #141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
codiing-5 wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Final Project Submission - rojanjose@mulearn #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3fd015e
Added my self introduction README
codiing-5 Mar 26, 2026
2c6bdc2
Completed Task-2 Docker
codiing-5 Mar 30, 2026
db7f8c4
Create index.html for CI/CD website
codiing-5 Apr 1, 2026
61becac
Add CI/CD workflow
codiing-5 Apr 1, 2026
5b2bc94
Add CI/CD assignment submission details
codiing-5 Apr 2, 2026
22c0100
Add nginx deployment.yaml for Task-4
codiing-5 Apr 4, 2026
e9006ab
Add nginx service.yaml for Task-4
codiing-5 Apr 4, 2026
d5182cc
Add initial HTML structure for scalable web app
codiing-5 Apr 8, 2026
2e00a83
Add Dockerfile for Nginx with index.html
codiing-5 Apr 8, 2026
223311f
Add deployment configuration for scalable web app
codiing-5 Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions .github/workflows/deploy.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
name: Deploy Website

on:
push:
branches:
- main

jobs:
deploy:
runs-on: ubuntu-latest

steps:
- name: Checkout Code
uses: actions/checkout@v3

- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./Task-1/rojanjose@mulearn/Task-3
3 changes: 3 additions & 0 deletions Task-1/rojanjose@mulearn/FinalProject/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
FROM nginx:alpine

COPY index.html /usr/share/nginx/html/index.html
23 changes: 23 additions & 0 deletions Task-1/rojanjose@mulearn/FinalProject/deployment.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
apiVersion: apps/v1
kind: Deployment
metadata:
name: scalable-webapp
spec:
replicas: 3
selector:
matchLabels:
app: scalable-webapp
template:
metadata:
labels:
app: scalable-webapp
spec:
containers:
- name: scalable-webapp
image: mywebapp
imagePullPolicy: Never
env:
- name: STUDENT_NAME
value: "Rojan Jose"
ports:
- containerPort: 80
340 changes: 340 additions & 0 deletions Task-1/rojanjose@mulearn/FinalProject/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,340 @@
<!DOCTYPE html>
<html>
<head>
<title>My First Scalable Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
text-align: center;
background: #0a0f0a;
color: #e2e8f0;
padding: 8vh 5vw;
min-height: 100vh;
overflow-x: hidden;
position: relative;
line-height: 1.6;
}

/* Subtle grid background - scales responsively */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(34, 197, 94, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(34, 197, 94, 0.08) 1px, transparent 1px);
background-size: clamp(30px, 8vw, 60px) clamp(30px, 8vw, 60px);
pointer-events: none;
z-index: -2;
}

/* Modern Tech Logo - Fully Responsive */
.tech-logo {
width: clamp(60px, 15vw, 90px);
height: clamp(60px, 15vw, 90px);
margin: 0 auto clamp(20px, 5vh, 40px);
position: relative;
}

.logo-hex {
width: clamp(35px, 8vw, 60px);
height: clamp(35px, 8vw, 60px);
margin: clamp(8px, 2vw, 15px) auto;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background: linear-gradient(135deg, #22c55e, #16a34a);
position: relative;
animation: hexPulse 3s ease-in-out infinite;
box-shadow: 0 0 clamp(20px, 5vw, 30px) rgba(34, 197, 94, 0.4);
}

.logo-hex::before,
.logo-hex::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: clamp(12px, 3vw, 30px);
height: clamp(12px, 3vw, 30px);
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: orbit 4s linear infinite;
}

.logo-hex::after {
width: clamp(8px, 2vw, 20px);
height: clamp(8px, 2vw, 20px);
background: rgba(34, 197, 94, 0.6);
animation-duration: 2.5s;
animation-direction: reverse;
}

.container {
max-width: 90vw;
max-width: min(90vw, 650px);
margin: 0 auto;
position: relative;
}

.box {
background: rgba(15, 25, 15, 0.9);
backdrop-filter: blur(25px);
padding: clamp(40px, 12vh, 70px) clamp(30px, 8vw, 50px);
border-radius: clamp(20px, 5vw, 30px);
box-shadow:
0 clamp(20px, 6vh, 30px) clamp(40px, 10vw, 60px) rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(34, 197, 94, 0.2),
0 clamp(15px, 4vh, 20px) clamp(30px, 6vw, 40px) rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.25);
position: relative;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
}

/* Wave border animation */
.box::before {
content: '';
position: absolute;
inset: 0;
padding: 2px;
background: linear-gradient(45deg, transparent, rgba(34, 197, 94, 0.3), transparent);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: waveBorder 3s linear infinite;
}

@keyframes waveBorder {
0% { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); }
25% { clip-path: polygon(0 0, 30% 0, 50% 30%, 70% 0, 100% 0, 100% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 50%, 70% 70%, 100% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 50% 70%, 0 100%); }
100% { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); }
}

.box:hover {
transform: translateY(-15px) scale(1.02);
box-shadow:
0 clamp(25px, 8vh, 40px) clamp(50px, 12vw, 80px) rgba(0, 0, 0, 0.8),
0 0 0 1px rgba(34, 197, 94, 0.4),
0 0 clamp(40px, 8vw, 60px) rgba(34, 197, 94, 0.3);
border-color: rgba(34, 197, 94, 0.6);
}

h1 {
font-size: clamp(2rem, 6vw, 3rem);
font-weight: 800;
background: linear-gradient(135deg, #22c55e 0%, #4ade80 50%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: clamp(15px, 4vh, 25px);
letter-spacing: -0.03em;
position: relative;
}

h1::before {
content: '';
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 70%);
z-index: -1;
animation: textFloat 6s ease-in-out infinite;
}

@keyframes textFloat {
0%, 100% { transform: translateY(0px) scale(1); }
50% { transform: translateY(-8px) scale(1.02); }
}

p {
font-size: clamp(1.1rem, 4vw, 1.35rem);
line-height: 1.8;
margin-bottom: clamp(20px, 5vh, 30px);
opacity: 0.9;
font-weight: 400;
letter-spacing: 0.3px;
}

p:last-child {
font-weight: 700;
color: #22c55e;
font-size: clamp(1.2rem, 4.5vw, 1.5rem);
position: relative;
text-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

p:last-child::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: clamp(40px, 12vw, 60px);
height: 3px;
background: linear-gradient(90deg, transparent, #22c55e, #ffffff);
border-radius: 2px;
animation: underlineGlow 2s ease-in-out infinite alternate;
}

@keyframes underlineGlow {
from { box-shadow: 0 0 5px rgba(34, 197, 94, 0.5); }
to { box-shadow: 0 0 20px rgba(34, 197, 94, 0.8), 0 0 30px rgba(34, 197, 94, 0.4); }
}

/* Responsive floaters */
.floaters {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}

.floater {
position: absolute;
opacity: 0.1;
animation: drift 25s infinite linear;
}

.floater.hex {
width: clamp(10px, 2vw, 20px);
height: clamp(10px, 2vw, 20px);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background: #22c55e;
}

.floater.circle {
width: clamp(8px, 1.5vw, 15px);
height: clamp(8px, 1.5vw, 15px);
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

@keyframes drift {
0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
10% { opacity: 0.1; }
90% { opacity: 0.1; }
100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

/* Enhanced responsive breakpoints */
@media (max-width: 480px) {
body { padding: 6vh 4vw; }
.box {
padding: clamp(30px, 10vh, 50px) clamp(20px, 6vw, 30px);
margin: 0 clamp(10px, 3vw, 15px);
}
}

@media (max-width: 320px) {
h1 { letter-spacing: -0.02em; }
p { letter-spacing: 0.1px; }
}
</style>
</head>
<body>
<div class="floaters" id="floaters"></div>

<div class="container">
<div class="tech-logo">
<div class="logo-hex"></div>
</div>

<div class="box">
<h1>Hello from Rojan Jose</h1>
<p>This is my scalable Docker + Kubernetes web app.</p>
<p>Final Project Completed Successfully</p>
</div>
</div>

<script>
// Responsive floater count based on screen size
function createFloaters() {
const floatersContainer = document.getElementById('floaters');
const screenWidth = window.innerWidth;
const floaterCount = screenWidth > 768 ? 30 : screenWidth > 480 ? 20 : 12;

for (let i = 0; i < floaterCount; i++) {
const floater = document.createElement('div');
floater.className = `floater ${Math.random() > 0.5 ? 'hex' : 'circle'}`;
floater.style.left = Math.random() * 100 + '%';
floater.style.animationDelay = Math.random() * 25 + 's';
floater.style.animationDuration = (Math.random() * 20 + 20) + 's';
floatersContainer.appendChild(floater);
}
}

// Staggered responsive entrance
window.addEventListener('load', () => {
const elements = [document.querySelector('.tech-logo'), document.querySelector('.box')];

elements.forEach((el, index) => {
el.style.opacity = '0';
el.style.transform = 'translateY(50px) scale(0.9)';
setTimeout(() => {
el.style.transition = 'all 1s cubic-bezier(0.34, 1.56, 0.64, 1)';
el.style.opacity = '1';
el.style.transform = 'translateY(0) scale(1)';
}, index * 300); // Slightly slower on mobile
});

createFloaters();
});

// Handle orientation change and resize
window.addEventListener('resize', () => {
document.querySelector('.floaters').innerHTML = '';
createFloaters();
});

// Dynamic cursor glow trail (touch-friendly)
document.addEventListener('mousemove', (e) => {
if (window.innerWidth > 768) {
// Mouse trail only on desktop
let mouseTrail = [];
mouseTrail.push({x: e.clientX, y: e.clientY});
if (mouseTrail.length > 5) mouseTrail.shift();

mouseTrail.forEach((pos, i) => {
const trail = document.elementFromPoint(pos.x, pos.y);
if (trail) {
trail.style.filter = `brightness(1.1) drop-shadow(0 0 ${10 - i * 2}px rgba(34, 197, 94, 0.3))`;
setTimeout(() => trail.style.filter = '', 200);
}
});
}
});

// Breathing background grid (performance optimized)
let breathingPhase = 0;
function breatheBackground() {
breathingPhase += 0.01;
document.body.style.backgroundColor =
`hsl(120, 30%, ${12 + Math.sin(breathingPhase) * 2}%)`;
requestAnimationFrame(breatheBackground);
}
breatheBackground();
</script>
</head>
</body>
</html>
Loading