After drawings and gathering materials needed, the cutting process begins; this picture is just a representation of that.

    Most of the project materials came from unused/extra pieces on other projects, just trying to recycle as much as I can. This pic is the finished bookcase cabinet with a custom shelve, pre-sanded.

    This custom shelve was also meant to be a built-in and was therefore attached post-finishing and pre-installation. It was made using, banded, 3/4 plywood and attached to the base cabinet through the back.

    The custom, open, base cabinet (post-sanding) that will carry the custom shelve made and which also has a custom frame made with 45° angles and legs.

    All the items for the first phase including the stained top and kneespace.

    The same items with a different angle.

    Same items but with the custom shelve inside the base cabinet.

    Shelve inside cabinet with a different angle.

    The second phase of the drop zone is the wall cabinets with its backs that will later be attached after they're painted.

    Wall cabinets up close on the curved header cut.

    The main foundation of the project is installed with the four main sections painted and stained pre-installation. Also viewed is one of the panels and a custom desk piece for the center.

    After the main foundation, came the smaller pieces, shelves and rod/rod support.

    This is just the wooden rod stained ebony.

    The crown molding was attached afterwards to the cabinets.

    The hardware were the last pieces added before touch up; this is the final product for the dresser cabinet.

    The final product for the open, hanger, top cabinet before touch up.

    The final product for the custom, open-frame, bookcase cabinet before touch up.

    Completed product for the shelving top cabinet on the drop zone.

    The final project as a whole, including the kneespace, before the touch up process.

    This is some wording about the image selected . que el blah blah blah. que el wiri wiri wiri. que el blah blah blah blah. que el wirir wiwoiw sffgfbfmgbfjbnjdfb dfvkjnfgbjnjkfg kfdjjfv kfvgjsf skifgv mnsfjnb

    This is some wording about the h blah blah. que el wirir wiwoiw sffgfbfmgbfjbnjdfb dfvkjnfgbjnjkfg kfdjjfv kfvgjsf skifgv mnsfjnb

    This is some wording about the image selected . que el blah blah blah. que el wiri wiri wiri. que el blah blah blah blah. que el wirir wiwoiw sffgfbfmgbfjbnjdfb dfvkjnfgbjnjkfg kfdjjfv kfvgjsf skifgv mnsfjnb

    This is some wording about the image selected . que el blah blah blah. que el wiri wiri wiri. que el blah blah blah

    This is some wording about the image selected . que el blah blah blah. que el wiri wiri wiri. que el blah blah blah blah. que el wirir wiwoiw sffgfbfmgbfjbnjdfb dfvkjnfgbjnjkfg kfdjjfv kfvgjsf skifgv mnsfjnb

    This is jjfv kfvgjsf skifgv mnsfjnb

    Thie el blah blah blah blah. que el wirir wiwoiw sffgfbfmgbfjbnjdfb dfvkjnfgbjnjkfg kfdjjfv kfvgjsf skifgv mnsfjnb

    This is some wording about the image selected . que el blah blah blah. que el wiri wiri wiri. que el blah blah blah blah. que el wirir wiwoiw sffgfbfmgbfjbnjdfb dfvkjnfgbjnjkfg kfdjjfv kfvgjsf skifgv mnsfjnb

    This is some wording about the h blah blah. que el wirir wiwoiw sffgfbfmgbfjbnjdfb dfvkjnfgbjnjkfg kfdjjfv kfvgjsf skifgv mnsfjnb

    This is some wording about the image selected . que el blah blah blah. que el wiri wiri wiri. que el blah blah blah blah. que el wirir wiwoiw sffgfbfmgbfjbnjdfb dfvkjnfgbjnjkfg kfdjjfv kfvgjsf skifgv mnsfjnb

    This is some wording about the image selected . que el blah blah blah. que el wiri wiri wiri. que el blah blah blah

    This is some wording about the image selected . que el blah blah blah. que el wiri wiri wiri. que el blah blah blah blah. que el wirir wiwoiw sffgfbfmgbfjbnjdfb dfvkjnfgbjnjkfg kfdjjfv kfvgjsf skifgv mnsfjnb

    This is jjfv kfvgjsf skifgv mnsfjnb

    Thie el blah blah blah blah. que el wirir wiwoiw sffgfbfmgbfjbnjdfb dfvkjnfgbjnjkfg kfdjjfv kfvgjsf skifgv mnsfjnb

    A responsive, Bootstrap nav bar that includes hover effects for the nav items, a smooth, navigation transition on each nav item click, and also, for desktop view, a change of height for the nav bar that fires when you scroll down. The banner is a 2-column split that hides the left side(Colorado view) on small devices but has a parallax feature on desktop view. The right side is just a quote from one of my favorite books. I intend to upgrade this in the future to a quote that changes either daily or weekly with javaScript or jQuery.

    Contact section is a simple, 2-column split with a Bootstrap card(profile picture) on the left side and 2 contact buttons underneath. A right side that fires when scrolled into view using JavaScript with fade-in features made with CSS.

    The first section header that fires when scrolled into view using JavaScript.

    An About Me section that I plan to add more pages and info to and styled as a responsive image grid via CSS. It has a hover feature on laptops and desktop computers and permanently on small devices.

    Hover feature for the About Me section.

    A horizontal rule that splits the About Me and Projects sections and is styled with a gradient grey using CSS.

    The main part of the projects section which contains an image carousel that opens up a modal, image gallery on click for both desktop and small device views. The section also contains some small, call-to-action buttons for a future online store that I'm currently working on, via WordPress and its WooCommerce plugin, and for my github page where I have most of my past coding projects and more. It's split into 2 columns using Bootstrap.

    The Projects section modals include a customized, advanced, Bootstrap, carousel that shows 5 items at once on desktop view and which are, also, connected to the tab panes on the top part of the modals and so are used as dynamic tabs. The modals are also customized to show the logo I created.

    The second section header that fires when scrolled into view using JavaScript.

    The Skills section is subject to change for a simpler service approach but is currently made from: 5 columns & 2 rows out of Bootstrap, multiple call-to-actions, several progress circles using Canvas and CSS width bars.

    The bottom part of the skills section, which features two buttons with a hover feature.

    Hover feature on skills section buttons.

    The page footer featuring several hover features and customized tooltip hover features for the social media buttons.

    Footer section hover for social media buttons.

    Nav item hover feature.

    Nav item hover feature.

    Responsive view of Web page header which features a sticky, Bootstrap nav and its social media buttons the Colorado image is hidden in this view.

    The nav bar opened to show the nav items which are customized to show a smooth scroll to its specified location within the web page using JavaScript. The nav bar itself is also customized a bit, just to close itself after each nav item click and, also, anywhere but the nav bar.

    The responsive view for the Contact section.

    The responsive view of the About Me header.

    Responsive, About Me image buttons with overlays using CSS.

    Responsive, About Me image buttons with overlays using CSS.

    Responsive, About Me image buttons with overlays using CSS.

    Responsive, About Me image buttons with overlays using CSS.

    Responsive, About Me image buttons with overlays using CSS.

    Responsive, About Me image buttons with overlays using CSS and the horizontal rule.

    Responsive view of the Projects section for the woodworking area.

    Responsive view of the projects section for the coding & web area.

    The responsive view of the project modals that fire on click for the carousel items. The tab panes are hidden in this view and just shows the carousel items.

    Skills Section header in responsive view.

    The HTML area in the skills section on responsive view.

    The Style & Design area in the skills section on responsive view.

    The Responsive area in the skills section on responsive view.

    The JavaScript area in the skills section on responsive view.

    The Other Programming area in the skills section on responsive view.

    The Desktop Applications & Other Tools area in the skills section on responsive view.

    The Woodworking area in the skills section on responsive view.

    The Soccer Officiating area in the skills section on responsive view.

    The Wood Spraying area in the skills section on responsive view.

    The Others area in the skills section on responsive view.

    The footer section of the web page in responsive view. The menu and social media buttons are hidden.

    This is a second variation of the logo which shortens the services into an acronym that resembles "www" , as web services are part of the company. This is just a prototype and will not be used.

    The third variation of the logo is only the custom "S" that was created from the drawing and was then cut out using Photoshop and digitized. For now, it is only being used as the favicon for the companies website and future websites.

    Hand drawings of how the custom "S" for the logos came about.

    Services & Skills tab contains 2-column containers with services and skills info that is bullet-styled & call-to-action buttons at the end.

    Projects tab is a container card that can be flipped for the back side, using jQuery. Each card contains a 2-column split with an automatic gallery playing on the left & on right side, a heading, call-to-action button, and the jQuery button transition that was also made with CSS for part of the transition.

    Back side of the Projects tab card that was flipped with the jQuery button. Contains the same content as the front side with a change of galleries and projects.

    Contact tab contains a heading at the top & a 2-column split with 2 small containers, as contact buttons, at the bottom using icons and links.

    About section contains 2 headings for double services and a call-to-action button at the bottom.

    Services area is made up of a 4-column section with headings and icons that match the services.

    First section of the portfolio segment includes a grid gallery on three columns with hover effects on each item.

    Middle section of the Portfolio segment includes a call-to-action button and some gallery descriptions that are positioned accordingly. Third section of the Portfolio segment is the epitome of the first section, so, did not include in gallery.

    The Contact segment includes a simple heading with contact buttons, that also come with icons, underneath that are on a 2-column split. As shown, the social nav bar stops perfectly at the footer.

    This web page is also viewable on small devices with no major changes to the layout aside from the position of the fixed, social nav bar and the main nav bar collapsing since it is a Bootstrap nav.

    This web page is also viewable on tablet devices with no major changes to the layout aside from the position of the fixed, social nav bar and the main nav bar collapsing since it is a Bootstrap nav.

    Nothing was updated on this part of the web page.

    On this Service segment, the main heading was changed to reflect their actual services and moved the terms, "new builds & remodels" to the service quote underneath it instead so the service quote was re-worded as well.

    Process segment was only updated a bit with the 5th step being changed to "Install" and an addition of a call-to-action button to link to the services page.

    Added this contact segment to the Home web page with forms and some business info. Also, on the footer, added a privacy policy web page and plan to add a terms of use page since their current website was in major need of the 2 pages. The website creators and copyright was updated as well on the footer.

    A new Privacy Policy page was added to their current website with information pertaining to users privacy info and the information collected.

    Not much was changed or updated from the About Us web page aside from some wording changes and minor position changes. The title for the main heading was updated to be viewed better in smaller devices as well.

    There were several phrasing changes made to the paragraph in the hero banner of this page and a font-size change on the last phrase.

    Nothing much was updated from the quotes section, apart from, small, responsive mode and position changes to some words.

    Several wording changes were the only things updated from the About Us paragraph to make for better SEO and to match services for Gus Cabinets & More.

    The footer is kept same on all pages so the updated is kept on this footer as well.

    The Services web page had many updates and changes including adding links, pages, CTA button, additional service info, and updating wording & responsive view positioning. The title on the main heading was also updated for better viewing on smaller devices.

    On the CTA segment of the Services web page, the two main paragraphs and titles were updated with wording changes and the additions of the paragraphs itself since they were originally hidden. Both the links on the buttons were also updated as they were broken and did not lead to anything.

    The main titles at the beginning of the process section were changed to match their services while the titles of the column segments were also changed for spelling better wording. Pictures were changed on the middle and right columns to nicely match the titles.

    At the column segments of the process section, the paragraphs were slightly updated with better wording but mainly with responsive issues, as the format was inconsistent in smaller devices.

    At the end of the Service web page, an addition of services was added to the process segment that kept the same style of paragraph from the the earlier paragraphs but only on a single, centered, column. A short CTA was also inserted to the end of the web page and the footer itself is still kept the same on this web page.

    An information page to help the user know a little bit more about their top service, custom cabinets, and be a trusted source. It is a bit of information and will be provided whenever the video is created. Design overall of the web page was kept the same and a contact segment was added near the end.

    A short menu of the content in bullet-styled form.

    Another contact segment was added to the footer of the Information page with the footer also being kept the same.

    Majority of the Galleries web page was updated including all the alt descriptions and the hover image buttons, with the inclusion of other galleries as well. Time was also spent updating its items on responsive view.

    All the hover image buttons were updated, including ones I did not add, as they were only clickable on the title and the hover animations were a little delayed. All the images' alt descriptions were also updated.

    The hover image buttons that I personally added with layout staying the same and gallery web pages created to link from the image buttons. All the image buttons needed updating as well on smaller devices.

    Updated both, hover and still, images for the Process image button.

    Created a video gallery for their website that includes two, high-quality, videos, specially made for Gus Cabinets, on a modal, including in smaller devices.

    Created a gallery from its social media handles that includes images with descriptions and will include its social media videos soon, all inside a modal that fires when clicked on any image button from the gallery. A, small, CTA was also added to the very end of the web page to suggest users to follow them on social media; the footer was kept the same.

    The hover animation will soon be viewable on video but this image does show its final stage of the animation.

    The video modal that fires when a video is clicked on with a carousel at the bottom, the video and its playback info, and a link for sharing.

    An image, modal, gallery for all the social media images with their descriptions and hashtags.

    Made web pages like this one for every hover image button added to the Galleries web page. The design was kept the same from the previously added image buttons. The header consists of a background banner-styled picture with a title box, centered. The nav and fixed box were also kept the same.

    The web pages also carry carousels for the rest of the project images that opens up a gallery modal whenever an image is being clicked. The footer was kept the same.

    A gallery, carousel, modal that fires up whenever an image is clicked from the carousel gallery on each of the Project pages. Titles & descriptions were also added to the modals.

    Not a lot was changed from the Contact web page and the header was almost kept the same as well with only the first title heading being updated with its phrase.

    Only the wording and e-mail were updated from the call-to-action section of the Contact web page. Its responsiveness was also updated in smaller devices.

    Added a short paragraph to provide a business description to the Contact web page with an extra call-to-action.

    The footer and maps location was kept the same.

    The Sign Up page was made with several back-end features including password encryption, user roles, controllers, models, services, repositories, and configuration. This page was also made with the Web Security & Thymeleaf dependencies.

    The Sign Up page uses the Web & Security dependencies to check for e-mail validation and password encryption.

    Created a home page for all the tweets in the timeline with a tab that just shows tweets from accounts you follow. The page also has a nav bar that carries links to the Home, Users, your account, and New Tweet pages. The nav bar also gives you a link to logout of the current session.

    The tab for the tweets of the accounts that you follow with the nav bar being kept the same.

    Users page which features 3 tabs with the home tab showing all the users, a Followers tab, and a tab to show the accounts you follow. The tab shows the accounts in list-style form with the username and full name to the left and a follow button with number of tweets to the right.

    The Following tab that shows the users you follow with the accounts still being in list-style form and the nav bar being kept the same as well.

    The Followers tab would show a list of accounts that follow you but as there is none, a message appears instead. The nav bar was kept the same in this page.

    The tweet page was created using several, coded, tweet packages including a model, repository, service, and a controller package. The interface features a form that handles the tweets with a submit form that handles the requests. The nav bar is still being kept the same.

    A message appears when a tweet has successfully been created.

    The updated home page for all the tweets since I had just created a new tweet. If noted, the Account page has not yet been created.