Exercițiu Seminar:

Portofoliu personal cu DOM Manipulation și GitHub

Obiectiv general

Studenții vor crea pagini personale dinamice folosind HTML, CSS, JavaScript și GitHub, consolidând cunoștințele de manipulare DOM și colaborare prin Git.

Structura proiectului

web-portfolio-2025/
│
├── index.html              # Pagina principală (catalog studenți)
├── main.css                # Stiluri pentru pagina principală
├── main.js                 # Script pentru pagina principală
├── students.json           # JSON master cu lista studenților
│
└── students/               # Folder pentru paginile individuale
    ├── popescu-ion/
    │   ├── index.html
    │   ├── styles.css
    │   └── script.js
    │
    ├── ionescu-maria/
    │   ├── index.html
    │   ├── styles.css
    │   └── script.js
    │
    └── ... (alte foldere studenti)

Cerințe pentru fiecare student

1. Crearea paginii personale

Fiecare student va crea un folder în students/ cu structura:

Nume folder: prenume-nume (lowercase, cu cratimă, fără diacritice)
- Exemplu: popescu-ion, ionescu-maria

2. Structura JSON personală (Hardcoded în `script.js`)

// script.js - începe cu JSON-ul personal
const studentData = {
  personalInfo: {
    firstName: "Ion",
    lastName: "Popescu",
    email: "ion.popescu@csie.ase.ro",
    phone: "+40 123 456 789",
    birthDate: "2003-05-15"
  },
  education: {
    university: "BUES",
    faculty: "CSIE - eBusiness",
    year: 1,
    group: "1234A"
  },
  skills: [
    { name: "HTML", level: 80, category: "Frontend" },
    { name: "CSS", level: 75, category: "Frontend" },
    { name: "JavaScript", level: 70, category: "Frontend" },
    { name: "Python", level: 60, category: "Backend" }
  ],
  projects: [
    {
      title: "Primul meu website",
      description: "Un website personal creat cu HTML și CSS",
      technologies: ["HTML", "CSS"],
      link: "https://github.com/username/project1"
    },
    {
      title: "Calculator JavaScript",
      description: "Calculator funcțional cu operații matematice",
      technologies: ["HTML", "CSS", "JavaScript"],
      link: "https://github.com/username/project2"
    }
  ],
  avatar: "https://ui-avatars.com/api/?name=Ion+Popescu&size=200&background=random"
};

Cerințe JSON:

Minimum 3 niveluri de nested objects (exemplu: studentData.personalInfo.firstName)
Cel puțin 2 arrays cu obiecte (exemplu: skills, projects)
Proprietatea avatar trebuie să folosească un generator automat:
- UI Avatars: https://ui-avatars.com/api/?name=Prenume+Nume&size=200
- DiceBear: https://api.dicebear.com/7.x/initials/svg?seed=PrenumeNume
- RoboHash: https://robohash.org/PrenumeNume.png?size=200x200

3. Fișierul `index.html` (template minimal)

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portofoliu - [Prenume Nume]</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Conținutul va fi generat dinamic de JavaScript -->
  <div id="app"></div>
  
  <script src="script.js"></script>
</body>
</html>

Cerință importantă: Tot conținutul paginii trebuie generat dinamic prin JavaScript!

4. Fișierul `script.js` (Manipulare DOM)

Cerințe obligatorii:

// 1. JSON-ul studentData (vezi mai sus)

// 2. Funcție pentru crearea structurii paginii
function createPersonalPage() {
  const app = document.getElementById('app');
  
  // Creează elementele DOM dinamic:
  // - Header cu avatar și nume
  // - Secțiune informații personale
  // - Secțiune educație
  // - Secțiune skills (cu bare de progres)
  // - Secțiune proiecte (carduri)
  // - Footer cu link-uri sociale
  
  // Exemplu pentru header:
  const header = document.createElement('header');
  header.className = 'hero';
  
  const avatar = document.createElement('img');
  avatar.src = studentData.avatar;
  avatar.alt = `${studentData.personalInfo.firstName} ${studentData.personalInfo.lastName}`;
  avatar.className = 'avatar';
  
  const name = document.createElement('h1');
  name.textContent = `${studentData.personalInfo.firstName} ${studentData.personalInfo.lastName}`;
  
  header.appendChild(avatar);
  header.appendChild(name);
  app.appendChild(header);
  
  // ... continuă cu restul secțiunilor
}

