diff --git a/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/nord.scssc b/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/nord.scssc deleted file mode 100644 index 1d743fa..0000000 Binary files a/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/nord.scssc and /dev/null differ diff --git a/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/style.scssc b/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/style.scssc deleted file mode 100644 index 42a3436..0000000 Binary files a/.sass-cache/a793ed03640b1c0a8a3e086a7a54137332111963/style.scssc and /dev/null differ diff --git a/index.html b/index.html index 436325e..d6762ae 100644 --- a/index.html +++ b/index.html @@ -1,123 +1,527 @@ - -Havox - - - -

Havox.org V2

-
-

About havox 

-

This is havox - havox is a collection of my projects and tutorials that I've written over the years. The tutorials written are more to consolidate my knowledge of whatever I've been working on however if they help even one person, I'll consider that a win.

-

Feel free to check out any of my tutorials or one of my various js projects

-

Why V2?

-

-This is the second revision of Havox. After havox's initial conception in late 2017, it has suffered from a chronic case of spaghetti code. An update with: neater and better code, updated theming and overall cleaner UI was long overdue. -

-

Why is Havox on umbra.cyou?

-

Havox has domain hopped a fair bit since 2017 (where it used to be hosted on jayomayo.host - lol) however since losing the havox.org domain, I will be using umbra.cyou for the foreseeable future

-

Daily Trump Quote

-

-
+ + + + + + Havox — John Gatward + + + + + + + -
-

Tutorials 

-
-

3 Jan 2021

- Summed area tables -

This tutorial looks at intergral images and how they're useful.

-
+ +
+

// havox — v4

+

John Gatward

+

Software Engineer

+

+ + Backend engineer + by trade + -

-

3 Feb 2019

- Midpoint displacement terrain generation -

This tutorial looks at generating random and natural looking 2D terrains.

-
+ + Full-stack developer + by curiosity + + + Unofficial family cloud engineer + by necessity + + + I like building useful things and figuring how they work. + +

+
+ see my work + + + + + GitHub + + + + + + LinkedIn + +
+
-
-

14 Feb 2018

- Convex hull Generator -

This tutorial looks at wrapping algorithms.

-
+
-
-

22 Sep 2018

- Travelling sales person -

This tutorial looks at different implementations of the TSP problem and how different solutions can be implemented.

-
-
+ +
+
+

about

+

Havox & me

+
-
-

Projects 

-

Please note a lot of these projects use mouseClicked() functions which don't work with mobile :(

+ +
+
+ day job +

+ CS graduate from the University of Nottingham (2022), now working as + a backend engineer at Sainsbury's Supply Chain + & Logistics — building microservices with Spring Boot on AWS, + designing REST APIs, connecting services with Kafka, and storing + data in MongoDB. +

+
-
-

1 Oct 2021

- Drawing bezier curves -

An interactive animated diagram on drawing quadatric and cubic Bezier curves. Click anywhere on the canvas to place points.

-
+
+ home infra +

+ I run a home server that hosts media and projects for friends and + family. I enjoy building things that feel solid and useful — from + small games like + Crack the Quote to websites and services running on my own + hardware. +

+
-
-

23 Sept 2021

- 2D Marching Squares -

A demonstration of marching squares, click a tile to edit the terrain.

-
+
+ linux +

+ Long-time Linux user. Used to distro-hop obsessively and be deep in + the ricing community — these days it's Hyprland on Void Linux and a + growing collection of scripts that make the day job easier. +

+
-
-

11 Apr 2020

- Bubble sort visualiser -

A classic bubble sort visualiser where bars are sorted by height. One frame being one loop.

-
+
+ teaching +

+ I tutored during school and university — CS, maths, English. + Teaching stuck with me. Explaining things clearly is a skill, and + it's why I also write tutorials here. +

+
-
-

2 Apr 2020

- Warping lines illusion -

A visualisation of the Müller-Lyer illusion shown in js

-
+
+ havox +

+ Havox started as a place to document whatever I found cool — + tutorials, visualisations, experiments. It's been running in some + form since 2017, gone through four major redesigns, and outlasted + several domains. It represents my entire journey through technology, + and it's still going. +

+
+
-
-

27 Feb 2019

- Fourier Series -

A project showing how a square wave can be made with just sin waves.

-
+ +
+

version history

+
+
+
+
+
Havox V4 — this one
+
2025 → present
+
+ Catppuccin Mocha. Single page. Trying to get a new job this + time. +
+
+
+
+
+
+
Havox V3
+
2023 → 2025
+
+ Borrowed a template. Nord theme. Took SCSS seriously. Considered + mobile widths. +
+
+
+
+
+
+
Havox V2
+
2019 → 2022
+
+ First SCSS project. First site on own hardware — a Debian box + running nginx. Nord theme. +
+
+
+
+
+
+
Havox.org
+
2017 → 2019
+
+ Entire site in one PHP file 🤣. Had a Python quote-of-the-day + via cronjob though. Counts. +
+
+
+
+
+
-
-

23 Feb 2019

- Constructing an ellispse -

A visualisation of how an ellipse can be constructed with a circle and radial lines. inspo

-
+
-
-

2 May 2018

- Game of Life -

A js implementation of the classic Game of Life - John Conway.

-
+ +
+

skills

+

+ What I know +

-
-

18 Mar 2018

- Calculating PI -

A simulation that looks at the ratio of randomly placed dots between a square and circle to calulate PI.

-
+
+
+ ☕ +

Backend

+

+ Professional Java experience building RESTful APIs with Spring Boot. + Testing with JUnit & Mockito. Data persistence with MySQL, H2, JDBC. +

+
+ Java + Spring Boot + REST + JUnit + MySQL +
+
+
+ 🌐 +

Frontend & Creative

+

+ JavaScript, p5.js, HTML/CSS/Scss. I enjoy visualising algorithms + interactively — it's more fun than a console output. +

+
+ JavaScript + p5.js + Scss + HTML/CSS +
+
+
+ 🖥 +

Systems & Infra

+

+ Long-term Linux user. Self-hosted web & media servers. Comfortable + with networking, security practices, and the command line. +

