diff --git a/assets/css/style.css b/assets/css/style.css index 9a81e6b..6ed8ddb 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -103,6 +103,16 @@ canvas { padding: 20px; } +#contact { + background: #a3acbe; + position: relative; + height: inherit; + box-sizing: border-box; + font-family: monospace; + font-size: 20px; + padding: 10px; + overflow: auto!important; +} .prompt-container { display: flex; align-items: center; @@ -175,6 +185,7 @@ canvas { #portfolio-container { background: #a3acbe; + font-size: 10px; } .games-inner-container { @@ -192,6 +203,31 @@ canvas { height: auto; } +.portfolio-item { + display: flex; + position: relative; + box-sizing: border-box; + font-family: monospace; + font-size: 17px; + padding: 10px; + overflow: auto!important; +} + +#portfolio img { + width: 200px; + height: auto; +} + +.on-screen-controller-button:hover { + background-color: +} +#portfolio a { + text-decoration: none; +} + +#portfolio h3 { + margin: 0px; +} .games-inner-container h3 { margin: 0px; width: 100%; @@ -303,7 +339,7 @@ tr:nth-child(even) { margin-top: 5px; } -.nav-bar button { +button { background-color: #ededed; font-size: 16.9px; font-family: monospace; @@ -314,7 +350,7 @@ tr:nth-child(even) { margin-right: 2px; } -.nav-bar button:hover { +button:hover { background-color: #c3f6c3; cursor: pointer; } @@ -340,3 +376,8 @@ tr:nth-child(even) { top: -35px; right: 0px; } + +#on-screen-controller-button:hover { + background-color: #c3f6c3; + cursor: pointer; +} diff --git a/assets/img/thumbnails/alambi.png b/assets/img/thumbnails/alambi.png new file mode 100644 index 0000000..dc2fcc1 Binary files /dev/null and b/assets/img/thumbnails/alambi.png differ diff --git a/assets/img/thumbnails/buleku.png b/assets/img/thumbnails/buleku.png new file mode 100644 index 0000000..24c36c8 Binary files /dev/null and b/assets/img/thumbnails/buleku.png differ diff --git a/assets/img/thumbnails/chordtone.png b/assets/img/thumbnails/chordtone.png new file mode 100644 index 0000000..8224cc9 Binary files /dev/null and b/assets/img/thumbnails/chordtone.png differ diff --git a/assets/img/thumbnails/cwr.png b/assets/img/thumbnails/cwr.png new file mode 100644 index 0000000..92f0a7e Binary files /dev/null and b/assets/img/thumbnails/cwr.png differ diff --git a/assets/img/thumbnails/homemaker.png b/assets/img/thumbnails/homemaker.png new file mode 100644 index 0000000..af41cec Binary files /dev/null and b/assets/img/thumbnails/homemaker.png differ diff --git a/assets/img/thumbnails/korabo.png b/assets/img/thumbnails/korabo.png new file mode 100644 index 0000000..f38dc4c Binary files /dev/null and b/assets/img/thumbnails/korabo.png differ diff --git a/assets/img/thumbnails/minkin-site.png b/assets/img/thumbnails/minkin-site.png new file mode 100644 index 0000000..723ccc2 Binary files /dev/null and b/assets/img/thumbnails/minkin-site.png differ diff --git a/assets/img/thumbnails/pysokoban.png b/assets/img/thumbnails/pysokoban.png new file mode 100644 index 0000000..6ebe525 Binary files /dev/null and b/assets/img/thumbnails/pysokoban.png differ diff --git a/assets/img/thumbnails/tilde-webring.png b/assets/img/thumbnails/tilde-webring.png new file mode 100644 index 0000000..bed8acc Binary files /dev/null and b/assets/img/thumbnails/tilde-webring.png differ diff --git a/assets/js/app.js b/assets/js/app.js index bbc87f2..d781d0c 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -17,6 +17,7 @@ canvas.width = spriteSize * canvasOffset canvas.height = canvas.width var audio = null +var contact = new Contact() var terminal = new Terminal() var games = new Games() var music = new Music() diff --git a/assets/js/contact.js b/assets/js/contact.js new file mode 100644 index 0000000..5a62886 --- /dev/null +++ b/assets/js/contact.js @@ -0,0 +1,5 @@ +class Contact extends Window { + constructor() { + super('contact') + } +} diff --git a/assets/js/dialog.js b/assets/js/dialog.js index d835bb8..29ef233 100644 --- a/assets/js/dialog.js +++ b/assets/js/dialog.js @@ -24,6 +24,10 @@ class Dialog { event.currentTarget.self.startIntroDialogSequence() } } + + hide() { + this.dialogElem.style.display = 'none' + } startIntroDialogSequence() { document.removeEventListener("keydown", this.dialogListener); diff --git a/index.html b/index.html index 24c68fe..612084a 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,7 @@ + @@ -104,6 +105,27 @@ + +
+
+
+ 📄 Contact Me +
+
+ +
+
+
+
+