// 3. Apelează funcția când DOM-ul este gata
document.addEventListener('DOMContentLoaded', createPersonalPage);

Cerințe tehnice pentru script.js:

Minimum 5 tipuri diferite de elemente HTML create dinamic
Folosirea createElement, appendChild, textContent, innerHTML
Setarea className sau classList pentru stilizare
Iterare prin arrays cu forEach sau for...of
Acces la proprietăți nested din JSON (ex: studentData.personalInfo.firstName)
Cel puțin 1 event listener (exemplu: click pe proiect, hover pe skill)

5. Fișierul `styles.css`

Cerințe obligatorii:

Layout responsive (mobile-first cu media queries)
Stilizare pentru toate clasele folosite în JavaScript
Minimum 3 culori coordonate (folosiți CSS variables)
Avatar rotund cu border-radius: 50%

Exemplu de structură:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
  --bg-color: #f8f9fa;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text-color);
  background-color: var(--bg-color);
  line-height: 1.6;
}

.hero {
  text-align: center;
  padding: 3rem 1rem;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
}

.avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 5px solid white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ... restul stilurilor */

Cerințe pentru Pagina Principală (catalog)

Responsabil: Un student voluntar

1. Fișierul `students.json` (root), actualizat de studentul voluntar la fiecare pull request

{
  "course": "TIC - Web Technologies",
  "semester": "2025-2026",
  "students": [
    {
      "id": 1,
      "firstName": "Ion",
      "lastName": "Popescu",
      "folder": "popescu-ion"
    },
    {
      "id": 2,
      "firstName": "Maria",
      "lastName": "Ionescu",
      "folder": "ionescu-maria"
    }
  ]
}

2. Fișierul `index.html` (root)

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Catalog Studenți - Web Technologies 2025</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <header>
    <h1>Catalog Portofolii Studenți</h1>
    <p>Web Technologies - 2025/2026</p>
  </header>
  
  <main>
    <div id="students-grid">
      <!-- Carduri generate dinamic din students.json -->
    </div>
  </main>
  
  <footer>
    <p>&copy; BUES - eBUSINESS</p>
  </footer>
  
  <script src="main.js"></script>
</body>
</html>

3. Fișierul `main.js` (root)

async function loadStudents() {
  try {
    const response = await fetch('students.json');
    const data = await response.json();
    renderStudentCards(data.students);
  } catch (error) {
    console.error('Eroare la încărcarea studenților:', error);
  }
}

function renderStudentCards(students) {
  const grid = document.getElementById('students-grid');
  
  students.forEach(student => {
    const card = document.createElement('div');
    card.className = 'student-card';
    
    const avatar = document.createElement('img');
    avatar.src = student.avatar;
    avatar.alt = `${student.firstName} ${student.lastName}`;
    
    const name = document.createElement('h3');
    name.textContent = `${student.firstName} ${student.lastName}`;
    
    const group = document.createElement('p');
    group.textContent = `Grupa: ${student.group}`;
    
    const link = document.createElement('a');
    link.href = `students/${student.folder}/index.html`;
    link.textContent = 'Vezi portofoliu →';
    link.className = 'portfolio-link';
    
    card.appendChild(avatar);
    card.appendChild(name);
    card.appendChild(group);
    card.appendChild(link);
    
    grid.appendChild(card);
  });
}

document.addEventListener('DOMContentLoaded', loadStudents);

Workflow GitHub

Pasul 1: Inițializare Repo (Student voluntar)

# Voluntarul creează repo-ul principal
git init web-portfolio-2025
cd web-portfolio-2025

# Structură inițială
mkdir students
touch index.html main.css main.js students.json README.md

# Commit inițial
git add .
git commit -m "Initial structure"

# Push pe GitHub
git remote add origin https://github.com/username/web-portfolio-2025.git
git push -u origin main

