• Repository Description

• User Story

  • Employer
  • Potential Employee
  • Developer

• Overview: What We Accomplished!

  • Workflow
  • Screenshots
    • Ideal Demo
    • Application Created
    • CV
    • Resume
  • HTML
  • CSS

• Repositiory End-Goal Criterea

• Future Project

  I hope you enjoy the repository, below (I love developing new projects). Please feel free to fork and even collaborate with me on this awesome repository! Thank you for viewing! - Frederick Thomas, Super Coding Ninja™

  Repository Description

  Back to Table of Contents

Have you ever considered creating a portfolio? Whether you're looking for a partitime position, or even, landing a full-time career, a portfolio can assist you in showcasing talents ad skills. You will know that you have an effective portfolio, when you strengths are highlited, along with displaying your thought process (don't just commit your git Devs., explain what you are doing/attempting to accomplish). People who take the time to create a portfolio, often have web applications deployed (live urls, webpages, web sites, content on the web); and these same individuals are typically those successful in their career search (whether it's after an educational institution, coding bootcamp, self-taught studies, etc.): becausemany companies and employers require canidates for hire to have several web applications/projects deployed, as a minimal satndard to recieve an intial interview. If you have not done any of this, and you're wondering why it seems you're overlooked by potential employers, this may/may not be the reason: so, I encourage you to consider this repsoitory, and take it to heart. In order to be a successful developer, you must act and believe you are one ("Feel until it' real"- Dr. Eric Thomas). Remember this also, as a developer, your goal should be designing experiences that makes people's lives simple; because as developers, we solve problems that people didn't even knew they had, even better, in a way that they did not understand: We are the super heroes and heriones of tomorrow; so get coding, and I hope this repository helps you along your development. - Frederick Thomas, Super Coding Ninja™

1.   I want to view a potential employee's deployed portfolio of work samples.
2.   I want to load their portfolio.
3.   I want to be presented with the developer's name, a recent photo, links to sections about them and their work; and how to contact them.
4.   I want to be able to click one of the links in the navigation; and verify that the jumps to the corresponding section.
5.   I want to scroll or navigate (link) to the corresponding section, and click on the link to the section about their work, I want to see a section with titled images of the developer's applications.
6.   I want to see the developer's first application larger in size, than the others.
7.   I want to be able to click on the images of the applications, and be directed to that deployed application (live url, etc.).
8.   I want to see a a responsive layout that adapts to my viewport, when I resize the page, or view the site on various screens and devices.

1.   I want the employer view all my deployed applications.
2.   I want the employer to load my portfolio; and navigate with ease, to the appropiate links and sections.
3.   I want to showcase my first work; and highlight my better work below (showing growth, and teamwork on team projects, etc.).
4.   I want my employer to see a responsive layout that adapts to any viewport: when the page is resized, or site can be viewed on various screens, and devices.
5.   I want the employer to see and remember my name, phot; and how to contact me- and I want to ensure the employer is able to contact me.
6.   I want my CVV to be able to be viewed.
7.   I want my contact info to be live; and for the employer to have te ability to email, call, or contact me via various media outlets provided.
8.   I want to land the job on "HELLO WORLD!"

1.   I want to ensure I use proper semantics; and simplify my CSS file.
2.   I want to ensure my sections are properly indented.
3.   I want to ensure the applications are responsive to most viewports/devices.
4.   I want the resources not to hinder the site's load time.
5.   I want the applications being showcased, to open in another tab or window: that way the employer can remain on the portfolio; because the work desired to be showcase has nothing to do with the portfolio, necessaroliy.
6.   I want to style the first application, larger in size than the others.
7.   I wnat to ensure the the developer's name, a recent photo, links to sections about them and their work; and how to contact them, are all on the website.
8.   I want to ensure the contact information functions, correctly ("email me," etc., works or performs its function).

1. NPMjs provides Documentation, Installation, Examples, Methods, Objects, Questions, Answers, Separator, Prompt Types, User Interfaces and Layouts, Reactive Interface, Support, Known issues, News, Contributing, License, and Plugins.

2. Shields IO provides documentations on how to add your shield, for creditbility. Please feel free to view this resource, for your future developments.

3. .saas || .scss || .css The comparisons and usages of Syntactically Awesome Style Sheets, SassScript; and Cascaded Style Sheets.

4. SAAS || CSS

5. "CSS w/Super Powers"

6. Eloquent JavaScript, 3rd edition (2018) This is a book about JavaScript, programming, and digital wonders. Read it online here; or get your own paperback copy. Written by Marijn Haverbeke. Licensed under a Creative Commons attribution-noncommercial license. All code in this book may also be considered licensed under an MIT license.

7. Guide to Handlebars: Templating Engine for Node/JavaScript explains that express is a routing, and middleware is a web framework; which has minimal functionality of its own (express applications are series of middleware function calls).

8. Using Middleware and Express Guide to Handlebars: Templating Engine for Node/JavaScript, by Janith Kasun helps you understand Template Engines, Handlebars; and how to use them!

9. Web Application Architecture describes architecture, Models of Web Componets,Types of Web Application Architecture; and Web App Development Tips!

10. Markdown Syntax provides documentations on how to add your shield, for creditbility. Please feel free to view this resource, for your future developments.

11. eCommerce Styles & Ideas - How to Code an Ecommerce Site (Week 10 of 12) by Mackenzie Child - 10 stunning hover effects with sass by Renan C. Araujo

12. [“ui-illustration-business-people-concept“](https://www.freepik.com/vectors/background]

13. ["free-vector-human-silhouette-14.htm"](http://clipart-library.com/clip-art/free-vector-human-silhouette-14.htm/]

14. “free-vector-human-silhouette-11”

15. “8Tx85kXTp”

16. Create vectors at https://vectormagic.com/

I am greatly apreciative for my peers and those within my network, across the world. I actually first attempted to do this My personal portfolio using Typescript, ReactJS (including awesome Parallax approach), SAAS; and much, more! I had trouble getting my server-side express server setup. I am still going to pursue this route, even though my intentions are to keep this portfolio active, and alive (you can never hve too, many portfolio's: think about appealing different temperaments). Feel free to check out my progress, here.

I would like to personally thank Andrew Olson for his awesome peer code review for v.4 of my Online Portfolio.

I also would like to thank my new addition to my global network, Soumyajit Behera, whose some of his approach; such as the utilizing the ReactJS Typewriter Effect, I also I patterned; and I hope to become a contributor by some of my own ideas. Although, I chose a different than Soumyajit, concerning the Particles.js - React Component - can you honestly blame me: there's so many ways you can aachieve lines, or no lines, speed, shapes- it's FUN just watch the effect for hours; I should carefully note that his approach easily intrigues the eye (it did with my own), as Soumyajit's approach to the speed makes his images appear to move at a much faster rate the particles fixed in a position; which to the end user (non-developer), the backround appears to be fixed, but in turn, it's actually where the particles pixalted that are fixed; and the Parallax scrolling coupled with an animated background: linear-gradiant(), moving from one direction to another makes it appears otherwise (where and what are your eyes fixated on). This is which an actual fixed background image, has not been accomplished in ReactJs: you have to use relative- not the same effect most would hope for, who would use parallax coupled with a fixed object. Okay, I'm also a big fan of Vincent Garreau'slightweight JavaScript library for creating particles; and you can easily download it from his website here! Be sure to check out Soumyajit's approach, here; and even connect with Soumyajit (very, nice indvidual)! Although I like the choice of color pallette, I chose a more warm and enertic feel- something that makes you pop and feel vibrant as you scroll through the page content, and navigate through the website. Although, I still feel it is highly rough around the edges (particuraly the navigation bar), I truly feel that I accomplish both, a better parallax feel through the increase speed rate of my particles, the large amount of particles, the contrast and complemtary choice of colors (which were variant concerning the pages and their size), the divers elements and their attributes chosen for each page content (I used a larger and real image to make the swivel more apparent- I even told the user to dance with the image); and my favorite and not least, the choice of colours icreased rate and amount of particles elements seems to make the user feel like they are looking through the a window, in a vessel moving, as colours change to a more warm feel. I actually thought a spaceship was turning the sun, at one point, concerning a particular point. Enough Easter Eggs! You'll have to view the application, yourself, here!

University of Washington, and Trilogy Education (a 2U, Inc. brand), in coorelation to their Seattle Partnership UW Coding Bootcamp.

1. Created a responsive menu.
2. Created responsive phrases.
3. Ensured that the phrases would not affect the navigation menu.
4. Added warm images of author.
5. Ensured resume opens in different tab.
6. Ensured contact information works; and will contact author!
7. Updated works created; and ensured works are also featured in GitHub.
8. Ensured page menu works.
9. Created a clean and responsive portfolio!    

Given that we met our Users' Stories, we want to accomplish the following criterea (see demo):

1.   Deploy a live url from this application.
2.   Our application loads with no errors.
3.   Our GitHub repository contains application code (showcase your work and thought process).
4.   Our application resembles the mock-up functionality provided in the demo can we follow the designer's plan, even if you do not like it).
5.   Our repository should have a unique name.
6.   Our repository follows best practices for file structure and naming conventions.
7.   Our repository follows best practices for class/id naming conventions, indentation, quality comments, etc.
8.   Our repository contains multiple descriptive commit messagesm(again, showcase your thought process).
9.   As you've seen in my repository, it's a good idea that your repository contains quality readme with description, screenshot, link to deployed application.

I will be creating a Code Generator, incorporating Javascript, next week! Expect to see:

1.   I will show you how to randomly generate a password, that meets certain criteria.
2.   I will show you code for creating a button (perhaps, even some cool, gradiant styles).
3.   I will show you promots, and alerts, much, more; so follow me!

Please feel free to fork and even collaborate with me on this awesome repository. Thank you for viewing! - Frederick Thomas, Super Coding Ninja™ 2014-Present All Rights Reserved