AJ for Web Design and Development

My name is Anmar Jarjees, and I'm a Graphic Designer, Web Designer, Software Developer, and Computer Instructor living and working in Toronto, Canada. The pictures above were taken in different locations in Canada using my cell phone.

Read more

My Portfolio

This section includes samples for my Web / SW Development, Graphic Design, and Flash Design (for large screens only)

WEB & SW Development

StatFormula:

This database driven project is about statistical main formulas (The mean, The variance, The standard division, and The median). The project uses PHP for calculating the statistical formulas and it was built using CodeIgniter Framework. CSS3 media queries were used to make the website responsive. Website's members can create their profiles and save their numbers (the values to be calculated).

Technologies:

  • HTML5/CSS3 (Responsive Design)
  • JavaScript/jQuery
  • PHP/CodeIgniter
  • MySQL Database
  • Adobe Photoshop
  • NetBeans / Sublime (IDEs)

BYNO Mechanical:

This was a template for BYNO Mechanical Plumbing.

Technologies:

  • HTML5/CSS2
  • JavaScript/jQuery
  • Adobe Dreamweaver (IDE)
  • Adobe Photoshop

Safe Your Surf (Group Project):

This project is about Search Engine Optimization, Social Media connections, and Google Webmaster tools. As a team of 6 developers we had to chose a topic for a blog website and each one had to write a post about the internet and computer security. In order to demonstrate all these trends in web development, the project was created originally in a separate domain: "www.safeyoursurf.com". Due to the expiration issue of this domain (since May 2016), the project was moved to my portfolio.

My role was designing and building the website, writing the contents, and create the blog template for my teammates to paste their posts.

Technologies:

  • HTML5/CSS3
  • JavaScript/jQuery
  • Adobe Photoshop
  • PHP (MVC Pattern Design)
  • NetBeans (IDE)

HULK:

This project is about a fictional company, it demonstrates the advanced features of Adobe Dreamweaver.

Technologies:

  • HTML5/CSS3
  • JavaScript/jQuery and jQuery UI
  • Adobe Photoshop
  • Adobe Dreamweaver (IDE)

Leave Management System (Group Project):

This project is about creating Content Management System (CMS). As a team of 4 developers, we decided to create a website for employees leaves system. The website has three parts: Public Part, where any visitor can see and it contains the login menus. Employees Part, only for employees to manage their leave. Admin Part, for administrators to control and supervise the employee records or data.

My role was to design and develop the front end and make it responsive using CSS3 media queries. For the back-end, build and design the folders structure of the project as an MVC pattern and create the entire navigation system, create the membership credential for employees and Administrators. A user with an administrator account can Add, delete or change any employees records and change the images in slider banner by uploading or removing images from the slide show.

Technologies:

  • HTML5/CSS3 (Responsive Design)
  • JavaScript/jQuery
  • Adobe Photoshop
  • PHP/MySQL
  • GitHub Version Control
  • NetBeans (IDE)

My Old Previous Website:

The original design for my personal website. The same tools and languages were used to create the current design

Technologies:

  • HTML5/CSS3 (Responsive Design)
  • PHP/XML
  • JavaScript/jQuery
  • Colorbox jQuery plugin
  • Adobe Photoshop
  • NetBeans (IDE)

StatFormula WPF:

The same idea of StatFormula Web Project but this edition was created to be used as a Desktop Application on Windows operating systems. Users can save their values into simple text files on their local machines. In order to run the project you can download the executable file from my GitHub Account

Technologies:

  • Windows Presentation Foundation (WPF) with C#
  • Visual Studio Community 2015 (IDE)
  • Artweaver Free 5

Graphic Design

Logos

Logo Design Logo Design Logo Design Logo Design Logo Design Logo Design Logo Design Logo Design

Flyers and Brochures

Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample

Website Mockups

Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample

The Chaldean Patriarchal Vicariate in Jordan Calendars Samples

Calendar 2006 Samples

Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample

Calendar 2007 Samples

Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample

Calendar 2008 Samples

Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample

