New Bounties.Network Website

[mbeylin]

Description

We need to build a new version of the Bounties Network landing page!

Here is a picture of the design itself:
Desktop:

Mobile:

Here is a zip folder of the various SVG files found in the design:

website bounty.zip

This new site should follow the attached design as closely as possible, and should include a number of unique elements:

• should use a carousel component for the logos and media pictured at the bottom
• should use this https://codepen.io/corwinharrell/pen/MBqjpm as a guide for styling the buttons present in the 'building blocks' section
• should use the same Google Analytics + MailChimp tags which are present in the current bounties.network site
• use the typeface “Poppins” from Google Fonts for headings
• Use the typeface “Inter UI” for body copy.
• Font-sizes can be approximate, but should be consistent throughout. We will make adjustments to typography after the bounty is completed.
• the embedded video should be a youtube video (feel free to choose any video you'd like for the preliminary version since our final video isn't on youtube yet)
• for the header background image (the hexagons), just use the same picture as before, and position it as best as you can

Requirements

A correct submission for this bounty will:

• BE RESPONSIVE : it should either follow the above design to the letter, or should adjust the visual components to react to changes in screen sizes (i.e. mobile responsive)
• Use flexbox grid (fleboxgrid.com) to organize the visual components in a way that appropriately responds to changes in content or screen resolution

Revisions

We will require at most 4 revisions for submitted work, and expect whoever completes this bounty to come to us with intermediate questions (especially regarding mobile responsiveness) rather than making assumptions on one's own.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 0.82 ETH (299.8 USD @ $365.62/ETH) attached to it.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $23,701.25 more funded OSS Work available on the Gitcoin Issue Explorer

[tosho]

Is http://flexboxgrid.com/ mandatory? Can we use another CSS framework (like Bulma) or plain CSS Grid?

[octavioamu]

Hi!
I have some questions

• There is the original file? It was made in sketch? In the zip is only a png
• How the menu behaves? Is an sticky menu on scroll? And in responsive view?
• Current site use mailchimp for the subscription, Are you planning to continue using it?
  Thanks

[tcrowe]

Hey guys good luck to whoever is awarded the bounty. You can use this to get started fast using gulp, flexboxgrid, and a test server. It works! https://github.com/tcrowe/bounties.network

[iamonuwa]

@mbeylin please what's the criteria for rejecting hunters? Or is this task not ready to be worked on?

[mbeylin]

Apologies to those who were applying to do this: my intention was to accept @tcrowe for this bounty, but some issues on Gitcoin were prohibiting me from doing that. When the site is working I will accept Tony but in the meantime, @tcrowe please feel free to begin working on this.

Regarding the questions:

• menu bar should be fixed at the top (and continue to be shown as we scroll down)
• I can get you the original file (more than a PNG)
• yes, please use the same mail chimp code(s) from the current site

[mbeylin]

@tcrowe the file was made on Figma, so we can share the design with you on that site if you're interested in seeing any of the details of its implementation.

[tcrowe]

Np @mbeylin

Static sites are the most fun! I'm a contributor on https://hexo.io static site generator but as this was only one page I used a simpler tool set.

[mbeylin]

Here's a link to see the design: https://www.figma.com/file/a6x2BkAyST5KJzmvQzSqRcem/Bounties.network-Landing-Page?node-id=0%3A1

[tcrowe]

@corwinharrell Hey that was me checking out the design 👋 😆

[heycorwin]

@tcrowe haha oh I thought it was Mark! Let me know if you have any questions about Figma. You should be able to inspect element properties to some degree (It's been a while since I've been inside a Figma file as a viewer and not the owner.)

[tcrowe]

I thought what you guys provided in the initial write-up was great but the Figma project is icing on the cake. Thanks @mbeylin @corwinharrell 👍🏼

[unherd-uf]

Is still open.?

[tcrowe]

Preview site here: https://elegant-spence-fbc1e4.netlify.com/

@mbeylin @corwinharrell Can you scrunch it down to mobile size and try that hamburger menu? You may want a different behavior.

[tcrowe]

I'm making good progress here. I am hoping to be mostly finished up today then we can do some tweaks for you guys until it's to your satisfaction.

A question I have is about SVG format. In each SVG is a copy of the watercolor jpg base64-encoded. As you might imagine that will duplicate the JPG many times through the page. I tried looking through the SVG specification to see if I can do something like /img/watercolor.jpg but I was not able to get it to show up in the SVG background.

Do you have any ideas?

The only one I can think of was to compress down watercolor.jpg then base64 encode and put it back in.

[tcrowe]

Here's an example https://github.com/tcrowe/bounties.network/blob/new-design-gitcoin-bounty/src/img/bee-illustration.svg?short_path=5edb7f4#L180