Pasul 2: Fork și Clone (fiecare student)

Fork repo-ul principal pe contul propriu GitHub
Clone fork-ul local:

git clone https://github.com/ContulTau/web-portfolio-2025.git
cd web-portfolio-2025

Pasul 3: Creare Branch și dezvoltare (student)

# Creează branch propriu
git checkout -b add-popescu-ion

# Creează folderul personal
mkdir -p students/popescu-ion
cd students/popescu-ion

# Creează fișierele (index.html, styles.css, script.js)
# ... dezvoltă pagina personală ...

# Adaugă modificările
git add students/popescu-ion/
git commit -m "Add personal portfolio for Ion Popescu"

# Push branch
git push origin add-popescu-ion

Pasul 4: Pull Request (student)

Accesează fork-ul pe GitHub
Click pe "Compare & pull request"
Titlu: Add portfolio - Prenume Nume

Descriere:

- Adăugat pagina personală pentru [Prenume Nume]- Folder: students/popescu-ion/- JSON complet cu informații personale- Pagină generată dinamic cu DOM manipulation

Submit pull request

Pasul 5: Review și Merge (Voluntar)

Git CheatSheet

# ═══════════════════════════════════════════════════════════════════════════
# FAZA 1: SETUP INIȚIAL (o singură dată)
# ═══════════════════════════════════════════════════════════════════════════

# 1. Fork repo-ul pe GitHub (click pe butonul "Fork" în interfața web)
# URL repo original: https://github.com/user-voluntar/web-portfolio-2025

# 2. Clonează fork-ul TĂU pe calculatorul local (autentificare cu PAT)
git clone https://github.com/ContulTau/web-portfolio-2025.git
cd web-portfolio-2025

# 3. Configurează upstream (repo-ul studentului voluntar)
git remote add upstream https://github.com/user-voluntar/web-portfolio-2025.git

# 4. Verifică că ai ambele remote-uri
git remote -v
# Output:
# origin    https://github.com/ContulTau/web-portfolio-2025.git (fetch)
# origin    https://github.com/ContulTau/web-portfolio-2025.git (push)
# upstream  https://github.com/user-voluntar/web-portfolio-2025.git (fetch)
# upstream  https://github.com/user-voluntar/web-portfolio-2025.git (push)


# ═══════════════════════════════════════════════════════════════════════════
# FAZA 2: SINCRONIZARE ÎNAINTE DE LUCRU
# ═══════════════════════════════════════════════════════════════════════════

# 5. Asigură-te că ai ultima versiune de pe main
git checkout main
git pull upstream main
git push origin main  # Actualizează și fork-ul tău pe GitHub


# ═══════════════════════════════════════════════════════════════════════════
# FAZA 3: CREAREA BRANCH-ULUI ȘI ÎNCEPEREA LUCRULUI
# ═══════════════════════════════════════════════════════════════════════════

# 6. Creează branch-ul tău de lucru (folosește numele tău!)
git checkout -b add-popescu-ion

# 7. Creează folderul și fișierele tale
mkdir -p students/popescu-ion
cd students/popescu-ion

# Creează fișierele
touch index.html styles.css script.js

# 8. Lucrează la proiect (editează fișierele în editor)
# - Adaugă JSON-ul în script.js
# - Creează HTML-ul minimal în index.html
# - Stilizează în styles.css

# 9. Commit-uri pe parcurs (fă mai multe, nu unul singur!)
cd ../..  # Înapoi în root
git add students/popescu-ion/
git commit -m "Add HTML structure and initial JSON data"

# ... continui să lucrezi...

git add students/popescu-ion/
git commit -m "Add CSS styling with flexbox layout"

# ... continui să lucrezi...

git add students/popescu-ion/
git commit -m "Add JavaScript DOM manipulation"


# ═══════════════════════════════════════════════════════════════════════════
# FAZA 4: PUSH BRANCH-UL (prima dată sau după modificări)
# ═══════════════════════════════════════════════════════════════════════════

# 10. Push branch-ul pe fork-ul tău
git push origin add-popescu-ion