+
+ Linux + nginx + Networking + Self-hosting +
+
+
+ 🎓 +

Academic Breadth

+

+ C, C++, Haskell from uni. Coursework across Android dev, distributed + systems, graphics, cryptography, malware analysis. +

+
+ C / C++ + Haskell + Algorithms + Security +
+
+
+
-
-

17 Dec 2017

- Oscillations in 3D -

A js implementation of Bees and Bomb's gif.

-
+
-
-

13 Nov 2017

- Maze Generator -

A maze generator built in js.

-
- + +
+

tutorials

+

+ Things I wrote down +

+

+ Best way to learn is to teach. When I find something interesting I write + a short tutorial — mainly to consolidate my own understanding, but if it + helps someone else that's a win. +

-
-

Credits

-

Thank you to @uixmat for inspiration and some code for this webpage, check out his twitter.

-

Also shoutout to Daniel Shiffman and the P5 team. P5 is used extensively in these tutorials & projects

-
+
+ + 3 Jan 2021 + Summed-area tables + Integral images — what they are, how they work, and why they're + surprisingly useful for image processing. + → + + + 3 Feb 2019 + Midpoint displacement terrain generation + Generating random, natural-looking 2D terrains using the midpoint + displacement algorithm. + → + + + 22 Sep 2018 + Travelling salesperson + Different implementations of the TSP problem — a classic that never + gets old. + → + + + 14 Feb 2018 + Convex hull generator + Wrapping algorithms — visualising how to find the convex hull of a + point set. + → + +
+
+ +
+ + +
+

projects

+

+ Things I built +

+

+ Mostly p5.js — visualising algorithms in ways that look more interesting + than they have any right to. Most use + mouseClicked() + so desktop only, sorry mobile. +

+ +
+ + 1 Oct 2021 + Drawing Bézier curves + Interactive animated diagram for quadratic and cubic Bézier curves. + Click to place points. + → + + + 23 Sep 2021 + 2D Marching squares + Marching squares in action — click a tile to edit the + terrain. + → + + + 11 Apr 2020 + Bubble sort visualiser + Bars sorted by height, one frame per loop. Classic. + → + + + 2 Apr 2020 + Müller-Lyer illusion + A visualisation of the Müller-Lyer optical illusion rendered in + JS. + → + + + 27 Feb 2019 + Fourier series + Building a square wave from nothing but sine waves. + Mesmerising. + → + + + 23 Feb 2019 + Constructing an ellipse + How an ellipse can be constructed with a circle and radial lines — + inspired by 3Blue1Brown. + → + + + 2 May 2018 + Game of Life + A JS implementation of Conway's classic. Still fascinating. + → + + + 18 Mar 2018 + Calculating PI + Monte Carlo method — ratio of randomly placed dots in a square vs + circle. + → + + + 17 Dec 2017 + Oscillations in 3D + JS implementation of a Bees and Bombs gif. One of my oldest. + → + + + 13 Nov 2017 + Maze generator + A maze generator in JS. The first project that made me think "oh, I + like this". + → + +
+
+ +
+ + +
+

contact

+
+
+

Let's talk

+

+ I'm currently employed but open to the right opportunity — backend + or full-stack, somewhere that ships interesting things with people + who care about their craft. +

+

+ GitHub has the most complete picture of how I think. LinkedIn if + you're formal. Either works. +

