# RolyPeraWeb Redesign Blueprint

> **Goal:** Modernize `web.rolypera.duckdns.org` into a polished creative-technology portfolio/lab for people interested in web development, coding, 3D, AI, and game development.

**Current site:** https://web.rolypera.duckdns.org/  
**Primary audience:** Developers, technical learners, AI/3D/game-dev hobbyists, potential collaborators, employers/clients who want to see Rolando's technical range.  
**Recommended direction:** A modern dark creative-tech lab: part portfolio, part experiment archive, part dev journal.

---

## 1. Brand Positioning

### Current impression

The site currently presents as:

> Information Technology and Musings

That is accurate but too broad and understated. It does not immediately communicate the strongest value: a blend of practical web tools, coding, 3D, AI, and game-inspired experiments.

### New positioning

Use this as the core brand idea:

> **RolyPeraWeb is a creative technology lab for web apps, AI experiments, 3D work, and game-inspired interactive projects.**

### Homepage headline options

Option A:

> **Building web tools, 3D experiments, AI workflows, and game-inspired projects.**

Option B:

> **Creative coding, AI experiments, 3D visuals, and playable web ideas.**

Option C:

> **A personal lab for code, graphics, AI, and interactive development.**

Recommended: **Option A** — clearest and most direct.

### Supporting intro copy

> I’m Rolando Pera — an IT professional and creative developer exploring the intersection of web development, computer graphics, automation, AI, and game-inspired interactive experiences.

---

## 2. Visual Direction

### Style target

**Modern dark creative-tech lab**

The current starfield/cosmic mood is worth keeping, but it should become a controlled visual identity rather than an empty background.

### Design references

Use these design-system inspirations:

- **Linear / Cursor / Raycast:** dark precision, clean cards, subtle gradients.
- **Vercel / OpenCode / Warp:** developer-first, crisp typography, code-friendly UI.
- **Runway / ElevenLabs:** cinematic creative-tech mood.
- **Figma / Webflow:** visual creativity and portfolio polish.

### Visual language

- Dark background: near-black / deep navy.
- Accent colors: electric cyan, violet, blue, small hints of neon green.
- UI elements: glassy cards, subtle borders, soft glow hover states.
- Typography: modern sans-serif for body; optional monospace accents for tags/code.
- Layout: spacious, card-based, responsive, easy to scan.
- Motion: subtle hover effects only; avoid heavy animation unless purposeful.

---

## 3. Proposed Design Tokens

These can become a future `DESIGN.md` and WordPress `theme.json`.

```yaml
name: RolyPeraWeb Creative Tech Lab
version: alpha
description: Dark creative-tech portfolio for web apps, AI experiments, 3D, and game development.
colors:
  background: "#070A12"
  surface: "#0D1324"
  surfaceElevated: "#111A30"
  border: "#26324A"
  text: "#F4F7FB"
  textMuted: "#A8B3C7"
  cyan: "#38D5FF"
  violet: "#8B5CF6"
  blue: "#3B82F6"
  green: "#22C55E"
  warning: "#F59E0B"
typography:
  h1:
    fontFamily: Inter
    fontSize: 4rem
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: "-0.04em"
  h2:
    fontFamily: Inter
    fontSize: 2.25rem
    fontWeight: 750
    lineHeight: 1.1
    letterSpacing: "-0.03em"
  body:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.65
  mono:
    fontFamily: JetBrains Mono
    fontSize: 0.875rem
    fontWeight: 500
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 72px
rounded:
  sm: 8px
  md: 16px
  lg: 24px
components:
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: 24px
  button-primary:
    backgroundColor: "{colors.cyan}"
    textColor: "#031018"
    rounded: "{rounded.sm}"
    padding: 12px
  button-secondary:
    backgroundColor: "{colors.surfaceElevated}"
    textColor: "{colors.text}"
    rounded: "{rounded.sm}"
    padding: 12px
```

---

## 4. Site Architecture

### Recommended top navigation

```text
Home
Projects
Notes
About
Contact
```

If you want to keep the existing wording:

```text
Home
Projects
Musings
About
```

But recommended: change **Musings** to **Notes** or **Dev Log** for better audience fit.

### Page roles

#### Home

A landing page that explains who Rolando is and routes visitors into projects.

#### Projects / Lab

A modern categorized portfolio grid.