[tcrowe]

Please provide:

• list of partners
• list of media

Alternatively I will write a script to import medium articles from the API: https://github.com/Medium/medium-api-docs#33-posts
https://medium.com/feed/bounties-network

In that case to update you will trigger a website deploy when a new article is written.

[mbeylin]

@tcrowe I'll reply all at once:

• I like the hamburger menu, but it doesn't seem to respond to different screen sizes (on chrome's galaxy s5 emulator the alignment was off, but on my iPhone it looked great). I also couldn't actually see the heading links in the hamburger state, I assume you're just not finished with that.

• Regarding the SVG sizing it looks like an extra ~500kb is added with every new image that uses the watercolour. Finding a way not to be reloading the same image would be great. @corwinharrell do you think we could apply that overlay using CSS, by stacking img tags atop each other?

• For the partner logos, for now you can just use 4 of these in a row:
  
  We can switch them out for real partner logos later.

• For the media posts, you can also just link to this medium post 3 times:
  https://medium.com/bounties-network/the-honu-kitty-supporting-ocean-conservation-the-crypto-way-ef1042e58c50
  using the medium logo and body image from that article. I don't think the automation of medium pulling makes sense since we'll likely be adding external publications there as well.

Overall, this is fantastic work (especially the mobile compatibility) and I can't wait to see the finished product.

[tcrowe]

@mbeylin

New demo deployed here: https://elegant-spence-fbc1e4.netlify.com/

Fixed:

• Hamburger should be improved
• Most SVGs converted to PNG trying to avoid watercolor texture duplication
• Better utilization of flexboxgrid classes
• Menu fixed to top

Left to do:

• Partners
• Posts

[tcrowe]

I'm testing on some devices and it still needs some work on the lower resolutions

[heycorwin]

@tcrowe I see you've already gone this route but yeah I was going to say it might just be worth using a .png for at least the top header image. I don't have any issue with that, although we'll need to make sure the asset is the correct size and appears sharp on retina devices 👍 For now, we're not really going to be leveraging svg-specific properties to modify the more illustrative elements (changing scale, color, animating, etc...) so if the file size is an issue then it probably makes more sense just to use images for elements that include that heavy texturing.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work has been started.

These users each claimed they can complete the work by 5 months from now.
Please review their action plans below:

1) tcrowe has been approved to start work.

I am starting work on this issue right now. Thank you for having me to work on this bounty with you

Learn more on the Gitcoin Issue Details page.

[mbeylin]

@tcrowe a couple of notes on the most recent update:

• the body text font seems a bit off- both the colour and the line height
• the footer renders strangely for me, both the fonts and the email input scale strangely:

Otherwise this is coming together quite nicely and I can't wait to see it finished.

[tcrowe]

Getting closer https://elegant-spence-fbc1e4.netlify.com/

The carousels are not animating but they can be scrolled horizontally manually.

There is a nagging horizontal scroll I'm trying to track down in small res.

[tcrowe]

The video toward the bottom is an iframe and needed to be adjusted via the script during resize to maintain aspect ratio.

[tcrowe]

In production the HTML, CSS, and JS are all compressed minified. 😉

[mbeylin]

@tcrowe this is amazing. I love what you did with the carousels. The final outstanding issue is a small one I noticed with the media cards, there's some strange vertical scrolling that's going on. If you could fix that and open a PR to merge into https://github.com/Bounties-Network/bounties.network/tree/new-design, I'd be happy to finalize this and accept the submission.

[tcrowe]

Thank you @mbeylin

Can you also tell me how you want to deploy the site? To GitHub, Netlify, other? Depending on that I will need to change a few things.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work for 0.82 ETH (229.08 USD @ $279.36/ETH) has been submitted by:

1. @tcrowe

@mbeylin please take a look at the submitted work:

• PR by @tcrowe

---

• Learn more on the Gitcoin Issue Details page
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $19,475.26 more funded OSS Work available on the Gitcoin Issue Explorer

[mbeylin]

@tcrowe we'll likely be deploying using an S3 bucket so no need to make any substantial changes.

I accidentally accepted your original PR (and then reverted) after realizing it was merging into master instead of the branch new-design. Could you re-PR to merge into that branch?

[tcrowe]

Yes @mbeylin.

If you run npm run prd it will create ./dist. The s3 command should be able to sync that dir.

https://github.com/Bounties-Network/bounties.network/pull/10

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

The funding of 0.82 ETH (234.98 USD @ $286.56/ETH) attached to this issue has been approved & issued to @tcrowe.

• Learn more on the Gitcoin Issue Details page
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $22,488.52 more funded OSS Work available on the Gitcoin Issue Explorer