Noel Bray's Front-end Web Developer Portfolio 🙂

Introduction

I hope you're having a great day, and if not, I hope your day starts going very well from this moment onward. : )

Before you skim or completely read through my portfolio please read this...

I want to let you know that I've been doing my best to teach myself HTML, CSS, and JavaScript (the core of front-end web development), and started diving into React by reading, watching, and doing the free tutorials on W3Schools, Codecademy, Freecodecamp, Reactjs, and other sites.

I've been using a little command line to move back and forth between my files, make directories, and copy or delete files with regards to my website's files and related files to see if I could do it (by referring to Computer Hope and the help command).

I'm not a pro yet, But I Believe I Know Enough To Be An Asset To Any Company, Team, Or Individual Who Will Open The Door For Me.

I will do my best to do great work for whoever hires me.

I'm sure my coding efficiency, speed, and abilities will increase as I work with you.

Improve more, I will.

And the more I improve, the greater asset I will be to you.

My Interests

I'm interested in:

• becoming a superb, splendid, pro front-end web developer who develops or helps to develop great websites and webpages as well as apps that follow best practices; are semantically correct, responsive, pleasing and friendly to users and search engines.
• becoming a full-stack web developer cycles through my mind from time to time too.
• becoming a great, proficient coder.
• working with a company, team, or person who will help me continue learning and improving my coding skills, knowledge while I'm working for them.
  
  The more you:
  
  
  • teach me,
  • help me learn,
  • and help me become a better coder,
  
  the more of an asset I will be to you.
  
  
• working with a company that cares about what they are doing, cares about their employees, and cares about customers, people.

I Am Open To:

• learning any coding language that any company, team, or person needs me to learn to accomplish the endeavor.

Important:

• If you're a company, team, or person who is doing any illegal, underhanded, bad manipulative tactics, black-hat coding, or such related, don't bother giving me a call because I will not work with you, y'all.

Achievements:

1. Free Code Camp Curriculum Completed So Far (Click here to see the details):

• Responsive Web Design
• JavaScript Algorithms and Data Structures
• Front End Libraries
• Data Visualizations
• I hope to eventually finish the rest of the curriculum which I believe starts diving into backend web development.

Click here to see my Free Code Camp Profile.

2. Some Codepens I've made as a result of going through the Free Code Camp curriculum so far:

