"When there are no more leaders to follow, you must become one." This quote is from one of my favorite movies, Alpha. Without giving anything away for those who haven't seen it yet, the movie is about a boy named Keda who goes on his first hunt with his tribe and father (current leader of the tribe) but gets separated after coming face to face with the lead buffalo during a buffalo stampede. To find his way back home, he forms a close friendship with a lone wolf who also got separated from her pack. To overcome the odds of making it back home and surviving before the harsh, cold winter comes, Keda must take charge and be strong to not only save his life but also save the life of his new friend.
I included this quote on the landing page of my portfolio because the movie and quote really define what I haved faced and battled to get to this point in my life so far. My life has been full of valleys. I have had to stand up for myself when others around me haven't, be bold when trying to make the right choices, and have courage to continue to move on despite the constant obstacles and challenges in my way. As a result, I created this website so that you can see what I have been through, what I face now, and what I want to pursue next.
For more information about the movie, you can watch the trailer here: https://www.youtube.com/watch?v=uNFufvM7qNU.
- Live
- Screenshots
- About this project
- Getting started
- Deploying the site
- Technologies used to create the site
- Direction for future development
- Issues
The website is current live at the following URL: http://www.philjstubbs.com
This is my portfolio website built using React. It includes information about me, my resume, projects I have worked on, and information on how to get in touch with me.
My original portfolio website was built using vanilla JavaScript and Handlebars. You can find the source code for that site available here: https://github.com/philipstubbs13/coding-portfolio. The more I developed that site, the more I became less and less satisfied with it. Over time, it became more and more difficult to maintain. So, that's why I created a new portfolio site with React so that I can update and maintain it quickly as I spin up new projects.
Before I get into the project details, let me tell you about who I am. I graduated from the University of Minnesota Full Stack Web Development program in May 2018. This site not only showcases the projects I completed during that program but also showcases projects I am currently working on so that you can get to know a little bit more about me and my life as a web developer. As I continue my web development journey, I will continue to add new projects to this site so that you can explore and learn more about them.
If you have any questions, comments, or find any issues with the site or one of the projects showcased on this site, feel free to send me an email at philipstubbs13@gmail.com.
On the front end side, this project is built using React, which is an open-source JavaScript library developed at Facebook specifically for the task of developing user interfaces. React relies on a component-based architecture where elements of the user interface are broken into small chunks of code called components. To design and build the user interface, I used css grid to align, justify, and place components on the page.
This project is currently a client-side application. In the future, I plan to add a backend database where I can store and retrieve blog posts, user comments, projects I have worked on, as well as my resume. Finally, Firebase Hosting is used to deploy and host the site.
When you first visit the website, you will see the Landing/Home page. From this page, you can navigate to the rest of the website by clicking ABOUT ME, MY WORK, or CONTACT ME across the bottom of this page.
The about me page includes a little intro to who I am, including a photo of me and a short biography.
The my work page includes all of the projects I have worked on and contributed to as well as the projects I am currently building. Each project includes a link to the source code on GitHub, and if there's a user interface for a project, there will also be a link that will take you to the applicable website. Also, when you hover over a project, the project name will appear.
The my resume page displays the HTML version of my resume. If you want to print the resume, you can simply click the printer icon in the top left corner of the page to get a PDF version for printing.
The contact me page is probably the simplest page of the website but probably the most important when you visit this site (which is why I kept the design of this page short, simple, and easy to navigate). If you hover over the Email or Phone buttons, my email or phone number (respectively) will be displayed. This page also contains links to my LinkedIn, Twitter, Facebook, Stackoverflow, and GitHub accounts
After you clone the repository, you can navigate to the project root directory (alpha). The project directory structure will be set up as follows:
- public: The public folder contains the index.html file. This HTML file is a template. The file is empty. So, if you open it directly in a browser, you will get an empty page. Rather than placing the HTML code directly in index.html, this site uses a React component-based architecture to create, build, and render UI components to the page.
- src: The src folder is where the React components reside.
- images: Contains the images used in the site.
- App.js: The App.js file is where the components are imported and rendered, such as the header, footer, and various pages.
- index.js: The index.js file is the top level file of the React site. In index.js, the App.js file is imported, and the ReactDOM.render method is used to render App.js to the page.
- components: The Components folder is where the components that are reused across the site are located. Each file represents a separate component. For example, Footer.js is the footer component.
- components/layout: Holds all the pages of the site and the child components within those pages. For example, inside of the layout folder, there is a Resume folder. The Resume folder contains a top-level parent container/page called Resume.js.
- App.css and index.css: The external css stylesheets for the site.
- firebase-config.js: contains the Firebase initialization code to connect the site to Firebase.
- .eslintrc.json: List of rules and their definitions for ESLint.
- .gitignore: Anything listed inside this file (for example, node_modules) will not be tracked by GitHub when code is committed.
- package.json: Lists the project dependencies and their version numbers.
- README.md: The README file that contains important information about this project.
- yarn.lock: Dependency tree for the project. Lists all the client dependencies and their versions.
- readme_images: Images used in the project README file.
- .firebaserc: Hidden file that allows you to quickly switch between projects with 'firebase use'.
- .gitignore: Anything listed inside this file (for example, node_modules) will not be tracked by GitHub when code is committed.
- firebase.json: Firebase configuration file required to deploy the site to Firebase.
- package.json: Lists the project dependencies and their version numbers. It also contains various scripts to start the server, create a production build, etc.
- yarn.lock: Dependency tree for the project. Lists the project dependencies and their versions.
The following section will take you through the steps of setting up this site and getting it running locally on your computer.
If you don't want to set up this project locally and just want to see the deployed site, go to http://www.philjstubbs.com.
To set up this site locally on your computer, perform the following steps:
- Clone the repository
- Install Node.js
- Install yarn
- Install the project dependencies
- Start the React development server
The first step is to clone the project repository to a local directory on your computer. To clone the repository, run the following commands:
git clone https://github.com/philipstubbs13/alpha.git
cd ./alphaIf you don't already have Node.js installed on your computer, you can install the latest version here.
To be able to install the dependencies and start the site locally, you will need to install yarn. Yarn is a package manager like npm.
To install yarn globally, run the following command:
npm install -g yarn
For more information about yarn and other installation options, see the yarn documentation: https://yarnpkg.com/en/.
The following packages are dependencies to the project.
- firebase - tools and infrastructure used to host the site(https://www.npmjs.com/package/firebase).
- prop-types - Used to document the intended types of props passed to components (https://www.npmjs.com/package/prop-types)
- react - package for accessing React (https://www.npmjs.com/package/react)
- react-dom - serves as the entry point of the DOM-related rendering paths (https://www.npmjs.com/package/react-dom).
- react-router-dom - a third party routing library (https://www.npmjs.com/package/react-router-dom)
- react-scripts: package that includes scripts and configuration used by Create React App (https://www.npmjs.com/package/react-scripts)
This project also uses ESLint, which includes the following dependencies:
- babel-eslint
- eslint
- eslint-config-airbnb
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-react
Version information for each of these packages is available in the package.json file in the project root directory (alpha) directory.
After you clone the repository to a local directory, run the following command in the root directory to install the required dependencies:
yarn install
After performing all of the setup steps in the Getting started section, navigate to the project root directory (alpha) and run the following command to start the React development server.
yarn start
After the development server has started, a Chrome browser window should open, and you should see the landing/home screen. If the browser does not automatically open after the server starts, you can verify that the site is working locally on your computer by opening Chrome and going to http://localhost:3000. Note that by default, the development server will try to start up on port 3000. If port 3000 is already in use on your computer, then the development server will use a different port.
This site is deployed to Firebase using Firebase Hosting. For more information on hosting with Firebase, see https://firebase.google.com/docs/hosting/. To deploy the site, you will need to build a production version of the site as well as have the Firebase CLI installed.
- If not already installed, install the Firebase CLI globally by running the following command:
npm install -g firebase-tools
This installs the firebase command globally. To update to the latest version, simply re-run the same command.
- To connect your local machine to your Firebase account and obtain access to the Firebase project, run the following command:
firebase login
-
Change directory to the project root directory, alpha.
-
If you have deployed the site before, there will be a build directory inside alpha. Delete the existing build directory.
-
Run the following command to build a clean, production version of the site.
yarn build
This command creates a directory called build inside of the alpha directory.
-
Commit changes to git (if not done already).
-
Run the following command to deploy your changes:
firebase deployThis command deploys the project to https://alpha-41c92.firebaseapp.com/ on firebase.
- Firebase Hosting (https://firebase.google.com/docs/hosting/)
- HTML5
- CSS
- Javascript (ES6)
- React (https://reactjs.org/)
- CSS Grid system for page layout (https://github.com/crowdfavorite/css-grid)
- ESLint
Source code will be developed over time to handle bug fixes, incorporate new features, and add new projects I am working on.
The following is a list of potential enhancements for future code development.
- Add a blog page that I can use to go more in depth about particulatr projects that users have questions and comments about.
- Add a backend database that can be used to store blog posts, user comments/questions, my projects, resume data, etc.
- Add a contact form to the contact me page.
- Add new development projects to showcase.
If you find an issue while using the site or have a request, log the issue or request here. These issues will be addressed in a future code update.