Hex grid Help, Move from Cartesian coordiantes to slanting one axis along the hex diagonal

Hi I have a hex grid. I'm finding it hard to expand on this Cartesian coordinate grid for pathing so I did some research.

If found this http://3dmdesign.com/development/hexmap-coordinates-the-easy-way

I'm trying to do move from Cartesian to a slanted approach like described but I having issues. Hex grids are confusing me. The Cartesian coordinates are easy to layout for me but hard to expand on but having one axis slanted diagonal is easy to expand on but I'm having a hard time laying it out.

Thanks for your time.

Here is my grid working laid out using the Cartesian coordinates.

 public void Intialize()
     {
         pathNodes = new PathNode[width, depth];
  
         //Create our Grid
         for (int x = 0; x < width; x++)
         {
             for (int z = 0; z < depth; z++)
             {
                 PathNode pathNode = new PathNode();
                 pathNode.gridNodeIndex = new Vector2(x, z);
                 pathNode.isWalkable = true;
              
                //POSITION OUR NODE
                 float offset = 0;
                 if (z % 2 != 0)
                     offset = nodeSize * 0.5f;
                 pathNode.position = new Vector3(offset + x * nodeSize, 0, z * nodeSize * 0.75f);
      
                 pathNodes[x, z] = pathNode;
             }
         }
     }