📋 STEP · BY · STEP EXPLANATION

of the interactive resume code – for your class presentation

🔰 1. HTML skeleton (the foundation)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Jeanefer resume</title>
  <link rel="stylesheet" ...>
</head>
<body>
  <div class="resume-card">
    <div class="header-section">…</div>
    <div class="light-section">…</div>
  </div>
</body>
</html>

STEP 1 First we build the structure.
• <!DOCTYPE html> tells browser it's HTML5.
• <head> contains metadata, title, and links to styles.
• <body> holds everything visible.
• resume-card is the main container, split into dark header and light bottom.
🎨 2. CSS – background, glass card, centering

body {
background: linear-gradient(145deg, #cbdbe9, #eaf1fa);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.resume-card {
background: rgba(255,255,255,0.9);
backdrop-filter: blur(14px);
border-radius: 42px;
box-shadow: 0 30px 50px -20px ...;
}

STEP 2 Visual foundation.
• Gradient background gives soft blue impression.
• flex + min-height: 100vh centers card perfectly.
• backdrop-filter: blur() creates the trendy glassmorphism effect.
• Big border-radius and shadow make it pop.
📸 3. Perfect circular photo (guaranteed round)

.circle-upload-label {
width: 80px; height: 80px;
border-radius: 50%;
overflow: hidden;
border: 4px solid white;
}
#profile-circle-img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 50%;
}

STEP 3 How circle is guaranteed:
• Both container (label) and image have border-radius:50%.
• overflow: hidden hides any rectangle edges.
• object-fit: cover fills the circle without stretching.
• White border adds style. Result: any uploaded image becomes a perfect circle.
📐 4. Layout with CSS Grid (two & three columns)

.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

STEP 4 Organising information
• .two-col puts objective + education side by side.
• .grid-3 places skills, certifications, awards in three columns.
• 1fr means each column takes equal space.
• gap adds breathing room.

📱 On mobile, media queries change grid to 1 column – fully responsive.
📱 5. Responsive (mobile friendly) with @media

@media (max-width: 650px) {
.two-col { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 450px) {
.grid-3 { grid-template-columns: 1fr; }
}

STEP 5 Adjusts to any screen
• When width ≤ 650px, two‑col becomes one column.
• Three‑col first becomes two, then one on very small screens.
• Ensures readability on phones & tablets.
💾 6. JavaScript – auto‑save photo (localStorage)

const STORAGE_KEY = 'jeaneferProfilePicture';
const fileInput = document.getElementById('upload-photo');
const profileImg = document.getElementById('profile-circle-img');

// load saved photo on refresh
function loadSavedPhoto() {
const saved = localStorage.getItem(STORAGE_KEY);
if (saved) profileImg.src = saved;
}
loadSavedPhoto();

STEP 6 Permanent storage
• localStorage keeps data even after browser closes.
• When page loads, we check if a photo was saved before.
• If yes, we set it as image source.
⬆️ 7. Handling new photo upload (FileReader)

fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(ev) {
const dataUrl = ev.target.result;
profileImg.src = dataUrl;
localStorage.setItem(STORAGE_KEY, dataUrl);
};
reader.readAsDataURL(file);
});

STEP 7 Upload → convert → save
• When user picks a file, FileReader reads it.
• Converts image to data URL (long text).
• Updates the <img> and automatically saves to localStorage.
• After refresh, it's still there!

🔁 Try it: upload a photo, refresh page – photo persists. Only a new upload changes it.
🧩 8. Your personal content (name, education, etc.)

<div class="name">Jeanefer G. Flores</div>
<div class="contact-item">📍 Barangay 24‑A, Gingoog City</div>
<div class="contact-item">📧 floresjeanefer6@gmail.com</div>
<div class="obj-text">Pursuing challenging office position...</div>
<div class="edu-item"><strong>BS Office Administration</strong> ...</div>
<span class="skill-chip">communication</span>

STEP 8 Your unique information
• Name, address, email, phone.
• Objective paragraph (customisable).
• Education history with dates.
• Skills as chips, certifications & awards.
🌈 9. Color scheme & hover effects

/* dark header */ background: #13212e;
/* gold highlights */ color: #ffdcaa;
/* skill chip */ background: #e9f0f8;

.circle-upload-label:hover { transform: scale(1.05); }
.contact-item:hover { transform: translateX(4px); }
.skill-chip:hover { background: white; }

STEP 9 Visual polish
• Dark blue header = professional, trustworthy.
• Gold accents highlight education and titles.
• Hover effects make interface feel interactive and alive.
• Smooth transitions add modern touch.

🎤 STEP‑BY‑STEP PRESENTATION SCRIPT

STEP 1 "First I created the HTML skeleton – the basic structure with head and body."

STEP 2 "Then I added CSS to center the card and give it a glassmorphism effect."

STEP 3 "The circular photo: I used border-radius 50% and overflow hidden – guaranteed round."

STEP 4 "With CSS Grid I made two and three columns, so everything fits on one page."

STEP 5 "Media queries make it responsive – test on mobile."

STEP 6 "Now JavaScript: I use localStorage to save the photo even after refresh."

STEP 7 "When you upload a new photo, FileReader converts it and updates storage."

STEP 8 "I inserted my personal info: name, education, skills, awards."

STEP 9 "Finally, colors and hover effects give it a polished, interactive feel."

✅ what this project demonstrates

HTML5 – semantic layout, forms, metadata
CSS3 – grid, gradients, glassmorphism, animations, responsive
JavaScript – FileReader, localStorage, event handling
UX design – interactive hover, auto‑save, one‑page layout

✨ use this step‑by‑step guide to explain each piece in front of teacher & classmates ✨