Calendar 2009 Samples

Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample

Calendar 2010 Samples

Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample Graphic Desgin Sample   

Flash Animation

GTAFA Demonstration
GTAFA Flash Program Showcase

Primary School Flash Design

The following flash files were designed and illustrated using flash only, no Clip Arts had been added except the cell-phone. The purpose was to help and support different grades of primary school students in understanding their subjects. As a web designer, I had to convert some parts of the curriculums into interesting flash animations making the learning process more enjoyable for students.

Cell-Phone Basic and Main Components
Scientific Experiment: Combustion in Air
Scientific Experiment: Chemical Theories
Scientific Experiment: The Hidden Power
Game: Matching Characters

Case Studies:

Case 1: PHPStorm Laravel Configuration

PHPStrom is considered one of the famous and most commonly used IDE for PHP developers beside NetBeans and Sublime. We can take the full advantage of this IDE when creating Web Applications using Laravel PHP Framework. As a default PHPStorm is not shipped with Laravel features support or plugin installed.

In this article I am going to show you how to install Laravel pluggin for PHPStorm after downloading Barry vd. Heuvel code in two main steps. Notice that this article assumes that you already had installed the required package to run a Laravel project on your local server like composer and Laravel files, if you need more information you can visit Laravel Installation page.

Stage 1:

Step 1:

In your CMD and by using composer, copy the following line from barryvdh's GitHub page and paste it into the command prompt, or just type it:

composer require barryvdh/laravel-ide-helper

You can also use PHPStorm Terminal window (at the bottom of the IDE) to run the composer or Laravel Artisan commands

Step 2:

After creating a new PHP project (contains the initial Laravel folders and files), copy the following line of code from the same page: Barryvdh\LaravelIdeHelper\IdeHelperServiceProvider::class, Then using PHPStorm you need to navigate to the wanted file:

Project Root >> config >> app.php

