Viewportframe getting distorted when on surfacegui

ok so basically i am trying to make a portal from portal, and i know there are SO many other posts and stuff explaining it with open source, but i just cant understand the math and i am trying to make it myself instead

i have been making my portal using viewport frames and because they are flat they get distorted, which is to be expected, so im wondering what kind of math i can use to counter this

it works fine when i make the portal face toward the player, but this is not a permanent solution

so can somebody explain what the math needed to solve the issue for before or explain the math from another open source portal

video demonstrating this

https://youtu.be/RuWOwZPRlpE

code used
game:GetService("RunService").RenderStepped:Connect(function()
	local startPart = longA
	local endPart = longA
	
	--line of code to make portal face player \/
	startPart.CFrame = CFrame.new(startPart.Position, Vector3.new(player.Character.HumanoidRootPart.Position.X,startPart.Position.Y,player.Character.HumanoidRootPart.Position.Z))

	local lookFrame = CFrame.new(workspace.CurrentCamera.CFrame.Position, startPart.Position)
	local lookAngle = lookFrame.LookVector

	local distance = camera.CFrame.Position - startPart.Position

	ncamera.CFrame = CFrame.new(endPart.Position, endPart.Position + lookAngle) + distance
	
	local size = distance.Magnitude/5
	viewportFrame.Size = UDim2.fromScale(size,size)
end)
video used to make portal

https://www.youtube.com/watch?v=_SmPR5mvH7w

sorry if i didnt explain it well i can answer any questions