OBF Home Page Design and BOSC logo ideas

BOSC-logo/README.md

@@ -0,0 +1 @@
+Directory to save all BOSC's logo and edit files

OBF-logo/README.md

@@ -0,0 +1 @@
+A directory to save all the OBF logo ideas, and to log edits

README.md

@@ -1,14 +1,12 @@
 # OBF Homepage
 Repository for the re-design of the OBF homepage. 
 
-Current home page: [https://www.open-bio.org/wiki/Main_Page](https://www.open-bio.org/wiki/Main_Page)
+My home page design(coded): https://kushinauwu.github.io/Theme-2/
+This code focuses more on only a few elements. I have used HTML, CSS, Bootstrap and JS for this. The images used are free to use placeholders and have no relevance. They are to be replaced by OBF pictures. I will be finishing the code and converting it into a Wordpress theme if I am selected as an intern. The page can be made mobile friendly by using Wordpress plugins. I can also code it accordingly if need be.
 
-## Roadmap
-1. During the [Outreachy](https://www.outreachy.org/) application period, applicants can contribute via [issues](https://github.com/OBF/homepage/issues). 
-2. An accepted applicant will then use this repository to implement their work. 
+Mockup of this design: https://github.com/kushinauwu/Theme-2/blob/master/OBF%20theme%202.pdf
+This is a sample of how the website would look like. 
 
-## Design requirements: 
-
-Please see our [design brief](design.md)
+The repo for this is at : https://github.com/kushinauwu/Theme-2
 
 

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman

design-ideas/board-of-directors-section/desktop/README.md

@@ -0,0 +1 @@
+

design-ideas/board-of-directors-section/mobile/README.md

@@ -0,0 +1 @@
+

design-ideas/fellowships-section/README.md

@@ -0,0 +1,10 @@
+
+Kind of an outline for how the fellowships section could be done. Sorry about the cropped images, making a full page made all the text look smaller. I hope it is alright, if not I'll upload the full image as it is :) I didn't include the menu bar and footer for this as it would be the same for every section, till we get to the BOSC sub-site. That should probably have a separate menu. 
+
+Desktop version: 
+
+-- I feel using larger font sizes for the important points would make them stand out more and help the reader focus more on them, so tried it! Little blurbs might make it easy to find what the reader is looking for?
+
+-- The blue blurb in the selection criteria is supposed to remain constant while we're scrolling in that section.
+
+-- Please let me know if I should change some alignments or colors and the like, and add and remove any parts!

design-ideas/fellowships-section/desktop-website/README.md

@@ -0,0 +1 @@
+

design-ideas/fellowships-section/mobile-website/README.md

@@ -0,0 +1 @@
+

design-ideas/idea-0/README.md

@@ -0,0 +1,13 @@
+Idea 1
+
+-- An idea is to keep the homepage as a long page wherein we can easily see an overview of what OBS is all about. I can make a quick links tab as well maybe at the top so that the members can get to the links they care about more, i.e, the projects list, membership details, events, volunteering for BOSC, etc, while still keeping the site friendly for people who aren't members yet.
+
+-- We could keep the BOSC and GSoC links as a scroll image right at the start, for easy access. I've only added a placeholder image for BOSC as of now. As in, the image switches between the BOSC link and GSoc link. Maybe we could add some other links for that as well, showcasing the main activities. For the events tab as well as the blog posts, there should be a next button to quickly move to the next latest event/post, just for easy access and to get a general idea without having to move further down.
+
+-- Most of the panels will have a link to another page which would have more details about it, like the travel fellowships panel would link to a more detailed version of it.
+
+-- We can try to make it more newcomer friendly by moving the chat + mailing list joining links further up the document. But I figured that since we're making it mostly for the members so it should be okay if we have this at the bottom.
+
+-- The orange color scheme is just a color I picked that seemed to look good, so it isn't a problem to mess around with the color schemes! Adding animations would be pretty cool too, but I haven't attempted it for the page yet. It would be great to have some!
+
+-- There's still a few things I have missed here, like adding a quick join/login button and all. It'll be easier once we try it in Wordpress. 

design-ideas/theme-1/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

design-ideas/theme-1/obf_homepage_0.html

@@ -0,0 +1,133 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name = "viewport" content="width-device-width">
+ <meta name = "description" content="Open Bioinformatics Foundation">
+ <meta name = "keywords" content="Bioinformatics, Technology, OBF, BOSC">
+ <meta name = "author" content="kushinauwu">
+ <link href="https://fonts.googleapis.com/css?family=K2D" rel="stylesheet">
+ <link rel="stylesheet" href="style-obf.css">
+ <title>Open Bioinformatics Foundation</title>
+ </head>
+ <body>
+ <header>
+ <div class="container">
+ <div id = "obf-logo">
+ <img src="obf_logo_icon-circle-tr.png">
+ <h1><span class="highlight">OBF</span></h1>
+ </div>
+ <nav>
+ <ul>
+ <li class="current"><a href="">Home</a></li>
+ <li><a href="">Blog</a></li>
+ <li><a href="">Projects</a></li>
+ <li><a href="">Fellowships</a></li>
+ <li><a href="">Team</a></li>
+ <li><a href="">Membership</a></li>
+ </ul>
+ </nav>
+ </div>
+ </header>
+ <section id = "showcase">
+ <div class="container">
+ <h1>Open Bioinformatics Foundation</h1>
+ <p>The Open Bioinformatics Foundation (OBF) is a non-profit, volunteer-run group dedicated to promoting the practice and philosophy of Open Source software development and Open Science within the biological research community.</p>
+
+ </div>
+
+ </section>
+ <div id = "image"><img src = "ysh_facebook_Biotech_Option_2_no-text.jpg"> 
+ <h1>BOSC 2018</h1></div>
+ <section class="boxes">
+ <div class="container">
+ <div class="box">
+ <h3>Upcoming Events</h3>
+ <div id = "event">
+ <h5><a href="">CollaborationFest 2018</a></h5>
+ <p>June 25-30, Portland, Oregon, United States</p>
+ </div>
+ </div>
+ <div class="box">
+ <h3>Blog</h3>
+ <div id = "event">
+ <h5><a href="">Learn more about BOSC 2018!</a></h5>
+ <p>The Bosc Pear
+BOSC 2018 will be held June 26-27, 2018 (with training days June 24-25 and a CollaborationFest June 28-29)!</p>
+ </div>
+
+ </div>
+ </div>
+ </section>
+ <section id = "contents">
+ <div class="container">
+ <div class="info">
+ <h3>Travel Fellowships</h3>
+ <ul>
+ <li><a href="style-obf.css">Selection Criteria</a></li>
+ <li><a href="style-obf.css">What does the fellowship cover?</a></li>
+ <li><a href="style-obf.css">What is required?</a></li>
+ <li><a href="style-obf.css">Who reviews the applicants?</a></li>
+ <li><a href="style-obf.css">Join now!</a></li>
+
+ </ul>
+ </div>
+ <div class="info">
+ <h3>Project Memberships</h3>
+ <img src="logo_800.png">
+ <img src="biopython_logo_white.png"> 
+ <img src="logo_800.png">
+ <img src="biopython_logo_white.png"> 
+ <img src="logo_800.png">
+ <img src="biopython_logo_white.png"> 
+ <img src="logo_800.png">
+ <img src="biopython_logo_white.png"> 
+ <img src="biopython_logo_white.png"> 
+
+ </div>
+ </div>
+ </section>
+ <section class = "boxes">
+ <div class="container">
+ <div class="box">
+ <h3>Donate</h3>
+ </div>
+ <div class="box">
+ <h3>Volunteer at BOSC!</h3>
+ </div>
+ </div>
+ </section>
+ <section id = "team">
+ <div class="container">
+ <h2>Board of Directors</h2>
+ <div class="member">
+ <img src="person.png">
+ <p>Member 1</p>
+ </div>
+ <div class="member">
+ <img src="person.png">
+ <p>Member 2</p>
+ </div>
+ <div class="member">
+ <img src="person.png">
+ <p>Member 3</p>
+ </div>
+ </div>
+ </section>
+
+ <section class="contact">
+ <div class="container">
+ <h3>Join our mailing List:<input type="email" placeholder="Enter your email ID here">
+ <button type = "submit">Submit</button></h3> 
+ <div class="icons">
+ <img src="download.png">
+ <img src="GitHub-Mark.png">
+ </div>
+
+ </div>
+ </section>
+ <footer>
+ <p>Open Bioinformatics Foundation</p>
+ </footer>
+ </body>
+</html>