Portfolio Site (Front-End Web Developer)


Personal

Updated Aug 29th, 2021

Site Stack:

Portfolio Projects Demonstrating Skills:

Other: fictional marina, fictional hotel, plants directory.


Content

Languages:

Javascript – JavaScript is the only language that runs in the browser. Separate from the basic brochure sites with functionality. ES6 stuff like let, const, arrow functions, classes, promises, asynch/await, higher order array methods. Getting data via Fetch API (or the Axios library) and JSON.

CSS – Vanilla, Flexbox and CSS Grid. SASS and PostCSS. Spent some time learning motion graphics so animation concepts should be quick to pick up.

HTML – Coded first website back in 2007 probably with brandonvisokay.com

Version Control – Git and GitHub. Automatic Deployment to Netlify.

WebPack – Familiarity with using bundles and writing modular code.

Figma: Vector illustrations, the pen tool, SVG, crop, compress images. Everyone needs to put there design hat on once in a while.

WordPress – I’ve been creating in WordPress casually for over a decade.

Php – Most of my experience in the web for the first decade was WordPress related and so Php allowed for more advanced customizations

Excel – Power user. Not sure if this is portfolio dev site appropriate but mind as well.

Skills to Hold Off on For Now

Python – Multipurpose language to read and write files and automate tasks was a big one. Didn’t venture too far into the language though, creating scripts to Autorun reports was pretty awesome. Django, Flask? Reddit is built on python? Machine learning.

SQL – would like to configure a database to a CRUD app outside the WordPress ecosystem (ideas: notecard app or quiz app). All this big dad I need to be stored somewhere. Great job outlook for database administrators.

React – Nothing yet, hold off on frameworks until a base project created

Web Scraping: Pull data for analytics use. Run a/b tests, run tests on your apps. Automate simple tasks like log into multiple sites and drop data into google sheets.

TypeScript – Learn It

Rest API – Using WordPress as a CMS, (Ideas: do a project using WordPress as a headless CMS.)

Open Source – Any contributions I can make. Anki? Other?

Local Dev Community – Any Meetups

VBA – Macros in Excel save a lot of time in the spirit of automation. The record macro tool makes this less of a programming skill. Any advanced excels user needs to know how Macros run

Adobe Creative Cloud – An interest in timelapse photography and motion graphics led me to After Effects, Illustrator, and Premiere Pro. By no means an export but I can rock the pen tool and render some stuff out of the media encoder.

Data Visualization (d3.js) – Good idea for 100 days of code.

About

This can be a blurb with a heading but may be a good place for the mad-libs thing to get away from the standard title blurb format.

Blurb #1: I have been building experiences (creating) on the web for businesses and non-profits. I love to turn time-series data in actionable insights that drive business results. My background is in customer service, operations, and finance.

Blurb #2: Building on the web to help business and non-profits reach their goals.

Self-Educated Developer:

Rename the Heading to remove focus on self-educated fact.

Blurb #1: Over the last six months I turned my focus 100% to increasing my skills as a developer. The technologies I use daily are, HTML, CSS (Sass), Javascript (ES6+), GIT, WebPack, WordPress, and Figma. Interested in all things web design, development, and programming.

Blurb#2: The technologies I use daily are, HTML, CSS (Sass), Javascript (ES6+), GIT, WebPack, WordPress, and Figma.

Experience / Background:

Customer Service Director

Functional Manager

My background is in customer service operations and finance. deliver an exceptional customer experience. I am a data nerd and love to turn time series data into actionable insights that drive business

Education:

Hold off on promoting Self-Education with Free Code Camp? Udemy Classes?

Content Ideas

Idea: Mad-Libs Style Type-On Effect

Idea for Portfolio Site: have adlibs-style blurbs to describe me that refresh on page load. Maybe with Type-On effect

I’m an (adj.) (Noun) that likes to (verb) and build (adj) (noun). When I’m not buried in video tutorials I’m usually (verb) (noun).

Interested in: paddle-boarding, guitar, macroeconomics, data analytics

Excel Nerd. Spreadsheet lover. Like to geek out on time series data.

Passionate about data and animation. Animation infographics in the browser.

Hero Greeting

Idea #1: Hello. I’m Brandon. Front-End Web Developer

Gifs of ScreenShare Vids?

I feel like this can be a good way to demonstrate skills in code, excel, python.

Make this my own (credit: Carrie Forde): I use these technologies on a daily basis: HTML CSS (and SASS) JavaScript ES6, GIT, Webpack WordPress, Figma. Use Technology Icons or Images?

Should I do a 100 days of code project for portfolio site? Great way to showcase skills. Easy way to bulk up github and code pen as well. Start with 10 days of code and let it grow. Games are a good way to prove your ability and they’re also pretty fun. PureCSS images are a good idea for this. Simple games. Simple websites.

Off to the Races: A line from the full-stack course may be good with a background-image of a horse/track/race. Brad said we understand JS (and html/CSS), the web browser environment, NodeJS environment, MongoDB environment, Hosting Node Server on Heroku (added by me) then we were “off to the races.”

