Skip to content

Commit

Permalink
Visual Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hope41
Hope41 committed Nov 2, 2024
1 parent 2780e25 commit fde56c0
Show file tree
Hide file tree
Showing 159 changed files with 605 additions and 555 deletions.
26 changes: 13 additions & 13 deletions about.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang = en-gb>
<head>
<meta charset = utf-8>
<meta name = viewport content = 'width = device-width, initial-scale = 1'>
<meta name = keywords content = 'Joachim Ford, JavaScript games, Ios Mission'>
<meta name = description content = 'Free online coding blogs and open source indie games'>

<script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
<script src = /js/analytics.js></script>
<script src = /js/main.js></script>
<script src = /src/js/analytics.js></script>
<script src = /src/js/main.js></script>
<title>About | Joachim Ford</title>
<link rel = stylesheet href = /main.css>
<link rel = icon type = image/x-icon href = /favs/favicon.ico>
<link rel = stylesheet href = /src/main.css>
<link rel = icon type = image/x-icon href = /src/favs/favicon.ico>
<style>
h1 {
margin-left: auto;
Expand Down Expand Up @@ -39,14 +39,14 @@
</div>
<div class = nav>
<a href = /games>Games</a>
<a href = /experiments>Experiments</a>
<a href = /articles>Articles</a>
<a href = /projects>Projects</a>
<a href = /blogs>Blogs</a>
<a href = /news>News</a>
</div>
</section>

<section class = main>
<img class = me src = images/me.png>
<img class = me src = /src/images/me.png>

<div class = demo>
<span>
Expand Down Expand Up @@ -103,16 +103,16 @@ <h3>Things I've worked on...</h3>
<a class = normal href = https://canvas-craft.github.io target = _blank>CanvasCraft</a>,
which was created for the purpose of making game world design easier.</p>
<div class = big>
<img class = img src = /images/canvas_craft_bio.png>
<img class = img src = /src/images/canvas_craft_bio.png>
</div>
</div>
</section>

<button class = theme onclick = toggleTheme()>Change Theme</button>
<span class = copyright>
© Copyright <span class = year></span> joachimford.uk
<a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></img></a>
<a href = mailto:[email protected]><img src = /images/mail.svg></img></a>
&copy; <span class = year></span> Joachim Ford. All rights reserved.
<a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
<a href = mailto:[email protected]><img src = /src/images/mail.svg></img></a>
</span>
</body>
</html>
50 changes: 25 additions & 25 deletions articles.html → blogs.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang = en-gb>
<head>
<meta charset = utf-8>
<meta name = viewport content = 'width = device-width, initial-scale = 1'>
<meta name = keywords content = 'Joachim Ford, procedural generation, procedural worlds'>
<meta name = description content = 'Free online coding blogs and open source games'>

<script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
<script src = /js/analytics.js></script>
<script src = /js/main.js></script>
<title>Articles | Joachim Ford</title>
<link rel = stylesheet href = /main.css>
<link rel = icon type = image/x-icon href = /favs/favicon.ico>
<script src = /src/js/analytics.js></script>
<script src = /src/js/main.js></script>
<title>Blogs | Joachim Ford</title>
<link rel = stylesheet href = /src/main.css>
<link rel = icon type = image/x-icon href = /src/favs/favicon.ico>
</head>

<body>
Expand All @@ -21,15 +21,15 @@
</div>
<div class = nav>
<a href = /games>Games</a>
<a href = /experiments>Experiments</a>
<a href = /articles>Articles</a>
<a href = /projects>Projects</a>
<a href = /blogs>Blogs</a>
<a href = /news>News</a>
</div>
</section>

<section class = main>
<a class = demo href = articles/3_tips_for_game_development>
<img class = tiny src = /articles/extra/3_tips_for_game_development/1.png>
<a class = demo href = /src/blogs/3_tips_for_game_development>
<img class = tiny src = /src/blogs/extra/3_tips_for_game_development/1.png>
<h3>3 Tips for Game Development</h3>
<span class = description>
Ever wanted to create your own games, but wondered where to begin?
Expand All @@ -38,42 +38,42 @@ <h3>3 Tips for Game Development</h3>
</span>
</a>

<a class = demo href = articles/splash_dash_tutorial>
<img class = tiny src = /articles/extra/splash_dash_tutorial/1.png>
<a class = demo href = /src/blogs/splash_dash_tutorial>
<img class = tiny src = /src/blogs/extra/splash_dash_tutorial/1.png>
<h3>The Splash Dash Tutorial</h3>
<span class = description>
Making a playable JavaScript game in just over 1000 characters
is a difficult but motivating challenge. This article explains how
is a difficult but motivating challenge. This blog explains how
the game <b>Splash Dash</b> was made to fit within just 1024 bytes
</span>
</a>

<a class = demo href = articles/making_games_the_bits_that_nobody_notices>
<img class = tiny src = /articles/extra/making_games_the_bits_that_nobody_notices/1.png>
<a class = demo href = /src/blogs/making_games_the_bits_that_nobody_notices>
<img class = tiny src = /src/blogs/extra/making_games_the_bits_that_nobody_notices/1.png>
<h3>Making games: The Bits That Nobody Notices</h3>
<span class = description>
Adding details to the game of Io's Mission
</span>
</a>

<a class = demo href = articles/using_inverse_kinematics_to_animate_your_character>
<img class = tiny src = /articles/extra/using_inverse_kinematics_to_animate_your_character/1.png>
<a class = demo href = /src/blogs/using_inverse_kinematics_to_animate_your_character>
<img class = tiny src = /src/blogs/extra/using_inverse_kinematics_to_animate_your_character/1.png>
<h3>Using Inverse Kinematics to Animate Your Character</h3>
<span class = description>
How to implement smooth character animations
</span>
</a>

<a class = demo href = articles/create_and_animate_enemies_using_shapes>
<img class = tiny src = /articles/extra/create_and_animate_enemies_using_shapes/1.png>
<a class = demo href = /src/blogs/create_and_animate_enemies_using_shapes>
<img class = tiny src = /src/blogs/extra/create_and_animate_enemies_using_shapes/1.png>
<h3>Create and Animate Enemies Using Shapes</h3>
<span class = description>
How to animate and display enemies using rectangles
</span>
</a>

<a class = demo href = articles/procedural_room_generation_snakes_and_ladders>
<img class = tiny src = /articles/extra/procedural_room_generation_snakes_and_ladders/1.png>
<a class = demo href = /src/blogs/procedural_room_generation_snakes_and_ladders>
<img class = tiny src = /src/blogs/extra/procedural_room_generation_snakes_and_ladders/1.png>
<h3>Procedural Room Generation - Snakes and Ladders</h3>
<span class = description>
How the levels of Snakes and Ladders were generated
Expand All @@ -83,9 +83,9 @@ <h3>Procedural Room Generation - Snakes and Ladders</h3>

<button class = theme onclick = toggleTheme()>Change Theme</button>
<span class = copyright>
© Copyright <span class = year></span> joachimford.uk
<a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></img></a>
<a href = mailto:[email protected]><img src = /images/mail.svg></img></a>
&copy; <span class = year></span> Joachim Ford. All rights reserved.
<a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
<a href = mailto:[email protected]><img src = /src/images/mail.svg></img></a>
</span>
</body>
</html>
38 changes: 19 additions & 19 deletions games.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<html lang = en-gb>
<head>
<meta charset = utf-8>
<meta name = viewport content = 'width = device-width, initial-scale = 1'>
<meta name = keywords content = 'Joachim Ford, JavaScript games, HTML5 games'>
<meta name = description content = 'Free online coding blogs and open source games'>

<script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
<script src = /js/analytics.js></script>
<script src = /js/main.js></script>
<script src = /src/js/analytics.js></script>
<script src = /src/js/main.js></script>
<title>Games | Joachim Ford</title>
<link rel = stylesheet href = /main.css>
<link rel = icon type = image/x-icon href = /favs/favicon.ico>
<link rel = stylesheet href = /src/main.css>
<link rel = icon type = image/x-icon href = /src/favs/favicon.ico>
</head>

<body>
Expand All @@ -21,15 +21,15 @@
</div>
<div class = nav>
<a href = /games>Games</a>
<a href = /experiments>Experiments</a>
<a href = /articles>Articles</a>
<a href = /projects>Projects</a>
<a href = /blogs>Blogs</a>
<a href = /news>News</a>
</div>
</section>

<section class = main>
<a class = demo href = content/squirtcopter>
<img class = tiny src = images/squirtcopter.png>
<a class = demo href = /src/content/squirtcopter>
<img class = tiny src = /src/images/squirtcopter.png>
<h3>Squirtcopter</h3>
<span class = description>
<p><b>Squirt your way to victory!</b> Squirtcopter is a fully-featured
Expand All @@ -39,8 +39,8 @@ <h3>Squirtcopter</h3>
</span>
</a>

<a class = demo href = content/ios_mission>
<img class = tiny src = images/ios_mission.png>
<a class = demo href = /src/content/ios_mission>
<img class = tiny src = /src/images/ios_mission.png>
<h3>Io's Mission</h3>
<span class = description>
<p>Drillo has been captured by The Great Ominous!
Expand All @@ -51,8 +51,8 @@ <h3>Io's Mission</h3>
</span>
</a>

<a class = demo href = content/snakes_and_ladders>
<img class = tiny src = images/snakes_and_ladders.png>
<a class = demo href = /src/content/snakes_and_ladders>
<img class = tiny src = /src/images/snakes_and_ladders.png>
<h3>Snakes And Ladders</h3>
<span class = description>
<p>On a mission to destroy the X-Ray Orb, help Drillo make his way through
Expand All @@ -62,8 +62,8 @@ <h3>Snakes And Ladders</h3>
</span>
</a>

<a class = demo href = content/the_mitigator>
<img class = tiny src = images/the_mitigator.png>
<a class = demo href = /src/content/the_mitigator>
<img class = tiny src = /src/images/the_mitigator.png>
<h3>The Mitigator</h3>
<span class = description>
<p>Save the planet by collecting litter, planting seeds and
Expand All @@ -77,9 +77,9 @@ <h3>The Mitigator</h3>

<button class = theme onclick = toggleTheme()>Change Theme</button>
<span class = copyright>
© Copyright <span class = year></span> joachimford.uk
<a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></img></a>
<a href = mailto:[email protected]><img src = /images/mail.svg></img></a>
&copy; <span class = year></span> Joachim Ford. All rights reserved.
<a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
<a href = mailto:[email protected]><img src = /src/images/mail.svg></img></a>
</span>
</body>
</html>
Binary file removed images/canvas_craft.png
View file
Binary file not shown.
Binary file removed images/canvas_craft_big.png
View file
Binary file not shown.
45 changes: 18 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
<!DOCTYPE html>
<html>
<html lang = en-gb>
<head>
<meta charset = utf-8>
<meta name = viewport content = 'width = device-width, initial-scale = 1'>
<meta name = keywords content = 'Joachim Ford, JavaScript games, Indie game dev'>
<meta name = description content = 'A base of fully-featued indie games and experiments'>
<meta name = description content = 'Free online coding blogs and open source games'>

<script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
<script src = /js/analytics.js></script>
<script src = /js/main.js></script>
<title>Home | Joachim Ford</title>
<link rel = stylesheet href = /main.css>
<link rel = icon type = image/x-icon href = /favs/favicon.ico>
<script src = /src/js/analytics.js></script>
<script src = /src/js/main.js></script>
<title>Coding Blogs and Indie Games | Joachim Ford</title>
<link rel = stylesheet href = /src/main.css>
<link rel = icon type = image/x-icon href = /src/favs/favicon.ico>
<style>
html {height: 100%}

Expand Down Expand Up @@ -48,13 +47,13 @@
</div>
<div class = nav>
<a href = /games>Games</a>
<a href = /experiments>Experiments</a>
<a href = /articles>Articles</a>
<a href = /projects>Projects</a>
<a href = /blogs>Blogs</a>
<a href = /news>News</a>
</div>
</section>

<a href = /content/squirtcopter id = link><canvas id = cvs></canvas></a>
<a href = /src/content/squirtcopter id = link><canvas id = cvs></canvas></a>

<section class = main>
<script>
Expand Down Expand Up @@ -214,7 +213,7 @@
ctx.fillStyle = rgb(1,1,1,summ/3-(Math.sin(i*i)+1)-rot)
ctx.save()
ctx.translate(tx + gap / 2, ty - gap / 2)
ctx.rotate(Math.sin(i*i)*.1*rot)
ctx.rotate(Math.sin(i*i*i)*.2*rot)
ctx.fillText(item.name[i], -gap / 2, gap / 2)
ctx.restore()
}
Expand Down Expand Up @@ -251,17 +250,16 @@
const images = []
const makeNewImage = (name, url, color) => {
const img = new Image()
img.src = 'images/'+name+'.png'
img.src = '/src/images/'+name+'.png'
img.url = url
img.color = color
img.alpha = 0
img.init = true
images.push(img)
}
makeNewImage('squirtcopter_big', '/content/squirtcopter', '#756')
makeNewImage('ios_mission_big', '/content/ios_mission', '#69a')
// makeNewImage('bg2', '/content/canvas_craft', '#400')
makeNewImage('snakes_and_ladders_big', '/content/snakes_and_ladders', '#8ca')
makeNewImage('squirtcopter_big', '/src/content/squirtcopter', '#756')
makeNewImage('ios_mission_big', '/src/content/ios_mission', '#79b')
makeNewImage('snakes_and_ladders_big', '/src/content/snakes_and_ladders', '#8ca')