• React Pomodoro Clock (React Hooks, no classes)
• JavaScript Calculator (No eval() , No Math library, Will allow replacement of last operator with operator of button clicked. (2nd Calculator Code.)
• Build A Drum Machine
• Random Quote Machine
• Free Code Camp Portfolio Challenge
• There's more codepens on my codepen account such as several D3 JS Free Code Camp Challenges I've completed.

3. Wrote Navigatable Online Fitness eBook called 4 that anyone can read online for free.

4. Built a static website for a restaurant and am hosting it on my vps.

Check It Out Here:

The BBQ Shack of Fanning Springs, Florida

I did my best to write semantically correct local search engine optimized html code and content for it.

I didn't have photshop, so I downloaded Krita (free drawing software) and quickly learned just what I needed to modify the image I pulled from the restaurant's facebook page to make the background image as well as the clickable "Shack" image at the top-right corner of the website for the mobile version of the main navigation, menu.

5. Rebuilt, refactored, improved the semantics of, and search engine optimized the code for my website (to the best of my ability).

Check It Out Here:

Noel Bray

I improved the HTML, CSS, and JS code for noelbray.com after learning more about those languages and reinforcing what I've already learned about them.

I'm sure as I learn more and continue improving, I'll be able to improve my website even more (There's always room for improvement). Even so,

Here are some improvements I made:

• I did my best to follow the DRY coding principle and reuse code.
• I used flexbox for appropriate element layouts instead of using float because Mozilla Dev. Doc. says that floats were intended to be use for images and such, not for laying out an entire webpage.
• I improved my semantic HTML code even more.
• I wrote basic SEO code and content for it.
• I improved html document flow even more in hopes to make it easier for screen readers to read; and just in case Javascript isn't enabled in the user's browser.
• I did my best to keep the number of HTML elements as low as possible to keep the document as light as possible, uncluttered, more readable, and more easier to maintain.
• I did my best not to overly call on, manipulate, change the DOM with Javascript and appropriately used CSS instead.

6. Created Tic Tac Toe React App Webpage On Noelbray.com

Check It Out Here:

Play Tic Tac Toe,
Wether X or O,
Get 3 In A Row,
And Winner Reward Will Show.

After completing the React Tic Tac Toe Tutorial using creat-react-app, I did the Extra Improvements, Challenges at the end:

1. Display the location for each move in the format (col, row) in the move history list,
2. Bold the currently selected item in the move list,
3. Rewrite Board to use two loops to make the squares instead of hardcoding them,
4. Add a toggle button that lets you sort the moves in either ascending or descending order,
5. When someone wins, highlight the three squares that caused the win,
6. When no one wins, display a message about the result being a draw,

I made up some of my own challenges, improvements for the Tic Tac Toe React App:

1. Create a randomly generated prize phrase when there is a winner,
2. Make the winner declaration and winner reward phrase blink a couple of times when there is a winner,
3. Figure out how to stop the winner and reward phrase declarations from blinking everytime the winning move button is pressed after a non-winning, history-list move button was pressed,
4. With help, Figured Out a way to put the TTT React App on my website after using npm run build in the project folder without knowing, using Node JS or some other backend method because I haven't taken any courses on back-end web development (reason: lack of funds). I may write a post about how I did it.
5. Create a responsive nav menu within the React App for mobile/tablet and desktop to navigate from the TTT React App-webpage to the other noelbray.com main webpages.
6. Create an open and closeable instruction list for users (just in case they don't understand how to the Tic Tac Toe app works).
7. Fix some-kind-of weird thing, bug that was attacking the game-board (which happened in the original code by Dan Abramov).
   Everytime I opened the nav menu or instructions on the TTT app, the bug caused the border-bottom of either the first or second row of divs on the game-board to appear twice as thick as the other row border bottoms.
   Eventually, after much persitance, trial and error, and effort I managed to exterminate the pesky bug (and upon visiting Dan Abramov's code again, it seems he exterminated it too).
   If you want to look at it, here's the updated TTT code pen by Dan Abramov's codepen.io.

7. Completed As Many Free Codecademy Front-end Developer Tutorials and Tutorial Projects As I Could

I took any free course related to front-end web development that was available. And during any Pro free trial, I did my best to complete as much of each course that wasn't availble in the free courses when I took them.

I got fifty-seven percent of the way through the Web Devlopment career path.

I would've completed more if I had the money too purchase the Pro-plan for the Web Development Path.

You can checkout the tutorials and etc. I completed by clicking the link to Noel Bray's Codecademy profile page.

Skillset:

I don't exactly know what power level I'm at for each these languages below, but I know, at the very least, the fundamentals of:

• HTML
• CSS
• JS
• Reactjs(read note *)

I haven't learned and memorized everything in HTML, CSS, JS, and React but I can crawl the web and hunt for the prey I want and consume it.

Other Potential Skills:

I am sure I can learn Git, Bash, and anything else needed for accomplishing a task.

If you hire me and want me to learn another coding language, I will do my best to learn it as quickly as possible.

Some of My Personal Traits (in no particular order):

• Diligent
• Learn By Reading, Watching, Doing, and Asking
• Look For The Positive (as best I can)
• Honest
• Faithful
• Adaptable
• Active (especially physically)
• Encourager
• Generous
• Disciplined
• Earnest
• Teachable
• Sociable
• Friendly

I believe I'm a well rounded person, personality but I'm not perfect by any means and nor will I ever claim to be.

But I strive to do my best.

Some of My Objectives:

• Get hired as a front-end web developer or for some other code related work even if it means starting out with just writing HTML and CSS for a company, team, or someone (you've got to be willing to start from somewhere).
• Finish the Web Developer Path on Codecademy and take other tutorials.
• Create a website for a local produce stand.
• I would like to eventually be able to write code that would replace the SendOwl (Third party selling platform) functionality that is on noelbray.com such as enabling user's to instantly purchase and download my ebooks or download my ebooks at a later time, limit downloads, and etc.

Some Ongoing Objectives:

• Keep improving my coding powers, knowledge, and coding mindset.
• Explore other coding languages.
• Keep improving myself
• Keep doing my best to do my best
• Enjoy life
• Speak truth in love
• Keep doing my best to do right at all times

Some Achieved Objectives:

• Create a business a website and host it on my vps.
• Refactor and improve, or completely rewrite, the code for noelbray.com

Some Things I've Learned

I Don't Have To Memorize Everthing

Until I learned that I didn't have to memorize everything concerning code, my learning speed was greatly reduced, but after taking many tutorials, watching some videos, and reading articles, I learned that you don't have to remember everything...

Whew, what a relief, especially since I was trying to force my mind to remember absolutely everything regarding HTML, CSS, JS, Reactjs, and any other code or etc. I was diving into which was stressing me out.

To Be A Better Hunter

My inner bloodhound has become a better hunter in hunting down information to help me write code and find solutions; and he will continue to get better... Howoooo!

Get To Know Me A Little More

The sound of my fingers clapping the keyboard is very pleasing to me, I like to code... Yes siree. But, I don't like any type of bugs infesting my code, but it feels great when I figure out how to get rid of them.

I like to exercise.
I like to swim, especially in clear cool springs;
I like being active.
I like being around people, but sometimes I like moments to myself too.
I love everyone.

I like learning and improving.

If you have any questions, suggestions of what I should learn based on what you think I would be able to learn and get good at, or would like to know more about me, feel free to send me an email or call me. 🙂

Interested In Hiring Me?