🌐 Personal Portfolio – Francesco Benassi

HTML & CSS Project | Master AI & AI Agents for Business – Start2Impact

---

Description

Personal portfolio website built to showcase my profile, skills, and projects developed during the Master's program. The site is bilingual (EN/IT) with dynamic language switching via JavaScript.

🔗 Live site: francodesc.github.io
📁 Repository: github.com/FranCodesc/FranCodesc.github.io

---

Technologies

• HTML5 – semantic page structure
• CSS3 + Sass – styling and variables via .scss compiled file
• Milligram – minimal CSS framework for the base layout
• Font Awesome 6.5 – social icons in the contact page
• EmailJS – contact form email delivery without a backend
• JavaScript – EN/IT language switching logic

---

File Structure

personal-portfolio/
├── index.html
├── projects.html
├── cv.html
├── contact.html
└── assets/
    ├── scss/
    │   ├── style.scss
    │   └── style.css
    ├── js/
    │   └── lang.js
    ├── img/
    │   └── sfondo.jpg
    └── favicon/
        └── favicon.ico

---

Pages

• Home – bio and personal introduction
• My Projects – cards linked to GitHub projects, grouped by category
• Curriculum Vitae – experience, education, skills, certifications and languages in HTML format
• Contact – social icons (GitHub, LinkedIn) and contact form connected to EmailJS

---

Design Decisions

• Fixed sidebar layout using display: flex across the full viewport: navigation stays always visible without needing position: sticky
• On mobile (max-width: 768px) the layout switches to flex-direction: column and scrolling happens only inside the main area via overflow-y: auto, keeping the nav pinned at the top
• Sass used for global color variables ($text-color, $bg-color, $hover-color) and section comments for readability
• Open Graph tags on every page for correct social media previews
• Language toggle persisted via localStorage with an EN/IT dictionary in lang.js
• Active nav item shown with a • bullet via CSS (font-size: 0 + ::before), no JavaScript needed
• EmailJS integrated to receive messages from the form without exposing the email address or requiring a server

---

Built by Francesco Benassi