From 1c9f218cd923e5e6080c1cf62fd614e666cf0c4f Mon Sep 17 00:00:00 2001 From: Joem Elias Sanez Date: Fri, 19 Jan 2024 20:44:15 +0800 Subject: [PATCH] Update intro and feature expandable UX boards in README.md --- README.md | 152 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 139 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 932826b..78363fb 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,9 @@ + + + ___ # Resume Re: UX +A functional approach to CSS3 selectors with applied object-orientation to HTML tag elements for core web interactivity without Javascript. ___ ![GitHub commit activity](https://img.shields.io/github/commit-activity/w/israelias/resume-redux?style=flat) @@ -8,15 +12,22 @@ ___ ![](documentation/landing_preview.png) +## Preamble: `CSS3({...HTML3.Elements})` + +Interactivity on this website is a result of a more-programmatic-than-usual and object-oriented approach to CSS3 selectors and HTML tags. No JavaScript. + Resume Re: UX is a comprehensive and systematic means for navigating and featuring content in a curriculum vitae. The project is an *interactive collapsible* "stack" of content sections that can be toggled to fully expand in *static mode* with at-a-glance document outline visualization in a responsive dashboard side menu. The project is developed as part of the user-centric front-end coursework (MS1) at [Code Institute](https://codeinstitute.net). > *Note: The project name refers to Resume RedUX or "Resume Revived," in addition to the expanded "Resume Re: User Experience"* [Please view the live website here.](https://israelias.github.io/resume-redux/) + + + [TOC levels=1-3]: # -# Table of Contents +## Table of Contents - [Resume Re: UX](#resume-re-ux) - [UX](#ux) - [1.0 Strategy](#10-strategy) @@ -73,6 +84,15 @@ ___ ###### [View UX Research Board](https://raw.githubusercontent.com/israelias/resume-redux/master/documentation/RedUX_200901_1619.png) +
UX Research Board +
+ +[](documentation/RedUX_200901_1619.png) + + +
+
+ ##### Competitor Review ___ @@ -114,6 +134,15 @@ Three target user profiles have been assembled from user research. Each profile ###### [View User Persona Ideation Board](https://raw.githubusercontent.com/israelias/resume-redux/master/documentation/RedUX_200901_1621.png) +
User Persona Ideation Board +
+ +[](documentation/RedUX_200901_1621.png) + + +
+
+
User Persona Table
@@ -239,6 +268,15 @@ ___ ###### [View Strategy Ideation Board](https://raw.githubusercontent.com/israelias/resume-redux/master/documentation/RedUX_200901_1622.png) +
Strategy Ideation Board +
+ +[](documentation/RedUX_200901_1622.png) + + +
+
+
Strategy Table
@@ -273,9 +311,8 @@ ___
-
-[Back to top](#table-of-contents) +

back to top

___ ___ @@ -349,10 +386,8 @@ The variety of content/media required to meet the needs of the user and the owne
-
- -[Back to top](#table-of-contents) +

back to top

___ ___ @@ -360,10 +395,51 @@ ___ ___ ###### [View Schematic IA Board](https://raw.githubusercontent.com/israelias/resume-redux/master/documentation/RedUX_200901_1623.png) + +
Schematic IA Board +
+ +[](documentation/RedUX_200901_1623.png) + + +
+
+ ###### [View Schematic IxD Board - Navigational Schemas](https://raw.githubusercontent.com/israelias/resume-redux/master/documentation/RedUX_200901_1625.png) + +
Schematic IxD Board - Navigational Schemas +
+ +[](documentation/RedUX_200901_1625.png) + + +
+
+ ###### [View Schematic Structure Board - Behavior, Relationships, Interactivity, ](https://raw.githubusercontent.com/israelias/resume-redux/master/documentation/RedUX_200901_1626.png) + +
Schematic Structure Board - Behavior, Relationships, Interactivity +
+ +[](documentation/RedUX_200901_1626.png) + + +
+
+ ###### [View Schematic Structure Board - Container Stack](https://raw.githubusercontent.com/israelias/resume-redux/master/documentation/RedUX_200901_1627.png) +
Schematic Structure Board - Container Stack +
+ +[](documentation/RedUX_200901_1627.png) + + +
+
+ +

back to top

+ #### 3.1 Organization of Functionality and Content ___ @@ -578,7 +654,8 @@ The website takes advantage of HTML5 semantic sectioning elements to bring clari
-[Back to top](#table-of-contents) + +

back to top

___ ___ @@ -588,6 +665,16 @@ ___ ###### [View Schematic Skeleton Board - Page Anatomy, Grid Set Out](https://raw.githubusercontent.com/israelias/resume-redux/master/documentation/RedUX_200901_1630.png) +
Schematic Skeleton Board - Page Anatomy, Grid Set Out +
+ +[](documentation/RedUX_200901_1630.png) + + +
+
+ + #### 4.1 Features and Usefulness ___ @@ -619,6 +706,15 @@ ___ [View Schematic UI Board - Navigation Design](https://raw.githubusercontent.com/israelias/resume-redux/master/documentation/RedUX_200901_1634.png) +
Schematic UI Board - Navigation Design +
+ +[](documentation/RedUX_200901_1634.png) + + +
+
+ ##### The Resume Stack ___ @@ -672,6 +768,15 @@ ___ ###### [View Schematic ID Board](https://raw.githubusercontent.com/israelias/resume-redux/master/documentation/RedUX_200901_1637.png) +
Schematic ID Board +
+ +[](documentation/RedUX_200901_1637.png) + + +
+
+ ##### Context and Order ___ @@ -683,9 +788,17 @@ ___ #### 4.4 Interface Design ___ -###### [View Schematic Interface Design Board - Page Anatomy](https://raw.githubusercontent.com/israelias/resume-redux/master/documentation/RedUX_200901_1639.png) ###### [View Schematic Interface Design Board - Page Anatomy](https://raw.githubusercontent.com/israelias/resume-redux/master/documentation/RedUX_200901_1639.png) +
Schematic Interface Design Board - Page Anatomy +
+ +[](documentation/RedUX_200901_1639.png) + + +
+
+ ##### Schematic Wireframes ___ @@ -731,7 +844,7 @@ Schematic mockups commenced in September 2020 to establish relationships between
-[Back to top](#table-of-contents) +

back to top

___ ___ @@ -743,6 +856,17 @@ ___ ###### [View Color Palette](https://raw.githubusercontent.com/israelias/resume-redux/master/documentation/RedUX_20116_0746.png) +
+
Color Palette +
+ +[](documentation/RedUX_20116_0746.png) + + +
+
+
+ Given the high degree of [movement](#54-movement) that occurs on the screen upon section transitions, the site's overall background "white-space" and peripheral default color states are decidedly neutral, spanning a spectrum of off-whites; a range of neutral greys; either of which afford the most stylistic reading of the project to its neumorphic gradient-and-shadow pairings. - The off-whites in this schematic [color palette board](https://raw.githubusercontent.com/israelias/resume-redux/master/documentation/RedUX_20116_0746.png) relatively illustrate the proportion of white-space-to-color per section. The signature off-white background is `#f2f1ef` and is the value of custom property name `--paper`. The complete range of off-whites, from lightest to darkest, and the property names they have been assigned for this project are: @@ -845,7 +969,9 @@ ___ - `--swoop` is an `ease-in-out` with a late and steep progression: an extra slow start with a rapid progression before a relaxed end. - [Preview ](https://cubic-bezier.com/#1,0,.41,1.01) `cubic-bezier(1, 0, 0.41, 1.01)` -[Back to top](#table-of-contents) + +

back to top

+ ___ ___ ## Features @@ -1259,7 +1385,7 @@ ___ - Visibility to some elements in the sidebar are sometimes compromised when toggling into landscape from portrait on a mobile. Additional `overlow-y: scroll` properties have been set to alleviate this issue. - On Chrome mobile browsers, visibility of an open `.show` section sometimes remains clipped when the global checkbox is suddenly `:checked` to expand all. In this instance, the section is still scrollable within the assigned height from the previous state. Additional rulesets were applied to force certain properties like this to carry through across boolean events. -[Back to top](#table-of-contents) +

back to top

___ ___ @@ -1286,7 +1412,7 @@ The project can be used as a means for featuring a variety of media. To clone th 1. Change the directory to where you want to clone the repository to. 1. Paste the Git URL copied from above and click "Ok". -[Back to top](#table-of-contents) +

back to top

___ ___ @@ -1324,4 +1450,4 @@ ___ - Tutor Support at Code Institute for offering invaluable technical support. - My mentor Aaron Sinnott for his support, time investment and for helping to push this project to be the best that it can be. -[Back to top](#table-of-contents) \ No newline at end of file +

back to top