dominic/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

portfolio and contact

Browse source
This commit is contained in:
Dominic DiTaranto 2025-12-31 09:19:20 -05:00
parent 68d349ff67
commit 71fa29fd4b
14 changed files with 328 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
assets/css/style.css
View file

@ -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;
}

BIN
assets/img/thumbnails/alambi.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
assets/img/thumbnails/buleku.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 412 KiB

BIN
assets/img/thumbnails/chordtone.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
assets/img/thumbnails/cwr.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
assets/img/thumbnails/homemaker.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 610 KiB

BIN
assets/img/thumbnails/korabo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
assets/img/thumbnails/minkin-site.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
assets/img/thumbnails/pysokoban.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 138 KiB

BIN
assets/img/thumbnails/tilde-webring.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

1
assets/js/app.js
View file

@ -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()

5
assets/js/contact.js Normal file
View file

@ -0,0 +1,5 @@
class Contact extends Window {
constructor() {
super('contact')
}
}

4
assets/js/dialog.js
View file

@ -24,6 +24,10 @@ class Dialog {
event.currentTarget.self.startIntroDialogSequence()
}
}
hide() {
this.dialogElem.style.display = 'none'
}
startIntroDialogSequence() {
document.removeEventListener("keydown", this.dialogListener);

280
index.html
View file

@ -16,6 +16,7 @@
<script type="text/javascript" src="./assets/js/music.js" defer></script>
<script type="text/javascript" src="./assets/js/resume.js" defer></script>
<script type="text/javascript" src="./assets/js/portfolio.js" defer></script>
<script type="text/javascript" src="./assets/js/contact.js" defer></script>
<script type="text/javascript" src="./assets/js/dialog.js" defer></script>
<script type="text/javascript" src="./assets/js/indicator.js" defer></script>
<script type="text/javascript" src="./assets/js/keystroke.js" defer></script>
@ -104,6 +105,27 @@
</div>
</div>
<!-- Contact -->
<div class="window-container" id="contact-container">
<div class="window-bar">
<div style="float:inline-start;">
📄 Contact Me
</div>
<div style="float:inline-end;">
<button class="close-button" onclick="contact.hide()">X</button>
</div>
<div style="clear:both;"></div>
</div>
<div id="contact">
<h3>Contact Me:</h3>
Feel free to contact me with a job offering or for freelance work.
<p>
<b>EMAIL:</b> <a href= "mailto:me@domdit.com">me@domdit.com</a><br>
<b>XMPP:</b> domdit@xmpp.jp
</p>
</div>
</div>
<!-- Resume -->
<div class="window-container" id="resume-container">
<div class="window-bar">
@ -136,7 +158,255 @@
<div style="clear:both;"></div>
</div>
<div id="portfolio">
Portfolio placeholder
<div class="games-inner-container">
<!-- Homemaker -->
<div class="portfolio-item">
<div class="game-thumbnail-container">
<img src="./assets/img/thumbnails/homemaker.png" alt="">
</div>
<div class="game-description-container">
<u><h3>Homemaker</h3></u>
<b>Description:</b> 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.<br><br>
<b>Technology:</b> Python, Javascript
<br>
<br>
<a href="https://git.domdit.com/dominic/homemaker" target="_blank">
<button>🐙 GitHub</button>
</a>
<a href="https://home.domdit.com/" target="_blank">
<button>🌐 Live Demo</button>
</a>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<!-- Korabo -->
<div class="portfolio-item">
<div class="game-thumbnail-container">
<img src="./assets/img/thumbnails/korabo.png" alt="">
</div>
<div class="game-description-container">
<u><h3>Korabo</h3></u>
<b>Description:</b> 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. <br><br>
<b>Technology:</b> Python, Django, JavaScript
<br>
<br>
<a href="https://git.domdit.com/dominic/korabo" target="_blank">
<button>🐙 GitHub</button>
</a>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<!-- Asteroids -->
<div class="portfolio-item">
<div class="game-thumbnail-container">
<img src="./assets/img/thumbnails/asteroids.png" alt="">
</div>
<div class="game-description-container">
<u><h3>Asteroids</h3></u>
<b>Description:</b> Asteroids port with a few extra features like power ups and a space ship that shoots homing missiles at you. <br><br>
<b>Technology:</b> p5.js, JavaScript
<br>
<br>
<a href="https://git.domdit.com/dominic/asteroids" target="_blank">
<button>🐙 GitHub</button>
</a>
<a href="https://asteroids.domdit.com/" target="_blank">
<button>🌐 Live Demo</button>
</a>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<!-- Sokobanya -->
<div class="portfolio-item">
<div class="game-thumbnail-container">
<img src="./assets/img/thumbnails/sokobanya.png" alt="">
</div>
<div class="game-description-container">
<u><h3>Sokobanya</h3></u>
<b>Description:</b> A puzzle game where you are an old man pushing coal onto burners to keep your sauna hot! <br><br>
<b>Technology:</b> JavaScript
<br>
<br>
<a href="https://git.domdit.com/dominic/sokobanya" target="_blank">
<button>🐙 GitHub</button>
</a>
<a href="https://sokobanya.domdit.com/" target="_blank">
<button>🌐 Live Demo</button>
</a>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<!-- Forum -->
<div class="portfolio-item">
<div class="game-thumbnail-container">
<img src="./assets/img/thumbnails/cwr.png" alt="">
</div>
<div class="game-description-container">
<u><h3>CWR Forum</h3></u>
<b>Description:</b> 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. <br><br>
<b>Technology:</b> Python, Django, JavaScript
<br>
<br>
<a href="https://git.domdit.com/dominic/cwr" target="_blank">
<button>🐙 GitHub</button>
</a>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<!-- Chord Tone -->
<div class="portfolio-item">
<div class="game-thumbnail-container">
<img src="./assets/img/thumbnails/chordtone.png" alt="">
</div>
<div class="game-description-container">
<u><h3>Chord Tone Map Generator</h3></u>
<b>Description:</b> Generates a guitar fretboard populated with notes applicable for improvisation over user-provided chords. Advanced improvisation over complex chords made simple. <br><br>
<b>Technology:</b> Python, Flask, JavaScript
<br>
<br>
<a href="https://git.domdit.com/dominic/chord_tone" target="_blank">
<button>🐙 GitHub</button>
</a>
<a href="https://chordtone.domdit.com/" target="_blank">
<button>🌐 Live Demo</button>
</a>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<!-- Pysokoban -->
<div class="portfolio-item">
<div class="game-thumbnail-container">
<img src="./assets/img/thumbnails/pysokoban.png" alt="">
</div>
<div class="game-description-container">
<u><h3>Pysokoban</h3></u>
<b>Description:</b> 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! <br><br>
<b>Technology:</b> Python
<br>
<br>
<a href="https://git.domdit.com/dominic/pysokoban" target="_blank">
<button>🐙 GitHub</button>
</a>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<!-- Shrinkin Minkin Website -->
<div class="portfolio-item">
<div class="game-thumbnail-container">
<img src="./assets/img/thumbnails/minkin-site.png" alt="">
</div>
<div class="game-description-container">
<u><h3>Shrinkin-Minkin Website</h3></u>
<b>Description:</b> 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. <br><br>
<b>Technology:</b> Python, Django, JavaScript
<br>
<br>
<a href="https://git.domdit.com/dominic/shrinkinminkin/src/branch/master/shrinkinminkin" target="_blank">
<button>🐙 GitHub</button>
</a>
<a href="https://www.shrinkinminkin.com/" target="_blank">
<button>🌐 Live Demo</button>
</a>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<!-- Webring -->
<div class="portfolio-item">
<div class="game-thumbnail-container">
<img style="background-color:black;" src="./assets/img/thumbnails/tilde-webring.png" alt="">
</div>
<div class="game-description-container">
<u><h3>NoJS Webring</h3></u>
<b>Description:</b> 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).<br><br>
<b>Technology:</b> JavaScript
<br>
<br>
<a href="https://git.domdit.com/dominic/nojs-webring" target="_blank">
<button>🐙 GitHub</button>
</a>
<a href="https://tilde.green/~jigong/tilde-ring/" target="_blank">
<button>🌐 Live Demo</button>
</a>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<!-- Pong -->
<div class="portfolio-item">
<div class="game-thumbnail-container">
<img src="./assets/img/thumbnails/pong.png" alt="">
</div>
<div class="game-description-container">
<u><h3>Pong</h3></u>
<b>Description:</b> You know I had to do it. One of my first coding projects, PONG!<br><br>
<b>Technology:</b> p5.js, JavaScript
<br>
<br>
<a href="https://pong.domdit.com/" target="_blank">
<button>🌐 Live Demo</button>
</a>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<!-- Alambi -->
<div class="portfolio-item">
<div class="game-thumbnail-container">
<img src="./assets/img/thumbnails/alambi.png" alt="">
</div>
<div class="game-description-container">
<u><h3>Alambi</h3></u>
<b>Description:</b>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. <br><br>
<b>Technology:</b> Python, Flask
<br>
<br>
<a href="https://github.com/domdit/Alambi" target="_blank">
<button>🐙 GitHub</button>
</a>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<!-- Buleku -->
<div class="portfolio-item">
<div class="game-thumbnail-container">
<img src="./assets/img/thumbnails/buleku.png" alt="">
</div>
<div class="game-description-container">
<u><h3>Buleku - Manchu/English/Chinese Dictionary</h3></u>
<b>Description:</b> 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 <i>can</i> 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). <br><br>
<b>Technology:</b> JavaScript
<br>
<br>
<a href="https://github.com/domdit/buleku" target="_blank">
<button>🐙 GitHub</button>
</a>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
@ -292,10 +562,10 @@
<div class="container">
<div class="nav-bar">
<center>
<button>💼 View Portfolio</button>
<button>📄 Download Resume</button>
<button>📧 Contact Me</button>
<button>🕹️ Play Games</button>
<button onclick="contact.hide(); resume.hide(); games.hide(); portfolio.show(); dialog.hide()">💼 View Portfolio</button>
<button onclick="contact.hide(); portfolio.hide(); games.hide(); resume.show();dialog.hide();">📄 Download Resume</button>
<button onclick="resume.hide(); games.hide(); portfolio.hide(); contact.show(); dialog.hide();">📧 Contact Me</button>
<button onclick="contact.hide(); resume.hide(); portfolio.hide(); games.show(); dialog.hide()">🕹️ Play Games</button>
</center>
</div>