# ═══════════════════════════════════════════════════════════════════════════
# ⏰ ÎNTRE TIMP: Alți studenți au făcut PR-uri care au fost acceptate pe main
# ═══════════════════════════════════════════════════════════════════════════
# Studentul voluntar a merge-uit PR-urile pentru:
# - ionescu-maria
# - vasilescu-ana
# Main-ul de pe upstream acum are mai multe foldere în students/


# ═══════════════════════════════════════════════════════════════════════════
# FAZA 5: ACTUALIZARE BRANCH CU MODIFICĂRILE DIN MAIN
# ═══════════════════════════════════════════════════════════════════════════

# 11. Salvează munca curentă (dacă ai modificări nesalvate)
git status  # Verifică ce modificări ai

# Dacă ai modificări uncommitted:
git add .
git commit -m "Work in progress - before sync"

# 12. Treci pe main și actualizează-l cu upstream
git checkout main
git pull upstream main              # Descarcă modificările de la repo-ul principal
git push origin main                # (Opțional) Actualizează și fork-ul pe GitHub

# 13. Revino pe branch-ul tău și îmbină modificările din main
git checkout add-popescu-ion
git merge main                      # Aduce modificările din main în branch-ul tău

# Dacă merge-ul reușește fără conflicte, vei vedea:
# "Merge made by the 'recursive' strategy."
# sau "Already up to date." (dacă nu erau modificări noi)

# Dacă apar conflicte (rar în acest proiect!):
# - Editează manual fișierele marcate cu conflict
# - git add fisier-rezolvat
# - git commit


# ═══════════════════════════════════════════════════════════════════════════
# FAZA 6: VERIFICARE ȘI TESTARE
# ═══════════════════════════════════════════════════════════════════════════

# 14. Verifică că totul funcționează
# Deschide students/popescu-ion/index.html în browser
# Verifică consola pentru erori JavaScript
# Testează că toate elementele se creează corect

# 15. Dacă ai făcut modificări după merge, commit-ează-le
git add .
git commit -m "Fix styling after merge with main"


# ═══════════════════════════════════════════════════════════════════════════
# FAZA 7: PUSH FINAL ȘI PULL REQUEST
# ═══════════════════════════════════════════════════════════════════════════

# 16. Push branch-ul actualizat
git push origin add-popescu-ion

# 17. Creează Pull Request pe GitHub:
# - Mergi pe https://github.com/ContulTau/web-portfolio-2025
# - Vei vedea un banner galben: "add-popescu-ion had recent pushes"
# - Click pe "Compare & pull request"
# - Asigură-te că:
#   * Base repository: user-voluntar/web-portfolio-2025
#   * Base: main
#   * Head repository: ContulTau/web-portfolio-2025
#   * Compare: add-popescu-ion
# - Titlu: "Add portfolio - Ion Popescu"
# - Descriere:
#   ```
#   ## Modificări
#   - Adăugat pagina personală pentru Ion Popescu
#   - Folder: `students/popescu-ion/`
#   - JSON complet cu informații personale pe 3 niveluri
#   - Pagină generată 100% dinamic cu JavaScript
#   - Design responsive cu Flexbox
#   
#   ## Checklist
#   - [x] JSON cu minimum 3 niveluri nested
#   - [x] Minimum 5 tipuri de elemente HTML create dinamic
#   - [x] CSS responsive cu media queries
#   - [x] Event listeners funcționali
#   - [x] Cod testat în browser
#   ```
# - Click "Create pull request"


# ═══════════════════════════════════════════════════════════════════════════
# FAZA 8: DUPĂ MERGE (când voluntarul acceptă PR-ul)
# ═══════════════════════════════════════════════════════════════════════════

# 18. După ce PR-ul e acceptat, actualizează-ți repo-ul local
git checkout main
git pull upstream main
git push origin main

# 19. Șterge branch-ul local (nu mai e nevoie de el)
git branch -d add-popescu-ion

# 20. (Opțional) Șterge branch-ul de pe GitHub
git push origin --delete add-popescu-ion

PreviousExtra Resources NextThe Color Game

Last updated 2 months ago

Was this helpful?