LIS Portfolio — Setup Guide

A Life Is Strange inspired personal portfolio for a CS final year student.

---

File Structure

lis-portfolio/
│
├── index.html              ← Main entry point (open this in browser)
│
├── css/
│   └── style.css           ← All styles
│
├── js/
│   ├── butterfly.js        ← Flying butterfly canvas animation
│   ├── intro.js            ← Splash screen sequence (flash, typewriter, polaroid drop)
│   └── consequence.js      ← "This action will have consequences" screen
│
└── assets/
    ├── images/
    │   └── me.jpg          ← PUT YOUR PHOTO HERE (see step 2 below)
    └── fonts/              ← Optional: place local font files here

---

Getting Started

1. Open in VS Code

File → Open Folder → select the lis-portfolio folder

2. Add your photo

• Put your photo in assets/images/ and name it me.jpg
• Open index.html and find this comment block:

  <!--
    REPLACE THIS with your actual photo:
    <img src="assets/images/me.jpg" alt="Your Name" ... />
  -->
  <div class="photo-silhouette"></div>
  <div class="photo-body"></div>
  <div class="photo-label">your photo here</div>

• Delete the three placeholder <div> lines and uncomment the <img> tag.

3. Set your name

• Open js/intro.js
• Find line 14:

  const YOUR_NAME = 'Your Name';

• Replace 'Your Name' with your actual name.

4. Update the Polaroid caption

• Open index.html
• Find the .polaroid-caption div and change the text:

  <div class="polaroid-caption">
    class of '25<br />arcadia bay
  </div>

5. Run it

• Install the Live Server extension in VS Code
• Right-click index.html → Open with Live Server
• Or just double-click index.html to open in browser

---

Customisation Tips

Typing speed

In js/intro.js, adjust:

const TYPE_SPEED  = 90;   // ms per character
const TYPE_JITTER = 45;   // random delay added per char (natural feel)

Font

Fonts are loaded from Google Fonts in index.html:

<link href="https://fonts.googleapis.com/css2?family=Dancing+Script...

The writing text uses Dancing Script (closest to the game's thin handwritten style). The name/headings use Pacifico (warm calligraphic roundhand).

Adding portfolio sections

In index.html, find:

<main id="portfolio" class="hidden">
  <p>Portfolio coming soon...</p>
  <!-- Add your portfolio sections here -->
</main>

Replace the placeholder <p> with your actual sections.

Butterfly speed

In js/intro.js, find the launchButterfly(bfCanvas, splashEl) call. In js/butterfly.js, adjust:

const b = { x: -40, y: startY, vx: 2.2, ... }
//                                ^^^
//                         increase for faster flight

---

Dependencies

• No npm, no build tools, no frameworks required.
• Fonts loaded from Google Fonts CDN (needs internet on first load).
• Pure HTML + CSS + vanilla JavaScript.

---

Next Steps (future sections to build)

• Corkboard project gallery (Polaroid grid)
• Skills journal page
• About / diary entry section
• Contact section (typewritten letter style)
• Butterfly cursor that follows mouse