const booms = [
{name: 'SQUIRTCOPTER', time: 70, x: 0, y: 0, size: .03, expire: 30},
Expand All @@ -286,13 +284,6 @@
{name: 'Switch', time: 1200}
]

// {name: 'CANVASCRAFT', time: 840, x: 0, y: -.01, size: .03, expire: 300},
// {name: '"Where Craft and Code Collide"', time: 845, x: 0, y: .07, size: .01, expire: 285},
// {name: 'canvas', time: 900, x: 0, y: .13, size: .01, expire: 2},
// {name: 'canvas-craft', time: 905, x: 0, y: .13, size: .01, expire: 10},
// {name: 'canvas-craft.github', time: 912, x: 0, y: .13, size: .01, expire: 2},
// {name: 'canvas-craft.github.io', time: 925, x: 0, y: .13, size: .01, expire: 185},

addEventListener('resize', resize)
resize()
update()
Expand All @@ -301,9 +292,9 @@

<button class = theme onclick = toggleTheme()>Change Theme</button>
<span class = copyright>
© Copyright <span class = year></span> joachimford.uk
<a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></img></a>
<a href = mailto:[email protected]><img src = /images/mail.svg></img></a>
&copy; <span class = year></span> Joachim Ford. All rights reserved.
<a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
<a href = mailto:[email protected]><img src = /src/images/mail.svg></img></a>
</span>
</body>
</html>
Loading

0 comments on commit fde56c0

Please sign in to comment.