This document is a professional portfolio for Shubhojoy Mitra, an artist, graphic designer, and web application developer. It summarizes his experience creating websites and web applications for international schools around the world. It also provides details on a case study for the Branksome Hall Asia website, which had features like dynamic content editing, distributed content management, and content in multiple languages. Technologies used included PHP, MySQL, JavaScript frameworks, HTML, and CSS. Videos linked in the document demonstrate features of websites developed.

1. Professional Portfolio
of web and graphic design, websites and web applications
shubhojoy mitra
artist, graphic designer, web application developer
IT/ICT consultant (international education systems)
mobile: +91 84780 25903
email: shubhojoy@gmail.com
https://in.linkedin.com/in/shubhojoy

2. Data driven websites and web application for international schools
Websites for various international schools which served as information portals for the public and the
education community —Renaissance College, Discovery College, Victoria Shanghai Academy (HK),
Taihu International School (China), K International School (Japan), Brighton Beach
Primary School (Australia) and Branksome Hall Asia (South Korea)

3. A case study
Branksome Hall Asia, a school in Jeju, South Korea
required a website similar in design to their parent
organization in Canada with some of the following
features:
— Dynamic web portal with extensive content
editing features
— Distributed content management by the staff
community
— Rich content including pictures, videos and flash
applications
— Special sections like picture and video galleries,
virtual tour, calendars, online forms, etc.

4. The website was created as a
one-page application which is
loaded all at once using AJAX
All links were in hashtag
format
#home

5. The content heavy sections had a sightly different layout
than the home and was loaded through animated
transitions in the same view on clicking navigations links
on the menu or other links elsewhere
View video of site features here:
https://youtu.be/nkVPLJKASyc

6. Information on site usage was presented
in custom dialog boxes
The site required content in two
different languages which could be
toggled with icons on the top bar
The site was developed in such a way
that it could also support more
languages in the future

7. Important information or
announcements were presented in
custom popup boxes which could be
accessed using buttons or could be
made to appear automatically on page
load for a fixed period of time

8. Special featured content using scrolling
widget to serve snippets in popups like
shown here (Meet our Alumnae)

9. A customised picture gallery using the
same pattern as Lightbox
See video:
https://youtu.be/mbKihu4DWD8

10. Virtual Tour used an
aerial view of the
school campus with
hyperlinks to display
details and pictures
of each facility.
Viewers could also
see slideshows of
pictures taken at
each location

11. Interactive Calendar of the school is updated
with various kinds of details like information,
announcements, events, etc.
Video: https://youtu.be/58HwJ6P-IOY

12. The contact form in the
website had features like
input validation, AJAX
based data input retrieval
(as in Country field where
the keying in the first few
characters will
automatically fetch a list
of countries that begin
with those letters) and
conditional input box
enabling or disabling:
these are standard UX
features that help users to
enter correct inputs
with ease
See video:
https://youtu.be/XHvo_W
Q_aU8

13. The website featured inline editing of sections and sub-sections using an
Admin Panel which could be accessed by logging in to the website
This distributed content management
system had built-in security following the
best practices in the industry and
WYSIWYG tools for creating and updating
formatted content along with images

14. Each section or sub-section’s
title and content could be
updated using WYSIWYG editor
containing formatting tools to
manipulate text content
Images could also be added in
the content area. Images were
automatically resized to fit the
content area when displayed

15. Technology

16. Technology
Branksome Hall Asia website was created from ground up using a MVC (model view controller) framework
written entirely for it and other projects. It was based on the LAMP stack which makes use of Apache web
server running on Linux server (but can also work for other server OSes), PHP server side-scripting and MySql
database
In the front end, the JavaScript framework PrototypeJS which provides Object-Oriented style classes and AJAX
was used to create client side controllers for page rendering and all other functionalities. Other JS frameworks
and libraries like Script.Aculo.us and JQuery was also used for various functionalities, animations, transitions
and custom widgets
The final views relied heavily on advanced HTML and CSS3
Further development and improvements have resulted in creation of a new MVC framework for building
dynamic AJAX-based websites and web applications called kX (pronounced kix)
An AJAX-based MVC framework for websites and web applications

17. Web design and development
I have designed and developed websites since mid-90s for various establishments and institutions. Here are
some websites I created over the years:
Reach Education Organization
Education consultant

18. Education Advisory
Services
Education
consultants

19. Kyoto International School
Alumni and Friends Network

20. Kyoto International School: Alumni and Friends Network: Timeline
A flash timeline app designed with three layers: the backdrop is an image from old Kyoto from the decade on display.
Images from the archives of the school during that period are placed above it. On the topmost layers, alumnae of the
school can add their own images and other content from their collection or memory.

21. Kyoto International School: Alumni and Friends Network: Flash Timeline

22. Aama ko Bhansa (Mother’s kitchen)
Restaurant/Home delivery service
The design makes use of traditional Nepali fabric prints and
rice paper texture in the background

23. Freya Design Development
Training Institute
the Leather Design Studio

24. Green Apple Leather Design
Theme based on the company’s brand name

25. Gandhi Memorial International School
The first website I created for a school in which I was employed. It had
many features including facilities to create and maintain monthly
newsletter articles, view school calendar, etc.

26. DakKhana.com
Free email to card service launched in 2001

27. KoolIndians.com
Launched in 2000 for Pressman Group, this portal for young
people was a large website with a user base that grew up to
ten thousand during the time it was online for about three
years. It had many sections with content and a social
network called the Kool Klub where users could take part in
online discussions, chat, play many kinds of games which
were developed in-house, take part in contests, use free
email, create e-greeting cards, etc. A team technical,
content and graphics team continuously worked to update
and maintain the website under my supervision

28. Web graphic for Tourist Office (1997)
Older Web and Design (graphics)

29. Web graphic for Tourist Office (1997)

30. Web graphic for Tourist Office (1997)

31. Advertisement for GMIS (2003)

32. Advertisement for GMIS (2003)

33. Website for hotel (1998)
Website for travel agency (1998)

34. Publicity posters for Training Institute

35. In-house newsletter for tech company

36. Application Development
Over the years, I have created many web-based and database-driven software applications for various clients
and institutions. My major work was in the domain of international education. A web-based system, InquirySys
was originally written in 2004 and used by many international schools such as Renaissance College, Hong
Kong, Creative Secondary School, Hong Kong, Kyoto International School, Japan, Kodaikanal International
School, India and Lutheran Schools, Australia for many years and continues to be used in Kodaikanal.
I also managed and helped in development of FolioMaker, a standalone software for PC and Mac platforms for
creating student e-portfolios.

37. Methodology
In every project, my methodology involves generating software requirement specifications and other
documents to aid development, in-depth research on domain, careful planning of software architecture,
maintaining timelines during development, extensive testing, strict adherence to naming conventions, and
creating technical and user documentation. With a background in design and graphics, I put in an extra effort
to make sure the end user finds the user interface and workflow remarkably easy to use and intuitive.

38. Thank you for viewing my professional portfolio
For questions, more details or any other enquiry, please contact me at
shubhojoy@gmail.com