After opening the app.php file, search for providers array: 'providers' => [...

paste your copied line after 'Illuminate\View\ViewServiceProvider',

'Barryvdh\LaravelIdeHelper\IdeHelperServiceProvider::class',

Step 3:

using CMD or PHPStorm window run the command:

php artisan ide-helper:generate

Stage 2:

After finishing all the steps in stage 1, you should be ready to install Laravel 5 plug-in

Goto to File Menu >> Settings (CTRL+ALT+S for new PHPStrom versions or Alt+F7 for old versions):

PHPStorm IDE Settings window

From the left pane select Plugins category, then in the search box search for laravel

PHPStorm IDE Plugins Cetegory Search

you will see Laravel Plugin highlighted, you can click install now, and then Restart the IDE to complete the installation of the plugin

PHPStorm IDE Laravel Plugin Option

For more details you can visit Laravel Development using PhpStorm

Case 2: CodeIgniter (Removing index file)

When using CI (PHP Framework), you will notice that CI includes index.php in the URL for any link to any file. When you search for this issue by typing: “ci remove index.php from url”, you will see the link to Ellislab user guide that describes how to fix or solve this issue as shown in the image below:

CodeIgniter URL

Now the explanation is very simple and clear, but unfortunately is not complete! In this post I will try to show you what I did to get my project links to work without including index.php in the URL.

Step1:

When you first install CI, you will notice the .htaccess file is inside sub folder called “Application”. You need to move it (.htaccess) to the root folder of your project. For example, if your CI website is inside a sub folder named “myproject”: www.mywebsite.com/myproject, .httaccess has to be inside myprojet folder (directory).

Step2:

Open .htaccess, clear it then write the following code:

RewriteEngine On

RewriteBase /myproject/

RewriteCond %{REQUEST_URI} ^system.*

RewriteRule ^(.*)$ /index.php?/$1 [L]

RewriteCond %{REQUEST_URI} ^application.*

RewriteRule ^(.*)$ /index.php?/$1 [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php?/$1 [L]

ErrorDocument 404 /index.php

Notice that in the second line of the code, the CI website name is myproject. You need to change it based on your project root folder name.

Step 3:

Open config.php file here is the path for this file:

Myproject/application/config/config.php

First:

You will see the following comment plus $config['base_url']

// the config[base url] file is the root folder name and anything before that:

Change the value of $config['base_url'] to:

For localhost (on your pc):
$config['base_url'] = ‘http://localhost/myproject/’;

For your online server:
$config['base_url'] = ‘http://www.mydomain.com/myproject/’;

Second:

In the same file (config.php), you will see the line: $config['index_page'] = ‘index.php’;

Remove the index.php as shown below:

$config['index_page'] = ”;

Step4:

I assume you have your main navigation links inside php template file named header, navigation, or any name you chose. You need to change the links in your main nav to look like this:

<li><a href=”<?php echo base_url();?>mainsite/home”>home</a></li>

mainsite is your main controller name
home is the function name inside your mainsite controller that load home page from the view folder

About Me

About Anmar Jarjees

My Picture: Anmar JarjeesBased on my degree, BSc in Computer Science, I had to study different programming languages. Each language has different test and flavour that let me like programming first. After finishing my university study, I worked as a Computer Technician, I enjoyed troubleshooting, fixing and building Computers from scratch and I liked this field too.

Beside my work experience in computer hardware, I liked to work more in the design field (print and web design) later on. I found this field is more creative, inspiring, and it's not a monotony type of work. Design field is more challenging; it needs someone to come up with different ideas, thoughts, concepts, and philosophies to produce a different design.

Web design and development field combines two skills: Design and Programming at the same time and that's the reason that let me fall in love with this field and joined Web design and Development program at Ryerson University after my arrival in Canada.

Although my experience regarding the back-end web development was initially started with PHP at Ryerson University, but I had started to focus and direct my attention on working mainly with Microsoft .NET platform development especially after joining Microsoft .NET certificate program at Centennial College.

I can imagine that building a web application using PHP or ASP.NET/C# is like playing a piece of music using a piano or a synthesizer. So with PHP, developers will depend on their pure coding skills while with ASP.NET/C#, developers need to learn also all the bells and whistles that come with .NET framework in order to accomplish their masterpiece (Web Application).

Finally, to be a designer and a developer is something great, gives me the challenge to generate my imagination and keeps my knowledge always up to date in this fast-growing field.

Technical Profile

  • Application Software
    • Adobe Creative Suite
      • Dreamweaver
      • Photoshop
      • Illustrator
      • Flash Professional
      • Fireworks
    • Microsoft Office Suite
      • Word
      • Excel
      • PowerPoint
      • Access
      • Outlook
      • Publisher
    • Microsoft Expression Web
    • CorelDRAW
  • Computer Languages
    • HTML/CSS
    • JavaScript/jQuery
    • C#
    • PHP
  • Frameworks
    • ASP.NET
    • AngularJS
    • CodeIgniter/PHP
    • Laravel/PHP
  • Database Management Systems
    • Oracle MySQL
    • Microsoft Access
    • Microsoft SQL Server
  • Content Management Systems
    • WordPress
  • Computer Hardware/Network
    • PC Assembling, Installation/Upgrading
    • Maintenance and Troubleshooting
    • LAN (Ethernet)
    • Peripheral

Professional Experience

Delivered IT courses which include Graphic Design, Web design/Development, Computer Hardware, and Microsoft Office Suite

Created, managed and maintained websites

Installed and configured PC network backup, virus detection and removal, system upgrade, reformatting, and repair of equipment

Education

  • Microsoft .NET Certificate:
    • Centennial College
    • 2015-Present
  • .NET Application Development Recognition of Achievement
    • Seneca College
    • 2014-Present
  • Computer Programming Certificate:
    • Centennial College
    • 2017
  • Systems Analysis Certificate:
    • Centennial College
    • 2017
  • Web Design and Development Certificate:
    • Ryerson University
    • 2012
  • B.Sc. Computer Science and Information Systems:
    • Al-Mansour University
    • 1998

Contact Me