Firas Osachi.
Image in modal.

Welcome!

Light bulb icon.

My name is Firas Osachi. I have certificates in web design and in web development. I also have a B.S. in architecture.

This site contains some of my projects. Please explore them for a demonstration of some of my skills. I also have a widgets site for web designers at www.alternativewidgets.com.

If you would like to contact me, please e-mail me at firasho@hotmail.com, or visit my LinkedIn page.

Thank you for visiting.

Resumé

View/download my resumé as a PDF

Objective

To provide web and graphic support and to continue learning more about web design, development, and programming.

Education

Photograph of Oakland Community College, Royal Oak campus.

Oakland Community College
Oakland County, MI
2012 - 2019

• Certificate in Web Development 2019

• Certificate in Web Design 2014

Photograph of Lawrence Technological University.

Lawrence Technological University
Southfield, MI
1996 - 2001

• B.S. in Architecture 2001

Oakland University.

Oakland University
Rochester Hills, MI
1994 - 1995

• General Studies

Experience

BNP Media.

BNP Media
Troy, MI
2016 - Present

Web Content Specialist

  • Manage web content for several magazines
  • e-Newsletter
  • Social media
  • User support
Results @ Hand Software.

Results @ Hand Software
Bloomfield Hills, MI
2014 - 2016

Tech Support

  • Created and maintained support website
  • Developed tutorial videos and documents
  • Created animated promotional videos
  • Managed data for app
  • User support
Barnes & Noble.

Barnes & Noble
Rochester Hills, MI
2001 - 2012

Sales Lead

  • Customer support
  • Sales
  • Merchandising
  • Training

Skills

HTML5, CSS3, Photoshop, Flash, After Effects, Premier Pro, Dreamweaver, Bootstrap, JQuery, AutoCAD, Word, PowerPoint, Access, Eclipse, Netbeans, Visio, Android Studio, and SQL.

Currently learning more JavaScript, Java, and PHP.

Home | Top

Web Design

In 2012 I returned to college for a career change. I enrolled in the Web Design Certificate program at Oakland Community College in Oakland County, MI. I completed this certificate in May, 2014. In 2019 I completed another certificate in Web Development.

My courses cover the latest HTML5/CSS3 standards, and many Adobe CS6 applications including Dreamweaver, Photoshop, Flash, After Effects, Premier Pro, and Encore. I have also studied JavaScript, Java, C#, and PHP.

My sites are responsive for mobile devices. Narrow your browser window to see the contents adjust, and the main navigation become a drop menu. I also like to create my own widgets.


Alternative Widgets

I created this site as an alternatives to popular code libraries. Unlike JQuery, Bootstrap, and similar plug-ins, these are easy to alter, have a bare minimum of code, and wrap any content. Please explore the widgets. You will find a demo, HTML, CSS, and JavaScript code for each.

Alternative Widgets banner.

Architectural Record

I manage special content for Achitectural Record magazine's website, mostly converting print articles to digital, but also creating unique landing pages.

Architectural Record Logo.

Articles

These are examples of print articles which I converted to digital, with responsive layout, and inline images that can be popped out. The image pop-out widgets are my code.


Landing Pages

Detroit Art Deco

This site is dedicated to the historic Art Deco style architecture of Detroit. Please click the banner below to visit.

Banner and link to the home page of the Detroit Art Deco site.

Results @ Hand Software Tutorials

This site gathers all the tutorial videos and PDFs I made at my previous job, so that our customers could easily reference everything. The videos, narrations, animations, and PDFs are mine, as is the page layout. Please click the banner below to visit.

Banner and link to the Results At Hand support site.

Home | Top

Photoshop

These images demonstrate the use of various tools in Photoshop. Please visit my photography page for more examples of Photoshop enhancements.


Selection Tools & Compositing

This assignment combines objects of varying sizes to create a fanciful scene. Photoshop was used to cut the elements from their original background, unite them in a composition, alter light and tone, and add shadows.

These are the individual photographs.

Composition of the original photos used for this project.

This is the final composition.

The final merged images.

Layers with Transparencies

This project demonstrates layer effects and the ability to use selection tools to remove parts of an image, such as the original interior of this building. There are two overlaid copies of the building image. The top version's interiors have been selected out. In between is a partially transparent image of an aquarium.

The original image.

Photo of a building.

The three layered images.

Image of an aquarium behind a building's windows.