#### Notes / Dev Log

Technical notes, experiments, tutorials, project retrospectives, AI/3D/game-dev thoughts.

#### About

Professional bio, technical background, creative interests, resume, credentials.

#### Contact

Simple contact section or form, plus GitHub/LinkedIn/resume links.

---

## 5. Homepage Wireframe

### Section 1: Hero

Purpose: instant identity and direction.

Content:

```text
RolyPeraWeb
Building web tools, 3D experiments, AI workflows, and game-inspired projects.

I’m Rolando Pera — an IT professional and creative developer exploring coding, graphics, automation, and interactive experiences.

[View Projects] [About Me]
```

Visual:

- Dark starfield/cosmic background.
- Gradient glow behind headline.
- Optional small code/grid/3D wireframe motif.
- Portrait/avatar optional.

### Section 2: Featured Projects

Show 3–6 selected cards.

Card fields:

```text
Project title
One-sentence description
Tags
Status
CTA
```

Suggested featured categories:

- Web Tool
- AI Experiment
- 3D / A-Frame
- Blender 3D
- Game / Retro
- Desktop Utility

### Section 3: Explore by Interest

Six category cards:

```text
Web Apps
AI Experiments
3D / Blender
A-Frame / WebXR
Game & Retro Dev
Desktop Utilities
```

Each card should link to a filtered projects section.

### Section 4: About Preview

Short version:

```text
I combine IT, programming, troubleshooting, computer graphics, and creative experimentation to build practical tools and interactive demos.
```

CTA:

```text
Read About Rolando
Download Resume
```

### Section 5: Latest Notes

Show 2–3 recent posts or dev logs.

If there is only one article today, make the section say:

```text
Notes and dev logs coming soon.
```

---

## 6. Projects Page Blueprint

### Main change

Move from button/link list to a responsive project-card grid.

### Project card schema

Each project should have:

```yaml
title: Circuit Load Calculator
slug: circuit-load-calculator
category: Web Tool
description: A practical browser-based calculator for estimating electrical circuit load requirements.
tech:
  - HTML
  - CSS
  - JavaScript
status: Live
links:
  demo: /projects/circuit-load-calculator
  github: optional
thumbnail: optional
featured: true
```

### Project card layout

```text
[Icon or thumbnail]
Category badge + Status badge
Title
Description
Tech tags
[Open Project] [Details]
```

### Categories

Use these consistent labels:

- **Web Tools**
- **AI Experiments**
- **3D / Blender**
- **A-Frame / WebXR**
- **Game & Retro Dev**
- **Desktop Utilities**

### Project detail page template

Each major project should eventually get a detail page:

```text
Title
Short summary
Screenshot/demo
Problem / goal
How it works
Tech stack
What I learned
Links
```

---

## 7. Notes / Musings Blueprint

Rename recommendation:

```text
Musings → Notes
```

Alternative:

```text
Dev Log
```

### Content categories

- Tech Notes
- AI Experiments
- 3D Process
- Game Dev Thoughts
- Web Tutorials
- Personal Reflections

### Article card format

```text
Title
Date
Category
Excerpt
Read More
```

### Article page improvements

- Narrow reading column: `max-width: 720px`.
- Larger title.
- Date/category metadata.
- Table of contents for long posts.
- Better image spacing.
- Footer should never overlap content.

---

## 8. About Page Blueprint

### Recommended opening

```text
I’m Rolando Pera, an IT professional and creative developer focused on web development, computer graphics, 3D experiences, AI-assisted workflows, and interactive/game-related projects.
```

### Structure

```text
Current Focus
Technical Background
Creative Interests
Resume & Credentials
Contact / Links
```

### CTA buttons

```text
View Projects
Download Resume
Contact Me
GitHub
LinkedIn
```

---

## 9. WordPress Implementation Strategy

### Best target

Build or adapt a modern **block theme**.

Recommended output structure:

```text
wp-content/themes/rolypera-lab/
  style.css
  theme.json
  functions.php
  templates/
    front-page.html
    home.html
    page.html
    single.html
    archive.html
  parts/
    header.html
    footer.html
  patterns/
    hero-creative-lab.php
    featured-projects.php
    interest-grid.php
    project-card-grid.php
    about-preview.php
    cta-contact.php
```

### Why block theme

