Online Βιογραφικό: Η Δημιουργία ενός Ψηφιακού CV

 Το Αρχείο HTML:

Σε αυτό το σημείο παραθέτω τον σύνδεσμο με το προσχέδιο του βιογραφικού στο προσωπικό μου αποθετήριο στο GitHub, που όπως θα δείτε παρακάτω μπορείτε να επεξεργαστείτε με την βοήθεια μου. Σε πρώτη φάση θα ήταν θετικό να πειραματιστείτε με το κείμενο που περιέχεται στις HTML ταμπέλες (tags), και σε δεύτερο χρόνο να τροποποιήσετε κάποιο άλλο συστατικό του αρχείου.

Αφού κατεβάσετε ή αντιγράψετε το αρχείο μπορείτε να το ανοίξετε με το Visual Studio Code.

Ας δούμε τον HTML κώδικα και εξηγήσουμε τη λειτουργία κάθε τμήματος βήμα προς βήμα.

1. Header (Επικεφαλίδα)

Το πρώτο τμήμα του κώδικα περιλαμβάνει τα στοιχεία του ονόματος και του επαγγελματικού τίτλου. Η ετικέτα <h1> χρησιμοποιείται για την κύρια επικεφαλίδα (το όνομα), ενώ η <h5> είναι μια μικρότερη επικεφαλίδα για τον επαγγελματικό τίτλο. Αυτές οι ετικέτες βοηθούν στη διάρθρωση του περιεχομένου και εξασφαλίζουν καλύτερη αναγνωσιμότητα και προσβασιμότητα.

2. Σχετικά με Εμένα

Αυτό το τμήμα περιλαμβάνει μια ενότητα με τίτλο “Σχετικά με Εμένα”. Χρησιμοποιείται η ετικέτα <div> για να δημιουργηθεί ένα πλαίσιο γύρω από το κείμενο, το οποίο έχει στυλ μέσω της κλάσης content-box. Μέσα σε αυτό το πλαίσιο έχουμε μια επικεφαλίδα <h3> και μια παράγραφο <p>, όπου περιγράφεται η προσωπική παρουσίαση. Η κλάση content-box προσθέτει στιλ για να ξεχωρίζει η ενότητα με ένα λευκό φόντο και κάποια περιθώρια γύρω της.

3. Ακαδημαϊκή Εμπειρία

Αυτή η ενότητα περιλαμβάνει την ακαδημαϊκή εμπειρία του ατόμου. Οι ετικέτες <ul> και <li> χρησιμοποιούνται για να δημιουργήσουν μια λίστα με τις εκπαιδευτικές βαθμίδες, και κάθε στοιχείο της λίστας έχει μια επικεφαλίδα <h5> και μια παράγραφο <p> που εξηγεί την εμπειρία. Η χρήση του <strong> μέσα στις επικεφαλίδες δίνει έμφαση στους τίτλους των προγραμμάτων σπουδών.

4. Επαγγελματική Εμπειρία

Αυτό το τμήμα περιλαμβάνει τις επαγγελματικές εμπειρίες, επίσης σε μορφή λίστας. Όπως και στην ακαδημαϊκή εμπειρία, χρησιμοποιούνται οι ετικέτες <ul> και <li> για την εμφάνιση των επαγγελματικών σταδίων, με τη χρήση επικεφαλίδων <h5> και περιγραφών στις παραγράφους <p>.

5. Στοιχεία Επικοινωνίας

Σε αυτή την ενότητα εμφανίζονται τα στοιχεία επικοινωνίας του ατόμου. Χρησιμοποιούνται εικονίδια από το FontAwesome (<i class="fas fa-envelope icon"></i>) για να βελτιώσουν την αναγνωσιμότητα και την αισθητική του περιεχομένου. Τα εικονίδια συνοδεύονται από συνδέσμους και κείμενο που αναφέρει τη διεύθυνση ηλεκτρονικού ταχυδρομείου, τον αριθμό τηλεφώνου, τη διεύθυνση και το προφίλ στο LinkedIn.

6. Δεξιότητες & Επιτεύγματα

Εδώ, αναφέρονται οι δεξιότητες και τα επιτεύγματα του ατόμου, τα οποία οργανώνονται σε μια απλή λίστα.

7. Τελικό Αποτέλεσμα & Δημοσίευση

Αφού αποθηκεύσετε το αρχείο σας, μπορείτε να το ανοίξετε τοπικά στον υπολογιστή σας, καθώς είναι σε μορφή HTML. Το αρχείο θα εμφανίζει την ιστοσελίδα-βιογραφικό σας κατευθείαν στον browser.

Για να κάνετε την ιστοσελίδα σας διαθέσιμη παγκοσμίως, θα πρέπει να τη φιλοξενήσετε σε μια υπηρεσία που προσφέρει web hosting. Στην περίπτωσή μας, θα χρησιμοποιήσουμε το GitHub, το οποίο παρέχει δωρεάν και εύκολη φιλοξενία ιστοσελίδων.

Ακολουθήστε τα παρακάτω βήματα για να ανεβάσετε την ιστοσελίδα σας

Δημιουργία Αποθετηρίου στο GitHub

• Συνδεθείτε στον λογαριασμό σας στο GitHub.
• Κάντε κλικ στο κουμπί New Repository (Νέο Αποθετήριο).
• Δώστε ένα όνομα στο αποθετήριο σας (π.χ. CV-website) και επιλέξτε Public (Δημόσιο).
• Πατήστε Create Repository (Δημιουργία Αποθετηρίου).

Ανέβασμα Αρχείων

• Μεταβείτε στη σελίδα του αποθετηρίου και κάντε κλικ στο Add File > Upload Files.
• Μεταφέρετε το HTML αρχείο σας (drag and drop) ή επιλέξτε το από τον υπολογιστή σας.
• Κάντε κλικ στο Commit Changes για να αποθηκεύσετε το αρχείο.

Ενεργοποίηση του GitHub Pages

• Μεταβείτε στις Settings του αποθετηρίου σας.
• Στο αριστερό μενού, επιλέξτε Pages.
• Στην ενότητα Branch, επιλέξτε main (ή το branch όπου ανεβάσατε το αρχείο σας) και τον φάκελο root.
• Πατήστε Save.

Πρόσβαση στην Ιστοσελίδα

• Μετά από μισό λεπτό περίπου μπορείτε να κάνετε ανανέωση στη σελίδα που βρίσκεστε και στην κορυφή θα βρίσκεται ένας σύνδεσμος. Η σελίδα σας θα είναι διαθέσιμη στη διεύθυνση https://<ΟΝΟΜΑ ΧΡΗΣΤΗ>.github.io/<ΟΝΟΜΑ ΑΠΟΘΕΤΗΡΙΟΥ>.
• Μπορείτε να ανοίξετε τη διεύθυνση αυτή σε έναν περιηγητή για να δείτε τη σελίδα σας, που πλέον έχει δημοσιευτεί στον ιστό!