# Pedro Oliveira — Portfolio · Secret Site Map > A hidden, pure-Markdown documentation of the whole site. > Reachable only via the tiny dot to the left of "LinkedIn" in the footer. --- ## 1. What this is A static, framework-free personal portfolio for **Pedro Oliveira** — Product Designer & Project Manager. No build step: plain HTML, CSS, and vanilla JS, served as files. Dark-first visual language with a yellow/orange accent (the ByteNana look). - **Live repo:** github.com/titeco-ux/Portfolio - **Owner:** Pedro Oliveira (Brazil) — UX/UI Designer & PM at ByteNana --- ## 2. Tech stack | Layer | Choice | |------------------|-----------------------------------------------------------| | Markup/Style | Static HTML + CSS (custom properties/tokens), no framework| | Fonts | IBM Plex Sans + Inter (Google Fonts) | | Icons | Iconify (`iconify-icon` web component, CDN) | | Animated bg | D3 (`d3-contour`) → moving cartography contour lines | | Smooth scroll | Lenis v1 (`lenis@1/+esm`, CDN) — `js/lenis.js` | | Home extras | three.js + GSAP (loaded on the home page) | | Forms | Netlify forms (contact modal) | --- ## 3. Pages | File | Purpose | |--------------------|-------------------------------------------------------------| | `index.html` | Home — hero rotator, Selected Work grid (4), About overview | | `about.html` | About — profile, Experience timeline, Education, Toolkit | | `projects.html` | Projects index — grid of the 4 case studies | | `veturmusic.html` | Case study — Veturmusic | | `structureiq.html` | Case study — Structure IQ | | `indicafacil.html` | Case study — IndicaFácil | | `bytenana.html` | Case study — ByteNana Design System (Bytestore) | | `sitemap.md` | **This hidden documentation page** | **Navbar (all pages):** logo → Home · About · Projects · Talk to me. Project pages carry an explicit **Home** link left of About. **Footer (all pages):** name · a hidden dot (this page) · LinkedIn ↗ · Talk to me →. --- ## 4. Design system / tokens Defined in `css/tokens.css`, composed in `css/styles.css`, with case-study extensions in `css/work.css`. - **Theme:** dark-first; even sections flip to an off-white "inverted" theme. - **Accent:** orange/yellow primary (`--color-primary`, ~`#F15E00`). - **Type:** IBM Plex Sans (headings), Inter (body). - **Spacing/radius/shadow:** token scale (`--space-*`, `--radius*`, `--shadow-*`). - **Motion:** eased transitions; respects `prefers-reduced-motion`. ### Recurring components - `project-card` — image + hover-reveal overlay (used in the work grids) - `case-meta` / `case-meta__item` — the metadata band under case-study heroes - `arch-flow` / `arch-step` — numbered 3-step "solution" flow - `gallery` / `shot` — framed screenshots with a click-to-enlarge lightbox - `card` / `card--invert` — feature & deliverable cards - `case-pager` — yellow prev/next strip between case studies - `anim-bg` + `.has-anim` / `.case-merged` — animated contour backgrounds on dark sections - About: `exp-timeline`, `edu-card` grid, `toolkit-card` grid (one icon per category) --- ## 5. Case studies (structure) Every case study follows the same skeleton: 1. **Hero** — full-bleed Unsplash photo, darkened overlay, centered bold project name, short headline + subheading. 2. **Meta band** (light) — Industry · Timeline/Methodology · Role · Live. 3. **Merged dark block** — 01 Challenge + 02 Solution share one continuous animated background. 4. **Gallery** (light) — screenshots. 5. **Merged dark block** — 05 Result + 06 Craft. 6. **Pager** + final CTA. ### The four projects | Project | Industry | Role | Live | |-------------|---------------------------------|-----------------------------------|-----------------------------| | Veturmusic | Music Distribution | UX · PM · API Integration | veturmusic.is | | Structure IQ| Structural Engineering · SaaS | UX Design · Research · Data Viz | structureiq.ai | | IndicaFácil | Fintech · Referrals & Credit | UX · User Flows · UI · Handoff | indicafacilbr.com.br | | ByteNana | Design Systems · Internal Tool | Design System · UI · Built with AI| bytedesign.netlify.app | **Pager ring:** Veturmusic → Structure IQ → IndicaFácil → ByteNana → (loops). --- ## 6. About page content - **Profile:** Architect by training, tattooist by detour, UX/UI designer by choice. Work sits between project management and interface design for web and mobile. Currently leading design and project coordination at ByteNana. - **Experience (timeline):** ByteNana (2025–), Bee Coders (2024–25), OlverTech/Apex App (2024), Freelance UX (2023), Self-employed tattoo/graphic (2017–23). - **Education (cards):** Google UX Certificate (2024), IBM Enterprise Design Thinking (2024), UNIFOR B.Arch (2011–17), Univ. of Salford exchange (2014–15). - **Toolkit (icon per category):** UX Research · Design · Specialization · Agile & PM · Technical · Soft Skills. --- ## 7. JavaScript modules (`js/`) | File | Role | |----------------|------------------------------------------------------------| | `main.js` | Contact modal, hero rotator, general interactions | | `nav.js` | Navbar behavior (mobile menu, scroll collapse) | | `contours.js` | D3 animated contour background (one per `.anim-bg__canvas`) | | `slot.js` | Home hero slot/rotator animation | | `casestudy.js` | Case-study gallery lightbox | | `lenis.js` | Lenis smooth scrolling (lerp 0.075, wheelMultiplier 0.75) | --- ## 8. Key assets (`assets/images/`) - **Hero photos (also card thumbnails):** `hero-veturmusic.jpg`, `hero-structureiq.jpg`, `hero-indicafacil.jpg`, `hero-bytenana.jpg` (Unsplash). - **IndicaFácil screens:** `if-1…if-7`. - **ByteNana screens:** `bs-1…bs-3`. - **About portrait:** `about-pic.png`. - **Veturmusic / Structure IQ screens:** `v*.png`, `s-*.png`. --- *Last documented by the site's caretaker. This file is intentionally undiscoverable from normal navigation — enjoy the easter egg.* 🥚