- More editable in WordPress.
- Better long-term maintainability.
- `theme.json` maps well from `DESIGN.md`.
- Patterns let us reuse hero/cards/grids without locking everything into custom HTML.

### Open Design / DESIGN.md workflow

Recommended flow:

```text
Open Design visual concept
→ Export DESIGN.md
→ Hermes converts tokens to theme.json
→ Hermes converts layouts to block patterns/templates
→ WordPress preview
→ iterate
```

Use exported HTML/CSS only as visual reference when native blocks are possible.

---

## 10. Immediate Fixes Before Redesign

These can be done quickly on the existing site:

1. **Fix footer overlap**
   - Ensure footer is in normal document flow.
   - Avoid fixed positioning unless intentionally overlaying.
   - Add bottom padding to main content if needed.

2. **Fill homepage**
   - Add hero text and CTAs.
   - Add featured project cards.

3. **Improve Projects page**
   - Add one-sentence descriptions.
   - Replace plain buttons with cards.

4. **Update tagline**
   - Replace “Information Technology and Musings” with creative-tech positioning.

5. **Add links**
   - GitHub, LinkedIn, resume, contact.

---

## 11. Implementation Phases

### Phase 1: Content Strategy

**Goal:** Decide what the redesigned site says before building visuals.

Tasks:

1. Pick final tagline.
2. Pick 3–6 featured projects.
3. Write one-sentence descriptions for each major project.
4. Decide whether “Musings” becomes “Notes” or “Dev Log.”
5. Gather links: GitHub, LinkedIn, resume, contact.

Acceptance criteria:

- Homepage copy is approved.
- Featured projects are selected.
- Project category labels are finalized.

### Phase 2: Design System

**Goal:** Create reusable visual rules.

Tasks:

1. Draft `DESIGN.md`.
2. Validate colors and contrast.
3. Convert tokens into WordPress `theme.json`.
4. Define button, card, badge, and section styles.

Acceptance criteria:

- `DESIGN.md` exists.
- `theme.json` exists.
- Core colors/typography are consistent.

### Phase 3: Homepage Prototype

**Goal:** Build one polished page first.

Tasks:

1. Create hero pattern.
2. Create featured project grid.
3. Create interest-area grid.
4. Create about-preview section.
5. Create CTA/contact section.
6. Test desktop/mobile.

Acceptance criteria:

- Homepage looks modern.
- Main CTAs are visible.
- Project cards are readable on mobile.
- Footer no longer overlaps content.

### Phase 4: Projects System

**Goal:** Turn Projects into a real portfolio.

Tasks:

1. Define project metadata fields.
2. Convert project list into card grid.
3. Add filters or category sections.
4. Create one project detail page template.
5. Convert 3 featured projects first.

Acceptance criteria:

- Projects page is scannable.
- Each card explains what the project is.
- Featured projects feel intentional.

### Phase 5: About + Notes

**Goal:** Complete supporting pages.

Tasks:

1. Rewrite About opening.
2. Reorganize About into clear sections.
3. Convert Musings into Notes/Dev Log index.
4. Improve article template.

Acceptance criteria:

- About page communicates current identity quickly.
- Notes page has clear purpose.
- Long articles are readable.

### Phase 6: Launch Polish

**Goal:** Make the site feel finished.

Tasks:

1. Test mobile navigation.
2. Test basic accessibility: keyboard focus, color contrast, alt text.
3. Add page meta titles/descriptions.
4. Compress/optimize images.
5. Check all project links.
6. Backup current WordPress theme/content before switching.

Acceptance criteria:

- No obvious layout bugs.
- Core pages are mobile-friendly.
- Public visitor can understand the site in 10 seconds.

---

## 12. Recommended First Build Target

Do **not** redesign the whole site at once.

Start with:

```text
Homepage + Projects page visual prototype
```

Deliverables:

```text
DESIGN.md
theme.json draft
front-page.html / homepage block pattern
project card pattern
updated homepage copy
```

This validates the visual direction before touching every page.

---

## 13. Final Recommended Direction

RolyPeraWeb should become:

> **A polished creative-tech portfolio where visitors can quickly understand Rolando’s interests, explore useful demos, and see a coherent identity across web development, AI, 3D, and game-inspired projects.**

The site should feel:

```text
technical but approachable
creative but organized
experimental but credible
modern but personal
```