Light

sweetpixel / sweetpixelstudios Goto Github PK

View Code? Open in Web Editor NEW

0.0 7.0 4.0 31.76 MB

Our official website

Home Page: http://www.sweetpixelstudios.com

JavaScript 48.06% CSS 31.67% HTML 20.08% PHP 0.20%

sweetpixelstudios's Introduction

SweetPixel Studios Official Website

The website is based on [Yeoman][yo].

Initial Setup

Clone from github
fab setup will setup apache, download node modules via npm, and then set mercurial hooks, and finally do a debug build. This is the same as doing grunt dev after the initial setup.
Develop.
Commit hooks will help keep things clean and organized.

Useful Tools

grunt watch: Unit test our javascript and css on file change.
grunt jshint: Weird problem? Lint it before you bug hunt it.

Release

For the moment, the release looks like this: dploy production

Code Style

We developer with a fairly strict [JSHint][jshint] setup. You can see the style format in the .jshintrc file.

Code comments are done with [Markdown][markdown], and processed with [Docker][docker]. Whitespace is nice, use it, and keep to the established style of the project.

Build and Deploy

The build process is automated with [Grunt JS][grunt]. The build process is quite involved, ultimately producing a single CSS file, and only one or two JS files. The app can be run in development, staging, and production environments.

sweetpixelstudios's People

Contributors

Watchers

Forkers

mubassirhayat aliirz naurozahmad shakirullah41

sweetpixelstudios's Issues

Push the first section downwards, so it doesn't hide behind the nav bar on smaller screens.

Contact Us form should be width wise smaller for phone, it seems to be crossing screen bounds.

Insert following keywords into meta-tag.

sweet-pixel-studios
mobile
gaming
pixelfall

Create borders between different sections.

Update contact section with Facebook and Twitter buttons on dropbox.

Use latest image asset for Home Section.

Make section borders width edge-to-edge, and make sure there is no gap between section images and it's borders, so the section borders exist right after image borders.

Use the latest assets.

@mmsayyam I tweaked the PixelFall image a bit for some visual changes, incorporate the new image, it's in the same folder

Stage the website

@aliirz jiger stage the website

Change navigation bar text color to red color in SPS Logo.

Resolve the delayed loading problem of social media icons, upon hover.

Use svg images for social media icons.

Check the font awesome and team image. The image is going outside of page.

Nav bar opacity should be higher on smaller screen. Its too much transparent.

Nav bar button opens a menu but doesn't close it back when tapped again on phones.

Set the images for the sections so they are edge to edge in each section.

Note down the optimal image size for each section so images can be created in that specific size and the extra spacing on edges can be avoided.

Use latest image assets on dropbox.

All images have been replaced in the "Assets" folder with optimised ones that are smaller in size.

Add google+ link

Adjust for responsive design

Navigation bar is messed up for small screen sizes.
SPS logo doesn't resize.
Section backgrounds are messed up for small screen sizes.
Text inside sections is illegible.

Add footer.

Set team section background.

Stage changes.

Create "Our Team" pop-up modal view.

Tapping on any of the section headers in navigation bar drop-down menu on phones should automatically close down the menu as well.

Remove transparency from nav bar completely for all screen sizes.

Create following artwork for SPS website:

Cartoonised images of all team members.
Circular badges for each team member representing their role/skill.

Create SVG images for the following:

SPS logo for navigation bar.
Cross Button for team view.

Create "Our Blog" link to SPS blog beneath the three social media buttons.

Set up SPS blog at www.sweetpixelstudios.com/blog

Create site map.

Integrate a plug-in or framework to monitor SEO-related analytics for our website/blog.

Try to adjust the the Home section text in two lines even on phones. It extends to three lines on smaller screens.

Jobs/career page as a separate page linked to the main website.

Design Rebranding Landing

Fix Font Issues

Apply hover effect to social media icons. By default they are normal but when hovered upon or selected, they change to a different image that is filled with their unique colors.

Add ease-in ease-out animation to the following:

Scrolling animation when tapped on a section title in navigation bar
Hovering over buttons
Team-pop-up view fade in animation

Navigation bar enhancements.

Set navigation bar transparency to 90%.
Change header (navigation bar) fonts, font color and font size.

Social media buttons are pixelated for all screen sizes.

@mubassirhayat Let me know in what resolution do you need these, so i'll recreate them.

Remove nav bar drop down menu transparency on phones.

Update the "Brace yourselves for a fall" section banner to Pixelfall launch banner and create a link to game website.

Updating Contact Us form.

Turn pixel.fall section arrow color into black and center-align it.

Convert main titles from div tags to header tags (H1, H2, H3)

Add the following keywords in alt tag of images.

SPS Logo -> sweet-pixel-studios
Home section image -> indie-game-development-pakistan
PixelFall section image -> pixel-fall-ios-android-game
Team section image -> mobile-games-designers-developers
facebook -> sweetpixel-studios-facebook-peshawar
twitter -> app-store-gaming-twitter-pakistan
google -> play-store-google-plus-pakistan

When hovered or clicked upon, the three buttons in Contact Us section disappear.

Change the name of the directories.

sweet-pixel-studios-images
indie-gaming-pakistan-scripts
mobile-games-ios-android-styles

Replace the arrow button in pixel fall section with a nice arrow image.

Can we do this @mubassirhayat ? the currently used arrow icon doesn't go with the theme at all.

Rename website assets i.e. images etc. for better SEO.

Remove navbar's downward motion on hover

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.