Home | Top

Video

I made these videos for my previous employers at Results @ Hand Software. To create, edit, and add visual and sound effects for these projects, I used the following Adobe programs: After Effects, Premier Pro, Encore, Audition, Photoshop.


Sales Animation for Results At Hand Software

This is an advertisement for my employer, Results At Hand Software. The animation was created with After Effects. The sound effects were found online and edited with Audition. The music is from bensound.com. The script and narration are from the marketing department, but the animation and graphics are mine.

App Introduction for Users

This video demonstrates how conference guests can access their conference app and update their profile. The animation, script, and narration are mine. The music is from bensound.com.

Instructions for App Administrators

This video demonstrates how administrators can add content through the portal and how it appears to users. I used Camtasia for the screen capture, and edited it with Adobe Premiere Pro. The script and narration are mine.

Photography

The web design curriculum included a class in digital photography. These are some of the projects from that class. I used a Canon Sx500 for all of these photos.


Framing, Distance, & Angle

This early assignment required shooting a single scene or subject at various distances and angles. The objective was to learn proper composition and the basic functions of the camera.

Photo of a park in Rochester, Michigan. Photo of a park in Rochester, Michigan. Photo of a park in Rochester, Michigan. Photo of a park in Rochester, Michigan.

Black & White Landscapes

These landscape photographs are in black and white to emphasize composition and lighting. I altered shutter speed for the effects on the water scenes. Photoshop was used for additional touches. I present the last photo here in its original colors since the effects of water corrosion in this scene have produced a striking display of hues.

Photo of a landscape in Rochester, Michigan. Photo of a landscape in Rochester, Michigan. Photo of a landscape in Rochester, Michigan. Photo of a landscape in Rochester, Michigan. Photo of a landscape in Rochester, Michigan. Photo of a landscape in Rochester, Michigan. Photo of a landscape in Rochester, Michigan.

Panoramics

Each panoramic is five photos that were stitched in Photoshop and then warped to create a rectangular form. To ensure consistency across the final combined image, I experimented with aperture and shutter settings. I also adjusted the brightness, contrast, and various tones on each final composite with Photoshop.

These are the original photos with the initial unadjusted composite.

Photos of a street scene in Birmingham, Michigan.

The final image has been stretched, cropped, and adjusted for color and brightness. I also painted out that white car on the left as it was partially wiped out during the stitching process.

Composite photo of a street scene in Birmingham, Michigan.

These are other examples of the same process.

Composite photo of a street scene in Birmingham, Michigan. Composite photo of a street scene in Birmingham, Michigan. Composite photo of a street scene in Birmingham, Michigan.

Light

Natural or artificial light is the dominant feature of these photos. Each photo was only slightly corrected in Photoshop.

Photo of light on water. Photo of light on a building. Photo of light on a building. Photo of a back-lit transparent object. Photo of a back-lit transparent object. Photo of a back-lit transparent object. Photo of a back-lit transparent object. Photo of a back-lit transparent object. Photo of a back-lit transparent object. Photo of a back-lit light bulb.

Home | Top

Drawing

A large part of my early architecture education involved drawing, illustration, and composition. These are some of the projects produced for those classes.



Architectural Sketches

This is a sketch of the Southfield Town Center's hotel atrium, done with charcoal pencil.

This is a sketch of the Southfield Town Center's hotel atrium, done with charcoal pencil.

These are charcoal pencil sketches of the atrium of the Buell Building at Lawrence Technological University in Southfield, MI.

These are charcoal pencil sketches of the atrium of the Buell Building at Lawrence Technological University in Southfield, MI. These are charcoal pencil sketches of the atrium of the Buell Building at Lawrence Technological University in Southfield, MI. These are charcoal pencil sketches of the atrium of the Buell Building at Lawrence Technological University in Southfield, MI.

These two charcoal pencil sketches done at Cranbrook Schools in Bloomfield Hills, MI, are meant to capture small architectural details.

A pencil sketche done at Cranbrook Schools in Bloomfield Hills, MI, meant to capture small architectural details. A pencil sketche done at Cranbrook Schools in Bloomfield Hills, MI, meant to capture small architectural details.

Life Sketches

These timed sketches were done in class, the first three using charcoal pencil, and the last using ink. The first sketch was 25 minutes, the second 15, the third 5, and the last was one minute.

