Douglas MacKrell's Personal Portfolio Website!

Live @ douglasmackrell.com

Douglas MacKrell is a NYC based Full Stack Web Developer who is currently looking for work!

linkedin.com/in/douglasmackrell

twitter.com/DouglasMacKrell

youtube.com/bigmackrell

bigmackrell@gmail.com

---

Videos

• Responsive Navigation Bar With Slide Drawer - Personal Portfolio Website

• Home Page - Personal Portfolio Website

• About Page - Personal Portfolio Website

• Responsive Footer With Links - Personal Portfolio Website

• Skills Page - Personal Portfolio Website

• Projects Page Part 2 - Personal Portfolio Website

• Project Cards | Project Page - Personal Portfolio Website

• Updating Skills and Project Pages - Personal Portfolio Website

THE PROBLEM

Douglas MacKrell needs a website to show off his cool stuff.

THE SOLUTION

This personal website portfolio project is designed to showcase all of Douglas MacKrell's cool stuff. This React App will highlight:

• About
  • A brief overview of who Douglas MacKrell is and why you should get to know him better
• Projects
  • Awards and Recognition
  • Live Link
  • GitHub Repo Link
• Skills
• Links
  • Resume
  • GitHub
  • YouTube
  • Twitter
  • Email

---

FEATURES

• Navigation Bar
  • Shows site logo which acts as a Home Page Redirect button
  • Removes links on right side of screen when screen is too small and replaces with a Hamburger Menu button on left
• Footer
  • Links to:
    • Douglas MacKrell's GitHub Profile
    • Douglas MacKrell's YouTube Channel
    • Douglas MacKrell's Twitter Profile
    • Email mailto Link with format subject and body
• Slide Drawer
  • Is only accessible on smaller screens
  • Animates on and off screen with a transition effect
  • Accessed through a hamburger menu button
• Backdrop
  • Overlays site when Slide Drawer is open
  • Listens for click to close Slide Drawer when open
• Home Page
  • Resume Button leads to Douglas MacKrell's resume hosted on Google Drive
  • Uses a YouTube video as a background with the react-youtube-background dependency
• About Page
  • Handsome headshot of Douglas MacKrell floats to the left around text
  • Embedded YouTube playlist of Going Green episodes - Douglas MacKrell's ongoing YouTube series detailing his ongoing quest to complete at least 365 days of non-stop commits to GitHub
• Projects Page
  • Houses reusable Project Cards
• Project Cards
  • Accordion opens to reveal:
    • Description
    • Awards
    • Live link
    • GitHub repo link
• Skills
  • Sectioned icons representing Douglas MacKrell's various skills
    • On hover, changes color and reveals text defining each icon
  • Button to swap icons for an alphabetized text list of all skills

FUTURE FEATURES

• Add more completed projects as Project Cards on the Projects Page
• Add a specific page to showcase Douglas MacKrell's video production work
• Keep links fresh and relevant

TECHNICAL MILESTONES

• Creating a responsive animated Slide Drawer in plain JavaScript, HTML5, and CSS3
• Incorporating icons through Fontawesome and Devicon
• Learning how to adjust SVG files so they can be controlled directly through CSS3

TECHNOLOGIES USED

• React.js For the front-end/client interface of my app
• react-youtube-background to use a YouTube video as the background of my Home Page
• JavaScript
• HTML5
• CSS3

LOCAL SETUP

NOTE: You must install Node.js in your computer for this to run.

You can check to see if you already have Node.js by typing node -v in your terminal. If your shell/terminal doesn't complain and you see version numbers you are good to go.

1. Clone this repo into a folder of your choice:

   `git clone https://github.com/DouglasMacKrell/douglas-mackrell-website.git`
   

2. Install dependencies for the React App (douglas-mackrell-portfolio folder):

   `cd douglas-mackrell-portfolio && npm install`
   

3. To launch the React App, inside the douglas-mackrell-portfolio folder, and run:

   `npm start`
   

4. A new browser tab should have been opened and the App should be running. If that is not the case check the terminals output for errors, if you are unable to troubleshoot the problem, I would be happy to address issues so open one

---

Please check out one of my favorite projects, DougTV!

---

---

Before you leave, please take note:

You're the best! Thank you for visiting!

Please give this project a star and be sure to check out my YouTube Channel!

---

WIREFRAMES

COMING SOON!