Contact Me:

+ Feel free to contact me with a job offering or for freelance work. +

+ EMAIL: me@domdit.com
+ XMPP: domdit@xmpp.jp +

+
+
+
@@ -136,7 +158,255 @@
- Portfolio placeholder + +
+ + +
+
+ +
+
+

Homemaker

 + Description: Custom self-hostable browser homepage. Simple generation via a config file. Functionality for multiple backgrounds and color choices available. Also enables VIM style keybinding for access to your favorite websites without needing to touch a mouse.

+ Technology: Python, Javascript +
+
+ + + + + + +
+
+
+
+ + +
+
+ +
+
+

Korabo

 + Description: Collaborative planning application. Create a prospective event and select a date range in which the event may take place. Share the event with friends/coworkers to provide the days and times they are available. This was built in order to solve the issue of coordinating the hectic schedules of my band members.

+ Technology: Python, Django, JavaScript +
+
+ + + +
+
+
+
+ + +
+
+ +
+
+

Asteroids

 + Description: Asteroids port with a few extra features like power ups and a space ship that shoots homing missiles at you.

+ Technology: p5.js, JavaScript +
+
+ + + + + + +
+
+
+
+ + +
+
+ +
+
+

Sokobanya

 + Description: A puzzle game where you are an old man pushing coal onto burners to keep your sauna hot!

+ Technology: JavaScript +
+
+ + + + + + +
+
+
+
+ + +
+
+ +
+
+

CWR Forum

 + Description: Forum software I made for one of the online communities I am a part of. Includes profile management, full-fledged forum, admin management pages to control user membership status.

+ Technology: Python, Django, JavaScript +
+
+ + + +
+
+
+
+ + +
+
+ +
+
+

Chord Tone Map Generator

 + Description: Generates a guitar fretboard populated with notes applicable for improvisation over user-provided chords. Advanced improvisation over complex chords made simple.

+ Technology: Python, Flask, JavaScript +
+
+ + + + + + +
+
+
+
+ + +
+
+ +
+
+

Pysokoban

 + Description: Similar to Sokobanya above: This is a Python port of the same game. All of the gameplay takes place in the terminal. This version includes 500+ more levels!

+ Technology: Python +
+
+ + + +
+
+
+
+ + +
+
+ +
+
+

Shrinkin-Minkin Website

 + Description: Website I made for my band. There is some interesting functionality under the hood like: Autogenerating link-trees, newsletter subscription and pages for advertising new releases without enforced ads (interrupting our music) from social media sites.

+ Technology: Python, Django, JavaScript +
+
+ + + + + + +
+
+
+
+ + +
+
+ +
+
+

NoJS Webring

 + Description: Simple webring that does not require users to add JavaScript to their page. Instead, the webring host handles the JavaScript, and the users simply need to add a block of HTML code. This allows for users who like to keep a minimal website free from bulky JavaScript and calling CDNs. Currently used by at least 2 live webrings (that I know of).

+ Technology: JavaScript +
+
+ + + + + + +
+
+
+
+ + + +
+
+ +
+
+

Pong

 + Description: You know I had to do it. One of my first coding projects, PONG!

+ Technology: p5.js, JavaScript +
+
+ + + +
+
+
+
+ + +
+
+ +
+
+

Alambi

 + Description:Alambi is a blogging engine made with the Python micro-framework Flask. Provides a simple and elegant blogging solution with complete customization of colors and layout.

+ Technology: Python, Flask +
+
+ + + +
+
+
+
+ + +
+
+ +
+
+

Buleku - Manchu/English/Chinese Dictionary

 + Description: The first online Manchu Dictionary. This was used extensively by my classmates and I for a few years during my time at university. Manchu is a dead language and there were no online dictionaries at the time. Now there are a few reputable ones that I would recommend over this. I am still very proud of this project because it proved to me that I can become a software developer. This is truly my first ever project, made over 6 years ago (excluding the silly geocities sites I made in the early 2000s).

+ Technology: JavaScript +
+
+ + + +
+
+
+
@@ -292,10 +562,10 @@
- - - - + + + +