Skip to content

Commit

Permalink
Add project page for volume space program.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Daniel-B-Tufvesson
Daniel-B-Tufvesson committed Jan 10, 2024
1 parent 3b9c9fb commit a871618
Show file tree
Hide file tree
Showing 11 changed files with 454 additions and 106 deletions.
208 changes: 108 additions & 100 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,125 +11,133 @@
</head>
<body>
<div class="page-wrapper">
<header>
<header class="large-header">
<a href="index.html"><h1>DANIEL TUFVESSON</h1></a>
</header>

<div class="about-me">
<div class="me-section">
<img class="portrait-picture" src="me.jpeg" alt="A portrait of Daniel Tufvesson">
<div>
<h4>CONTACT ME</h4>
<ul>
<li>LinkedIn</li>
<li>GitHub</li>
<li>Email: daniel.tufvesson@outlook.com</li>
</ul>
<div class="page-content">

<div class="about-me">
<div class="me-section">
<img class="portrait-picture" src="me.jpeg" alt="A portrait of Daniel Tufvesson">
<div>
<h4>CONTACT ME</h4>
<ul>
<li>LinkedIn</li>
<li>GitHub</li>
<li>Email: daniel.tufvesson@outlook.com</li>
</ul>
</div>
</div>
</div>

<div class="me-section">
<p>
Hi! My name is Daniel Tufvesson and I'm a cognitive science student
at Linköping University, Sweden.
</p>
<p>
Kandidatstudent på tredje året inom kognitionsvetenskap. Mina
främsta intressen är AI, NLP och hjärnan.
</p>
<p>
När jag var 15 år skrev jag mitt första program, och sen var jag
fast! Vad som började som en hobby blev snabbt ett starkt intresse,
och ledde till bildandet av två näringsverksamheter med syftet att
utveckla spel. Nu har jag lämnat spelvärlden och har som ambition
att bli expert inom AI och maskininlärning.
</p>
<p>
This portfolio consists of some of the projects I have had
the pleasure of working on. If you want to find out more about me
and my experience, please refer to my LinkedIn.
</p>
</div>

<div class="me-section">
<h3>EDUCATION</h3>
<ul>
<li>Linköping University 2021–2024</li>
<li>Ystad Gymnasium 2014–2017</li>
</ul>

<h3>EXPERIENCE</h3>
<ul>
<li>Independent Game Developer 2017–2021</li>
<li>Game Developer at ZuckerGates UF 2015–2016</li>
</ul>
</div>
</div>

<div class="project-table">
<h2>GAME PROJECTS</h2>
<div class="project-table-content">

<!-- Project 1 -->
<project-cell heading="Unearthed" image="unearthed-cell.jpeg" tags="Java UI">
<p>
Unearthed is about exploration, survival, crafting, mining,
and most importantly automation! The game is set in a
procedurally generated 2D tile world.
</p>
<div class="me-section">
<p>
This is one of the largest projects I have worked on, and
is still in development to this day!
Hi! My name is Daniel Tufvesson and I'm a cognitive science student
at Linköping University, Sweden.
</p>
</project-cell>

<!-- Project 2 -->
<project-cell heading="Bonebreaker" image="unearthed-cell.jpeg" tags="JavaScript HTML CSS Web">
<p>
A variant of the classic Breakout game.
Kandidatstudent på tredje året inom kognitionsvetenskap. Mina
främsta intressen är AI, NLP och hjärnan.
</p>
</project-cell>

<!-- Project 3 -->
<project-cell heading="Volume Space Program" image="unearthed-cell.jpeg" tags="JavaScript HTML CSS Input-field-from-hell Web">
<p>
Why use a boring old slider to control your audio volume, when
you can launch a rocket into orbit, and then use its distance
from the planet to determine the volume.
När jag var 15 år skrev jag mitt första program, och sen var jag
fast! Vad som började som en hobby blev snabbt ett starkt intresse,
och ledde till bildandet av två näringsverksamheter med syftet att
utveckla spel. Nu har jag lämnat spelvärlden och har som ambition
att bli expert inom AI och maskininlärning.
</p>
<p>
It's not rocket science!
This portfolio consists of some of the projects I have had
the pleasure of working on. If you want to find out more about me
and my experience, please refer to my LinkedIn.
</p>
</project-cell>
</div>
</div>
</div>

<div class="me-section">
<h3>EDUCATION</h3>
<ul>
<li>Linköping University 2021–2024</li>
<li>Ystad Gymnasium 2014–2017</li>
</ul>

<div class="project-table">
<h2>AI PROJECTS</h2>
<div class="project-table-content">
<h3>EXPERIENCE</h3>
<ul>
<li>Independent Game Developer 2017–2021</li>
<li>Game Developer at ZuckerGates UF 2015–2016</li>
</ul>
</div>
</div>

<!-- Project 1 -->
<project-cell heading="Bonebreaker" image="unearthed-cell.jpeg" tags="JavaScript HTML CSS Web">
<p>
A variant of the classic Breakout game.
</p>
</project-cell>
<div class="project-table">
<h2>GAME PROJECTS</h2>
<div class="project-table-content">

<!-- Project 1 -->
<project-cell heading="Unearthed" image="unearthed-cell.jpeg"
tags="Java UI">
<p>
Unearthed is about exploration, survival, crafting, mining,
and most importantly automation! The game is set in a
procedurally generated 2D tile world.
</p>
<p>
This is one of the largest projects I have worked on, and
is still in development to this day!
</p>
</project-cell>