+
+
+ + + + + + + GitHub + jayo60013 + + + + + + + + LinkedIn + jaygatward + +
+
+
+ + + + + + diff --git a/index_style.css b/index_style.css deleted file mode 100644 index 9712484..0000000 --- a/index_style.css +++ /dev/null @@ -1,117 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); -* { - box-sizing: border-box; } - -html, body { - font-family: "Roboto", sans-serif; - background: #eceff4; - padding: 80px 30px 30px; - color: #444; - height: 100%; } - -ol, ul { - margin: 0 0 50px 0; } - -ul { - position: relative; - width: 75%; - margin: 100px auto 0; - padding: 10px; - box-sizing: border-box; } - -ul li { - display: flex; - background: red; } - -h1 { - color: #2e3440; - font-size: 48px; } - -h2 { - color: #2e3440; - font-size: 28px; } - -p { - line-height: 1.6em; - margin-bottom: 10px; - font-size: 20px; - padding: 0; } - p:last-child { - margin-bottom: 40px; } - -code { - background: #f8f8f8; - color: #d64f9b; - border: 1px solid #eee; - padding: 2px; - border-radius: 3px; } - -a { - font-size: 22px; - font-weight: bold; - color: #88c0d0; - text-decoration: none; - transition: all 200ms; } - a:hover, a:focus { - color: #ebcb8b; } - -article { - margin-bottom: 50px; } - article .margin { - margin-bottom: 100vh; } - -nav { - display: flex; - width: 100%; - top: 0; - left: 0; - background: #3b4252; - position: fixed; - padding: 30px; } - nav a { - display: inline-flex; - padding: 20px 30px; - color: #eceff4; - text-decoration: none; } - nav a:hover, nav a:focus { - color: #ebcb8b; } - nav a.active { - color: #88c0d0; } - -.tut_box { - border: 2px solid #3b4252; - border-radius: 5px; - margin-bottom: 10px; - padding: 5px; } - .tut_box:hover { - background-color: #3b4252; - color: #eceff4; } - .tut_box:hover a { - color: #ebcb8b; } - .tut_box:hover .out_link { - color: #8fbcbb; } - .tut_box p { - padding: 0px; - margin: 0px; } - .tut_box .tut_date { - float: right; - position: relative; - top: 0px; - right: 0px; - text-align: right; } - -.tutName { - font-weight: bold; - color: #8fbcbb; - font-size: 22px; } - .tutName:hover { - color: #ebcb8b; } - -.out_link { - font-weight: bold; - color: #4c566a; - text-decoration: none; - padding: 5px, 5px; - font-size: 19px; } - -/*# sourceMappingURL=index_style.css.map */ diff --git a/index_style.css.map b/index_style.css.map deleted file mode 100644 index b7c8362..0000000 --- a/index_style.css.map +++ /dev/null @@ -1,7 +0,0 @@ -{ -"version": 3, -"mappings": "AAAQ,2EAAmE;AAE3E,CAAE;EAAE,UAAU,EAAE,UAAU;;AAO1B,UAAW;EACT,WAAW,EAAE,oBAAoB;EACjC,UAAU,ECsIJ,OAAO;EDrIb,OAAO,EAAE,cAAc;EACvB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAGd,MAAO;EACL,MAAM,EAAE,UAAU;;AAGpB,EAAG;EACD,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,YAAY;EACpB,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,UAAU;;AAGxB,KAAM;EACJ,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,GAAG;;AAGjB,EAAG;EACA,KAAK,ECEA,OAAO;EDDZ,SAAS,EAAE,IAAI;;AAGlB,EAAG;EACD,KAAK,ECHC,OAAO;EDIb,SAAS,EAAE,IAAI;;AAGjB,CAAE;EACA,WAAW,EAAE,KAAK;EAClB,aAAa,EAAE,IAAI;EACnB,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,CAAC;EACV,YAAa;IACX,aAAa,EAAE,IAAI;;AAIvB,IAAK;EACH,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,cAAc;EACtB,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,GAAG;;AAGpB,CAAE;EACA,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,KAAK,ECuGC,OAAO;EDtGb,eAAe,EAAE,IAAI;EACrB,UAAU,EAAE,SAAS;EACrB,gBACO;IACL,KAAK,ECiJA,OAAO;;AD7IhB,OAAQ;EACN,aAAa,EAAE,IAAI;EACnB,eAAQ;IACN,aAAa,EAAE,KAAK;;AAIxB,GAAI;EACF,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EACX,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,UAAU,ECvCJ,OAAO;EDwCb,QAAQ,EAAE,KAAK;EACf,OAAO,EAAE,IAAI;EACb,KAAE;IACA,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,SAAS;IAClB,KAAK,ECqDD,OAAO;IDpDX,eAAe,EAAE,IAAI;IACrB,wBACQ;MACN,KAAK,ECuHF,OAAO;IDrHZ,YAAS;MACP,KAAK,ECqEH,OAAO;;ADhEf,QAAS;EACP,MAAM,EAAE,iBAAgB;EACxB,aAAa,EAAE,GAAG;EAClB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,GAAG;EAEZ,cAAQ;IACN,gBAAgB,EChEZ,OAAO;IDiEX,KAAK,ECiCD,OAAO;IDhCX,gBAAE;MACA,KAAK,ECqGF,OAAO;IDnGZ,wBAAS;MACP,KAAK,ECqCH,OAAO;EDlCb,UAAE;IACA,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;EAGb,kBAAU;IACR,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,GAAG;IACR,KAAK,EAAE,GAAG;IACV,UAAU,EAAE,KAAK;;AAIrB,QAAS;EACP,WAAW,EAAE,IAAI;EACjB,KAAK,ECkBC,OAAO;EDjBb,SAAS,EAAE,IAAI;EACf,cAAQ;IACN,KAAK,EC4EA,OAAO;;ADxEhB,SAAU;EACR,WAAW,EAAE,IAAI;EACjB,KAAK,ECzCC,OAAO;ED0Cb,eAAe,EAAE,IAAI;EACrB,OAAO,EAAE,QAAQ;EACjB,SAAS,EAAE,IAAI", -"sources": ["style.scss","nord.scss"], -"names": [], -"file": "index_style.css" -} \ No newline at end of file diff --git a/nord.scss b/nord.scss deleted file mode 100644 index 4b0be03..0000000 --- a/nord.scss +++ /dev/null @@ -1,235 +0,0 @@ -// Copyright (c) 2016-present Arctic Ice Studio -// Copyright (c) 2016-present Sven Greb - -// Project: Nord -// Version: 0.2.0 -// Repository: https://github.com/arcticicestudio/nord -// License: MIT -// References: -// http://sass-lang.com -// http://sassdoc.com - -//// -/// An arctic, north-bluish color palette. -/// Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax -/// highlighting and UI. -/// It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful -/// ambiance. -/// -/// @author Arctic Ice Studio -//// - -/// Base component color of "Polar Night". -/// -/// Used for texts, backgrounds, carets and structuring characters like curly- and square brackets. -/// -/// @access public -/// @example scss - SCSS -/// /* For dark ambiance themes */ -/// .background { -/// background-color: $nord0; -/// } -/// /* For light ambiance themes */ -/// .text { -/// color: $nord0; -/// } -/// @group polarnight -/// @since 0.1.0 -$nord0: #2e3440; - -/// Lighter shade color of the base component color. -/// -/// Used as a lighter background color for UI elements like status bars. -/// -/// @access public -/// @group polarnight -/// @see $nord0 -/// @since 0.1.0 -$nord1: #3b4252; - -/// Lighter shade color of the base component color. -/// -/// Used as line highlighting in the editor. -/// In the UI scope it may be used as selection- and highlight color. -/// -/// @access public -/// @example scss - SCSS -/// /* Code Syntax Highlighting scope */ -/// .editor { -/// &.line { -/// background-color: $nord2; -/// } -/// } -/// -/// /* UI scope */ -/// button { -/// &:selected { -/// background-color: $nord2; -/// } -/// } -/// @group polarnight -/// @see $nord0 -/// @since 0.1.0 -$nord2: #434c5e; - -/// Lighter shade color of the base component color. -/// -/// Used for comments, invisibles, indent- and wrap guide marker. -/// In the UI scope used as pseudoclass color for disabled elements. -/// -/// @access public -/// @example scss - SCSS -/// /* Code Syntax Highlighting scope */ -/// .editor { -/// &.indent-guide, -/// &.wrap-guide { -/// &.marker { -/// color: $nord3; -/// } -/// } -/// } -/// .comment, -/// .invisible { -/// color: $nord3; -/// } -/// -/// /* UI scope */ -/// button { -/// &:disabled { -/// background-color: $nord3; -/// } -/// } -/// @group polarnight -/// @see $nord0 -/// @since 0.1.0 -$nord3: #4c566a; - -/// Base component color of "Snow Storm". -/// -/// Main color for text, variables, constants and attributes. -/// In the UI scope used as semi-light background depending on the theme shading design. -/// -/// @access public -/// @example scss - SCSS -/// /* For light ambiance themes */ -/// .background { -/// background-color: $nord4; -/// } -/// /* For dark ambiance themes */ -/// .text { -/// color: $nord4; -/// } -/// @group snowstorm -/// @since 0.1.0 -$nord4: #d8dee9; - -/// Lighter shade color of the base component color. -/// -/// Used as a lighter background color for UI elements like status bars. -/// Used as semi-light background depending on the theme shading design. -/// -/// @access public -/// @group snowstorm -/// @see $nord4 -/// @since 0.1.0 -$nord5: #e5e9f0; - -/// Lighter shade color of the base component color. -/// -/// Used for punctuations, carets and structuring characters like curly- and square brackets. -/// In the UI scope used as background, selection- and highlight color depending on the theme shading design. -/// -/// @access public -/// @group snowstorm -/// @see $nord4 -/// @since 0.1.0 -$nord6: #eceff4; - -/// Bluish core color. -/// -/// Used for classes, types and documentation tags. -/// -/// @access public -/// @group frost -/// @since 0.1.0 -$nord7: #8fbcbb; - -/// Bluish core accent color. -/// -/// Represents the accent color of the color palette. -/// Main color for primary UI elements and methods/functions. -/// -/// Can be used for -/// - Markup quotes -/// - Markup link URLs -/// -/// @access public -/// @group frost -/// @since 0.1.0 -$nord8: #88c0d0; - -/// Bluish core color. -/// -/// Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and -/// punctuations like (semi)colons,commas and braces. -/// -/// @access public -/// @group frost -/// @since 0.1.0 -$nord9: #81a1c1; - -/// Bluish core color. -/// -/// Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`). -/// -/// @access public -/// @group frost -/// @since 0.1.0 -$nord10: #5e81ac; - -/// Colorful component color. -/// -/// Used for errors, git/diff deletion and linter marker. -/// -/// @access public -/// @group aurora -/// @since 0.1.0 -$nord11: #bf616a; - -/// Colorful component color. -/// -/// Used for annotations. -/// -/// @access public -/// @group aurora -/// @since 0.1.0 -$nord12: #d08770; - -/// Colorful component color. -/// -/// Used for escape characters, regular expressions and markup entities. -/// In the UI scope used for warnings and git/diff renamings. -/// -/// @access public -/// @group aurora -/// @since 0.1.0 -$nord13: #ebcb8b; - -/// Colorful component color. -/// -/// Main color for strings and attribute values. -/// In the UI scope used for git/diff additions and success visualizations. -/// -/// @access public -/// @group aurora -/// @since 0.1.0 -$nord14: #a3be8c; - -/// Colorful component color. -/// -/// Used for numbers. -/// -/// @access public -/// @group aurora -/// @since 0.1.0 -$nord15: #b48ead; \ No newline at end of file diff --git a/old/index.html b/old/index.html deleted file mode 100644 index 57f533e..0000000 --- a/old/index.html +++ /dev/null @@ -1,144 +0,0 @@ - - - - - - - - - -

Havox.org V2

- -
-

About havox 

-

This is havox - idk rlry know what havox is but isss whatever

- -

Feel free to check out any of my tutorials or one of my various js projects

-

Why V2?

-

- This is the second revision of Havox. After havox's initial conception in late 2017, it has suffered from a chronic case of spaghetti code. An update with: neater and better code, updated theming and overall cleaner UI was long overdue. -

-

Comrades

-

- The Union of the indestructible republics of the free ones - The Great Russia has forever consolidated itself. - Long live the people created by the will of the people - A single, mighty Soviet Union! -

-

- Be glorious, our free Fatherland, - Friendship, peoples a reliable stronghold! - The Soviet banner, the banner of the people - Let it lead from victory to victory! -

-

- Through the thunderstorms the sun of freedom shone, - And Lenin, the great one, illumined our way. - We were brought up by Stalin - to be faithful to the people. - We were inspired by work and deeds. -

-

- Be glorious, Fatherland freer, - Happiness of peoples reliable stronghold! - The Soviet banner, the banner of the people - Let it lead from victory to victory! -

-

- We raised our army in the battles, - The invaders of the vile from the road are estimated! - We are in the battles to decide the fate of generations, - We will lead our glory to our Fatherland! -

-

- Be glorious, our free Fatherland, - the glory of peoples is a reliable stronghold! - The Soviet banner, the banner of the people - Let it lead from victory to victory! -

- -

- The Union of the indestructible republics of the free ones - The Great Russia has forever consolidated itself. - Long live the people created by the will of the people - A single, mighty Soviet Union! -

-

- Be glorious, our free Fatherland, - Friendship, peoples a reliable stronghold! - The Soviet banner, the banner of the people - Let it lead from victory to victory! -

-

- Through the thunderstorms the sun of freedom shone, - And Lenin, the great one, illumined our way. - We were brought up by Stalin - to be faithful to the people. - We were inspired by work and deeds. -

-

- Be glorious, Fatherland freer, - Happiness of peoples reliable stronghold! - The Soviet banner, the banner of the people - Let it lead from victory to victory! -

-

- We raised our army in the battles, - The invaders of the vile from the road are estimated! - We are in the battles to decide the fate of generations, - We will lead our glory to our Fatherland! -

-

- Be glorious, our free Fatherland, - the glory of peoples is a reliable stronghold! - The Soviet banner, the banner of the people - Let it lead from victory to victory! -

- -
- - -
- - -
- -
-

Credits

-

Thank you to @uixmat for inspiration and some code for this page, check out his Twitter.

-
diff --git a/old/style.css b/old/style.css deleted file mode 100644 index c4fd033..0000000 --- a/old/style.css +++ /dev/null @@ -1,111 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); -* { - box-sizing: border-box; } - -html, body { - font-family: "Roboto", sans-serif; - background: #eceff4; - padding: 80px 30px 30px; - color: #444; - height: 100%; } - -ol, ul { - margin: 0 0 50px 0; } - -ul { - position: relative; - width: 75%; - margin: 100px auto 0; - padding: 10px; - box-sizing: border-box; } - -ul li { - display: flex; - background: red; } - -h3 { - color: black; - font-size: 48px; } - -h1 { - font-weight: bold; - color: black; } - -p { - line-height: 1.6em; - margin-bottom: 10px; - font-size: 20px; - padding: 0; } - p:last-child { - margin-bottom: 40px; } - -code { - background: #f8f8f8; - color: #d64f9b; - border: 1px solid #eee; - padding: 2px; - border-radius: 3px; } - -a { - font-size: 22px; - font-weight: bold; - color: #88c0d0; - text-decoration: none; - transition: all 200ms; } - a:hover, a:focus { - color: #ebcb8b; } - -article { - margin-bottom: 50px; } - article .margin { - margin-bottom: 100vh; } - -nav { - display: flex; - width: 100%; - top: 0; - left: 0; - background: #3b4252; - position: fixed; - padding: 30px; } - nav a { - display: inline-flex; - padding: 20px 30px; - color: #eceff4; - text-decoration: none; } - nav a:hover, nav a:focus { - color: #ebcb8b; } - nav a.active { - color: #88c0d0; } - -table { - text-align: center; - background-color: #3b4252; - color: #eceff4; - width: 75%; - align-self: center; - border: 1px solid #8fbcbb; - border-collapse: collapse; - position: absolute; - left: 50%; - transform: translate(-50%, 0%); } - -td { - border: 1px solid #8fbcbb; - padding: 10px; } - td a { - font-size: 16px; - text-decoration: none; - color: #eceff4; } - -.tutName { - font-weight: bold; - color: #8fbcbb; - font-size: 20px; } - .tutName:hover { - color: #ebcb8b; } - -.p { - padding: 50px; } - -/*# sourceMappingURL=style.css.map */ diff --git a/script.js b/script.js index 98a47ef..981bfa2 100644 --- a/script.js +++ b/script.js @@ -1,14 +1,24 @@ -// https://twitter.com/uixmat +// ─── Scroll reveal ───────────────────────────────────────── +const reveals = document.querySelectorAll('.reveal'); +const observer = new IntersectionObserver((entries) => { + entries.forEach(e => { + if (e.isIntersecting) { + e.target.classList.add('visible'); + observer.unobserve(e.target); + } + }); +}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }); +reveals.forEach(el => observer.observe(el)); -function scrollNav() { - $('.nav a').click(function(){ - $(".active").removeClass("active"); - $(this).addClass("active"); - - $('html, body').stop().animate({ - scrollTop: $($(this).attr('href')).offset().top - 160 - }, 300); - return false; - }); - } - scrollNav(); \ No newline at end of file +// ─── Active nav link on scroll ────────────────────────────── +const sections = document.querySelectorAll('section[id]'); +const navLinks = document.querySelectorAll('.nav-links a'); +window.addEventListener('scroll', () => { + let current = ''; + sections.forEach(s => { + if (window.scrollY >= s.offsetTop - 120) current = s.id; + }); + navLinks.forEach(a => { + a.style.color = a.getAttribute('href') === `#${current}` ? 'var(--mauve)' : ''; + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..9103902 --- /dev/null +++ b/style.css @@ -0,0 +1,802 @@ +/* ─── Catppuccin Mocha ─────────────────────────────────── */ +:root { + --base: #1e1e2e; + --mantle: #181825; + --crust: #11111b; + --surface0: #313244; + --surface1: #45475a; + --surface2: #585b70; + --overlay0: #6c7086; + --overlay1: #7f849c; + --overlay2: #9399b2; + --text: #cdd6f4; + --subtext0: #a6adc8; + --subtext1: #bac2de; + --lavender: #b4befe; + --blue: #89b4fa; + --sapphire: #74c7ec; + --sky: #89dceb; + --teal: #94e2d5; + --green: #a6e3a1; + --yellow: #f9e2af; + --peach: #fab387; + --maroon: #eba0ac; + --red: #f38ba8; + --mauve: #cba6f7; + --pink: #f5c2e7; + --flamingo: #f2cdcd; + --rosewater: #f5e0dc; +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + background: var(--base); + color: var(--text); + font-family: "JetBrains Mono", monospace; + font-size: 15px; + line-height: 1.7; + overflow-x: hidden; +} + +::selection { + background: var(--mauve); + color: var(--crust); +} + +/* ─── Scrollbar ────────────────────────────────────────── */ +::-webkit-scrollbar { + width: 6px; +} +::-webkit-scrollbar-track { + background: var(--mantle); +} +::-webkit-scrollbar-thumb { + background: var(--surface1); + border-radius: 3px; +} +::-webkit-scrollbar-thumb:hover { + background: var(--mauve); +} + +/* ─── Nav ──────────────────────────────────────────────── */ +nav { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 3rem; + height: 56px; + background: rgba(17, 17, 27, 0.85); + backdrop-filter: blur(12px); + border-bottom: 1px solid var(--surface0); +} + +.nav-logo { + font-family: "Fraunces", serif; + font-size: 1.3rem; + color: var(--mauve); + text-decoration: none; + letter-spacing: 0.02em; +} + +.nav-links { + display: flex; + gap: 2.5rem; + list-style: none; +} + +.nav-links a { + color: var(--subtext0); + text-decoration: none; + font-size: 0.78rem; + letter-spacing: 0.08em; + text-transform: uppercase; + transition: color 0.2s; + position: relative; +} + +.nav-links a::after { + content: ""; + position: absolute; + bottom: -3px; + left: 0; + right: 0; + height: 1px; + background: var(--mauve); + transform: scaleX(0); + transform-origin: left; + transition: transform 0.2s; +} + +.nav-links a:hover { + color: var(--text); +} +.nav-links a:hover::after { + transform: scaleX(1); +} + +/* ─── Sections ─────────────────────────────────────────── */ +section { + min-height: 100vh; + padding: 7rem 3rem 5rem; + max-width: 1100px; + margin: 0 auto; +} + +section.full-width { + max-width: none; + padding-left: 0; + padding-right: 0; +} + +/* ─── Section labels ───────────────────────────────────── */ +.section-label { + font-size: 0.7rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--mauve); + margin-bottom: 0.5rem; + display: flex; + align-items: center; + gap: 0.75rem; +} + +.section-label::after { + content: ""; + display: block; + height: 1px; + width: 3rem; + background: var(--mauve); + opacity: 0.5; +} + +/* ─── Hero ─────────────────────────────────────────────── */ +#hero { + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + padding-top: 5rem; + position: relative; +} + +.hero-eyebrow { + font-size: 0.75rem; + letter-spacing: 0.25em; + text-transform: uppercase; + color: var(--green); + margin-bottom: 1.5rem; + opacity: 0; + animation: fadeUp 0.6s 0.2s forwards; +} + +.hero-name { + font-family: "Fraunces", serif; + font-size: clamp(3.5rem, 9vw, 7.5rem); + font-weight: 600; + line-height: 1; + color: var(--text); + margin-bottom: 0.5rem; + opacity: 0; + animation: fadeUp 0.7s 0.35s forwards; +} + +.hero-name em { + font-style: italic; + color: var(--mauve); +} + +.hero-subtitle { + font-family: "Fraunces", serif; + font-size: clamp(1.2rem, 3vw, 2.2rem); + font-weight: 300; + color: var(--subtext1); + margin-bottom: 2rem; + opacity: 0; + animation: fadeUp 0.7s 0.5s forwards; +} + +.hero-desc { + max-width: 560px; + color: var(--subtext0); + font-size: 0.9rem; + line-height: 1.8; + margin-bottom: 2.5rem; + opacity: 0; + animation: fadeUp 0.7s 0.65s forwards; +} + +.hero-by-line { + display: flex; + align-items: baseline; + gap: 0.6rem; + margin-bottom: 0.3rem; +} + +.hero-by { + color: var(--text); + font-size: 0.9rem; +} + +.hero-by-role { + font-family: "Fraunces", serif; + font-style: italic; + font-size: 0.85rem; + color: var(--mauve); + opacity: 0.8; +} + +.hero-by-role::before { + content: "— "; + opacity: 0.4; +} + +.hero-by-footer { + display: block; + margin-top: 1rem; + color: var(--subtext0); + font-size: 0.82rem; + opacity: 0.75; +} + +.hero-links { + display: flex; + gap: 1.25rem; + flex-wrap: wrap; + opacity: 0; + animation: fadeUp 0.7s 0.8s forwards; +} + +.btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.6rem 1.4rem; + border-radius: 4px; + font-family: "JetBrains Mono", monospace; + font-size: 0.78rem; + letter-spacing: 0.05em; + text-decoration: none; + transition: all 0.2s; + cursor: pointer; + border: none; +} + +.btn-primary { + background: var(--mauve); + color: var(--crust); +} +.btn-primary:hover { + background: var(--lavender); + transform: translateY(-2px); +} + +.btn-ghost { + background: transparent; + color: var(--text); + border: 1px solid var(--surface1); +} +.btn-ghost:hover { + border-color: var(--mauve); + color: var(--mauve); + transform: translateY(-2px); +} + +/* Decorative grid bg */ +#hero::before { + content: ""; + position: absolute; + inset: 0; + background-image: + linear-gradient(var(--surface0) 1px, transparent 1px), + linear-gradient(90deg, var(--surface0) 1px, transparent 1px); + background-size: 60px 60px; + opacity: 0.18; + mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent); + pointer-events: none; +} + +/* ─── About ────────────────────────────────────────────── */ +.about-section { + min-height: auto; + padding-bottom: 5rem; +} + +.about-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1px; + background: var(--surface0); + border: 1px solid var(--surface0); + border-radius: 8px; + overflow: hidden; + margin-top: 2.5rem; +} + +.about-block { + background: var(--mantle); + padding: 1.75rem 2rem; + position: relative; + transition: background 0.2s; +} + +.about-block:hover { + background: var(--surface0); +} + +.about-block--wide { + grid-column: 1 / -1; + border-top: 1px solid var(--surface0); +} + +.about-block-tag { + display: inline-block; + margin-bottom: 0.85rem; + font-size: 0.65rem; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.about-block p { + color: var(--subtext0); + font-size: 0.85rem; + line-height: 1.85; +} + +.about-block p strong { + color: var(--text); + font-weight: 700; +} +.about-block p em { + color: var(--mauve); + font-style: italic; +} +.about-block p s { + color: var(--overlay1); +} + +.version-timeline { + display: flex; + flex-direction: column; + gap: 0; + position: relative; +} + +.version-timeline::before { + content: ""; + position: absolute; + left: 0.65rem; + top: 0.5rem; + bottom: 0.5rem; + width: 1px; + background: var(--surface1); +} + +.version-item { + display: flex; + gap: 1.25rem; + padding: 1rem 0; + position: relative; +} + +.v-dot { + width: 1.3rem; + height: 1.3rem; + border-radius: 50%; + background: var(--surface0); + border: 2px solid var(--surface1); + flex-shrink: 0; + margin-top: 0.15rem; + transition: + border-color 0.2s, + background 0.2s; + position: relative; + z-index: 1; +} + +.version-item:hover .v-dot { + border-color: var(--mauve); + background: var(--mauve); +} + +.v-title { + font-size: 0.85rem; + font-weight: 700; + color: var(--text); + margin-bottom: 0.15rem; +} + +.v-year { + font-size: 0.7rem; + color: var(--mauve); + margin-bottom: 0.3rem; + letter-spacing: 0.05em; +} + +.v-desc { + font-size: 0.8rem; + color: var(--subtext0); + line-height: 1.6; +} + +/* ─── Skills ───────────────────────────────────────────── */ +#skills h2 { + font-family: "Fraunces", serif; + font-size: 2.8rem; + font-weight: 600; + color: var(--text); + margin-bottom: 3rem; +} + +#skills h2 em { + font-style: italic; + color: var(--mauve); +} + +.skills-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 1px; + background: var(--surface0); + border: 1px solid var(--surface0); + border-radius: 8px; + overflow: hidden; +} + +.skill-card { + background: var(--mantle); + padding: 2rem; + transition: background 0.2s; +} + +.skill-card:hover { + background: var(--surface0); +} + +.skill-card-icon { + font-size: 1.5rem; + margin-bottom: 1rem; + display: block; +} + +.skill-card h3 { + font-size: 0.85rem; + font-weight: 700; + color: var(--text); + margin-bottom: 0.5rem; + letter-spacing: 0.05em; + text-transform: uppercase; +} + +.skill-card p { + font-size: 0.82rem; + color: var(--subtext0); + line-height: 1.7; +} + +.tag-row { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + margin-top: 1rem; +} + +.tag { + display: inline-block; + padding: 0.15rem 0.6rem; + border-radius: 3px; + font-size: 0.7rem; + letter-spacing: 0.04em; + font-weight: 700; +} + +.tag-blue { + background: rgba(137, 180, 250, 0.12); + color: var(--blue); +} +.tag-green { + background: rgba(166, 227, 161, 0.12); + color: var(--green); +} +.tag-peach { + background: rgba(250, 179, 135, 0.12); + color: var(--peach); +} +.tag-teal { + background: rgba(148, 226, 213, 0.12); + color: var(--teal); +} +.tag-mauve { + background: rgba(203, 166, 247, 0.12); + color: var(--mauve); +} +.tag-yellow { + background: rgba(249, 226, 175, 0.12); + color: var(--yellow); +} +.tag-sky { + background: rgba(137, 220, 235, 0.12); + color: var(--sky); +} + +/* ─── Tutorials / Projects shared ─────────────────────── */ +.section-heading { + font-family: "Fraunces", serif; + font-size: 2.8rem; + font-weight: 600; + color: var(--text); + margin-bottom: 0.75rem; +} + +.section-heading em { + font-style: italic; + color: var(--mauve); +} + +.section-intro { + color: var(--subtext0); + font-size: 0.88rem; + max-width: 560px; + line-height: 1.8; + margin-bottom: 3rem; +} + +/* ─── Card grid ────────────────────────────────────────── */ +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1px; + background: var(--surface0); + border: 1px solid var(--surface0); + border-radius: 8px; + overflow: hidden; +} + +.card { + background: var(--mantle); + padding: 1.5rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + text-decoration: none; + color: inherit; + transition: background 0.2s; + position: relative; + overflow: hidden; +} + +.card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 3px; + height: 100%; + background: var(--mauve); + transform: scaleY(0); + transform-origin: bottom; + transition: transform 0.25s; +} + +.card:hover { + background: var(--surface0); +} +.card:hover::before { + transform: scaleY(1); +} + +.card-date { + font-size: 0.68rem; + color: var(--overlay1); + letter-spacing: 0.06em; +} + +.card-title { + font-size: 0.92rem; + font-weight: 700; + color: var(--text); + transition: color 0.2s; +} + +.card:hover .card-title { + color: var(--mauve); +} + +.card-desc { + font-size: 0.8rem; + color: var(--subtext0); + line-height: 1.6; + flex: 1; +} + +.card-arrow { + font-size: 0.8rem; + color: var(--overlay0); + transition: + color 0.2s, + transform 0.2s; + align-self: flex-end; + margin-top: 0.5rem; +} + +.card:hover .card-arrow { + color: var(--mauve); + transform: translateX(3px); +} + +/* ─── Contact ──────────────────────────────────────────── */ +#contact { + min-height: auto; + padding-bottom: 8rem; +} + +.contact-inner { + border: 1px solid var(--surface0); + border-radius: 8px; + padding: 3.5rem; + background: var(--mantle); + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: start; +} + +.contact-inner h2 { + font-family: "Fraunces", serif; + font-size: 2.4rem; + font-weight: 600; + color: var(--text); + margin-bottom: 1rem; +} + +.contact-inner h2 em { + font-style: italic; + color: var(--mauve); +} + +.contact-inner p { + color: var(--subtext0); + font-size: 0.88rem; + line-height: 1.8; + margin-bottom: 1.5rem; +} + +.contact-links { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.contact-link { + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem 1.25rem; + border: 1px solid var(--surface0); + border-radius: 6px; + text-decoration: none; + color: var(--text); + background: var(--base); + transition: all 0.2s; + font-size: 0.85rem; +} + +.contact-link:hover { + border-color: var(--mauve); + color: var(--mauve); + transform: translateX(4px); +} + +.contact-link-icon { + font-size: 1.1rem; + width: 1.5rem; + text-align: center; +} + +.contact-link-label { + flex: 1; +} + +.contact-link-handle { + font-size: 0.72rem; + color: var(--overlay1); +} + +/* ─── Footer ───────────────────────────────────────────── */ +footer { + border-top: 1px solid var(--surface0); + padding: 1.5rem 3rem; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.72rem; + color: var(--overlay0); +} + +footer a { + color: var(--overlay1); + text-decoration: none; +} +footer a:hover { + color: var(--mauve); +} + +/* ─── Animations ───────────────────────────────────────── */ +@keyframes fadeUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.reveal { + opacity: 0; + transform: translateY(24px); + transition: + opacity 0.6s ease, + transform 0.6s ease; +} + +.reveal.visible { + opacity: 1; + transform: none; +} + +/* ─── Divider ──────────────────────────────────────────── */ +.divider { + height: 1px; + background: var(--surface0); + max-width: 1100px; + margin: 0 auto; +} + +/* ─── Responsive ───────────────────────────────────────── */ +@media (max-width: 768px) { + nav { + padding: 0 1.5rem; + } + .nav-links { + gap: 1.2rem; + } + section { + padding: 6rem 1.5rem 4rem; + } + .about-grid { + grid-template-columns: 1fr; + } + .about-block--wide { + grid-column: 1; + } + .contact-inner { + grid-template-columns: 1fr; + gap: 2rem; + padding: 2rem; + } + .hero-name { + font-size: clamp(2.8rem, 12vw, 5rem); + } + footer { + flex-direction: column; + gap: 0.5rem; + text-align: center; + } +} diff --git a/style.css.map b/style.css.map deleted file mode 100644 index 1e10969..0000000 --- a/style.css.map +++ /dev/null @@ -1,7 +0,0 @@ -{ -"version": 3, -"mappings": "AAAQ,2EAAmE;AAE3E,CAAE;EAAE,UAAU,EAAE,UAAU;;AAO1B,UAAW;EACT,WAAW,EAAE,oBAAoB;EACjC,UAAU,ECsIJ,OAAO;EDrIb,OAAO,EAAE,cAAc;EACvB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAGd,MAAO;EACL,MAAM,EAAE,UAAU;;AAGpB,EAAG;EACD,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,YAAY;EACpB,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,UAAU;;AAGxB,KAAM;EACJ,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,GAAG;;AAGjB,EAAG;EACA,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,IAAI;;AAGlB,EAAG;EACD,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,KAAK;;AAGd,CAAE;EACA,WAAW,EAAE,KAAK;EAClB,aAAa,EAAE,IAAI;EACnB,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,CAAC;EACV,YAAa;IACX,aAAa,EAAE,IAAI;;AAIvB,IAAK;EACH,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,cAAc;EACtB,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,GAAG;;AAGpB,CAAE;EACA,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,KAAK,ECuGC,OAAO;EDtGb,eAAe,EAAE,IAAI;EACrB,UAAU,EAAE,SAAS;EACrB,gBACO;IACL,KAAK,ECiJA,OAAO;;AD7IhB,OAAQ;EACN,aAAa,EAAE,IAAI;EACnB,eAAQ;IACN,aAAa,EAAE,KAAK;;AAIxB,GAAI;EACF,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EACX,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,UAAU,ECvCJ,OAAO;EDwCb,QAAQ,EAAE,KAAK;EACf,OAAO,EAAE,IAAI;EACb,KAAE;IACA,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,SAAS;IAClB,KAAK,ECqDD,OAAO;IDpDX,eAAe,EAAE,IAAI;IACrB,wBACQ;MACN,KAAK,ECuHF,OAAO;IDrHZ,YAAS;MACP,KAAK,ECqEH,OAAO;;ADhEf,KAAM;EACF,UAAU,EAAE,MAAM;EAClB,gBAAgB,EC3DZ,OAAO;ED4DX,KAAK,ECsCD,OAAO;EDrCX,KAAK,EAAE,GAAG;EACV,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,iBAAgB;EACxB,eAAe,EAAE,QAAQ;EACzB,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,mBAAmB;;AAGlC,EAAG;EACC,MAAM,EAAE,iBAAgB;EACxB,OAAO,EAAE,IAAI;EAEb,IAAE;IACC,SAAS,EAAE,IAAI;IACf,eAAe,EAAE,IAAI;IACrB,KAAK,ECqBJ,OAAO;;ADjBf,QAAS;EACJ,WAAW,EAAE,IAAI;EACjB,KAAK,ECwBF,OAAO;EDvBV,SAAS,EAAE,IAAI;EACf,cAAQ;IACP,KAAK,ECkFF,OAAO;;AD9EhB,EAAG;EACE,OAAO,EAAE,IAAI", -"sources": ["style.scss","nord.scss"], -"names": [], -"file": "style.css" -} \ No newline at end of file diff --git a/style.scss b/style.scss deleted file mode 100644 index 272da3b..0000000 --- a/style.scss +++ /dev/null @@ -1,168 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); -@import "nord.scss"; -* { box-sizing: border-box;} - -$primaryColor: deeppink; -$dkBg: #303947; -$itemBg: #6788a7; -$itemBgOdd: darken(#6788a7,15%); - -html, body { - font-family: "Roboto", sans-serif; - background: $nord6; - padding: 80px 30px 30px; - color: #444; - height: 100%; -} - -ol, ul { - margin: 0 0 50px 0; -} - -ul { - position: relative; - width: 75%; - margin: 100px auto 0; - padding: 10px; - box-sizing: border-box; -} - -ul li { - display: flex; - background: red; -} - -h1 { - color: $nord0; - font-size: 48px; -} - -h2 { - color: $nord0; - font-size: 28px; -} - -p { - line-height: 1.6em; - margin-bottom: 10px; - font-size: 20px; - padding: 0; - &:last-child { - margin-bottom: 40px; - } -} - -code { - background: #f8f8f8; - color: #d64f9b; - border: 1px solid #eee; - padding: 2px; - border-radius: 3px; -} - -a { - font-size: 22px; - font-weight: bold; - color: $nord8; - text-decoration: none; - transition: all 200ms; - &:hover, - &:focus{ - color: $nord13; - } -} - -article { - margin-bottom: 50px; - .margin { - margin-bottom: 100vh; - } -} - -nav { - display: flex; - width: 100%; - top: 0; - left: 0; - background: $nord1; - position: fixed; - padding: 30px; - a { - display: inline-flex; - padding: 20px 30px; - color: $nord6; - text-decoration: none; - &:hover, - &:focus { - color: $nord13; - } - &.active { - color: $nord8; - } - } -} - -.tut_box { - border: 2px solid $nord1; - border-radius: 5px; - margin-bottom: 10px; - padding: 5px; - - &:hover { - background-color: $nord1; - color: $nord6; - a { - color: $nord13; - } - .out_link{ - color: $nord7; - } - } - p { - padding: 0px; - margin: 0px; - } - - .tut_date { - float: right; - position: relative; - top: 0px; - right: 0px; - text-align: right; - } -} - -.tutName { - font-weight: bold; - color: $nord7; - font-size: 22px; - &:hover { - color: $nord13; - } -} - -.out_link { - font-weight: bold; - color: $nord3; - text-decoration: none; - padding: 5px, 5px; - font-size: 19px; -} - - - - - - - - - - - - - - - - - - diff --git a/todo.md b/todo.md new file mode 100644 index 0000000..75ea2c6 --- /dev/null +++ b/todo.md @@ -0,0 +1,5 @@ +1. Havox & Me: Add another section for development +2. Move version history down to the bottom +3. What I know +4. Wire tutorials & projects up - maybe swap tutorials & projects +5. Add Professional github?