================================================================================
                      DEVORA — MODERN DEVELOPER PORTFOLIO
                              Documentation v1.0
================================================================================

Author        : Devora
License       : Free to download and use (MIT-style)
Version       : 1.0.0
Last Updated  : August 2026
Website       : [YOUR WEBSITE URL]

================================================================================
                              TABLE OF CONTENTS
================================================================================

  1.  Overview
  2.  Features
  3.  Tech Stack
  4.  File Structure
  5.  Quick Start Guide
  6.  Customization Guide
      6.1  Changing Colors
      6.2  Changing Fonts
      6.3  Changing Content
  7.  Section-by-Section Edit Guide
  8.  Alternative Color Palettes
  9.  Browser Compatibility
  10. Performance Notes
  11. Troubleshooting
  12. Credits & Attribution
  13. License

================================================================================
1. OVERVIEW
================================================================================

Devora is a production-ready, multi-section personal portfolio website designed
for front-end developers, UI/UX designers, and creative professionals who want
a handcrafted, editorial feel — not another generic AI-generated template.

Built with a warm, organic aesthetic, Devora avoids the typical "tech portfolio"
clichés (glassmorphism, neon gradients, cyberpunk vibes) in favor of a refined,
magazine-inspired design that feels intentional and human.

It is completely free to download, modify, and use for personal or commercial
projects.

================================================================================
2. FEATURES
================================================================================

  - 12 comprehensive sections (Hero, About, Experience, Skills, Services,
    Portfolio, Testimonials, YouTube, Journal, Contact, Footer)
  - Fully responsive (mobile, tablet, desktop)
  - Smooth scroll animations via AOS (Animate On Scroll)
  - Portfolio filtering with Isotope.js (shuffle/masonry effect)
  - Working contact form with validation and feedback
  - Newsletter signup form
  - Dynamic copyright year
  - Sticky header with scroll effect
  - Active nav link highlighting on scroll
  - Back-to-top button
  - Clean, semantic HTML5
  - CSS variables for easy theming
  - No build step required — works out of the box

================================================================================
3. TECH STACK
================================================================================

  Frontend:
    - HTML5
    - CSS3 (Custom CSS with CSS Variables)
    - Vanilla JavaScript (ES6+)

  Libraries (loaded via CDN):
    - Bootstrap 5.3.3        — Responsive grid system
    - Isotope.js 3.0.6       — Portfolio filtering/shuffle
    - AOS 2.3.4              — Scroll reveal animations
    - FontAwesome 6.5.1      — Icon library

  Fonts (via Google Fonts):
    - Fraunces               — Headings (editorial serif)
    - Inter                  — Body text (clean sans-serif)

================================================================================
4. FILE STRUCTURE
================================================================================

  devora-portfolio/
  │
  ├── index.html         Main HTML file (all sections)
  ├── style.css          All custom styles + CSS variables
  ├── script.js          All custom JavaScript
  ├── README.txt         This documentation file
  └── assets/            (optional folder for your own images)
      ├── profile.jpg
      ├── projects/
      └── testimonials/

================================================================================
5. QUICK START GUIDE
================================================================================

  Step 1: Download the files
          Download index.html, style.css, and script.js into the same folder.

  Step 2: Open in browser
          Double-click index.html. The site runs entirely from CDN, so no
          installation or build step is needed.

  Step 3: Edit the content
          Open index.html in any code editor (VS Code, Sublime, Notepad++, etc.)
          Search for "<!-- REPLACE" to find every spot you should personalize.

  Step 4: Customize the theme (optional)
          Open style.css and edit the :root variables at the top to change
          colors, fonts, and shadows.

  Step 5: Deploy
          Upload the folder to any static host:
          - Netlify (drag & drop)
          - Vercel
          - GitHub Pages
          - Any traditional web host

================================================================================
6. CUSTOMIZATION GUIDE
================================================================================

--------------------------------------------------------------------------------
6.1 CHANGING COLORS
--------------------------------------------------------------------------------

All colors are defined as CSS variables in style.css inside the :root block.
Change any value there and it will update across the entire site instantly.

Default palette (Terracotta):

  :root {
    --color-bg:            #FDFBF7;    /* Main background (warm cream) */
    --color-bg-alt:        #F8F6F0;    /* Alternate section background */
    --color-bg-warm:       #F0EBE3;    /* Card hover / warm accent bg */
    --color-text-primary:  #1A1A1A;    /* Main text (soft black) */
    --color-text-secondary:#5C5C5C;    /* Secondary text */
    --color-text-muted:    #8A8A8A;    /* Muted/label text */
    --color-accent:        #C85A3D;    /* Primary accent (terracotta) */
    --color-accent-hover:  #A84830;    /* Accent hover state */
    --color-accent-soft:   rgba(200, 90, 61, 0.08);
    --color-border:        rgba(26, 26, 26, 0.08);
    --color-border-strong: rgba(26, 26, 26, 0.15);
  }