25 minute figure sketch, done in charcoal pencil. 15 minute figure sketch, done in charcoal pencil. 5 minute figure sketch, done in charcoal pencil. 1 minute figure sketch, done in ink.

These sketches were done with charcoal pencils and sticks.

Charcoal pencil sketch of a woman. Charcoal pencil sketch of a hand holding a mirror. Charcoal pencil figure drawing.

These rapidly drawn sketches were done with ink.

Rapidly drawn sketch done with ink. Rapidly drawn sketch done with ink.

Museum Sketches

These are charcoal or ink drawings of statues at the Detroit Institute of Arts.

Sketch of a sculpture at the Detroit Institute of Arts. Sketch of a sculpture at the Detroit Institute of Arts. Sketch of a sculpture at the Detroit Institute of Arts. Sketch of a sculpture at the Detroit Institute of Arts. Sketch of a sculpture at the Detroit Institute of Arts.

Color Renderings

This is a free-hand rendering of the Buell Building at the Lawrence Technological University campus in Southfield, Michigan. Done with markers and color pencils.

This is a free-hand rendering of the Buell Building at the Lawrence Technological University campus in Southfield, Michigan. Done with markers and color pencils.

Drawing exercise using the one-point perspective method of an imaginary exterior. Done with markers and color pencils.

Drawing exercise using the one-point perspective method of an imaginary exterior. Done with markers and color pencils.

These early still life drawings were done in marker and color pencils.

Early still life drawing. Early still life drawing.

Home | Top

Architecture

I have a Bachelor of Science in Architecture from Lawrence Technological University in Southfield, Michigan.

While I never worked in this profession, my education has provided me with an understanding of conceptual design, drawing, composition, and AutoCAD. Below are some of my academic projects.


AutoCAD

AutoCAD drawing showing a site plan of a subdivision.

AutoCAD drawing showing a site plan of a subdivision.

3-D AutoCAD exteriors.

3-D AutoCAD exterior.
3-D AutoCAD exterior. 3-D AutoCAD exterior.

3-D AutoCAD interiors.

3-D AutoCAD interior. 3-D AutoCAD interior.

Lake House

This design is for a house on a narrow lakefront lot in Waterford, MI. The interiors are on a 45 degree angle to optimize the lake view along the north side of the lot.

Lake house model. Lake house model. Lake house floor plans.

Ford Visitors Center

A “bridge” building spanning the entrance of the Ford Rouge Plant in Dearborn, Michigan. It includes showrooms, offices, classrooms, and shops for employees. The building was designed to be environmentally friendly, featuring natural lighting, heating and cooling. This was a two-person project.

Ford Visitors Center model. Ford Visitors Center model. Ford Visitors Center model. Ford Visitors Center model. Ford Visitors Center model. Ford Visitors Center elevation. Ford Visitors Center section. Ford Visitors Center floor .

Detroit Technological Complex

This large project is located along three sites in downtown Detroit. Eight towers create a sense of life and activity in an otherwise abandoned area.

Detroit Technological Complex

3-D AutoCAD rendering of the Detroit Technological Complex.

Site 1: Office Towers

3-D AutoCAD rendering of the office towers of the Detroit Technological Complex.

Site 2: dormitory Towers

3-D AutoCAD rendering of the dormitory towers of the Detroit Technological Complex.

Site 3: Residential Towers

3-D AutoCAD rendering of the residential towers of the Detroit Technological Complex.

Model: Complex

Model of the Detroit Technological Complex.

Model: Office Towers

Model of the office towers of the Detroit Technological Complex.

Model: dormitory Towers

Model of the dormitory towers of the Detroit Technological Complex.

Model: Residential Towers

Model of the residential towers of the Detroit Technological Complex.

Sketch: Complex

Early sketch of the Detroit Technological Complex.

Sketch: Office Towers

Early sketch of the office towers of the Detroit Technological Complex.

Sketch: Residential Towers

Model of the residential towers of the Detroit Technological Complex.

House Renovation

Unlike all other projects on this page which were for school, this was a real life project for a client who wanted to turn an abandoned Detroit house into a real estate office. My job was to measure the site and house, design a new code-compliant layout, and create a presentation for a zoning board.

House in Detroit.

Exterior photo of the house in Detroit.

Existing floor plan.

Existing floor plan of the house in Detroit.

Proposed floor plan.

Proposed floor plan of the house in Detroit.

Home | Top