<!-- Project 2 -->
<project-cell heading="Bonebreaker" image="unearthed-cell.jpeg"
tags="JavaScript HTML CSS Web">
<p>
A variant of the classic Breakout game.
</p>
</project-cell>

<!-- Project 3 -->
<project-cell heading="Volume Space Program" image="rsp-cell.jpeg"
url="./volume-space-program/project-rocket-space-program.html"
tags="JavaScript HTML CSS Input-field-from-hell Web">
<p>
A fun but 'useless' input field for controlling the audio volume.
To set the volume, you must launch a tiny rocket into orbit. The
height of the orbit then determines the volume.
</p>
<p>
It's not rocket science!
</p>
</project-cell>
</div>
</div>

<!-- Project 2 -->
<project-cell heading="Bonebreaker" image="unearthed-cell.jpeg" tags="JavaScript HTML CSS Web">
<p>
A variant of the classic Breakout game.
</p>
</project-cell>

<!-- Project 3 -->
<project-cell heading="Bonebreaker" image="unearthed-cell.jpeg" tags="JavaScript HTML CSS Web">
<p>
A variant of the classic Breakout game.
</p>
</project-cell>
<div class="project-table">
<h2>AI PROJECTS</h2>
<div class="project-table-content">

<!-- Project 1 -->
<project-cell heading="Bonebreaker" image="unearthed-cell.jpeg" tags="JavaScript HTML CSS Web">
<p>
A variant of the classic Breakout game.
</p>
</project-cell>

<!-- Project 2 -->
<project-cell heading="Bonebreaker" image="unearthed-cell.jpeg" tags="JavaScript HTML CSS Web">
<p>
A variant of the classic Breakout game.
</p>
</project-cell>

<!-- Project 3 -->
<project-cell heading="Bonebreaker" image="unearthed-cell.jpeg" tags="JavaScript HTML CSS Web">
<p>
A variant of the classic Breakout game.
</p>
</project-cell>
</div>
</div>

</div>

<footer>
Expand Down
10 changes: 8 additions & 2 deletions project-cell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@ const CLASS_INFO = 'project-cell-info'
const CLASS_IMAGE = 'project-cell-image'
const CLASS_HEADING = 'project-cell-heading'
const CLASS_TAGS = 'project-tags'
const CLASS_PROJECT_URL = 'project-url'

const HTML = `
<a href="index.html">
<a class=${CLASS_PROJECT_URL} href="index.html">
<img class="${CLASS_IMAGE}"></img>
<div class="${CLASS_INFO}">
<h3 class="${CLASS_HEADING}"></h3>
Expand All @@ -18,9 +19,10 @@ const HTML = `
const ATTRIBUTE_IMAGE = 'image'
const ATTRIBUTE_HEADING = 'heading'
const ATTRIBUTE_TAGS = 'tags'
const ATTRIBUTE_URL = 'url';

export class ProjectCell extends HTMLElement {
static observedAttributes = [ATTRIBUTE_IMAGE, ATTRIBUTE_HEADING, ATTRIBUTE_TAGS];
static observedAttributes = [ATTRIBUTE_IMAGE, ATTRIBUTE_HEADING, ATTRIBUTE_TAGS, ATTRIBUTE_URL];

constructor() {
super()
Expand Down Expand Up @@ -51,6 +53,10 @@ export class ProjectCell extends HTMLElement {
case ATTRIBUTE_TAGS:
this.setTags(newValue)
break

case ATTRIBUTE_URL:
this.querySelector('.' + CLASS_PROJECT_URL).href = newValue
break
}
}

Expand Down
Binary file added rsp-cell.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added rsp-cell.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 35 additions & 4 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@ h4 {
font-size: 15pt;
}

p {
font-size: 13pt;
line-height: 25px;
}

ul {
margin-top: 5px;
}
Expand All @@ -38,7 +43,7 @@ li {
padding-bottom: 6px;
}

a {
header > a, project-cell > a {
color: inherit; /* blue colors for links too */
text-decoration: inherit; /* no underline */
}
Expand All @@ -53,14 +58,22 @@ a {
background-color: white;
}

.page-content {
padding-left: 50px;
padding-right: 50px;
display: flex;
flex-direction: column;
gap: 70px;
}

body {
display: flex;
justify-content: center;

background-color: gray;
}

header {
.large-header {
height: 200px;
display: flex;
flex-direction: row;
Expand All @@ -73,6 +86,22 @@ header {
text-shadow: black 3px 3px 5px;
}

.small-header {
display: flex;
flex-direction: row;
align-items: end;
padding: 20px;

background-image: url('background.jpeg');
background-position: center;
color: white;
text-shadow: black 3px 3px 5px;
}

.small-header h1 {
font-size: 30pt;
}


footer {
height: 200px;
Expand All @@ -88,7 +117,7 @@ footer {
.about-me {
display: flex;
flex-direction: row;
padding: 50px;
/* padding: 50px; */
}

.me-section {
Expand Down Expand Up @@ -134,6 +163,8 @@ footer {

.project-cell-image {
width: 100%;
height: 200px;
object-fit: cover;
}

.project-cell-info {
Expand Down Expand Up @@ -166,4 +197,4 @@ footer {
padding-right: 10px;
background-color: lightgray;
border-radius: 7px;
}
}
Binary file added volume-space-program/debris.mov
View file
Binary file not shown.
Binary file added volume-space-program/demo.mov
View file
Binary file not shown.
Loading

0 comments on commit a871618

Please sign in to comment.