To change the accent color, update these three variables:
  --color-accent
  --color-accent-hover
  --color-accent-soft

--------------------------------------------------------------------------------
6.2 CHANGING FONTS
--------------------------------------------------------------------------------

Fonts are set in :root as well:

  --font-heading: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', 'Work Sans', -apple-system, sans-serif;

To use different fonts:
  1. Update the Google Fonts link in <head> of index.html
  2. Update the --font-heading and --font-body variables in style.css

Recommended editorial pairings:
  - Fraunces + Inter         (default — warm, modern)
  - Playfair Display + Work Sans  (classic, elegant)
  - DM Serif Display + Inter     (contemporary editorial)
  - Cormorant Garamond + Manrope (luxury, refined)

--------------------------------------------------------------------------------
6.3 CHANGING CONTENT
--------------------------------------------------------------------------------

Every piece of content you need to replace is marked with an HTML comment:

  <!-- REPLACE WITH YOUR ACTUAL NAME -->
  <!-- REPLACE WITH YOUR ACTUAL BIO -->
  <!-- REPLACE WITH YOUR ACTUAL EMAIL -->
  <!-- REPLACE WITH YOUR ACTUAL PHONE -->
  <!-- REPLACE WITH YOUR ACTUAL LOCATION -->
  <!-- REPLACE WITH YOUR ACTUAL PROFILE IMAGE -->
  <!-- REPLACE WITH YOUR ACTUAL EXPERIENCE -->
  <!-- REPLACE WITH YOUR ACTUAL EDUCATION -->
  <!-- REPLACE PROJECTS WITH YOUR OWN -->
  <!-- REPLACE TESTIMONIALS WITH YOUR OWN -->
  <!-- REPLACE VIDEO THUMBNAILS WITH YOUR OWN -->
  <!-- REPLACE ARTICLES WITH YOUR OWN -->
  <!-- REPLACE SERVICE DESCRIPTIONS WITH YOUR OWN -->
  <!-- REPLACE WITH YOUR ACTUAL CHANNEL INFO -->

Simply search (Ctrl+F / Cmd+F) for "REPLACE" in index.html to jump between them.

================================================================================
7. SECTION-BY-SECTION EDIT GUIDE
================================================================================

SECTION 1 — HEADER / NAVBAR
  - Change the brand text: "Elena.Marchetti" → your name
  - Update navigation links if you add/remove sections
  - Link the "Download CV" button to your actual CV file

SECTION 2 — HERO
  - Replace greeting, name, subtitle, description
  - Replace profile image URL (recommended: 600x750px, portrait)
  - Update social media links (GitHub, LinkedIn, YouTube, Dribbble)

SECTION 3 — ABOUT
  - Rewrite the 3-paragraph bio in first person
  - Update the "Quick Facts" list (location, experience, focus, etc.)

SECTION 4 — EXPERIENCE & EDUCATION
  - Replace each timeline item with your own jobs/degrees
  - Keep 3-4 experience items and 2-3 education items for best balance
  - Include measurable achievements (numbers, percentages, outcomes)

SECTION 5 — SKILLS
  - Edit the skill tags in each category
  - Add or remove categories as needed (Frontend, Backend, Design, Tools)

SECTION 6 — SERVICES
  - Update the 4 service cards with what you actually offer
  - Icons are from FontAwesome — swap the class (e.g., fa-code, fa-pen-ruler)

SECTION 7 — PORTFOLIO
  - Each .portfolio-item has a category class: cat-web, cat-mobile, cat-uiux,
    cat-opensource — use these for filtering
  - Replace images (recommended: 600x400px, landscape)
  - Update titles, descriptions, tech tags, and links

SECTION 8 — TESTIMONIALS
  - Replace quotes, names, roles, and photos
  - Photos should be 100x100px square, cropped to face

SECTION 9 — YOUTUBE
  - Replace video thumbnails (recommended: 600x340px, 16:9 ratio)
  - Update titles, view counts, durations, and links
  - Update channel description and subscriber count

SECTION 10 — JOURNAL
  - Replace article dates, categories, titles, excerpts, and links

SECTION 11 — CONTACT
  - Update email, phone, location
  - The contact form is front-end only — connect to a service like
    Formspree, Netlify Forms, or your own backend for real submissions

SECTION 12 — FOOTER
  - Update bio, social links, quick links
  - The copyright year updates automatically via JavaScript

================================================================================
8. ALTERNATIVE COLOR PALETTES
================================================================================

Devora ships with a Terracotta accent by default. Here are 4 ready-to-use
alternatives — just paste into the :root block:

--- DEEP FOREST GREEN (grounded, editorial) ---

  --color-accent:        #2C4C3B;
  --color-accent-hover:  #1F3529;
  --color-accent-soft:   rgba(44, 76, 59, 0.08);
  --shadow-md: 0 10px 30px -10px rgba(44, 76, 59, 0.12);
  --shadow-lg: 0 20px 50px -15px rgba(44, 76, 59, 0.15);

--- RICH MUSTARD (vintage, mid-century) ---

  --color-accent:        #D49A2A;
  --color-accent-hover:  #B07F1F;
  --color-accent-soft:   rgba(212, 154, 42, 0.1);
  --shadow-md: 0 10px 30px -10px rgba(212, 154, 42, 0.12);
  --shadow-lg: 0 20px 50px -15px rgba(212, 154, 42, 0.15);

--- SLATE BLUE (calm, professional) ---

  --color-accent:        #4A6583;
  --color-accent-hover:  #3A5068;
  --color-accent-soft:   rgba(74, 101, 131, 0.08);
  --shadow-md: 0 10px 30px -10px rgba(74, 101, 131, 0.12);
  --shadow-lg: 0 20px 50px -15px rgba(74, 101, 131, 0.15);

--- DUSTY ROSE (warm, contemporary) ---

  --color-accent:        #B5634B;
  --color-accent-hover:  #964E3A;
  --color-accent-soft:   rgba(181, 99, 75, 0.08);
  --shadow-md: 0 10px 30px -10px rgba(181, 99, 75, 0.12);
  --shadow-lg: 0 20px 50px -15px rgba(181, 99, 75, 0.15);

================================================================================
9. BROWSER COMPATIBILITY
================================================================================

Devora has been tested and works in:

  - Chrome / Edge        90+
  - Firefox              88+
  - Safari               14+
  - Mobile Safari (iOS)  14+
  - Chrome for Android   90+

Uses modern CSS features:
  - CSS Variables (custom properties)
  - Grid & Flexbox
  - aspect-ratio
  - clamp() for fluid typography
  - Smooth scroll behavior

================================================================================
10. PERFORMANCE NOTES
================================================================================

  - All external libraries load from fast, reliable CDNs
  - No build step, no bundler, no JavaScript frameworks
  - Images should be optimized before uploading (use WebP when possible)
  - Recommended image sizes:
      Profile photo:    600 x 750 px
      Project thumbs:   600 x 400 px
      YouTube thumbs:   600 x 340 px
      Testimonial pics: 100 x 100 px
  - Total page weight (without images): ~180 KB gzipped
  - Lighthouse scores typically 95+ on Performance, Accessibility, Best
    Practices, and SEO when properly optimized

================================================================================
11. TROUBLESHOOTING
================================================================================

Q: The portfolio filter buttons don't work.
A: Make sure each .portfolio-item has a category class (cat-web, cat-mobile,
   cat-uiux, cat-opensource) and that Isotope.js loaded from the CDN.
   Check the browser console for errors.

Q: Animations aren't showing.
A: AOS requires the element to scroll into view. If you're viewing the page
   locally with a very tall viewport, some animations may only trigger once.
   This is normal behavior.

Q: The contact form doesn't send emails.
A: The form is front-end only. To make it functional, connect it to a service
   like Formspree (formspree.io), Netlify Forms, or your own backend endpoint.
   Update the form's action attribute and submission logic in script.js.

Q: Images aren't loading.
A: The demo uses Unsplash URLs. Replace them with your own hosted images.
   You can use the assets/ folder or any image host (Cloudinary, Imgix, etc.)

Q: Fonts look different on my device.
A: Google Fonts loads from CDN. If you're offline, the fallback fonts
   (Georgia, -apple-system) will be used. This is by design.

Q: How do I add a new section?
A: Add a new <section> in index.html with a unique id, add corresponding
   styles in style.css, and add a nav link in the header. AOS animations
   will work automatically if you add data-aos attributes.

================================================================================
12. CREDITS & ATTRIBUTION
================================================================================

Devora Portfolio uses the following open-source libraries:

  - Bootstrap 5.3        https://getbootstrap.com
  - Isotope.js 3.0.6     https://isotope.metafizzy.co
  - AOS 2.3.4            https://michalsnik.github.io/aos
  - FontAwesome 6.5      https://fontawesome.com
  - Google Fonts         https://fonts.google.com

Demo images sourced from Unsplash (free to use):
  https://unsplash.com

Replace all demo content with your own before publishing.

Attribution is appreciated but not required. If you use Devora in a public
project, a link back is a nice gesture:

  "Built with Devora — devora-portfolio.dev"

================================================================================
13. LICENSE
================================================================================

Devora — Modern Developer Portfolio
Copyright (c) 2026 Devora

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

--------------------------------------------------------------------------------

Thank you for choosing Devora.
Happy building.

================================================================================
                              END OF DOCUMENTATION
================================================================================