Apospan Portfolio Project

Ένα σύγχρονο, δίγλωσσο Personal Portfolio σχεδιασμένο με γνώμονα το UI/UX Excellence Το project αναπτύχθηκε ξεκινώντας από λευκό καμβά στο Figma και κατέληξε σε ένα πλήρως website.

---

Design System & UI/UX

• Theme: Dark Mode aesthetic with a "Modern Tech" look.
• Color Palette: Deep Navy background (#050719) with neon gradients (#AF40FF to #00DDEB) for interactive elements.
• Typography: Clean, sans-serif fonts for maximum readability in digital environments.

---

Project Workflow

1. Design Phase (UI/UX)

Figma Design: Visual design and design system (layout, colors, typography) created for full UI control.

• Prototyping: Flow creation to ensure seamless User Experience (UX) across desktop and mobile.

2. Development & Implementation

-- Local-to-Live Workflow: Developed in a local environment using Local WP for secure testing before deployment.

• Breakdance Builder: Implemented via Breakdance for top performance and clean HTML markup.
• Advanced Localization: TranslatePress integration for full bilingual support (GR/EN) and dynamic PDF CV switching.
• Custom Styling: Custom CSS for Fluent Forms and buttons styling, achieving 100% fidelity to the Figma design.

3. Technical Infrastructure (Backend UX)

• Email System: Professional email configuration via FluentSMTP.
• Domain & DNS Security: Hardening via QUIC.cloud DNS with proper record settings:
  • MX Records (Email Routing).
  • SPF, DKIM & DMARC (Email Authentication & Deliverability).

---

🇬🇷 Ελληνική Έκδοση

Κάντε κλικ για να δείτε την περιγραφή στα Ελληνικά

Apospan Portfolio Project

Ένα σύγχρονο, δίγλωσσο Personal Portfolio σχεδιασμένο με γνώμονα το UI/UX Excellence Το project αναπτύχθηκε ξεκινώντας από λευκό καμβά στο Figma και κατέληξε σε ένα πλήρως website.

---

Design System & UI/UX

• Theme: Dark Mode αισθητική με έμφαση στο "Modern Tech" look.
• Color Palette: Deep Navy background (#050719) με neon gradients (#AF40FF έως #00DDEB) για τα διαδραστικά στοιχεία.
• Typography: Καθαρή, sans-serif γραμματοσειρά για μέγιστη αναγνωσιμότητα σε digital περιβάλλον.

---

Project Workflow

1. Design Phase (UI/UX)

• Figma Design: Σχεδιασμός ολόκληρου του οπτικού μέρους και του design system (layout, χρώματα, τυπογραφία) για πλήρη έλεγχο του UI.
• Prototyping: Δημιουργία flows για τη διασφάλιση άψογης εμπειρίας χρήστη (UX) σε desktop και mobile.

2. Development & Implementation

• Local-to-Live Workflow: Ανάπτυξη σε τοπικό περιβάλλον με το Local WP για ασφαλή δοκιμή πριν το deployment.
• Breakdance Builder: Υλοποίηση με χρήση του Breakdance για κορυφαία ταχύτητα (Performance) και καθαρό HTML markup.
• Advanced Localization: Ενσωμάτωση του TranslatePress για πλήρη δίγλωσση υποστήριξη (GR/EN) και δυναμική εναλλαγή των PDF CV links.
• Custom Styling: Custom CSS για το styling των Fluent Forms και των buttons, πετυχαίνοντας 100% ταύτιση με το Figma design.

3. Technical Infrastructure (Backend UX)

• Email System: Παραμετροποίηση επαγγελματικού συστήματος αλληλογραφίας μέσω FluentSMTP.
• Domain & DNS Security: Θωράκιση μέσω QUIC.cloud DNS με ορθή ρύθμιση εγγραφών:
  • MX Records (Email Routing).
  • SPF, DKIM & DMARC (Email Authentication & Deliverability).

Project Preview

More Screenshots

Click to view the full gallery / Κάντε κλικ για την πλήρη συλλογή

Tech Stack

• Design: Figma
• Development: WordPress, Breakdance Builder
• Local Dev: Local WP
• Hosting/CDN: Hostinger, QUIC.cloud
• Plugins: TranslatePress, FluentSMTP, Fluent Forms, Breakdance, LiteSpeed ​​Cache , WPvivid Backup

Links

• Live Website: [apospan.com]

• LinkedIn: [Panagiotis Apostolelis]

• Figma: [Παναγιώτης Αποστολέλης]