Theme switcher would be a good idea for the portfolio site. Checkout the fireship video. Or World Ranker. Sun and Moon emojis or similar as icon.

Custom duotone icons are totally necessary. Get in Figma and bust them out or start with a base from that one site.

Fade-in Animations are necessary. Find some micro animation opportunities as well, (submenu carats, toggling mobile menu)

Lazy-load images: This is a big deal to keep pages loading fast.

On-Click Functionality is needed: Show that I can do more than just build a brochure site.

Background-url images and gradients: Some more advanced CSS Styling techniques.

Contact Form: using next api to save in MongoDb and automatically sends email via SendGrid. Could also just use Netlify Forms.

Scroll Progress Border Bottom Feature: Good Project for the 25 days of code.

Custom scroll bar: tracks and thumbs and such.

Back to Top Feature: Good Project for the 25 days of code.

Posts in Markdown: to show ability to SSG and display code snippets.

SVG: Let the SVGs fly with svg background images (city scape), wavy div borders, bottom right div accents (Bill E. example).

MicroAnimations Ideas: Things on necktie for professional experience. Spinning Brain or neurons firing for education.

Portfolio Project Ideas

See the project ideas post

Random

I should add the sunrise sunset tide and wind data to either this site or a personal site. I could also add something like if time is greater than or equal to sunrise ampersand and percent time is less than or equal to sunset and percent ampersand wind is less than 5 mph then paddleboarding else coding.

You don’t need a certificate or degree to prove you have learned Spanish, just speak Spanish. Coding should be the same.

Wait until I get that first job to validate the self-education route and then really run with that.


Want a Development Job : Learn These Ten Things (by Chris Hawkes). Check out the video here.


Derek Banas has a header on his YouTube channel that reads programming, web design, mobile development, marketing, sales, recipes, 3D design, game development, psychology, live stream gaming, product reviews, RPG gaming. He’s rocking the jack of all trades concept still stands. Web Design, Programming, Data Analysis, Finance, etc.

By the way Derek Banas has a cool video on creating CNBC graphics in After Effects here.


Why love front-end web development? To me it’s about being able to express myself through building and it really is a culmination of a lot of my previous skills and dablings and fields In that it allows me to essentially have a publishing platform and the browser is pretty much the best there is. Whether it’s my love for stocks or options or currencies or Microsoft Excel or motion graphics or e-commerce or paddle boarding or music all of these things It can benefit from knowledge or front and web development again as a publishing platform. It allows me to curate and reference these ideas and even potentially promote or monetize them. It clearly took me a while to get here and the front end may not be my final stop but I’m pumped about the space.


To-Do

Fix the fact that there’s two ULs in the header (one for mobile one for desktop)1

Need to link codepen and mail icons

Menu needs to close when I click a link or click off the menu

Add Get in Touch Buttons?

Style Header Links and Logo: Google Font if Necessary.

Header Links Need Hover Color.


Done: Need a “go to top” button

Done: Need a favicon image

Article of examples

I explored some other domains where I portfolio site and unfortunately BVIS and BVIZ and Brandon V is taken. Be this okay.com is available. I also noticed again that although you may link directly to your web address in the HTML you’re going to want to have the app symbol in brackets probably to prevent some bot or scraper from Jacking emails from websites.

Web Dev Pep Talk

Wanted to get into development but couldn’t find the time. When my position was eliminated and I was laid off I used it as an opportunity to teach myself JavaScript and react and FS development in general. I burned through personal savings to fund the increase in my productive skills. Instead heading back into operations or management or customer service, want to get a dev job.

Are you a professional builder if you build sheds? You want to build full houses or even commercial buildings, maybe not skyscrapers per se but you know what I mean. WordPress is great, but I felt like there was much more that I needed to learn to be considered a professional developer.

Don’t want to just be a bean counter accountant. I haven’t been successful as a trader. Good at customer service and operations but not a big fan of leadership in the corporate world, motivating people to take their $15 min wage job seriously. Driving sales is not my thing since I’m not a sales guy. So what should I do then? I build.

Seeing Kronos in the browser instead of a desktop app was an eye opener. Building a python script to auto-email reports was an eye opener. Seeing how useful and painful tableau could be was an eye opener.

Lee Robinson had a day drinker app in one of his videos and had listed specials. This is a great portfolio project idea.

Based on how much people use their phones over a laptop tells me I need to get into react native asap, get a Mac to develop on.

Grew tremendously as a professional by constantly pushing myself out of my comfort zone. Ultimately got to the point where I am running the dollar thrifty brands for Tampa location, a top 10 location in the country based on size, number one in scorecard metrics. 18 million in pretax profits in 2019. Managed a team that included 5 managers and 30 front-line reps. Drive sales and service. Operational excellence and efficiency. Scheduling was a strong suite. Analyzing data to create actionable insights was a strong suite. Good relationships with the team. Well respected throughout organization.


Top