Merge branch 'main' of github.com:JohnCosta27/JohnTech
This commit is contained in:
4
.gitignore
vendored
4
.gitignore
vendored
@ -1,2 +1,4 @@
|
||||
node_modules/
|
||||
dist/
|
||||
dist/
|
||||
public/
|
||||
.hugo_build.lock
|
||||
|
||||
3
.gitmodules
vendored
Normal file
3
.gitmodules
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
[submodule "quickstart/themes/risotto"]
|
||||
path = quickstart/themes/risotto
|
||||
url = git@github.com:johncosta27/risotto.git
|
||||
@ -1,4 +0,0 @@
|
||||
# johncosta.tech
|
||||
|
||||
This is the repo for my personal website, with all my experience, projects and blog posts. Using Astro.
|
||||
|
||||
5
archetypes/default.md
Normal file
5
archetypes/default.md
Normal file
@ -0,0 +1,5 @@
|
||||
+++
|
||||
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
|
||||
date = {{ .Date }}
|
||||
draft = true
|
||||
+++
|
||||
0
assets/style.css
Normal file
0
assets/style.css
Normal file
@ -1,21 +0,0 @@
|
||||
import { defineConfig } from "astro/config";
|
||||
import mdx from "@astrojs/mdx";
|
||||
import react from "@astrojs/react";
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
|
||||
import sitemap from "@astrojs/sitemap";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://example.com",
|
||||
integrations: [
|
||||
react(),
|
||||
tailwind({
|
||||
config: {
|
||||
path: "./tailwind.config.js",
|
||||
},
|
||||
}),
|
||||
mdx(),
|
||||
sitemap(),
|
||||
],
|
||||
});
|
||||
42
content/_index.md
Normal file
42
content/_index.md
Normal file
@ -0,0 +1,42 @@
|
||||
+++
|
||||
title = 'Home'
|
||||
date = 2023-11-14T17:55:14Z
|
||||
+++
|
||||
|
||||
# Hi, I'm John
|
||||
|
||||
---
|
||||
|
||||
I am a Software Engineer, currently working at Decipad. I'm interested in various subjects including: Compilers, Linux Servers, Web Development, Distributed System and many more.
|
||||
|
||||
# Work
|
||||
|
||||
Currently working at [Decipad](https://www.decipad.com/) as a full stack engineer.
|
||||
|
||||
I worked in various project at my old university [Royal Holloway](https://www.royalholloway.ac.uk/), including a Wellness and Professional Development application, that allowed students to track their wellbeing and various professional skills.
|
||||
|
||||
Worked on a [InnovateUK](https://www.ukri.org/councils/innovate-uk/) funded project called Tensorcrypt, which allowed for zero-trust data analysis.
|
||||
|
||||
I am also a private GCSE/A-level Maths and Computer Science tutor, and have over 300 hours of tutoring experience.
|
||||
|
||||
---
|
||||
|
||||
# Projects
|
||||
|
||||
I've developed various projects, which I have listed on the [projects]({{< relref "./projects/_index.md" >}}) page. There you will find blog posts, GitHub Repos and _maybe_ a YouTube video.
|
||||
|
||||
---
|
||||
|
||||
# Education
|
||||
|
||||
I attended [Royal Holloway](https://www.royalholloway.ac.uk/) and achieved a First Class Honours BSc Computer Science.
|
||||
|
||||
Previously I attended [Farnborough Sixth Form College](https://farnborough.ac.uk/) and got 5 A-levels.
|
||||
|
||||
---
|
||||
|
||||
# Interests
|
||||
|
||||
Outside of Computer Science, I play guitar (mostly metal), read and do Judo (currently a Red Belt). But I spent most of my time behind a screen, tinkering with software, or [ricing](https://excaliburzero.gitbooks.io/an-introduction-to-linux-ricing/content/ricing.html) my machine (again).
|
||||
|
||||
I like to take part in the [Advent Of Code](https://adventofcode.com/), and have various repo's for each years solutions.
|
||||
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 2.5 MiB |
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.6 MiB |
@ -1,12 +1,11 @@
|
||||
---
|
||||
layout: '../../layouts/post.astro'
|
||||
title: 'Threaded JavaScript!'
|
||||
date: '10/04/2022'
|
||||
---
|
||||
+++
|
||||
title = "Threaded JavaScript!"
|
||||
date = "2022-04-10"
|
||||
author = "John Costa"
|
||||
toc = true
|
||||
+++
|
||||
|
||||
# Threaded Javascript
|
||||
|
||||
For a long time, my language of choice has been JavaScript (and recently TypeScript), this is for both frontend development as well as backend development.
|
||||
For a long time, my language of choice has been JavaScript (and recently TypeScript), this is for both frontend development as well as backend development.
|
||||
|
||||
I enjoy the simplicity of using the same language for both sides of a project and I especially like working with Node.js, a Javascript run time environment with a very sophisticated asynchronous event loop, which makes it perfect for applications such as RESTful APIs which access databases etc...
|
||||
|
||||
@ -19,7 +18,7 @@ So I made a small program to calculate the same MD5 hash 1 million times:
|
||||
(Note that these files are .mjs files (module JavaScript), Node.js will only run them if you have .mjs as the file extension - All they do is allow the "import" syntax and a few other things).
|
||||
|
||||
```js
|
||||
import crypto from 'crypto';
|
||||
import crypto from "crypto";
|
||||
|
||||
console.time("Single-Thread");
|
||||
|
||||
@ -27,14 +26,14 @@ const n = 10000000;
|
||||
const string = "Hello World";
|
||||
|
||||
for (let i = 0; i < n; i++) {
|
||||
const hash = crypto.createHash('md5').update(string).digest('hex');
|
||||
const hash = crypto.createHash("md5").update(string).digest("hex");
|
||||
}
|
||||
|
||||
console.timeEnd("Single-Thread");
|
||||
|
||||
```
|
||||
|
||||
Running this program gave me this result:
|
||||
|
||||
```
|
||||
Single-Thread: 1.139s
|
||||
```
|
||||
@ -42,9 +41,9 @@ Single-Thread: 1.139s
|
||||
I then modified my code to use worker threads. This splits the work load into 8 worker threads, it gives each thread a start and an end range for the hash - which in total makes 1 million hashes.
|
||||
|
||||
```js
|
||||
import { fileURLToPath } from 'url';
|
||||
import { Worker, isMainThread, parentPort, workerData } from 'worker_threads';
|
||||
import crypto from 'crypto';
|
||||
import { fileURLToPath } from "url";
|
||||
import { Worker, isMainThread, parentPort, workerData } from "worker_threads";
|
||||
import crypto from "crypto";
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const n = 1000000;
|
||||
@ -52,49 +51,49 @@ const THREAD_NUM = 8;
|
||||
const string = "Hello World";
|
||||
|
||||
if (isMainThread) {
|
||||
|
||||
const threads = new Set();
|
||||
for (let i = 0; i < THREAD_NUM; i++) {
|
||||
threads.add(new Worker(__filename, {workerData: {
|
||||
start: i * (n / THREAD_NUM),
|
||||
end: (i * (n / THREAD_NUM)) + n / THREAD_NUM}
|
||||
}))
|
||||
threads.add(
|
||||
new Worker(__filename, {
|
||||
workerData: {
|
||||
start: i * (n / THREAD_NUM),
|
||||
end: i * (n / THREAD_NUM) + n / THREAD_NUM,
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
console.time("Thread");
|
||||
|
||||
|
||||
for (const worker of threads) {
|
||||
worker.on('message', msg => console.log(msg));
|
||||
worker.on('exit', () => {
|
||||
worker.on("message", (msg) => console.log(msg));
|
||||
worker.on("exit", () => {
|
||||
threads.delete(worker);
|
||||
if (threads.size === 0) {
|
||||
console.timeEnd("Thread");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
for (let i = workerData.start; i < workerData.end; i++) {
|
||||
const hash = crypto.createHash('md5').update(string).digest('hex');
|
||||
const hash = crypto.createHash("md5").update(string).digest("hex");
|
||||
}
|
||||
|
||||
parentPort.postMessage('Done!');
|
||||
}
|
||||
|
||||
parentPort.postMessage("Done!");
|
||||
}
|
||||
```
|
||||
|
||||
This results in the following output:
|
||||
|
||||
```js
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Thread: 335.294ms
|
||||
```
|
||||
|
||||
@ -103,28 +102,31 @@ A 4x increase in speed. There is a delay because worker threads actually spawn t
|
||||
This is very clear if we changed the number of hashes to 10 000.
|
||||
|
||||
### Single Thread
|
||||
|
||||
```
|
||||
Single-Thread: 23.476ms
|
||||
```
|
||||
|
||||
### 8 Worker Threads
|
||||
|
||||
```
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Thread: 70.337ms
|
||||
```
|
||||
|
||||
As you can see the single thread beat the 8 threads by almost 4x. This is because it is costly to create a thread outright which is what Node.js seems to be doing.
|
||||
|
||||
## Disclaimer
|
||||
|
||||
The Node.js crypto module is basically a wrapper for the native OpenSSL hashing functions, so I suspect that Node.js is just making a very fast C program do the hard work - but never the less it works very well.
|
||||
|
||||
|
||||
## Conclusion
|
||||
|
||||
Node.js is a very solid backend technology to perform parallalism, it is not just limited to making RESTful APIs. It can competes with strongly typed and compiled languages such as golang.
|
||||
4
content/blog/_index.md
Normal file
4
content/blog/_index.md
Normal file
@ -0,0 +1,4 @@
|
||||
+++
|
||||
title = 'Blog'
|
||||
date = 2023-11-14T17:55:14Z
|
||||
+++
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
layout: '../../layouts/post.astro'
|
||||
title: 'Deepwork - Cal Newport'
|
||||
date: '16/08/2022'
|
||||
---
|
||||
|
||||
# Deepwork - Cal Newport. A review
|
||||
+++
|
||||
title = "Deepwork - Cal Newport"
|
||||
date = "2022-08-16"
|
||||
author = "John Costa"
|
||||
toc = true
|
||||
+++
|
||||
|
||||
This review is a little different because I wrote it down on paper, here are the pages:
|
||||
|
||||
@ -1,22 +1,26 @@
|
||||
---
|
||||
layout: '../../layouts/post.astro'
|
||||
title: 'Digital Minimalism - Cal Newport'
|
||||
date: '05/09/2022'
|
||||
---
|
||||
+++
|
||||
title = "Digital Minimalism - Cal Newport"
|
||||
description = "A book review"
|
||||
tags = ["books"]
|
||||
date = "2022-09-05"
|
||||
author = "John Costa"
|
||||
toc = true
|
||||
+++
|
||||
|
||||
# Digital Minimalism - Cal Newport
|
||||
Digital Minimalism, by Cal Newport - The author of the very popular "Deep work", is a book describing a problem, which is our digital addictions and malpractices, and also how we can adopt the philosophy of "Digital Minimalism", in order to make us use technology in a healthy, and productive way.
|
||||
The author of the very popular "Deep work", is a book describing a problem, which is our digital addictions and malpractices, and also how we can adopt the philosophy of "Digital Minimalism", in order to make us use technology in a healthy, and productive way.
|
||||
|
||||
The book opens up by talking about how many of us feel trapped by technology, we have developed unhealthy habits of constant connection and constant scrolling. There have been many articles written about this, and many people have this feeling that technology isn't working for them, but it seems that we are the slaves to it. This is good business on the side of giant technology companies such as Facebook (Meta), which make money from our attention, it is only natural they want us to be constantly attached to our phones.
|
||||
The book opens up by talking about how many of us feel trapped by technology, we have developed unhealthy habits of constant connection and constant scrolling. There have been many articles written about this, and many people have this feeling that technology isn't working for them, but it seems that we are the slaves to it. This is good business on the side of giant technology companies such as Facebook (Meta), which make money from our attention, it is only natural they want us to be constantly attached to our phones.
|
||||
|
||||
Before reading this book, I had thought about this - specially when it comes to short form content such as TikTok, Instagram Reels, you name it... I was extremely concerned about my own well being, because I had never felt such a pull from a piece of social media, I always used it fairly sparingly - but when Instagram Reels came out, I was hooked, pulling around 1 - 2 hours a day just on these short videos, and it showed. I couldn't concentrate on my online lectures, I couldn't learn as quickly as I had done before, nor could I concentrate for as long, so I stopped it. The first step came a while ago, but I used to text my partner on Instagram DMs, and I asked if she would mind switching to Telegram, and the simple act of not opening the app slashed my screen time in half. I am rambling let's get back on track.
|
||||
|
||||
## Digital Minimalism and Digital Declutter
|
||||
|
||||
Digital Minimalism as Newport describes it is:
|
||||
|
||||
> Digital Minimalism is a philosophy towards technology which prioritises digital use to a small number of deeply thought out and efficient activities.
|
||||
|
||||
He backs this up with the following points (I won't go into too much detail here).
|
||||
|
||||
- Clutter is costly
|
||||
- Optimisation is important: Each tool should be finely tool to help you get your work done / have proper leisure.
|
||||
- Intentional is satisfying: Doing things because you want to them is by itself satisfying.
|
||||
@ -26,7 +30,9 @@ Newport suggests that we undergo a 30 day digital de-clutter where we remove all
|
||||
I think this might be slightly extreme, I think you can see problems in your current tools and act accordingly, however I haven't had a huge problem with technology - perhaps someone with a greater addiction would benefit from the complete de-clutter.
|
||||
|
||||
## Practices of Digital Minimalism
|
||||
|
||||
### Spend time alone
|
||||
|
||||
With the rise of modern technology, we have almost completely removed solitude. Think about it, when was the last time you were truly alone? No music, no TV, no work, just you? This was a scary realisation for me because the answer was none. I am either always surrounded by friends or see them on social media, or I am listening to music or watching netflix when I'm alone, this means I have spent very little time alone.
|
||||
|
||||
There are great examples that Newport gives in the book about why Solitude is important, but my favourite is that we have very complicated social circuits in our brain, and they are not meant to be on all the time, but they are now a days, constant notifications, alerts, pings, etc...
|
||||
@ -34,6 +40,7 @@ There are great examples that Newport gives in the book about why Solitude is im
|
||||
Spending time alone can benefit your mental health and it gives you time to realise the person you want to be and actually have a chat with yourself, something I believe (and so does Newport) to be of the utmost importance.
|
||||
|
||||
### Don't click like
|
||||
|
||||
Clicking the like button on social media makes you more committed to social media, interacting with in any way makes you more invested in it, and in recent times we have all heard the odd family member say "Why didn't you like my post?", as clicking twice on a piece of glass shows that I really care for them.
|
||||
|
||||
Social media companies know this, that we now have a certain contract between each other to like and comment on each others posts, and this makes us waste more time online, scrolling to endless posts and double tapping, for most of us it is probably muscle memory, which is just horrifying.
|
||||
@ -41,21 +48,23 @@ Social media companies know this, that we now have a certain contract between ea
|
||||
The reason I read this book WAS because of how social media affected my mental health and how often I was spending on it, after reading the book I uninstalled all social media from my phone and I message my closes friends on WhatsApp or Telegram (or god forbid SMS). And most people will say that they "cannot do it", YES YOU CAN, just try... you'll realise that you don't even care about 90% of the people on social media and all you've been doing is distancing yourself from the relationships you actually want to maintain. Focus on the 10% of people you actually care about, go see them, call them, sending a "heart" on Instagram every once in a while is no way to maintain a relationship.
|
||||
|
||||
### Reclaim leisure
|
||||
|
||||
The one I struggle with the most.
|
||||
|
||||
> Prioritise demanding activity over passive consumption
|
||||
|
||||
Our leisure habits, most often consist of scrolling through Twitter or watching Netflix. This stuff is fine but it has to be kept in check, if this is all we do then it is not okay, you need to have a proper leisure activity, a club or anything really to keep you busy when you are not working, something you really enjoy doing. These also have the benefit of being extremely satisfying compared to just watching Netflix.
|
||||
|
||||
>Seek activities, that require real-world, social interaction
|
||||
> Seek activities, that require real-world, social interaction
|
||||
|
||||
I, just like many others, love working remotely and love playing some video games with friends (or even by myself) however this cannot replace the leisure you have from playing chess over the board, or going to a badminton club where you have to socialise with your doubles partner. Social interaction in leisure is extremely important.
|
||||
|
||||
|
||||
### Join the attention resistance
|
||||
|
||||
Many giant social media companies are fighting for your attention, that is their business model, they need your eyes, on your phone, to sell you ads. Don't give it to them.
|
||||
|
||||
Easier said then done but Newport does suggest a couple of things to get you started:
|
||||
|
||||
- Delete social media from your phone (check it on your computer instead).
|
||||
- Use social media like a profession (use it to check on your friends, message someone, don't waste time scrolling).
|
||||
- Embrace slow media (long articles, something that really requires your full attention).
|
||||
@ -66,4 +75,5 @@ Your phone, is the closest object to you, maybe the closest object humans have e
|
||||
However, it can also be extremely addictive to just stare at the screen for hours, so I (and Newport) suggest you dumb down your phone. For me, I installed Niagra launcher (I have a OnePlus 8 running Android 11), this is a super simple launcher that lists your favourite apps, and the rest are hidden, that's it. This means when you open the phone you go straight to the app you want, you don't scroll for no reason. Something else this has helped me with is removing the apps I was somewhat addicted to (Instagram and YouTube), and put them out of sight, making me less likely to open them.
|
||||
|
||||
## Conclusion
|
||||
|
||||
Digital Minimalism is a great book that I think most people should read, it really exposes our addiction to technology and social media, and how it just isn't okay we spend so much time on it. It helped me form better, healthier habits with technology and in turn I am much happier, more productive, and spend more time doing more meaningful things - But I won't like, I still binge netflix from time to time, I still watch YouTube a TON, but this book has made me much more cautious about this, I can make sure that at least I don't use social media, or that I am aware of how much time I am spending on my phone.
|
||||
@ -1,14 +1,16 @@
|
||||
---
|
||||
layout: '../../layouts/post.astro'
|
||||
title: 'The Psychology of Money by Morgan Housel - A review'
|
||||
date: '15/11/2022'
|
||||
---
|
||||
+++
|
||||
title = "The Psychology of Money by Morgan Housel - A review"
|
||||
date = "2022-11-15"
|
||||
author = "John Costa"
|
||||
toc = true
|
||||
+++
|
||||
|
||||
This book contains 19 chapters, all with a small bit of wisdom about money, all quite useful. Much of what the book covers sounds like common sense if you are already somewhat money savvy, however getting the refresher or the introduction to these topics, is something this book did very well for me.
|
||||
|
||||
A big theme I found in this book was simply: Patience.
|
||||
|
||||
## Patience: Compounding
|
||||
|
||||
Chapter 4 talks about compounding interest, and how wealth is not build over night, but instead takes years and even decades to accumulate, through the power of compounding, this - I believe, is the most important lesson that the book has to teach. It doesn't matter if you invest £1000 today if you won't do anymore for the rest of the year, it is all about continual investments month after month after month, and leaving it. Just leave it, it will grow.
|
||||
|
||||
Housel further proves this point with the beautiful statistic: If you invest over a 20-year period in the US Stock marked, based on historical data you are 100% guaranteed to make money. Even if you bought in the worst possible moment, and also sold in the worst moment, because of the amount of time your money had to grow, it is (historically) impossible to lose money, unless of course you withdraw it early.
|
||||
@ -23,7 +25,7 @@ It is about being happy with your circumstance and not blowing all your wealth i
|
||||
|
||||
Throughout the book, Housel hints at the fact that often people change their life-style depending on how much they make, so even if you make millions, if you are spending millions you are not really wealthy, because you're not accumulating and making money work for you. This relates to the overall theme of patience, as a person must be calm and reasonable about their lifestyle, and very careful about raising it. Because it is easy to go forward, but very difficult to bring down the expensive bills.
|
||||
|
||||
I find it quite interesting how the entire book, doesn't so much talk about making money, or what to do with money, but more so about how people behave with money.
|
||||
I find it quite interesting how the entire book, doesn't so much talk about making money, or what to do with money, but more so about how people behave with money.
|
||||
|
||||
## Other themes
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
---
|
||||
layout: '../../layouts/post.astro'
|
||||
title: 'The Republic by Plate - A recap / review'
|
||||
date: '05/01/2020'
|
||||
---
|
||||
+++
|
||||
title = "The Republic by Plate - A recap / review"
|
||||
date = "2020-01-05"
|
||||
author = "John Costa"
|
||||
toc = true
|
||||
+++
|
||||
|
||||
# The Republic - Plate
|
||||
# A summary and review
|
||||
__Disclaimer: This book has some fairly rough topics, I'm simply writing a summary and a review__
|
||||
|
||||
**Disclaimer: This book has some fairly rough topics, I'm simply writing a summary and a review**
|
||||
|
||||
## Context
|
||||
|
||||
The Republic was written by Plato in 375 BC, many years ago. In was written in Greece, when the country was made up of various states who were at constant wars with not only each other but with the Persians at the time. This does explain some of the ideas in the book, which would be seen as extreme in any sense of the word.
|
||||
|
||||
This book was written by Plato in the form of a dialogue between Socrates and various other people, however this might be a made up dialogue, it is obviously very hard to confirm whether this is Socrates' thoughts or Plato's, but most likely it is Plato's.
|
||||
@ -18,6 +20,7 @@ Plato came from a long line of powerful Athenians who were very involved in poli
|
||||
This should all be kept in context when reading this book as to, understand why Plato thought such extreme ideas were not only true but the best for both the individual and the state, this is extremely important to keep in mind.
|
||||
|
||||
## What is Justice?
|
||||
|
||||
The book basically starts with this question, of what justice is and whether the just man is really the best, happiest and most well of than the unjust man, views challenged by his opponents in the dialogue.
|
||||
|
||||
To solve this question Socrates goes on to describe a city which contains many rules and extreme ideas, this state would be considered a near fascist regism in today's world, but with the failing democracies in Athens, and many starving people in Greece due to poor leadership, we can see why Socrates/Plato think this is the best way to form a city.
|
||||
@ -30,8 +33,8 @@ However this state is hardly permanent, because it is natural for a state to wan
|
||||
|
||||
And this is a big deal, because warriors are obviously more powerful than the regular citizen and therefore Socrates claims that there warriors or as he calls them "Auxiliaries", are restrained in two ways.
|
||||
|
||||
- Education, they are brought up with extensive education and only the best will be able to become part of this Auxiliary class.
|
||||
- Rulers, this is a sub class of the Auxiliary class within the state, the best of the Auxiliaries group will be able to become the rulers of the state, which will command the Auxiliary.
|
||||
- Education, they are brought up with extensive education and only the best will be able to become part of this Auxiliary class.
|
||||
- Rulers, this is a sub class of the Auxiliary class within the state, the best of the Auxiliaries group will be able to become the rulers of the state, which will command the Auxiliary.
|
||||
|
||||
There is a lot to unpack but starting with education, Plato claims that much of what they are exposed to must be censored; This means that only certain art can be shown or certain poetry can be read. This is an element which is obviously present in our current education systems, we do not expose children of certain things for their own sake, whether this is a good thing or a bad thing is the base for much heated debate and it would be quite difficult to discuss this completely. All I can say is that this book was written many many years ago and therefore is not in line with what we view as a good way of life. This is the reason that Plato saw this censorship as a good thing.
|
||||
|
||||
@ -42,11 +45,13 @@ There are a few more rules to bring up, starting with the fact that in this stat
|
||||
And similarly to private housing, wealth is also not allowed. This is for a number of reasons but most is to prevent people from taking action for personal gain, which is definitely a big problem in modern politics today. This was actually challenged in the book by one of the other characters, because it states that this state could not form any allies because it did not have any gold. Socrates is quick to shut it down by saying that the state has the best soldiers, and does not want wealth, therefore if other states allied with this one, they would keep all of the looting and gold from the enemies.
|
||||
|
||||
## The family
|
||||
|
||||
Plato describes in this book that women are different from men, we can all agree on this. However he did not see any difference in their capacities to be rules, an idea thought to be completely wrong at the time of writing. This is obviously something we all relish, the ability for anyone, regardless of gender or colour to take any job with the only restriction being their own ability to carry out that job (or at least it should).I obviously completely agree with this part of the book, it is perhaps the only part I completely, 100% agree with.
|
||||
|
||||
However, moving on to family, because children do not meet their parents, children are made in "Mating rituals" where the state picks pairs of people, basically to breed the best possible citizens, and eventually the best possible rules. However, very important to note that the citizens are not aware that the pairing are done, to their knowledge they simply won a "lottery", another part of censorship in our state.
|
||||
|
||||
## The ruler
|
||||
|
||||
Plato states that "philosophers should be kings", he also states that this does not happen in the world because those who are most suited for ruling, are the ones less likely to get into politics. Which is argued against but we can see where he is coming from. Philosophers who's only goal in life is to seek the truth, are not interested in politics of the state because it contains too much unmoral activity, campaigning, tactics and other things. This means they are likely never to rule.
|
||||
|
||||
Our state fixes this by having the best performing children, those who are seen to seek good and truth, to be our rulers.
|
||||
@ -54,6 +59,7 @@ Our state fixes this by having the best performing children, those who are seen
|
||||
This is pretty much impossible to achieve in the modern world, or in any world for that matter because it is obviously very hard to describe who is the best and it also begs the question, is the education system proper and a million other questions.
|
||||
|
||||
## Failed states
|
||||
|
||||
Plato talked a lot of failed states, and I feel these were very directed at particular states in ancient Greece. He also states in the Republic that these states would originate from the society he described n the following order
|
||||
|
||||
Timarchy --> Oligarchy --> Democracy --. Tyranny
|
||||
@ -64,7 +70,7 @@ It is worth describing what each of these societies are and a real world example
|
||||
|
||||
Starting with Timarchy, this is the most similar to our state but a few elements started to slip, for example private property is allowed, but most importantly, glory and honour are the leading principles of the state, instead of intelligence and the love for the truth. He gave Sparta as an example, a state which Plato seems to admire, because it is not far from the one he describes in this book. I won't give any real world examples because frankly this was not discussed in great length in the book and I do not know enough about the subject to categorise a single country in the modern world into a Timarchy (However, I believe that WWII Japan might have come close).
|
||||
|
||||
Oligarchy happens when a very small amount of people have control over the state because of huge amounts of wealth, it reminds me of most countries today to some extent, specially the US due to their extensive neo-liberal views, and the huge influences of billionaire donators to political parties, many more countries could be partially categorised as an oligarchy though. Plato said this derived from a Timarchy because of the ever expanding wealth of the political powers in a timarchy.
|
||||
Oligarchy happens when a very small amount of people have control over the state because of huge amounts of wealth, it reminds me of most countries today to some extent, specially the US due to their extensive neo-liberal views, and the huge influences of billionaire donators to political parties, many more countries could be partially categorised as an oligarchy though. Plato said this derived from a Timarchy because of the ever expanding wealth of the political powers in a timarchy.
|
||||
|
||||
Democracy, rated very poorly by Plato, most likely because of Athens, which was a democracy. However Athens was still quite corrupt, and their execution of Socrates probably meant that Plato despised the city, we must also remember this is where he grew up, and witnessed first hand the corruption happening within the state. Democracy then derives from an oligarchy when the poor, which compose the majority of the state finally take over in a sort of revolution. A democracy values personal freedom above everything else and therefore people have a say as to who is in power. This can be a bad thing because populism exists and is described in the Republic (not by that name but as a simple description of it). It is also said that many laws won't be respected because of the personal freedom everyone has in this state.
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
---
|
||||
layout: "../../layouts/post.astro"
|
||||
title: "I built a parser!"
|
||||
date: "27/07/2023"
|
||||
+++
|
||||
title = "Xml Parser"
|
||||
date = "2023-07-27"
|
||||
author = "John Costa"
|
||||
toc = true
|
||||
tags = ["Software"]
|
||||
+++
|
||||
|
||||
---
|
||||
|
||||
Git Repo: [Here](https://github.com/JohnCosta27/GoXmlParser)
|
||||
- Git Repo: [Here](https://github.com/JohnCosta27/GoXmlParser)
|
||||
|
||||
During my time at university I took a compilers module, it turned out to be my favourite module out of all my 3 years at university, and I had the privilege of being taught by [Elizabeth Scott](https://pure.royalholloway.ac.uk/en/persons/elizabeth-scott), one of the creators of [GLL Parsers](https://www.cs.rhul.ac.uk/research/languages/csle/GLLparsers.html), a parsing algorithm that can parse any context free grammar, it's very cool.
|
||||
|
||||
6
content/projects/_index.md
Normal file
6
content/projects/_index.md
Normal file
@ -0,0 +1,6 @@
|
||||
+++
|
||||
title = 'Projects'
|
||||
toc = true
|
||||
+++
|
||||
|
||||
A list of my various projects
|
||||
@ -1,11 +1,15 @@
|
||||
---
|
||||
layout: "../../layouts/post.astro"
|
||||
title: "Huffmanz - Huffman Encoding Implementation in Zig"
|
||||
date: "21/09/2023"
|
||||
+++
|
||||
title = "Huffmanz - Huffman Encoding Implementation in Zig"
|
||||
date = "2023-09-21"
|
||||
author = "John Costa"
|
||||
toc = true
|
||||
tags = ["Software"]
|
||||
+++
|
||||
|
||||
---
|
||||
|
||||
Link to Repo: [https://github.com/JohnCosta27/Huffmanz](https://github.com/JohnCosta27/Huffmanz)
|
||||
Link to Video: [https://www.youtube.com/watch?v=D5l5GUuNXB8&ab_channel=JohnCosta](https://www.youtube.com/watch?v=D5l5GUuNXB8&ab_channel=JohnCosta)
|
||||
- Link to Repo: [https://github.com/JohnCosta27/Huffmanz](https://github.com/JohnCosta27/Huffmanz)
|
||||
- Link to Video: [https://www.youtube.com/watch?v=D5l5GUuNXB8&ab_channel=JohnCosta](https://www.youtube.com/watch?v=D5l5GUuNXB8&ab_channel=JohnCosta)
|
||||
|
||||
[Huffman Encoding](https://en.wikipedia.org/wiki/Huffman_coding) is an algorithm for compressing text, using a binary tree to shorted the number of bits needed to represent each character. It's one of the first algorithms I learned in Computer Science. I was 14 year old and in Year 9. But until recently it hadn't crossed my mind again.
|
||||
|
||||
38
hugo.toml
Normal file
38
hugo.toml
Normal file
@ -0,0 +1,38 @@
|
||||
baseURL = 'https://johncosta.tech/'
|
||||
languageCode = 'en-uk'
|
||||
title = 'John Costa'
|
||||
theme = 'risotto'
|
||||
|
||||
[menu]
|
||||
[[menu.main]]
|
||||
name = 'Blog'
|
||||
pageRef = '/blog'
|
||||
[[menu.main]]
|
||||
name = 'Projects'
|
||||
pageRef = '/projects'
|
||||
|
||||
[params.about]
|
||||
title = "John Costa"
|
||||
description = "Software Engineer"
|
||||
|
||||
# Sidebar: social links
|
||||
# Available icon sets:
|
||||
# * FontAwesome 6 <https://fontawesome.com/> ('fa-brands', 'fa-normal', or 'fa-solid' for brands)
|
||||
# * Academicons <https://jpswalsh.github.io/academicons> ('ai ai-')
|
||||
|
||||
[[params.socialLinks]]
|
||||
icon = "fa-brands fa-github"
|
||||
title = "GitHub"
|
||||
url = "https://github.com/JohnCosta27/JohnTech"
|
||||
|
||||
[[params.socialLinks]]
|
||||
icon = "fa-solid fa-envelope"
|
||||
title = "Email"
|
||||
url = "mailto:johncosta027@gmail.com"
|
||||
[[params.socialLinks]]
|
||||
icon = "fa-brands fa-linkedin"
|
||||
title = "LinkedIn"
|
||||
url = "https://www.linkedin.com/in/john-costa-b883971b5/"
|
||||
|
||||
[taxonomies]
|
||||
tags = "tags"
|
||||
13
index.html
13
index.html
@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>John Costa</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
24
layouts/index.html
Normal file
24
layouts/index.html
Normal file
@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<html lang="{{- site.Language.Lang -}}">
|
||||
<head>
|
||||
{{- partial "head.html" . -}}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="page__header">{{- partial "header.html" . -}}</header>
|
||||
|
||||
<section class="page__body">{{ .Content }}</section>
|
||||
|
||||
<section class="page__aside">
|
||||
<div class="aside__about">{{- partial "about.html" . -}}</div>
|
||||
<hr />
|
||||
<div class="aside__content">
|
||||
{{- block "aside" . }}{{- end }}{{partial "allTags.html" . -}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="page__footer">{{- partial "footer.html" . -}}</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
10
layouts/partials/allTags.html
Normal file
10
layouts/partials/allTags.html
Normal file
@ -0,0 +1,10 @@
|
||||
<h2>All Tags</h2>
|
||||
{{range $name, $taxonomy := .Site.Taxonomies.tags}} {{ $cnt := .Count }} {{ with
|
||||
$.Site.GetPage (printf "/tags/%s" $name) }}
|
||||
<div class="tagbutton">
|
||||
<a href={{ .RelPermalink }} title="All pages with tag <i>{{$name}}</i>"
|
||||
>{{$name}}</a
|
||||
>
|
||||
<span>{{$cnt}}</span>
|
||||
</div>
|
||||
{{end}} {{end}}
|
||||
11
layouts/partials/tags.html
Normal file
11
layouts/partials/tags.html
Normal file
@ -0,0 +1,11 @@
|
||||
{{ $taxonomy := "tags" }} {{ with .Param $taxonomy }}
|
||||
<h2>Tags</h2>
|
||||
<ul>
|
||||
{{ range $index, $tag := . }} {{ with $.Site.GetPage (printf "/%s/%s"
|
||||
$taxonomy $tag) -}}
|
||||
<li>
|
||||
<a href="{{ .Permalink }}">{{ $tag | urlize }}</a>
|
||||
</li>
|
||||
{{- end -}} {{- end -}}
|
||||
</ul>
|
||||
{{ end }}
|
||||
@ -1,4 +0,0 @@
|
||||
[[redirects]]
|
||||
from = "/*"
|
||||
to = "/index.html"
|
||||
status = 200
|
||||
10880
package-lock.json
generated
10880
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
35
package.json
35
package.json
@ -1,35 +0,0 @@
|
||||
{
|
||||
"name": "john.tech",
|
||||
"version": "1.0.0",
|
||||
"description": "Personal website",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"astro:build": "astro build",
|
||||
"astro:dev": "astro dev",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"author": "John Costa",
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^1.3.0",
|
||||
"autoprefixer": "^10.4.4",
|
||||
"postcss": "^8.4.5",
|
||||
"tailwindcss": "^3.0.2",
|
||||
"vite": "^2.9.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/typography": "^0.5.4",
|
||||
"@astrojs/mdx": "^0.9.0",
|
||||
"@astrojs/react": "^1.0.0",
|
||||
"@astrojs/sitemap": "^1.0.0",
|
||||
"@astrojs/tailwind": "^1.0.0",
|
||||
"astro": "^1.0.5",
|
||||
"clsx": "^1.1.1",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-router": "^6.1.1",
|
||||
"react-router-dom": "^6.1.1"
|
||||
}
|
||||
}
|
||||
4459
pnpm-lock.yaml
generated
4459
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,6 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@ -1,23 +0,0 @@
|
||||
//============================================================
|
||||
// Essential Imports
|
||||
//============================================================
|
||||
|
||||
import React from "react";
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
|
||||
//============================================================
|
||||
// Pages
|
||||
//============================================================
|
||||
|
||||
import FrontPage from "./pages/Front.page";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<FrontPage />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
};
|
||||
export default App;
|
||||
@ -1,23 +0,0 @@
|
||||
---
|
||||
const headings = [
|
||||
{
|
||||
name: 'Home',
|
||||
url: '/'
|
||||
},
|
||||
{
|
||||
name: 'Blog',
|
||||
url: '/blog'
|
||||
}
|
||||
]
|
||||
---
|
||||
<div class="w-full h-32 flex justify-center">
|
||||
<div class="w-full max-w-4xl h-full gap-2 flex justify-between">
|
||||
{headings.map((h) => (
|
||||
<div class="flex justify-center items-center">
|
||||
<a href={h.url} class="text-3xl text-snow-storm-300 cursor-pointer hover:text-3xl transition-all duration-500">
|
||||
{h.name}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@ -1,19 +0,0 @@
|
||||
//============================================================
|
||||
// Essential Imports
|
||||
//============================================================
|
||||
|
||||
import React from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
//============================================================
|
||||
// Component
|
||||
//============================================================
|
||||
|
||||
const Cdiv = ({ className, children }) => {
|
||||
return (
|
||||
<div className={clsx("flex justify-center items-center", className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Cdiv;
|
||||
@ -1,17 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const FadeComponent = ({ delay, children }) => {
|
||||
|
||||
return (
|
||||
<div className="w-full bg-polar-night-400">
|
||||
<div
|
||||
className={
|
||||
"w-full transition-all ease-in-out duration-500"
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default FadeComponent;
|
||||
@ -1,59 +0,0 @@
|
||||
//============================================================
|
||||
// Essential Imports
|
||||
//============================================================
|
||||
|
||||
import React from "react";
|
||||
import '../../index.css';
|
||||
|
||||
//============================================================
|
||||
// Imported Components
|
||||
//============================================================
|
||||
|
||||
import AppearText from "../text/AppearText";
|
||||
import FadeComponent from "../core/FadeComponent";
|
||||
import Introduction from "../sections/Introduction";
|
||||
import Experience from "../sections/Experience";
|
||||
import Projects from '../sections/Projects';
|
||||
|
||||
//============================================================
|
||||
// Component
|
||||
//============================================================
|
||||
|
||||
const DELAY = 0;
|
||||
|
||||
const FrontPage = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-screen bg-polar-night-400">
|
||||
<div className="w-full h-3/5 flex justify-center items-center">
|
||||
<div className="flex flex-col gap-4 justify-center items-center">
|
||||
<AppearText
|
||||
className="font-display font-bold text-7xl text-frost-400"
|
||||
text="JOHN COSTA"
|
||||
delay={DELAY}
|
||||
/>
|
||||
<AppearText
|
||||
className="font-display font-bold text-5xl text-frost-200"
|
||||
text="DEVELOPER"
|
||||
delay={DELAY * 2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<FadeComponent delay={DELAY * 2.5}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||
<path
|
||||
className="fill-frost-200"
|
||||
d="M0,192L120,202.7C240,213,480,235,720,240C960,245,1200,235,1320,229.3L1440,224L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"
|
||||
></path>
|
||||
</svg>
|
||||
</FadeComponent>
|
||||
<FadeComponent delay={DELAY * 2.5}>
|
||||
<Introduction />
|
||||
<Experience />
|
||||
<Projects />
|
||||
</FadeComponent>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default FrontPage;
|
||||
@ -1,91 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import clsx from "clsx";
|
||||
import Tensorcrypt from "./Tensorcrypt";
|
||||
import Realtutor from "./Realtutor";
|
||||
import Webdev from './Webdev';
|
||||
|
||||
const Experience = () => {
|
||||
const [currentSection, setCurrentSection] = useState(0);
|
||||
const [animationClasses, setAnimationClasses] = useState("opacity-100");
|
||||
|
||||
const changeText = (index) => {
|
||||
setAnimationClasses("opacity-0");
|
||||
setTimeout(() => {
|
||||
setAnimationClasses("opacity-100");
|
||||
setCurrentSection(index);
|
||||
}, 250);
|
||||
};
|
||||
|
||||
/**
|
||||
* This could be done with React-router,
|
||||
* However this makes the animations easier - no need to over complciate it.
|
||||
*/
|
||||
const getText = (index) => {
|
||||
if (index == 0) {
|
||||
return <Tensorcrypt />;
|
||||
} else if (index == 1) {
|
||||
return <Realtutor />;
|
||||
} else {
|
||||
return <Webdev />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col justify-center items-center bg-frost-200 py-12">
|
||||
<div className="w-full flex md:flex-row flex-col p-4 max-w-5xl gap-4">
|
||||
<div className="w-full flex flex-col gap-4">
|
||||
<h1 className="text-7xl text-center font-display font-bold text-polar-night-400">
|
||||
Experience
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-3/4 flex justify-center px-4">
|
||||
<div className="w-full max-w-7xl flex bg-polar-night-400 py-4 rounded-md">
|
||||
<div className="w-12 flex flex-col justify-between items-center h-96 relative">
|
||||
<div className="w-8 h-8 flex justify-center items-center">
|
||||
<div
|
||||
className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all"
|
||||
onClick={() => changeText(0)}
|
||||
></div>
|
||||
</div>
|
||||
<div className="w-8 h-8 flex justify-center items-center">
|
||||
<div
|
||||
className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all"
|
||||
onClick={() => changeText(1)}
|
||||
></div>
|
||||
</div>
|
||||
<div className="w-8 h-8 flex justify-center items-center">
|
||||
<div
|
||||
className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all"
|
||||
onClick={() => changeText(2)}
|
||||
></div>
|
||||
</div>
|
||||
<div className="w-1 h-full bg-blue-500 absolute rounded-full"></div>
|
||||
</div>
|
||||
<div className="w-24 h-full flex flex-col justify-between">
|
||||
<div className="h-8 flex items-center">
|
||||
<p className="text-lg text-snow-storm-300">Tensorcrypt</p>
|
||||
</div>
|
||||
<div className="h-8 flex items-center">
|
||||
<p className="text-lg text-snow-storm-300">Real Tutor</p>
|
||||
</div>
|
||||
<div className="h-8 flex items-center">
|
||||
<p className="text-lg text-snow-storm-300">Web dev</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx("w-full h-full p-4 flex flex-col items-center")}>
|
||||
<div
|
||||
className={clsx(
|
||||
"w-3/4 flex flex-col items-center transition-all",
|
||||
animationClasses
|
||||
)}
|
||||
>
|
||||
{getText(currentSection)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Experience;
|
||||
@ -1,15 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const GitHubMark = ({ width, height }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
export default GitHubMark;
|
||||
@ -1,61 +0,0 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const Introduction = () => {
|
||||
return (
|
||||
<div className="w-full flex h-auto justify-center items-center bg-frost-200">
|
||||
<div className="w-full flex md:flex-row flex-col p-4 max-w-5xl gap-4">
|
||||
<div className="w-full flex flex-col gap-4 font-display text-polar-night-400">
|
||||
<h1 className="text-7xl font-bold">Hi, I'm John</h1>
|
||||
<p className="text-xl">
|
||||
I am a BSc Computer Science student who loves to program. I a most
|
||||
intrested in full-stack development - taking an idea all the way to
|
||||
the end and creating a full application, I love working as part of a
|
||||
team and making project with friends. I am also a Linux Enthusiat
|
||||
and I run Garuda Linux as my main OS on all my machines.
|
||||
Furthermore, I am a private tutor for GCSE and A-level Maths and
|
||||
Computer Science.
|
||||
</p>
|
||||
<p className="text-xl">
|
||||
I have worked on an extensive number of projects, such as making my
|
||||
own tutoring company whilst at university, creating a web based
|
||||
revision application for my students, and creating the frontend for
|
||||
a{" "}
|
||||
<a
|
||||
href="https://tensor.software/"
|
||||
className="font-semibold hover:text-aurora-red text-aurora-orange transition-all underline cursor-pointer"
|
||||
>
|
||||
secure datasharing startup.
|
||||
</a>
|
||||
</p>
|
||||
<h2 className="text-3xl font-bold mt-16">
|
||||
Technologies I work with:
|
||||
</h2>
|
||||
<div className="w-full grid grid-cols-1 md:grid-cols-2 items-center px-8">
|
||||
<ul className="w-3/4 list-disc flex flex-col gap-2 text-lg">
|
||||
<li>JavaScript / TypeScript</li>
|
||||
<li className="ml-2">Both frontend and backend</li>
|
||||
<li>Node.js</li>
|
||||
<li>Golang</li>
|
||||
<li>React</li>
|
||||
<li>PostgreSQL</li>
|
||||
<li className="ml-2">
|
||||
Including hosting and managing my own databases
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="w-3/4 list-disc flex flex-col gap-2 text-lg">
|
||||
<li>Linux Management</li>
|
||||
<li className="ml-2">
|
||||
I have hosted and managed several linux servers
|
||||
</li>
|
||||
<li>MongoDB</li>
|
||||
<li>Java</li>
|
||||
<li>Wordpress</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Introduction;
|
||||
@ -1,48 +0,0 @@
|
||||
import React from "react";
|
||||
import GitHubMark from "./GitHubMark";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
const ProjectCard = ({ title, liveUrl, gitUrl, children }) => {
|
||||
const getLiveUrl = () => {
|
||||
if (liveUrl.length == 1) {
|
||||
return (
|
||||
<div className="w-full flex justify-center items-center h-12 rounded bg-aurora-orange text-polar-night-200 transition-all text-xl">
|
||||
No Live :(
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<a
|
||||
href={liveUrl}
|
||||
className="w-full flex justify-center items-center h-12 rounded bg-aurora-green text-polar-night-200 hover:bg-aurora-orange transition-all text-xl"
|
||||
>
|
||||
Live
|
||||
</a>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="min-h-[400px] w-full rounded-lg flex flex-col bg-polar-night-400 p-4 shadow-md justify-between">
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
<h2 className="text-4xl text-snow-storm-100">{title}</h2>
|
||||
{children}
|
||||
</div>
|
||||
<div className="w-full flex items-center gap-2 text-lg">
|
||||
{getLiveUrl()}
|
||||
<a
|
||||
href={gitUrl}
|
||||
className="w-full flex justify-center items-center h-12 rounded bg-snow-storm-200 hover:bg-polar-night-100 transition-all"
|
||||
>
|
||||
<GitHubMark width="32" height="32" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ProjectCard.defaultProps = {
|
||||
title: "Default Title",
|
||||
liveUrl: "/",
|
||||
gitUrl: "/",
|
||||
};
|
||||
|
||||
export default ProjectCard;
|
||||
@ -1,77 +0,0 @@
|
||||
import React from "react";
|
||||
import ProjectCard from "./ProjectCard";
|
||||
|
||||
const Projects = () => {
|
||||
return (
|
||||
<div className="w-full flex flex-col justify-center items-center bg-frost-200 py-12">
|
||||
<div className="w-full flex flex-col p-4 max-w-screen-2xl gap-4">
|
||||
<h1 className="w-full text-7xl text-center font-display font-bold text-polar-night-400">
|
||||
Projects
|
||||
</h1>
|
||||
<div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<ProjectCard
|
||||
title="Real Tutor"
|
||||
liveUrl="https://realtutor.johncosta.tech/"
|
||||
gitUrl="https://github.com/JohnCosta27/RealTutorMERN"
|
||||
>
|
||||
<p className="text-xl text-snow-storm-100">
|
||||
A lesson and progress management system which allowed tutors at my
|
||||
company to schedule lessons, add repots and keep track of students
|
||||
progress. Built using the MERN stack.
|
||||
</p>
|
||||
<p className="text-xl text-snow-storm-100">
|
||||
Use the following credentitals to play around:
|
||||
</p>
|
||||
<ul className="text-lg text-snow-storm-100">
|
||||
<li>Username: 1@tutor.com</li>
|
||||
<li>Password: SafePassword123.</li>
|
||||
</ul>
|
||||
</ProjectCard>
|
||||
<ProjectCard
|
||||
title="Odin"
|
||||
liveUrl="https://odin.johncosta.tech/"
|
||||
gitUrl="https://github.com/JohnCosta27/Odin"
|
||||
>
|
||||
<p className="text-xl text-snow-storm-100">
|
||||
A revision tool which allows students to revise various subjects.
|
||||
Uses Auth0 for user sign ups.
|
||||
</p>
|
||||
</ProjectCard>
|
||||
<ProjectCard
|
||||
title="Restaurant ordering system"
|
||||
liveUrl="https://www.youtube.com/watch?v=BZY2Le_Szgg&t=1s&ab_channel=JohnCosta"
|
||||
gitUrl="https://github.com/JohnCosta27/"
|
||||
>
|
||||
<p className="text-xl text-snow-storm-100">
|
||||
A revision tool which allows students to revise various subjects.
|
||||
Year 2 Team Project, I was resposible for making the entire UI. I
|
||||
cannot release the source code, but there is a video.
|
||||
</p>
|
||||
</ProjectCard>
|
||||
<ProjectCard
|
||||
title="Disser"
|
||||
gitUrl="https://github.com/JohnCosta27/Disser-RoyalHackaway2022"
|
||||
>
|
||||
<p className="text-xl text-snow-storm-100">
|
||||
Royal Hackathon Project 2022. A real time social media which
|
||||
allows users to communicate with each other in real time. It also
|
||||
involves GPT-3 bots which communicate with each other and the
|
||||
users.
|
||||
</p>
|
||||
</ProjectCard>
|
||||
<ProjectCard
|
||||
title="Snake"
|
||||
gitUrl="https://github.com/JohnCosta27/Snake"
|
||||
liveUrl="https://johncosta27.github.io/Snake/"
|
||||
>
|
||||
<p className="text-xl text-snow-storm-100">
|
||||
My first big project. A classic snake game that adapts to the
|
||||
screen size you are on.
|
||||
</p>
|
||||
</ProjectCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Projects;
|
||||
@ -1,19 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Realtutor = () => {
|
||||
return (
|
||||
<div className="w-full flex flex-col items-center text-4xl text-snow-storm-300 gap-4">
|
||||
<h1>Real tutor</h1>
|
||||
<p className="text-xl">
|
||||
A company that I founded to provide online affordable tutoring in a
|
||||
series of subjects. I have and still am a private tutor and I wanted to
|
||||
grow my services and provide tutoring to more people, so I made a
|
||||
company where I could hire free lance tutors to teach subjects which I
|
||||
myself cannot.
|
||||
</p>
|
||||
<h2 className="text-3xl">Software Made</h2>
|
||||
<p className="text-xl">I made software to track students progress as well as students and tutors lessons, I used this to make sure I knew what all the students were doing and how they were doing.</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Realtutor;
|
||||
@ -1,15 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Tensorcrypt = () => {
|
||||
return (
|
||||
<div className="w-full flex flex-col items-center text-4xl text-snow-storm-300 gap-4">
|
||||
<h1>Tensorcrypt (2021 - 2022)</h1>
|
||||
<p className="text-xl">
|
||||
A secure data-sharing startup funded by CyberASAP, it provides zero
|
||||
knowledge data sharing services for componanies to share data in a
|
||||
completely encrypted way, as well as.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Tensorcrypt;
|
||||
@ -1,24 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Webdev = () => {
|
||||
return (
|
||||
<div className="w-full flex flex-col items-center text-4xl text-snow-storm-300 gap-4">
|
||||
<h1>Free lance Web Development</h1>
|
||||
<p className="text-xl">
|
||||
I also work as a Free lance web developer, and I have worked on various
|
||||
projects such as:
|
||||
</p>
|
||||
<ul className="px-4 text-lg list-disc">
|
||||
<li>SCC Website (A security lab at my university).</li>
|
||||
<li>This website.</li>
|
||||
<li>Rio Illustrates (A portfolio website for a great artist).</li>
|
||||
</ul>
|
||||
<br />
|
||||
|
||||
<p className="text-xl">
|
||||
I also make Web Applications, these are under the projects section.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Webdev;
|
||||
@ -1,14 +0,0 @@
|
||||
import clsx from 'clsx';
|
||||
|
||||
const AppearText = ({ text, delay, className }) => {
|
||||
return (
|
||||
<>
|
||||
<h1
|
||||
className={clsx("transition-all ease-in-out duration-500", className)}
|
||||
>
|
||||
{text}
|
||||
</h1>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default AppearText;
|
||||
@ -1,5 +0,0 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@ -1,7 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./components/App";
|
||||
|
||||
import "./index.css";
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
@ -1,19 +0,0 @@
|
||||
---
|
||||
import Navbar from '../components/Navbar.astro';
|
||||
const { frontmatter } = Astro.props
|
||||
---
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Blog post</title>
|
||||
</head>
|
||||
<body class="flex flex-col items-center bg-polar-night-400">
|
||||
<Navbar />
|
||||
<div class="w-full max-w-4xl p-8 flex justify-center">
|
||||
<div class="w-full prose prose-invert">
|
||||
<h1 class="text-5xl">{frontmatter.title}</h1>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,28 +0,0 @@
|
||||
---
|
||||
import Navbar from '../components/Navbar.astro'
|
||||
|
||||
const posts = await Astro.glob('./posts/*.md');
|
||||
posts.sort((a, b) => {
|
||||
const splitA = a.frontmatter.date.split("/");
|
||||
const splitB = b.frontmatter.date.split("/");
|
||||
return new Date(splitB[2], splitB[1], splitB[0]).getTime() - new Date(splitA[2], splitA[1], splitA[0]).getTime()
|
||||
});
|
||||
---
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>John's Blog</title>
|
||||
</head>
|
||||
<body class="w-full flex flex-col items-center bg-polar-night-400">
|
||||
<Navbar />
|
||||
<div class="w-full max-w-4xl flex flex-col gap-4 p-4">
|
||||
{posts.map((post) => (
|
||||
<a href={post.url} class="flex flex-col border-frost-400 border-2 text-snow-storm-100 p-4 rounded-lg">
|
||||
<h1 class="text-2xl">{post.frontmatter.title}</h1>
|
||||
<p class="text-sm">{post.frontmatter.description}</p>
|
||||
<p class="text-sm">{post.frontmatter.date}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
import FrontPage from '../components/pages/FrontPage';
|
||||
import Navbar from '../components/Navbar.astro';
|
||||
---
|
||||
<html>
|
||||
<head>
|
||||
<title>John Costa</title>
|
||||
</head>
|
||||
<body class="w-full flex flex-col items-center bg-polar-night-400">
|
||||
<Navbar />
|
||||
<FrontPage></FrontPage>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,7 +0,0 @@
|
||||
---
|
||||
layout: "../../layouts/post.astro"
|
||||
title: "Testing"
|
||||
date: "31/10/2023"
|
||||
---
|
||||
|
||||
# Spooky Test
|
||||
@ -1,44 +0,0 @@
|
||||
module.exports = {
|
||||
content: [
|
||||
"./components/**/*.{html,js,jsx}",
|
||||
"./public/index.html",
|
||||
"./src/**/*.{html,js,jsx,astro,md}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"polar-night": {
|
||||
100: "#4C566A",
|
||||
200: "#434C5E",
|
||||
300: "#3B4252",
|
||||
400: "#2E3440",
|
||||
},
|
||||
"snow-storm": {
|
||||
100: "#ECEFF4",
|
||||
200: "#E5E9F0",
|
||||
300: "#D8DEE9",
|
||||
},
|
||||
frost: {
|
||||
100: "#8FBCBB",
|
||||
200: "#88C0D0",
|
||||
300: "#81A1C1",
|
||||
400: "#5E81AC",
|
||||
},
|
||||
aurora: {
|
||||
red: "#BF616A",
|
||||
orange: "#D08770",
|
||||
yellow: "#EBCB8B",
|
||||
green: "#A3BE8C",
|
||||
purple: "#B48EAD",
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
display: ["Inter"],
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require("@tailwindcss/typography")],
|
||||
};
|
||||
1
themes/risotto/.gitignore
vendored
Normal file
1
themes/risotto/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
.hugo_build.lock
|
||||
20
themes/risotto/LICENSE
Normal file
20
themes/risotto/LICENSE
Normal file
@ -0,0 +1,20 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2021 Joe Roe
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
29
themes/risotto/NEWS.md
Normal file
29
themes/risotto/NEWS.md
Normal file
@ -0,0 +1,29 @@
|
||||
# risotto (development version)
|
||||
|
||||
* Fix overflow of code blocks with line numbers (#41)
|
||||
* Add descriptions to sidebar of list pages, where defined in the frontmatter of `_index.md` (#55)
|
||||
|
||||
# risotto 0.3.0
|
||||
|
||||
* Added support for favicons (#57)
|
||||
|
||||
# risotto 0.2.0
|
||||
|
||||
* **Breaking change** – new framework for colour palettes:
|
||||
* Palettes are defined using CSS variables following the [base16](https://github.com/chriskempson/base16) system
|
||||
* Added 14 new palettes: `apprentice`, `base16-dark`, `base16-light`, `dracula`, `material`, `papercolor-dark`, `papercolor-light`, `solarized-dark`, `solarized-light`, `tender`, `tokyo-night-dark`, `tokyo-night-light`, `windows-95` and `windows-95-light`.
|
||||
* The default palette is `base16-dark`
|
||||
* The `mode` parameter is no longer needed
|
||||
* If you were using one of the old named palettes (`gruvbox-dark` or `gruvbox-light`), the change will be seamless.
|
||||
* If you were using a custom palette, you will need to redefine it using the new framework. See README for further details.
|
||||
* Added a table of contents (thanks @dashv, #47)
|
||||
* Added multilanguage support with a language switcher (thanks @bedefaced)
|
||||
* Made the site header and nav wrap more efficiently on narrow screens (thanks @m-dev672, #32)
|
||||
* Added a changelog
|
||||
|
||||
# risotto 0.1.0
|
||||
|
||||
First named release, including:
|
||||
|
||||
* `gruvbox-dark` and `gruvbox-light` colour palettes
|
||||
* FontAwesome6 and Academicons icon sets
|
||||
98
themes/risotto/README.md
Normal file
98
themes/risotto/README.md
Normal file
@ -0,0 +1,98 @@
|
||||
# risotto
|
||||
|
||||
risotto is a minimalist, responsive [hugo](https://gohugo.io) theme inspired by terminal ricing aesthetics.
|
||||
|
||||
[](https://themes.gohugo.io/themes/risotto/)
|
||||
[](https://semver.org)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
The easiest way to install the theme is to clone this repository into your site's `themes` directory:
|
||||
|
||||
```shell
|
||||
git clone https://github.com/joeroe/risotto themes/risotto
|
||||
```
|
||||
|
||||
If your site is already a git repository, you can add the theme as a submodule instead:
|
||||
|
||||
```shell
|
||||
git submodule add https://github.com/joeroe/risotto.git themes/risotto
|
||||
```
|
||||
|
||||
## Update
|
||||
|
||||
If you installed the theme using `git clone`, pull the repository to get the latest version:
|
||||
|
||||
```shell
|
||||
cd themes/risotto
|
||||
git pull
|
||||
```
|
||||
|
||||
Or, if you added it as a git submodule:
|
||||
|
||||
```shell
|
||||
git submodule update --remote
|
||||
```
|
||||
|
||||
## Configure
|
||||
|
||||
To use the theme, add `theme = 'risotto'` to your site's `config.toml`, or `theme: risotto` to your `config.yaml` respectively.
|
||||
|
||||
See `exampleSite/config.toml` for the theme-specific parameters you need to add to your site's `config.toml` or `config.yaml` to configure the theme.
|
||||
|
||||
### Colour palettes
|
||||
|
||||
risotto uses the [base16 framework](https://github.com/chriskempson/base16) to define colour schemes that can be used with the `theme.palette` parameter.
|
||||
A selection of 16 palettes (10 dark, 6 light) are bundled with the theme: `apprentice`, `base16-dark`, `base16-light`, `dracula`, `gruvbox-dark`, `gruvbox-light`, `material`, `papercolor-dark`, `papercolor-light`, `solarized-dark`, `solarized-light`, `tender`, `tokyo-night-dark`, `tokyo-night-light`, `windows-95` and `windows-95-light`.
|
||||
The default is `base16-dark`.
|
||||
|
||||
<!-- TODO: add screenshots of default themes -->
|
||||
|
||||
The easiest way to use other base16 styles is to place .css file from https://github.com/monicfenga/base16-styles/tree/master/css-variables and place it in your `static/css/palettes` directory.
|
||||
|
||||
Or to define a wholly custom theme, you will need to define the following CSS variables for the following base16 colours (see [base16-dark.css](blob/main/static/css/palettes/base16-dark.css) for an example):
|
||||
|
||||
| Base | Default colour | Used for | Examples |
|
||||
| ---- | -------------- | -------- | -------- |
|
||||
| 00 | Dark | Background | Page background |
|
||||
| 01 | │ | Alt. background | Content background |
|
||||
| 02 | │ | In-text backgrounds | `<pre>`, `<code>`, `<kbd>`, `<samp>` |
|
||||
| 03 | │ | Muted text | `:before` & `:marker` symbols |
|
||||
| 04 | │ | Alt. foreground | Aside text |
|
||||
| 05 | │ | Foreground | Content text |
|
||||
| 06 | │ | | |
|
||||
| 07 | Light | | |
|
||||
| 08 | Red | | |
|
||||
| 09 | Orange | | |
|
||||
| 0A | Yellow | Highlights | Selected text, `<mark>` |
|
||||
| 0B | Green | Primary accent | Logo |
|
||||
| 0C | Cyan | Active links | `a:active`, `a:hover` |
|
||||
| 0D | Blue | Links | `a:link`, `a:visited` |
|
||||
| 0E | Magenta | | |
|
||||
| 0F | Brown | | |
|
||||
|
||||
For light mode palettes, the sequence of 00–07 should be reversed (light to dark, not dark to light).
|
||||
Note that not all colours are currently used in the theme.
|
||||
|
||||
## Favicon
|
||||
|
||||
risotto will automatically use favicons placed in the `static/` directory.
|
||||
The following files will be detected and included in your site's `<head>` section:
|
||||
|
||||
* `favicon.ico`
|
||||
* `favicon-16x16.png`
|
||||
* `favicon-32x32.png`
|
||||
* `apple-touch-icon.png`
|
||||
* `site.webmanifest`
|
||||
|
||||
You can generate these from an image or emoji using [favicon.io](https://favicon.io/) or a similar service.
|
||||
They must be placed directly under your site's `static/` directory, i.e. not in in a subdirectory or `themes/risotto/static/`.
|
||||
|
||||
## Acknowledgements
|
||||
|
||||
The 'cooked rice' emoji used as a favicon for the example site was created by the [Twemoji project](https://twemoji.twitter.com/) and is licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/).
|
||||
2
themes/risotto/archetypes/default.md
Normal file
2
themes/risotto/archetypes/default.md
Normal file
@ -0,0 +1,2 @@
|
||||
+++
|
||||
+++
|
||||
3
themes/risotto/config.toml
Normal file
3
themes/risotto/config.toml
Normal file
@ -0,0 +1,3 @@
|
||||
[module]
|
||||
[module.hugoVersion]
|
||||
min = "0.41.0"
|
||||
21
themes/risotto/exampleSite/LICENSE
Normal file
21
themes/risotto/exampleSite/LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014 Steve Francia
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
100
themes/risotto/exampleSite/config.toml
Normal file
100
themes/risotto/exampleSite/config.toml
Normal file
@ -0,0 +1,100 @@
|
||||
baseURL = "https://risotto.joeroe.io"
|
||||
theme = "risotto"
|
||||
title = "risotto demo"
|
||||
author = "Joe Roe"
|
||||
copyright = "© [Joe Roe](https://joeroe.io) & [risotto contributors](https://github.com/joeroe/risotto/graphs/contributors)."
|
||||
paginate = 3
|
||||
languageCode = "en"
|
||||
DefaultContentLanguage = "en"
|
||||
enableInlineShortcodes = true
|
||||
# prevent build failures when using Hugo's Instagram shortcode due to deprecated Instagram API.
|
||||
# See https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456
|
||||
ignoreErrors = ["error-remote-getjson"]
|
||||
|
||||
# Automatically add content sections to main menu
|
||||
sectionPagesMenu = "main"
|
||||
|
||||
[params]
|
||||
noindex = false
|
||||
|
||||
[params.theme]
|
||||
palette = "base16-dark"
|
||||
|
||||
# Sidebar: about/bio
|
||||
[params.about]
|
||||
title = "risotto"
|
||||
description = "A [hugo](https://gohugo.io) theme inspired by terminal ricing."
|
||||
logo = "images/rice.svg"
|
||||
|
||||
# Sidebar: social links
|
||||
# Available icon sets:
|
||||
# * FontAwesome 6 <https://fontawesome.com/> ('fa-brands', 'fa-normal', or 'fa-solid' for brands)
|
||||
# * Academicons <https://jpswalsh.github.io/academicons> ('ai ai-')
|
||||
|
||||
[[params.socialLinks]]
|
||||
icon = "fa-brands fa-github"
|
||||
title = "GitHub"
|
||||
url = "https://github.com/joeroe/risotto"
|
||||
|
||||
[[params.socialLinks]]
|
||||
icon = "fa-solid fa-envelope"
|
||||
title = "Email"
|
||||
url = "mailto:example@example.com"
|
||||
|
||||
[[params.socialLinks]]
|
||||
icon = "ai ai-orcid"
|
||||
title = "ORCID"
|
||||
url = "https://orcid.org/0000-0001-2345-6789"
|
||||
|
||||
[menu]
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "about"
|
||||
name = "About"
|
||||
url = "/about/"
|
||||
weight = 10
|
||||
|
||||
[taxonomies]
|
||||
category = "categories"
|
||||
tag = "tags"
|
||||
series = "series"
|
||||
|
||||
# For hugo >= 0.60.0, enable inline HTML
|
||||
[markup.goldmark.renderer]
|
||||
unsafe = true
|
||||
|
||||
[markup]
|
||||
|
||||
# Table of contents
|
||||
# Add toc = true to content front matter to enable
|
||||
[markup.tableOfContents]
|
||||
startLevel = 2
|
||||
endLevel = 3
|
||||
ordered = true
|
||||
|
||||
[privacy]
|
||||
|
||||
[privacy.vimeo]
|
||||
disabled = false
|
||||
simple = true
|
||||
|
||||
[privacy.twitter]
|
||||
disabled = false
|
||||
enableDNT = true
|
||||
simple = true
|
||||
|
||||
[privacy.instagram]
|
||||
disabled = false
|
||||
simple = true
|
||||
|
||||
[privacy.youtube]
|
||||
disabled = false
|
||||
privacyEnhanced = true
|
||||
|
||||
[services]
|
||||
|
||||
[services.instagram]
|
||||
disableInlineCSS = true
|
||||
|
||||
[services.twitter]
|
||||
disableInlineCSS = true
|
||||
27
themes/risotto/exampleSite/configTaxo.toml
Normal file
27
themes/risotto/exampleSite/configTaxo.toml
Normal file
@ -0,0 +1,27 @@
|
||||
timeout = 30000
|
||||
enableInlineShortcodes = true
|
||||
|
||||
[taxonomies]
|
||||
category = "categories"
|
||||
tag = "tags"
|
||||
series = "series"
|
||||
|
||||
[privacy]
|
||||
|
||||
[privacy.vimeo]
|
||||
disabled = false
|
||||
simple = true
|
||||
|
||||
[privacy.twitter]
|
||||
disabled = false
|
||||
enableDNT = true
|
||||
simple = true
|
||||
disableInlineCSS = true
|
||||
|
||||
[privacy.instagram]
|
||||
disabled = false
|
||||
simple = true
|
||||
|
||||
[privacy.youtube]
|
||||
disabled = false
|
||||
privacyEnhanced = true
|
||||
1
themes/risotto/exampleSite/content/_index.md
Symbolic link
1
themes/risotto/exampleSite/content/_index.md
Symbolic link
@ -0,0 +1 @@
|
||||
../../README.md
|
||||
3
themes/risotto/exampleSite/content/_index.md.old
Normal file
3
themes/risotto/exampleSite/content/_index.md.old
Normal file
@ -0,0 +1,3 @@
|
||||
+++
|
||||
author = "Hugo Authors"
|
||||
+++
|
||||
25
themes/risotto/exampleSite/content/about.md
Normal file
25
themes/risotto/exampleSite/content/about.md
Normal file
@ -0,0 +1,25 @@
|
||||
+++
|
||||
title = "About"
|
||||
description = "Hugo, the world's fastest framework for building websites"
|
||||
date = "2019-02-28"
|
||||
aliases = ["about-us", "about-hugo", "contact"]
|
||||
author = "Hugo Authors"
|
||||
+++
|
||||
|
||||
Written in Go, Hugo is an open source static site generator available under the [Apache Licence 2.0.](https://github.com/gohugoio/hugo/blob/master/LICENSE) Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows.
|
||||
|
||||
Hugo makes use of a variety of open source projects including:
|
||||
|
||||
* https://github.com/yuin/goldmark
|
||||
* https://github.com/alecthomas/chroma
|
||||
* https://github.com/muesli/smartcrop
|
||||
* https://github.com/spf13/cobra
|
||||
* https://github.com/spf13/viper
|
||||
|
||||
Hugo is ideal for blogs, corporate websites, creative portfolios, online magazines, single page applications or even a website with thousands of pages.
|
||||
|
||||
Hugo is for people who want to hand code their own website without worrying about setting up complicated runtimes, dependencies and databases.
|
||||
|
||||
Websites built with Hugo are extremely fast, secure and can be deployed anywhere including, AWS, GitHub Pages, Heroku, Netlify and any other hosting provider.
|
||||
|
||||
Learn more and contribute on [GitHub](https://github.com/gohugoio).
|
||||
5
themes/risotto/exampleSite/content/archives.md
Normal file
5
themes/risotto/exampleSite/content/archives.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
date: 2019-05-28
|
||||
type: section
|
||||
layout: "archives"
|
||||
---
|
||||
7
themes/risotto/exampleSite/content/homepage/about.md
Normal file
7
themes/risotto/exampleSite/content/homepage/about.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 'Our Difference'
|
||||
button: 'About us'
|
||||
weight: 2
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, et essent mediocritatem quo, choro volumus oporteat an mei. Ipsum dolor sit amet, et essent mediocritatem quo.
|
||||
3
themes/risotto/exampleSite/content/homepage/index.md
Normal file
3
themes/risotto/exampleSite/content/homepage/index.md
Normal file
@ -0,0 +1,3 @@
|
||||
---
|
||||
headless: true
|
||||
---
|
||||
7
themes/risotto/exampleSite/content/homepage/work.md
Normal file
7
themes/risotto/exampleSite/content/homepage/work.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 'We Help Business Grow'
|
||||
button: 'Our Work'
|
||||
weight: 1
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, et essent mediocritatem quo, choro volumus oporteat an mei. Numquam dolores mel eu, mea docendi omittantur et, mea ea duis erat. Elit melius cu ius. Per ex novum tantas putant, ei his nullam aliquam apeirian. Aeterno quaestio constituto sea an, no eum intellegat assueverit.
|
||||
7
themes/risotto/exampleSite/content/post/_index.md
Normal file
7
themes/risotto/exampleSite/content/post/_index.md
Normal file
@ -0,0 +1,7 @@
|
||||
+++
|
||||
aliases = ["posts", "articles", "blog", "showcase", "docs"]
|
||||
title = "Posts"
|
||||
author = "Hugo Authors"
|
||||
description = "Example posts demonstrating hugo's markup features"
|
||||
tags = ["index"]
|
||||
+++
|
||||
46
themes/risotto/exampleSite/content/post/emoji-support.md
Normal file
46
themes/risotto/exampleSite/content/post/emoji-support.md
Normal file
@ -0,0 +1,46 @@
|
||||
+++
|
||||
author = "Hugo Authors"
|
||||
title = "Emoji Support"
|
||||
date = "2019-03-05"
|
||||
description = "Guide to emoji usage in Hugo"
|
||||
tags = [
|
||||
"emoji",
|
||||
]
|
||||
+++
|
||||
|
||||
Emoji can be enabled in a Hugo project in a number of ways.
|
||||
<!--more-->
|
||||
The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
|
||||
|
||||
To enable emoji globally, set `enableEmoji` to `true` in your site's [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
|
||||
|
||||
<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
|
||||
<br>
|
||||
|
||||
The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
|
||||
|
||||
***
|
||||
|
||||
**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
|
||||
|
||||
{{< highlight html >}}
|
||||
.emoji {
|
||||
font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
|
||||
}
|
||||
{{< /highlight >}}
|
||||
|
||||
{{< css.inline >}}
|
||||
<style>
|
||||
.emojify {
|
||||
font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
|
||||
font-size: 2rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@media screen and (max-width:650px) {
|
||||
.nowrap {
|
||||
display: block;
|
||||
margin: 25px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{{< /css.inline >}}
|
||||
148
themes/risotto/exampleSite/content/post/markdown-syntax.md
Normal file
148
themes/risotto/exampleSite/content/post/markdown-syntax.md
Normal file
@ -0,0 +1,148 @@
|
||||
+++
|
||||
author = "Hugo Authors"
|
||||
title = "Markdown Syntax Guide"
|
||||
date = "2019-03-11"
|
||||
description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
|
||||
tags = [
|
||||
"markdown",
|
||||
"css",
|
||||
"html",
|
||||
]
|
||||
categories = [
|
||||
"themes",
|
||||
"syntax",
|
||||
]
|
||||
series = ["Themes Guide"]
|
||||
aliases = ["migrate-from-jekyl"]
|
||||
+++
|
||||
|
||||
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
|
||||
<!--more-->
|
||||
|
||||
## Headings
|
||||
|
||||
The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
|
||||
|
||||
# H1
|
||||
## H2
|
||||
### H3
|
||||
#### H4
|
||||
##### H5
|
||||
###### H6
|
||||
|
||||
## Paragraph
|
||||
|
||||
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
|
||||
|
||||
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
|
||||
|
||||
## Blockquotes
|
||||
|
||||
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
|
||||
|
||||
#### Blockquote without attribution
|
||||
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
> **Note** that you can use *Markdown syntax* within a blockquote.
|
||||
|
||||
#### Blockquote with attribution
|
||||
|
||||
> Don't communicate by sharing memory, share memory by communicating.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
|
||||
|
||||
## Tables
|
||||
|
||||
Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
|
||||
|
||||
Name | Age
|
||||
--------|------
|
||||
Bob | 27
|
||||
Alice | 23
|
||||
|
||||
#### Inline Markdown within tables
|
||||
|
||||
| Italics | Bold | Code |
|
||||
| -------- | -------- | ------ |
|
||||
| *italics* | **bold** | `code` |
|
||||
|
||||
## Code Blocks
|
||||
|
||||
#### Code block with backticks
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### Code block indented with four spaces
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
#### Code block with Hugo's internal highlight shortcode
|
||||
{{< highlight html >}}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
{{< /highlight >}}
|
||||
|
||||
## List Types
|
||||
|
||||
#### Ordered List
|
||||
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
|
||||
#### Unordered List
|
||||
|
||||
* List item
|
||||
* Another item
|
||||
* And another item
|
||||
|
||||
#### Nested list
|
||||
|
||||
* Fruit
|
||||
* Apple
|
||||
* Orange
|
||||
* Banana
|
||||
* Dairy
|
||||
* Milk
|
||||
* Cheese
|
||||
|
||||
## Other Elements — abbr, sub, sup, kbd, mark
|
||||
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
|
||||
|
||||
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
|
||||
49
themes/risotto/exampleSite/content/post/math-typesetting.md
Normal file
49
themes/risotto/exampleSite/content/post/math-typesetting.md
Normal file
@ -0,0 +1,49 @@
|
||||
---
|
||||
author: Hugo Authors
|
||||
title: Math Typesetting
|
||||
date: 2019-03-08
|
||||
description: A brief guide to setup KaTeX
|
||||
math: true
|
||||
---
|
||||
|
||||
Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
|
||||
<!--more-->
|
||||
|
||||
In this example we will be using [KaTeX](https://katex.org/)
|
||||
|
||||
- Create a partial under `/layouts/partials/math.html`
|
||||
- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
|
||||
- Include the partial in your templates like so:
|
||||
|
||||
```bash
|
||||
{{ if or .Params.math .Site.Params.math }}
|
||||
{{ partial "math.html" . }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
|
||||
- To enable KaTex on a per page basis include the parameter `math: true` in content files
|
||||
|
||||
**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
|
||||
|
||||
{{< math.inline >}}
|
||||
{{ if or .Page.Params.math .Site.Params.math }}
|
||||
<!-- KaTeX -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
|
||||
{{ end }}
|
||||
{{</ math.inline >}}
|
||||
|
||||
### Examples
|
||||
|
||||
{{< math.inline >}}
|
||||
<p>
|
||||
Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)
|
||||
</p>
|
||||
{{</ math.inline >}}
|
||||
|
||||
Block math:
|
||||
$$
|
||||
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
|
||||
$$
|
||||
45
themes/risotto/exampleSite/content/post/placeholder-text.md
Normal file
45
themes/risotto/exampleSite/content/post/placeholder-text.md
Normal file
@ -0,0 +1,45 @@
|
||||
+++
|
||||
author = "Hugo Authors"
|
||||
title = "Placeholder Text"
|
||||
date = "2019-03-09"
|
||||
description = "Lorem Ipsum Dolor Si Amet"
|
||||
tags = [
|
||||
"markdown",
|
||||
"text",
|
||||
]
|
||||
+++
|
||||
|
||||
Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
|
||||
|
||||
1. Exierant elisi ambit vivere dedere
|
||||
2. Duce pollice
|
||||
3. Eris modo
|
||||
4. Spargitque ferrea quos palude
|
||||
|
||||
Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
|
||||
|
||||
1. Comas hunc haec pietate fetum procerum dixit
|
||||
2. Post torum vates letum Tiresia
|
||||
3. Flumen querellas
|
||||
4. Arcanaque montibus omnes
|
||||
5. Quidem et
|
||||
|
||||
# Vagus elidunt
|
||||
|
||||
<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
|
||||
|
||||
[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
|
||||
|
||||
## Mane refeci capiebant unda mulcebat
|
||||
|
||||
Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
|
||||
|
||||
Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
|
||||
|
||||
Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, *oculos nomen* non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
|
||||
|
||||
{{< css.inline >}}
|
||||
<style>
|
||||
.canon { background: white; width: 100%; height: auto; }
|
||||
</style>
|
||||
{{< /css.inline >}}
|
||||
34
themes/risotto/exampleSite/content/post/rich-content.md
Normal file
34
themes/risotto/exampleSite/content/post/rich-content.md
Normal file
@ -0,0 +1,34 @@
|
||||
+++
|
||||
author = "Hugo Authors"
|
||||
title = "Rich Content"
|
||||
date = "2019-03-10"
|
||||
description = "A brief description of Hugo Shortcodes"
|
||||
tags = [
|
||||
"shortcodes",
|
||||
"privacy",
|
||||
]
|
||||
+++
|
||||
|
||||
Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
|
||||
<!--more-->
|
||||
---
|
||||
|
||||
## YouTube Privacy Enhanced Shortcode
|
||||
|
||||
{{< youtube ZJthWmvUzzc >}}
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## Twitter Simple Shortcode
|
||||
|
||||
{{< twitter_simple 1085870671291310081 >}}
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## Vimeo Simple Shortcode
|
||||
|
||||
{{< vimeo_simple 48912912 >}}
|
||||
0
themes/risotto/exampleSite/layouts/.gitkeep
Normal file
0
themes/risotto/exampleSite/layouts/.gitkeep
Normal file
6
themes/risotto/exampleSite/static/README
Normal file
6
themes/risotto/exampleSite/static/README
Normal file
@ -0,0 +1,6 @@
|
||||
The favicons in this directory were generated using the following graphics from Twitter Twemoji:
|
||||
|
||||
- Graphics Title: 1f35a.svg
|
||||
- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
|
||||
- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f35a.svg
|
||||
- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
|
||||
BIN
themes/risotto/exampleSite/static/android-chrome-192x192.png
Normal file
BIN
themes/risotto/exampleSite/static/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
themes/risotto/exampleSite/static/android-chrome-512x512.png
Normal file
BIN
themes/risotto/exampleSite/static/android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
themes/risotto/exampleSite/static/apple-touch-icon.png
Normal file
BIN
themes/risotto/exampleSite/static/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
themes/risotto/exampleSite/static/favicon-16x16.png
Normal file
BIN
themes/risotto/exampleSite/static/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 688 B |
BIN
themes/risotto/exampleSite/static/favicon-32x32.png
Normal file
BIN
themes/risotto/exampleSite/static/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
themes/risotto/exampleSite/static/favicon.ico
Normal file
BIN
themes/risotto/exampleSite/static/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
1
themes/risotto/exampleSite/static/site.webmanifest
Normal file
1
themes/risotto/exampleSite/static/site.webmanifest
Normal file
@ -0,0 +1 @@
|
||||
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||
BIN
themes/risotto/images/screenshot.png
Normal file
BIN
themes/risotto/images/screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
BIN
themes/risotto/images/tn.png
Normal file
BIN
themes/risotto/images/tn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
0
themes/risotto/layouts/404.html
Normal file
0
themes/risotto/layouts/404.html
Normal file
36
themes/risotto/layouts/_default/baseof.html
Normal file
36
themes/risotto/layouts/_default/baseof.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{- site.Language.Lang -}}">
|
||||
|
||||
<head>
|
||||
{{- partial "head.html" . -}}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page">
|
||||
|
||||
<header class="page__header">
|
||||
{{- partial "header.html" . -}}
|
||||
</header>
|
||||
|
||||
<section class="page__body">
|
||||
{{- block "main" . }}{{- end }}
|
||||
</section>
|
||||
|
||||
<section class="page__aside">
|
||||
<div class="aside__about">
|
||||
{{- partial "about.html" . -}}
|
||||
</div>
|
||||
<hr>
|
||||
<div class="aside__content">
|
||||
{{- block "aside" . }}{{- end }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="page__footer">
|
||||
{{- partial "footer.html" . -}}
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1
themes/risotto/layouts/_default/li.html
Normal file
1
themes/risotto/layouts/_default/li.html
Normal file
@ -0,0 +1 @@
|
||||
<li><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></li>
|
||||
12
themes/risotto/layouts/_default/list.html
Normal file
12
themes/risotto/layouts/_default/list.html
Normal file
@ -0,0 +1,12 @@
|
||||
{{ define "main" }}
|
||||
<h1 id="{{ .Title | urlize }}">{{ .Title | markdownify }}</h1>
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
<ul>
|
||||
{{ range .Pages.ByDate.Reverse }} {{ .Render "li" }} {{ end }}
|
||||
</ul>
|
||||
|
||||
{{ end }} {{define "aside" }} {{ if .Params.description }}
|
||||
<p>{{ .Params.description }}</p>
|
||||
{{ end }} {{ end }}
|
||||
20
themes/risotto/layouts/_default/single.html
Normal file
20
themes/risotto/layouts/_default/single.html
Normal file
@ -0,0 +1,20 @@
|
||||
{{ define "main" }}
|
||||
<header class="content__header">
|
||||
<h1>{{ .Title | markdownify }}</h1>
|
||||
</header>
|
||||
{{ if .Params.toc }}
|
||||
<aside></aside>
|
||||
{{ end }}
|
||||
<div class="content__body">{{ .Content }}</div>
|
||||
<footer class="content__footer"></footer>
|
||||
{{ end }} {{define "aside" }} {{ partial "tags.html" .}} {{ if
|
||||
.Params.description }}
|
||||
<p>{{ .Params.description }}</p>
|
||||
{{ end }} {{ if or (.Params.author) (.Params.date) }}
|
||||
<p>
|
||||
{{ if .Params.author }}By {{ .Params.author }}{{ if .Date }}, {{ end }}{{ end
|
||||
}} {{ if .Date }}{{ .Date.Format "2006-01-02" }}{{ end }}
|
||||
</p>
|
||||
{{ end }} {{ if and (.Params.toc) (.TableOfContents) }}
|
||||
<hr />
|
||||
On this page: {{ .TableOfContents }} {{ end }} {{ end }}
|
||||
4
themes/risotto/layouts/index.html
Normal file
4
themes/risotto/layouts/index.html
Normal file
@ -0,0 +1,4 @@
|
||||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
|
||||
15
themes/risotto/layouts/partials/about.html
Normal file
15
themes/risotto/layouts/partials/about.html
Normal file
@ -0,0 +1,15 @@
|
||||
{{ with .Site.Params.about }}
|
||||
<div class="aside__about">
|
||||
{{ with .logo }}<img class="about__logo" src="{{ . | absURL }}" alt="Logo">{{ end }}
|
||||
<h1 class="about__title">{{ .title }}</h1>
|
||||
{{ with .description }}<p class="about__description">{{ . | markdownify }}</p>{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<ul class="aside__social-links">
|
||||
{{ range $item := .Site.Params.socialLinks }}
|
||||
<li>
|
||||
<a href="{{ $item.url }}" rel="me" aria-label="{{ $item.title }}" title="{{ $item.title }}"><i class="{{ $item.icon }}" aria-hidden="true"></i></a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
3
themes/risotto/layouts/partials/footer.html
Normal file
3
themes/risotto/layouts/partials/footer.html
Normal file
@ -0,0 +1,3 @@
|
||||
{{- partial "lang.html" . -}}
|
||||
<p class="copyright">{{ .Site.Copyright | markdownify }}</p>
|
||||
<p class="advertisement">Powered by <a href="https://gohugo.io/">hugo</a> and <a href="https://github.com/joeroe/risotto">risotto</a>.</p>
|
||||
24
themes/risotto/layouts/partials/head.html
Normal file
24
themes/risotto/layouts/partials/head.html
Normal file
@ -0,0 +1,24 @@
|
||||
<title>{{ with .Title }}{{ . }} – {{end}}{{ .Site.Title }}</title>
|
||||
{{ with .Site.Params.about }}<meta name="description" content="{{ .description }}">{{ end }}
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="UTF-8"/>
|
||||
{{ if .Site.Params.noindex }}<meta name="robots" content="noindex" /> {{ end }}
|
||||
|
||||
<!-- FontAwesome <https://fontawesome.com/> -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" />
|
||||
|
||||
<!-- Academicons <https://jpswalsh.github.io/academicons/> -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.9.1/css/academicons.min.css" integrity="sha512-b1ASx0WHgVFL5ZQhTgiPWX+68KjS38Jk87jg7pe+qC7q9YkEtFq0z7xCglv7qGIs/68d3mAp+StfC8WKC5SSAg==" crossorigin="anonymous" />
|
||||
|
||||
<!-- risotto theme -->
|
||||
<link rel="stylesheet" href="{{ printf "css/palettes/%s.css" (.Site.Params.theme.palette | default "base16-dark") | absURL }}">
|
||||
<link rel="stylesheet" href="{{ "css/risotto.css" | absURL }}">
|
||||
<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">
|
||||
|
||||
<!-- favicon -->
|
||||
{{ if os.FileExists "static/favicon.ico" }}<link rel="icon" href="{{ "favicon.ico" | absURL }}">{{ end }}
|
||||
{{ if os.FileExists "static/favicon-32x32.png" }}<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32x32.png" | absURL }}">{{ end }}
|
||||
{{ if os.FileExists "static/favicon-16x16.png" }}<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | absURL }}">{{ end }}
|
||||
{{ if os.FileExists "static/apple-touch-icon.png" }}<link rel="apple-touch-icon" href="{{ "apple-touch-icon.png" | absURL }}">{{ end }}
|
||||
{{ if os.FileExists "static/site.webmanifest" }}<link rel="manifest" href="{{ "site.webmanifest" | absURL }}">{{ end }}
|
||||
10
themes/risotto/layouts/partials/header.html
Normal file
10
themes/risotto/layouts/partials/header.html
Normal file
@ -0,0 +1,10 @@
|
||||
<nav class="page__nav main-nav">
|
||||
<ul>
|
||||
<h1 class="page__logo"><a href="{{ .Site.BaseURL }}" class="page__logo-inner">{{ .Site.Title }}</a></h1>
|
||||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
<li class="main-nav__item"><a class="nav-main-item{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) (eq ($currentPage.Permalink) (.URL | absLangURL)) }} active{{end}}" href="{{ .URL | absLangURL }}" title="{{ .Title }}">{{ .Name }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
28
themes/risotto/layouts/partials/lang.html
Normal file
28
themes/risotto/layouts/partials/lang.html
Normal file
@ -0,0 +1,28 @@
|
||||
<p>
|
||||
{{ $siteLanguages := .Site.Languages }}
|
||||
{{ $pageLang := .Page.Lang }}
|
||||
|
||||
{{ $currentPage := . }}
|
||||
{{ $pageName := "" }}
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ if eq ($currentPage.Permalink) (.URL | absLangURL) }}
|
||||
{{ $pageName = .Name }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ range .Page.AllTranslations }}
|
||||
{{ $translation := .}}
|
||||
{{ range $siteLanguages }}
|
||||
{{ if eq $translation.Lang .Lang }}
|
||||
{{ $selected := false }}
|
||||
{{ if eq $pageLang .Lang }}
|
||||
<br/><span class="active">$ echo $LANG<br/><b>{{ .LanguageName }}</b></span><br/>
|
||||
|
||||
{{ else }}
|
||||
<br/><a href="{{ $translation.Permalink }}">export LANG={{ .LanguageName }}; ./{{ $pageName }}</a><br/>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</p>
|
||||
<br /><br />
|
||||
26
themes/risotto/layouts/post/list.html
Normal file
26
themes/risotto/layouts/post/list.html
Normal file
@ -0,0 +1,26 @@
|
||||
{{ define "main" }}
|
||||
<header class="content__header">
|
||||
<h1>{{ .Title | markdownify }}</h1>
|
||||
{{ .Content }}
|
||||
</header>
|
||||
|
||||
{{ range .Pages }}
|
||||
<article class="post">
|
||||
<header class="post__header">
|
||||
<h1><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
|
||||
<p class="post__meta">
|
||||
{{ .Params.author }},
|
||||
<span class="date">{{ .Date.Format "2 January 2006" }}</span>
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section class="post__summary">
|
||||
{{ .Summary }}
|
||||
</section>
|
||||
</article>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{define "aside" }}
|
||||
{{ if .Params.description }}<p>{{ .Params.description }}</p>{{ end }}
|
||||
{{ end }}
|
||||
28
themes/risotto/static/css/about.css
Normal file
28
themes/risotto/static/css/about.css
Normal file
@ -0,0 +1,28 @@
|
||||
/* About/bio section */
|
||||
.about__logo {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.about__title {
|
||||
display: inline;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.about__title::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* Social media links */
|
||||
.aside__social-links {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.aside__social-links li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.aside__social-links li::marker {
|
||||
content: none;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user