Skip to content

Commit

Permalink
Re-containerisation into a static NuxtJS image served by NGINX, this …
Browse files Browse the repository at this point in the history 
…will significantly shrink the image and hosting overhead for such a simple site.
  • Loading branch information
@othyn
othyn committed Dec 7, 2021
1 parent 068a0c6 commit f55454b
Show file tree
Hide file tree
Showing 19 changed files with 590 additions and 169 deletions.
91 changes: 86 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@

Modernised codebase for my website, replacing the old Laravel app. As my design methodology has changed towards containerised microservices living within K8's, the original Laravel repo was monolithic, hard to containerise and maintain. Thus, the extraction of the original semi-static web content with mild VueJS elements that lead itself perfectly to a small NuxtJS site bundled into an equally small container.

---

## Development

When developing the site, use the following to get setup and running with a hot reload local environment:
Expand All @@ -24,6 +26,8 @@ $ yarn lint

For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org). Thought this sentence was best kept in!

---

## Building the production app image

**The CD GitHub Action should auto build and tag an image for you based on when a new tag is created/pushed**, so you shouldn't need to build the image manually or push it. This will then become [available as part of GitHub's packages feature](https://github.com/othyn/othyn.com/pkgs/container/othyn.com). Just create a tag via a [new GitHub release](https://github.com/othyn/othyn.com/releases) or push a local tag, and it should do the rest.
Expand All @@ -35,14 +39,91 @@ However, if you do wish to do it, go ahead and run a normal Docker Compose build
$ yarn lint

# Production container build
$ docker-compose build
$ docker compose build

# ...or if you're having problems...
$ docker-compose build --no-cache
$ docker compose build --no-cache
```

Then push it to a remote container registry of your choice. There should be no requirement to develop from the app container itself, however if you wish to, knock yourself out! You can navigate to [http://localhost:8888](http://localhost:8888) to view the container once up'd, or which ever port you defined in `./docker-compose.yml` against the `com.othyn.app` service.

For manually building a static Nuxt output, here is a [handy list of commands](https://nuxtjs.org/announcements/going-full-static/#commands);

```bash
# Start the development server (static aware)
$ yarn dev

# Bundle your Nuxt application for production if needed (static aware) and export your application to static HTML in `dist/` directory
$ yarn generate

# Serve your production application from `dist/`
$ yarn start
```

Then push it to a remote container registry of your choice.
---

## Todo

Roadmap for things I would like to change over time.

### Additions

- Add a new area for blog entries to talk about passion projects and share knowledge, as I've been told I'm really good at distilling complex topics and making them easily digestable and bridging the communication gap into non-technical and leadership roles.
- Add a new area for a photography portfolio as I really would like to share a few images with the world.

### Changes

- Change `htop` progress bars into proficiency levels based around technologies, career experience and overall skill set.
- Change the highlighted GitHub repos in `ls -lah ~/git` to newer projects.
- Change `history | grep me` into tabbed sections going over my key interest pillars; career, hardware, networking, cars, photography.

---

## Changelog

Any and all project changes for releases should be documented below. Versioning follows the SEMVER standard.

---

### Version 1.1.0

Re-containerisation into a static NuxtJS image served by NGINX, this will significantly shrink the image and hosting overhead for such a simple site.

#### Added

- More info on history, in reality this needs a refresh into catagories as there are areas I would like to expand into.

#### Changed

- Changed NuxtJS config and Docker image setup to run instead from Nuxt static mode.
- All files are now fixed with prettier.

#### Fixed

- Component loading in the layouts was a bug I think with a perhaps reserved keyword `Global` being the prefix, once changing this to `Core` the issue went away.

#### Removed

- Twitter link in bio as I can't remember the last time I actually went on it.

---

### Version 1.0.0

Initial release.

#### Added

- Everything

#### Changed

- Everything

#### Fixed

- Everything

### Developing from the app container
#### Removed

I've tried to work it that you can work out of the container, but the more I push it, the more it feels wrong. I would just use Yarn locally, unless you really have to work out of the container, e.g. not wanting a local Yarn install. The `node_modules` directory is ommitted from the volume mount, so you _can_ go ahead and use `docker-compose up -d -V` to work out of the container just fine (`-V` refreshing the anonymous persistent volume so it always uses the latest in the container). **You just won't get any hot reloading for easy development.**
- Everything
6 changes: 3 additions & 3 deletions components/global/Block.vue → components/core/Block.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<slot></slot>
</section>

<hr>
<hr />
</div>
</template>

Expand All @@ -22,7 +22,7 @@ export default {
title: {
type: String,
required: true,
}
}
},
},
}
</script>
4 changes: 4 additions & 0 deletions components/global/Nav.vue → components/core/Nav.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,7 @@
</nav>
</div>
</template>

<script>
export default {}
</script>
66 changes: 58 additions & 8 deletions components/sections/home/About.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,70 @@
<div>
<p>Since I could code and tinker with electronics, I have.</p>

<p>Starting with operating system installs to writing my first application in Visual Basic at around age 12, I have had an innate passion for all things tech.</p>
<p>
Starting with operating system installs to writing my first application in
Visual Basic at around age 12, I have had an innate passion for all things
tech.
</p>

<p>Throughout my teen years I explored all aspects of computing, developing a keen knowledge of everything from power into the machine to user interaction. Each aspect of the technical world presented me with a new avenue to explore, taking a keen interest in Linux.</p>
<p>
Throughout my teen years I explored all aspects of computing, developing a
keen knowledge of everything from power into the machine to user
interaction. Each aspect of the technical world presented me with a new
avenue to explore, taking a keen interest in Linux.
</p>

<p>Then my love of software began… I learnt a wide range of languages, fiddled and built a solid knowledge of software design principals and participated in the open source community - and still do. I also built computers - a lot of them - from budget builds to monster workstations, while later discovering virtualisation and home-labbing.</p>
<p>
Then my love of software began… I learnt a wide range of languages,
fiddled and built a solid knowledge of software design principals and
participated in the open source community - and still do. I also built
computers - a lot of them - from budget builds to monster workstations,
while later discovering virtualisation and home-labbing.
</p>

<p>Next came the beginnings of my early career, starting as an intern in software development at the beginning of 2014. Within a short time, I was <WidgetsDomfetti>promoted</WidgetsDomfetti> from intern to Web Developer then <WidgetsDomfetti>promoted</WidgetsDomfetti> further, into Senior Software Developer. I trained, lead and supported the next generation of excited Junior Developers, driving my ambition through their passion. I lead, managed and developed a rapidly expanding, award-winning product, and delivered the best result for both business and stakeholders.</p>
<p>
Next came the beginnings of my early career, starting as an intern in
software development at the beginning of 2014. Within a short time, I was
<WidgetsDomfetti>promoted</WidgetsDomfetti> from intern to Web Developer
then <WidgetsDomfetti>promoted</WidgetsDomfetti> further, into Senior
Software Developer. I trained, lead and supported the next generation of
excited Junior Developers, driving my ambition through their passion. I
lead, managed and developed a rapidly expanding, award-winning product,
and delivered the best result for both business and stakeholders.
</p>

<p>Taking the <span style="color:#F53E30">N</span><span style="color:#F6EE34">e</span><span style="color:#5EC059">X</span><span style="color:#E460AB">T</span> step, I'm now employed as the Senior Software Engineer helping to expand, refine and diversify an impactful product.</p>
<p>
Taking the <span style="color: #f53e30">N</span
><span style="color: #f6ee34">e</span><span style="color: #5ec059">X</span
><span style="color: #e460ab">T</span> step, I'm now employed as the
Senior Software Engineer helping to expand, refine and diversify an
impactful product.
</p>

<p>Software development is my calling, facilitated by my innate ability to quickly consume, understand and distil information to support others. I also have a strong sense of self-motivation and passion for high-quality software development, always delivering to a progressive personal standard.</p>
<p>
Software development is my calling, facilitated by my innate ability to
quickly consume, understand and distil information to support others. I
also have a strong sense of self-motivation and passion for high-quality
software development, always delivering to a progressive personal
standard.
</p>

<p>In short, I am devoted. I live and breathe any and all things software and hardware and am pretty much interested in anything that has a plug socket on it; opening it up, tinkering around and seeing how it all works. I love the way I can create and let my mind run wild through what is usually a rigid and unforgiving electrical world. But I seem to have a knack for it, I speak its language.</p>
<p>
In short, I am devoted. I live and breathe any and all things software and
hardware and am pretty much interested in anything that has a plug socket
on it; opening it up, tinkering around and seeing how it all works. I love
the way I can create and let my mind run wild through what is usually a
rigid and unforgiving electrical world. But I seem to have a knack for it,
I speak its language.
</p>

<p>P.s. I also like Apple. I love all tech, but Apple... just an incy bit more. Privacy and their BSD roots... best of both worlds. ;)</p>
<p>
P.s. I also like Apple. I love all tech, but Apple... just an incy bit
more. Privacy and their BSD roots... best of both worlds. ;)
</p>
</div>
</template>

<script>
export default {}
</script>
58 changes: 53 additions & 5 deletions components/sections/home/History.vue
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,72 @@
<template>
<div>
<p>Not quite an archaeological dig and I like to think I've accomplished a lot in the short space of time that I've been on this here blue dot, with plenty more to come! Once developed, this timeline element was PR'd back into the <a href="https://github.com/Gioni06/terminal.css" target="_blank" rel="noopener noreferrer">Terminal CSS</a> framework.</p>
<p>
Not quite an archaeological dig and I like to think I've accomplished a
lot in the short space of time that I've been on this here blue dot, with
plenty more to come! Once developed, this timeline element was PR'd back
into the
<a
href="https://github.com/Gioni06/terminal.css"
target="_blank"
rel="noopener noreferrer"
>Terminal CSS</a
>
framework.
</p>

<div class="terminal-timeline">
<div class="terminal-card">
<header>2021</header>
<div>
Still loving life at Kamma. Swapped the Golf R out for a new Tesla
Model 3 Long Range and loving it!
</div>
</div>
<div class="terminal-card">
<header>2019</header>
<div>What lay ahead. 25. Now based at Kamma in London. Big move! Senior Software Engineer. Exciting new challenges in a tight knit company, a team, loving it.</div>
<div>
What lay ahead. 25. Now based at Kamma in London. Big move! Senior
Software Engineer. Exciting new challenges in a tight knit company, a
team, loving it.
</div>
</div>
<div class="terminal-card">
<header>2018</header>
<div>Senior Software Developer. 24. BOOM. The platform exploded in popularity, we won awards, gained national attention and are now playing in the big leagues. Time to expand the team! A hiring run of 6 new staff to exceed resource, training the next generation of Junior Developers. My enjoyment and key skill being developing others and assisting people to grow under their own drive. Talking of driving, hello MK7.5 Golf R, DSG, lapiz blue with pretoria wheels, ummmm..MMM!</div>
<div>
Senior Software Developer. 24. BOOM. The platform exploded in
popularity, we won awards, gained national attention and are now
playing in the big leagues. Time to expand the team! A hiring run of 6
new staff to exceed resource, training the next generation of Junior
Developers. My enjoyment and key skill being developing others and
assisting people to grow under their own drive. Talking of driving,
hello MK7.5 Golf R, DSG, lapiz blue with pretoria wheels, ummmm..MMM!
</div>
</div>
<div class="terminal-card">
<header>2015</header>
<div>Onwards and upwards. 22. Promoted to Web Developer. I now have the run of the mill and love it, learning more and more about production software and the role of software in companies. Bridging the gap between tech and people and developing the platform in a boom of functionality.</div>
<div>
Onwards and upwards. 22. Promoted to Web Developer. I now have the run
of the mill and love it, learning more and more about production
software and the role of software in companies. Bridging the gap
between tech and people and developing the platform in a boom of
functionality.
</div>
</div>
<div class="terminal-card">
<header>2014</header>
<div>Started my career in software. 21. Web Assistant (junior developer) at the University of Lincoln Students' Union. I took the role as a superb opportunity to work as part of a two man team in a new development called SUMS, Students' Union Management System. Only being in alpha when I started, shortly after starting releasing version 1. There lay history.</div>
<div>
Started my career in software. 21. Web Assistant (junior developer) at
the University of Lincoln Students' Union. I took the role as a superb
opportunity to work as part of a two man team in a new development
called SUMS, Students' Union Management System. Only being in alpha
when I started, shortly after starting releasing version 1. There lay
history.
</div>
</div>
</div>
</div>
</template>

<script>
export default {}
</script>
38 changes: 32 additions & 6 deletions components/sections/home/Hobbies.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<template>
<div>
<p>Everyone needs to take a break and enjoy life, besides tech, here's how I like to spend mine!</p>
<p>
Everyone needs to take a break and enjoy life, besides tech, here's how I
like to spend mine!
</p>

<table>
<thead>
Expand All @@ -14,29 +17,52 @@
<tr>
<th>1</th>
<th>skiing</th>
<td>has to be skiing. Nothing like it, the experience. Recently, finally, invested in my own hear. Suited and booted.</td>
<td>
has to be skiing. Nothing like it, the experience. Recently,
finally, invested in my own hear. Suited and booted.
</td>
</tr>
<tr>
<th>2</th>
<th>hiking</th>
<td>shortly followed by hiking, which tends to preceed skiing. Getting into the outdoors, walking and experiencing new places. The views. Camping! Camping is where its at, spent a long time camping and love every minute.</td>
<td>
shortly followed by hiking, which tends to preceed skiing. Getting
into the outdoors, walking and experiencing new places. The views.
Camping! Camping is where its at, spent a long time camping and love
every minute.
</td>
</tr>
<tr>
<th>3</th>
<th>photography</th>
<td>which follows on nicely to photography. Capturing the moment and getting creative with the image, in the moment and in post is delightful. Fuji XT-2 crew.</td>
<td>
which follows on nicely to photography. Capturing the moment and
getting creative with the image, in the moment and in post is
delightful. Fuji XT-2 crew.
</td>
</tr>
<tr>
<th>4</th>
<th>motorsport</th>
<td>as a kid, I said i'd never do it. But now, I'm hooked. F1. A petrol head and electric head, combined brings a shine to Tesla. Although for now, Golf R 7.5 crew.</td>
<td>
as a kid, I said i'd never do it. But now, I'm hooked. F1. A petrol
head and electric head, combined brings a shine to Tesla. Although
for now, Golf R 7.5 crew.
</td>
</tr>
<tr>
<th>5</th>
<th>gaming</th>
<td>a huge one for me and a chunk of my life. Creating, playing and exploring games/worlds/experiences.</td>
<td>
a huge one for me and a chunk of my life. Creating, playing and
exploring games/worlds/experiences.
</td>
</tr>
</tbody>
</table>
</div>
</template>

<script>
export default {}
</script>
Loading

0 comments on commit f55454b

Please sign in to comment.