peakshift / peakshift-website Goto Github PK
View Code? Open in Web Editor NEWπΌ Finally a portfolio site?
Home Page: http://www.peakshift.com
πΌ Finally a portfolio site?
Home Page: http://www.peakshift.com
Estimate: 5h
Due: 2018-07-04
Scenario: Introduction to the ZED Case Study
Given I am on the ZED Case Study Page
When I view the section
Then I get an idea about the mission of the project and Peak Shift's engagement with it
Scenario: User Flow & Interface for the ZED Case Study
Given I am on the ZED Case Study Page
When I view the "User Flow and Interface" section
Then I get an idea about our process of creating the flow: diagrams, slides, mockups
And what was done for the ZED user flow
Scenario: Technology Stack for the ZED Project
When I am on the ZED Case Study Page
Then I see the "Technology Stack" section
And I see a list of the technologies used for the project
Estimate: 2h
Due: 2018-04-26
Scenario: User visits Peak Shift website from external source
Given I am on twitter.com
And I click on peakshift.com/<project> link from a tweet
Then I see element '<h3 class="projectTitle">'<project_title>'</h3>'
Examples:
| project | project_title |
| mindsky | MINDSKY |
| lemariku | Lemariku |
Scenario: User browses to project page
Given I am on homepage
When I click link <link_text>
Then I see element '<h3 class="projectTitle">'<project_title>'</h3>'
Examples:
| link_text | project_title |
| WEB | MINDSKY |
| MOBILE | Lemariku |
Estimate: 10m
Due: 03-07-2018
Scenario: Replace Skype with Telegram
Given a user is on the peakshift site
When they view the sidebar content
Then they should see a contact link for Telegram
And not Skype
Estimate: 2h
Due: 2018-07-04
Scenario: Job Description for Senior Backend Developer
When I read the Senior Backend developer job description
Then on the job listing I can read about "Introduction"
And on the job listing I can read about "Skills Required"
And on the job listing I can read about "The Application"
We're currently using our own font files on peakshift.com but since 2012 when the sites were originally setup webfont embedding solutions of these fonts from the official foundries have become accessible and better optimized. They now all have systems like Google Fonts to embed their paid typefaceswhich they didn't have before.
For the new site launch we need to obtain an official license from the founderies - I suspect it's Monotype for Universe and Typekit for Tisa but this needs to be confirmed. It would be best if there was a provider offering both but this may not be possible.
Estimate: 15m
Due: 2018-04-30
Scenario: As a potential customer I want to see how long the Lemariku project has taken.
Given I am on the Peak Shift site
And I click on mobile
When I View the Lemariku case study
Then display the years 2015 - 2016 in the project meta column.
Estimate: 48h
Due:
Reward: 500 DOGE
Scenario: Spanish Translation
Given a user visits the Peak Shift website
And they want to view it in Spanish
When they select that option
Then they see a full translation of the entire site in Spanish
Estimate:
Due: 2018-04-27
Scenario: Early
Given "Early Charlemagne" is on the team
When I see their profile section
Then it shows their name as "Early Charlemagne"
And their location is ""
And their role is ""
Scenario: Selimira
Given "Selimira Dimitrova" is on the team
When I see their profile section
Then it contains their name "Selimira Dimitrova"
And it contains their location to be "London, UK"
And their role is "Marketing Specialist"
Scenario: Shazelle
Given "Shazelle Isaacs" is on the team
When I see their profile section
Then it contains their name "Shazelle Isaacs"
And it contains their location "SVG"
And their role is "Web Developer"
Scenario: Johns
Given "Johns Beharry" is on the team
When I see their profile section
Then it contains their name "Johns Beharry"
And it contains their location "Earth πππ"
And their role is ""
Suggestions were made to have the team pictures be laid out either on the top or at the bottom of the page.
The team member's name and position can also be displayed at the bottom of each picture.
Estimate: 2h
Due: 2018-04-30
Scenario: Relevant visuals
Scenario: Content tells a story
The drafts for the case studies are up. You can view them by going to http://6c59b.peakshift.com/about and clicking on web and mobile for Mindsky and Lemariku respectively.
However, there are some missing content that I need your help with. You can either clone the repo and add the content to the files in the item folder or you can share your content with me and I can add it.
But please ensure that you take a look and see what you can add. Thank you.
The way the site is set up at the moment, when you click on the menu items, the data gets fetched. However, when you try and go back to the home page, the page refreshes. This is not something we want to happen.
Can someone assist with this please?
N.B- to see the menu links for the case studies you would have to go on the about page. However the logo link will always take you back to the index file. The about page would eventually be the landing page when it is completed.
Estimate: 1h
Due: 2018-07-04
Scenario: Images of the BackOffice
Given I am on the ZED Case Study Page
And I scroll through the content
When I view the screenshots of the BackOffice
Then I should see the UI of the project
And the image should be 100% displayed, regardless of device size
Scenario: Gif of the BackOffice
Given I am on the ZED Case Study Page
And I scroll through the content
When I view the backoffice.giff
Then I see how the interactions on the BackOffice happen
Estimate: 48h
Due:
Reward: 500 DOGE
Scenario: Bulgarian Translation
Given a user visits the Peak Shift website
And they want to view it in Bulgarian
When they select that option
Then they see a full translation of the entire site in Bulgarian
Actual Behavior
On desktop, when viewing in Firefox v59.0.2 (64-bit) on Ubuntu, aside#mainSide or it's contents do not appear in larger breakpoint sizes > 768px.
When testing in a smaller breakpoint size, the section appears.
Expected Behavior
Steps to Reproduce
Estimate:
Due: 2018-04-30
Related: #21
Scenario: Facebook Image
Given I have a Facebook image
When I view the image
Then I should see the peakshift color and logo
Scenario: Twitter Image
Given I have a Twitter image
When I view the image
Then I should see the peakshift color and logo
Estimate:
Due:
Scenario: A visually impaired person view the site
Given that I am on the website
And I am visually impaired
When I come across an image
Then the screen reader should read the Alt tag
And let me know what the image is about
Estimate: 48h
Due:
Reward: 500 DOGE
Scenario: Chinese Translation
Given a user visits the Peak Shift website
And they want to view it in Chinese
When they select that option
Then they see a full translation of the entire site in Chinese
Due: 2018-05-07
Scenario: Article mentions we're working on blockchain projects
Scenario: ...
Estimate: 3h
Due:
Reward: 100 DOGE
Scenario: Mobile money in East Africa article
When a user selects the Mobile Money in East Africa article
Then they should be informed about the history, future plans
And the effects mobile money has on countries in East Africa
And what this can mean for the rest of the world
Estimate:
Due: 2018-04-30
Scenario: media--right is aligned right on desktop
Given div.section is a child of .projectDetails
And figure.media--right is a child of div.section
And I am on a screen >= 960px
When I preview the layout in the browser
Then I see figure.media is aligned to the top of div.section
And it touching the right of the viewport
And it does not overlap .projectDetails
Estimate: 1h
Due: 2018-04-29
Scenario: Navigate between web pages
Estimate: 1h
Due:
Reward: 1255 DOGE
Scenario: Article layout
Given a user is on the Peak Shift website
When they select a blog article
Then they see a short introduction of the topic's problem
And 4-8 argument points that can expand using a "read more"
And a conclusion
Estimate:
Due: 2018-05-02
Scenario: Roadmap Responsive images
Given I am on the landing page
And I scroll through the content
When I view the roadmap.svg image
Then the image should be 100% displayed, regardless of device size
And not be stretched and cut like it currently is on screens < 960px
Scenario: Branding Responsive images
Given I am on the landing page
And I scroll through the content
When I view the branding.svg image
Then the image should have minimal white space to the right
And the main content should be the focus
And not off in the left corner as it currently is on screens < 960px
Actual Behaviour
The site was originally created in the desktop first design.
Expected Behaviour
It would be better if it was made with the mobile first approach.
Steps to Reproduce
Estimate: 48h
Due:
Reward: 500 DOGE
Scenario: Swahilli Translation
Given a user visits the Peak Shift website
And they want to view it in Swahilli
When they select that option
Then they see a full translation of the entire site in Swahilli
Estimate: 1h 30m
Due: 2018-04-30
Scenario: Team can see who visits the site
Given Portfolio launch
When Persons visit the site
Then Data would be collected in Google Analytics
And the team can make improvements
Scenario: Improve Search Engine ranking
Given A search for Design, Development or Blockchain
When The results are displayed
Then PeakShift should be one of the top results
[MindSky: Reports] Business Development
[MindSky + Psychometric Tests] Profile Enrichment
Due: 2018-07-10
Scenario: Frontend Landing Page for blockchain marketing services
Given a user visits the blockchain marketing page
When they review the page
Then they see content on our experiences, knowledge
And services offered for blockchain projects
And CTA and related article links
Scenario: Landing Page optimised for mobile
Given a user is on a mobile device
When they visit the blockchain marketing landing page
Then they see our content displayed by importance with optimised images
And large, legible fonts to utilize whitespace
And easy navigation
# Estimate:
Scenario: On large sized devices .media--stretched component displays flushed to the left and right of #mainContent
Given my viewport size is more than "960px"
And "#mainContent" is equal to "70%" of the viewport width
And "#mainContent" is positioned "30%" away from viewport left
When I see a component with a class ".media--stretched"
And it is a child of ".projectDetails"
Then ".media--stretched" width is equal to "70%" of "#mainContent"
And ".media--stretched" left position is equal to the left position of "#mainContent"
# Estimate:
Scenario: On medium size devices .media--stretched component displays flushed to the left and right of #mainContent
Given my viewport size is "768px"
And "#mainContent" is equal to "60%" of the viewport width
And "#mainContent" is positioned "40%" away from viewport left
When I see a component with a class ".media--stretched"
And it is a child of ".projectDetails"
Then ".media--stretched" width is equal to "60%" of "#mainContent"
And ".media--stretched" left position is equal to the left position of "#mainContent"
# Estimate:
Scenario: On mobile .media--stretched component displays flushed to the left and right of #mainContent
Given my viewport size is less than "768px"
And "#mainContent" is equal to "100%" of the viewport width
And "#mainContent" is positioned "0%" from viewport left
When I see a component with a class ".media--stretched"
And it is a child of ".projectDetails"
Then ".media--stretched" width is equal to "100%" of "#mainContent"
And ".media--stretched" left position is equal to "0%" away from "#mainContent"
Due: 2018-07-05
Scenario: Visitors see testimonials on MindSky project
Given I am on the /mindsky page
When I see the heading 'Testimonials'
Then I see text with testimonials from MindSky team
This is looking great! Thanks for sending all this. It's amazing how much progress has been made in such a short amount of time. Thank you!!
β Elizabeth
Reference:
Sorry that I didnt get to say goodbye properly before I rushed to the airport on Friday but I just wanted to say THANK YOU so much for making the trip to Rwanda this week. It was really so good to meet you in person. Your expertise and perspective added such depth and value to all of our conversations. Its so exciting to finally have a technical team who we really believe in and who deeply understands our mission and model. We feel really lucky to be working with the three of you.
I hope that you had a safe trip back and are feeling better from your manflu! : )
Talk soon,
Elizabeth
Reference:
Thank you!!
Estimate: 5h
Due: 2018-07-04
Scenario: Introduction to the ZED Case Study
Given I am on the ZED Case Study Page
When I view the section
Then I get an idea about the mission of the project and Peak Shift's engagement with it
Scenario: User Flow & Interface for the ZED Case Study
Given I am on the ZED Case Study Page
When I view the "User Flow and Interface" section
Then I get an idea about our process of creating the flow: diagrams, slides, mockups
And what was done for the ZED user flow
Scenario: Technology Stack for the ZED Project
When I am on the ZED Case Study Page
Then I see the "Technology Stack" section
And I see a list of the technologies used for the project
Estimate: 20m
Due: 2018-04-30
Scenario: When you are on peakshift.com and click on the dribble social icon it should take you to the company dribble account
Given I am on the Peak Shift site
When I click on the dribble social icon
Then take me to https://dribbble.com/peakshift
Due: 2018-07-10
Scenario: Blockchain marketing services we offer
Given I am on the blockchain marketing offering page
When view the services offered section
Then I understand that I can get business strategy
And funnel strategy with funnel assets.
Estimate:
Due: 2018-04-27
Related: #18
Scenario: Share link on Twitter
Given someone makes a tweet linking to any of our web pages
When I see the tweet
Then the twitter share card contains custom image and description
Scenario: Share link on Facebook
Given someone makes a post on facebook linking to any of our web pages
When I see the post
Then the facebook share card contains custom image and description
Reference:
Estimate: 1h
Due: 2018-04-30
Scenario: On the Lemariku project page of the portfolio display doodles as a background to the screenshots
Given I am on the Peak Shift website
And I am on the Lemariku project page
When I see the image header
Then the view sees doodles of fashion items as a background
Style Reference:
Estimate: 2h
Due: 2018-04-30
Scenario: Display of project design on desktop
Given you're on the Lemariku page
When you're reading through the case study
Then you should see screenshots of the project pages displayed in desktop mode
Scenario: Display of project design on mobile
Given you're on the Lemariku page
When you're reading through the case study
Then you should see screenshots of the project pages displayed in mobile view
Along with the portfolio launch, we hope to have a journal where we can post articles of ideas, and happenings @peakshift.
The journal will share a stylesheet with the portfolio, so we need to integrate the styles from the old journal template into the new scss
file.
Outlined are some of the elements / styles that need to be added to the new .scss
stylesheet and journal.html
template.
Estimate:
Due: 2018-04-30
Scenario: Lemariku case study header
Given I am on the lemariku case study page
When I look at the header
Then I see
Estimate: 2h
Due: 2018-04-30
Scenario: What UI work was done by Peak Shift?
Given I am on the MindSky case study page
When I view the creatives for the project
Then I see screenshots that showcases the Job Board
And the Profile Builder
And the Employer Dashboard
And the BackOffice
Scenario: Explain the research done about the audience
Scenario: ...
Besides <figure style="background-image
there are not many other cases where inline styles should be used on the templates as they can lead to inconsistencies.
_Use of the background-image
property is a necessary solution as we can consider the portfolio work as dynamic content β for instance if we used a CMS these images would be uploaded and managed from it's backend and there would be straight forward way to inject the background images into an external stylesheet. _
Estimate: 30m
Due:
Reward: 500 DOGE
Scenario: Fact sheet
Given I am in the peakshift-website repo
When I open "FactSheet/Transfer-Fees.md"
Then I see a fact sheet about the transfer fees of Western Union and MoneyGram
Actual Behaviour
I found some overlapping of the contact-footer section in aside whenever I view the site in any of my browsers.
From an article, I believe it could be due to the addition of the toolbar menu in my browser (chrome doesn't have the toolbar menu visible but there is still some minimal overlapping). It is taking away from the viewport height.
Expected Behaviour
No vertical overlapping.
Steps to Reproduce
View the portfolio site in tablet or desktop mode in heights below 690px (690px height is how it looks in my chrome browser and 650px is how it looks in mozilla).
I suggest maybe using a min-height and min-width media query to help with this issue. Any other suggestions?
Estimate: 2h
Due: 2018-07-04
Scenario: Job Description for frontend developer/designer
When I am read the frontend developer/designer job description
Then on the job listing I can read about "Introduction"
And on the job listing I can read about "Skills Required"
And on the job listing I can read about "The Application"
Estimate: 48h
Due:
Reward: 500 DOGE
Scenario: Kinyarwanda Translation
Given a user visits the Peak Shift website
And they want to view it in Kinyarwanda
When they select that option
Then they see a full translation of the entire site in Kinyarwanda
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.