Browse Source

Moved project page to Landing Page. Added Jenkins links.

master
PHENOM 2 years ago
parent
commit
8ba8c57493
4 changed files with 208 additions and 180 deletions
  1. 3
    1
      Jenkinsfile
  2. 56
    17
      layouts/phenomic.vue
  3. 149
    11
      pages/index.vue
  4. 0
    151
      pages/projects.vue

+ 3
- 1
Jenkinsfile View File

@@ -22,7 +22,9 @@ pipeline {
}
}
steps {
sh 'zip -r $BUILD_TAG.zip ./dist/*'
sh 'cd ./dist'
sh 'zip -r ../$BUILD_TAG.zip *'
sh 'cd ../'
archiveArtifacts '$BUILD_TAG.zip'
}
}

+ 56
- 17
layouts/phenomic.vue View File

@@ -9,6 +9,7 @@
<v-subheader inset>Main Area</v-subheader>
<v-list>
<v-list-tile
nuxt
router
:to="item.to"
:key="i"
@@ -16,7 +17,7 @@
exact
>
<v-list-tile-action>
<v-icon v-html="item.icon"></v-icon>
<v-icon v-html="item.icon" :color="item.color"></v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-text="item.title"></v-list-tile-title>
@@ -27,22 +28,22 @@
<v-subheader inset>Web-Apps</v-subheader>
<v-list>
<v-list-tile
:href="item.to"
nuxt
:to="item.to"
:key="i"
v-for="(item, i) in navProjectsItems"
v-for="(item, i) in navWebAppsItems"
exact
>
<v-list-tile-action>
<v-icon v-html="item.icon"></v-icon>
<v-icon v-html="item.icon" :color="item.color"></v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-text="item.title"></v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>


<v-subheader inset>External Services</v-subheader>
<v-divider></v-divider>
<v-subheader inset>Services</v-subheader>
<v-list>
<v-list-tile
:href="item.to"
@@ -52,13 +53,41 @@
exact
>
<v-list-tile-action>
<v-icon v-html="item.icon"></v-icon>
<v-icon v-html="item.icon" :color="item.color"></v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-text="item.title"></v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-divider></v-divider>
<v-subheader inset>Contact</v-subheader>
<v-list>
<v-list-tile
:href="item.to"
:key="i"
target="_blank"
v-for="(item, i) in navContactItems"
exact
>
<v-list-tile-action>
<v-icon v-html="item.icon" :color="item.color"></v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-text="item.title"></v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile
@click="dialog = true"
>
<v-list-tile-action>
<v-icon color="indigo">mdi-discord</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title> Discord: {{ discordHandle }} </v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar
fixed
@@ -109,6 +138,7 @@
<v-icon v-html="item.icon"></v-icon>
<span v-html="item.title"></span>
</v-btn>

<v-btn
flat
color="indigo"
@@ -156,25 +186,31 @@
</template>

<script>
const gitInfo = { url: 'https://git.phenomic.net/PHENOM', user: 'PHENOM' }
const emailInfo = { url: 'mailto:phenom@phenomic.net', mail: 'phenom@phenomic.net' }
const gitInfo = { icon: 'mdi-git', url: 'https://git.phenomic.net/PHENOM', user: 'PHENOM', color: 'grey' }
const emailInfo = { icon: 'mdi-email', url: 'mailto:phenom@phenomic.net', mail: 'phenom@phenomic.net', color: 'green' }
const ciInfo = { icon: 'mdi-wrench', url: 'https://ci.phenomic.net/job/git.phenomic.net/', color: 'amber' }

export default {
data: () => ({
discordHandle: 'PHENOM#7029',
drawer: false,
navMainItems: [
{ icon: 'home', title: 'Home', to: '/' },
{ icon: 'mdi-book', title: 'Featured Projects', to: 'projects' }
{ icon: 'home', title: 'Home', to: '/', color: 'cyan lighten-3' }
],
navServiceItems: [
{ icon: 'mdi-git', title: 'Git Server', to: gitInfo.url }
{ icon: gitInfo.icon, title: 'Git Server', to: gitInfo.url, color: gitInfo.color },
{ icon: ciInfo.icon, title: 'Jenkins CI & Nightly builds', to: ciInfo.url, color: ciInfo.color }
],
navProjectsItems: [
{ icon: 'mdi-music', title: 'Bytebeat Generator', to: 'bytebeat' }
navWebAppsItems: [
{ icon: 'mdi-music', title: 'Bytebeat Generator', to: 'bytebeat', color: 'red' }
],
navContactItems: [
{ icon: emailInfo.icon, title: 'Mail: ' + emailInfo.mail, to: emailInfo.url, color: emailInfo.color }
],
footerItems: [
{ icon: 'mdi-git', title: gitInfo.user, to: gitInfo.url, color: 'grey' },
{ icon: 'mdi-email', title: emailInfo.mail, to: emailInfo.url, color: 'green' }
{ icon: gitInfo.icon, title: gitInfo.user, to: gitInfo.url, color: gitInfo.color },
{ icon: ciInfo.icon, title: 'Nightly Builds', to: ciInfo.url, color: ciInfo.color },
{ icon: emailInfo.icon, title: emailInfo.mail, to: emailInfo.url, color: emailInfo.color }
],
title: 'PHENOMIC.net',
dialog: false,
@@ -183,6 +219,9 @@
cDate: new Date().getFullYear().toString()
}),
methods: {
dialogAppear () {
this.dialog = true
},
onCopy: function (e) {
this.copyMessage = 'Copied "' + e.text + '" to your clipboard'
this.copiedToast = true

+ 149
- 11
pages/index.vue View File

@@ -1,20 +1,158 @@
<template>
<v-layout column justify-center align-center>
<v-responsive>
<v-container fill-height>
<v-layout align-center>
<v-flex>
<h3 class="display-3">Welcome to PHENOMIC.net</h3>
<span class="subheading">Open the sidebar to find more stuff or use the elements in the footbar. Check out the <a href="projects">Featured Projects</a> area or my <a href="https://git.phenomic.net">Git Server</a>.</span>
<v-layout row wrap>
<v-container>
<v-card color="blue-grey darken-3">
<v-card-title class="display-1 text-md-center">Welcome on PHENOMIC.net</v-card-title>
<v-card-text>
<p class="subheading">Welcome to my small project website and feel free to check out the projects listed below. <br>
Press on the button in the top-left to open the Side Navigation Menu.</p>
</v-card-text>
</v-card>
</v-container>
<v-container
fluid grid-list-md
:key="i-50"
v-for="(imageProject, i) in imageProjects"
>
<v-layout
row
wrap
>
<v-flex d-flex xs12 sm6 md4>
<v-card :color="imageProject.color" dark>
<v-card-title
primary
class="title"
>{{ imageProject.name }}</v-card-title>
<v-card-text>{{ imageProject.description }}</v-card-text>
<v-btn
:href="imageProject.url"
>
Go to Project
</v-btn>
</v-card>
</v-flex>
<v-layout column>
<v-flex d-flex xs12 sm6 md4>
<v-card>
<v-carousel>
<v-carousel-item
v-for="(imageUrl, i) in getCompleteImageUrls(imageProject)"
:key="i"
:src="imageUrl"
></v-carousel-item>
</v-carousel>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-responsive>
</v-layout>
</v-container>
<v-container
fluid grid-list-md
:key="i"
v-for="(textProject, i) in textProjects"
>
<v-layout
column
wrap
>
<v-card :color="textProject.color" dark>
<v-card-title
primary
class="title"
>
{{ textProject.name }}
</v-card-title>
<v-card-text>{{ textProject.description }}</v-card-text>
<v-btn :href="textProject.url">Go to Project</v-btn>
</v-card>
</v-layout>
</v-container>
</v-layout>
</template>

<script>
export default {
layout: 'phenomic'
layout: 'phenomic',
data: () => ({
imageBaseUrl: 'images/projects',
imageProjects: [
{
name: 'Propeller Parallax P8X32A DemoBoard',
color: 'red darken-3',
description: 'A Project I’ve worked on during University which demonstrates the multi-cog approach of the Parallax Propeller Multicore Microcontroller in combination with my selfbuilt DemoBoard. It emulates the C64\'s MOS Technology 6581/8580 SID (Sound Interface Device) chip and is able to emulate the data read from an micro sd card. It also displays a terminal over the VGA port which can be controlled via a PS/2 Mouse and Keyboard which allows you to chose the song you want to play. Written in a combination of SPIN and some assembler.',
url: 'https://git.phenomic.net/PHENOM/Parallax-Propeller-DemoBoard',
imageBaseUrl: 'demoboard',
imageUrls: ['1.jpg', '2.jpg']
},
{
name: 'SmartHome Control',
color: 'indigo darken-3',
description: 'A small smart-home control unit. It uses the ESP8266 WiFi Module to connect to the internet and Data can be exchanged via the internet to control your home. It is also able to read out the current ambient room temperature and display it over the integrated HTTP Server.',
url: 'https://git.phenomic.net/PHENOM/SmartHome-Control',
imageBaseUrl: 'smarthome',
imageUrls: ['1.jpg', '2.jpg', '3.png', '4.png', '5.png', '6.png']
},
{
name: 'Game Boy Cartridge Reader',
color: 'green darken-3',
description: 'A Game Boy Cartridge reader with an Atmel Atmega 32 Microcontroller, that is able to read out the ROM, RAM and Realtime Clock over an virtual serial RS232 Interface.',
url: 'https://git.phenomic.net/PHENOM/Gameboy-Color-Cart-Reader',
imageBaseUrl: 'gameboyreader',
imageUrls: ['1.jpg']
},
{
name: 'Game Boy Emulator',
color: 'lime darken-3',
description: 'A Game Boy Emulator written in the Go programming language. It\'s still a work in progress and is being actively worked on.',
url: 'https://git.phenomic.net/PHENOM/GameBoyEmulator',
imageBaseUrl: 'gameboyemulator',
imageUrls: ['1.png']
},
{
name: 'Texas Instruments CC2531 AT-Command Firmware',
color: 'purple darken-3',
description: 'A project I worked on at University for the mobile systems course. The goal was to implement an AT-styled Commandset that communicates over an virtual serial USB interface on the CC2531 using the Open Source IoT Operating System Contiki. Written in pure C.',
url: 'https://git.phenomic.net/PHENOM/Texas-Instruments-CC2531-AT-Command-Firmware',
imageBaseUrl: 'ti',
imageUrls: ['1.jpg', '2.jpg']
}
],
textProjects: [
{
name: 'PHENOMIC.net',
color: 'blue-grey darken-3',
description: 'My personal website made with Nuxt.js, Vue.js and the Vuetify Material Design Component framework',
url: 'https://git.phenomic.net/PHENOM/PHENOMIC.net'
},
{
name: 'Bytebeat Synthesizer',
color: 'cyan darken-3',
description: 'A Bytebeat Synthesizer, that is able to make music or simple beats from a single one-line Javascript Expression using the Web Audio API. It is not completely finished yet, but basic functionality is established.',
url: 'https://git.phenomic.net/PHENOM/PHENOMIC.net/src/branch/master/pages/bytebeat.vue'
},
{
name: 'Omegle Discord Bot',
color: 'teal darken-3',
description: 'A Discord Bot that is able to connect to Omegle and interact as a bridge between Discord and Omegle. This bot was written in C#. Sadly this project is now defunct, since Omegle uses now reCAPTCHA v2/3, which makes it impossible for me to handle the received captchas in Discord itself. This project required a MySQL Database, due to it\'s permission and multi-guild system.',
url: 'https://git.phenomic.net/PHENOM/Omegle-Discord-Bot'
},
{
name: 'OpenGL Engine',
color: 'brown darken-3',
description: 'A very simple graphics engine using OpenGL. I\'ve worked on this project for computer graphics courses. It isn\'t fully functional, but can render primitive shapes, has a basic lighting and camera system.',
url: 'https://git.phenomic.net/PHENOM/OpenGL-Engine'
}
]
}),
methods: {
getCompleteImageUrls (project) {
return project.imageUrls.map(image => {
return this.imageBaseUrl + '/' + project.imageBaseUrl + '/' + image
})
}
},
mounted () {
}
}
</script>
</script>

+ 0
- 151
pages/projects.vue View File

@@ -1,151 +0,0 @@
<template>

<v-layout row wrap>
<h3 class="display-3">Featured Projects</h3>
<v-container
fluid grid-list-md
:key="i-50"
v-for="(imageProject, i) in imageProjects"
>
<v-layout
row
wrap
>
<v-flex d-flex xs12 sm6 md4>
<v-card :color="imageProject.color" dark>
<v-card-title
primary
class="title"
>{{ imageProject.name }}</v-card-title>
<v-card-text>{{ imageProject.description }}</v-card-text>
<v-btn
:href="imageProject.url"
>
Go to Project
</v-btn>
</v-card>
</v-flex>
<v-layout column>
<v-flex d-flex xs12 sm6 md4>
<v-card>
<v-carousel>
<v-carousel-item
v-for="(imageUrl, i) in getCompleteImageUrls(imageProject)"
:key="i"
:src="imageUrl"
></v-carousel-item>
</v-carousel>
</v-card>
</v-flex>
</v-layout>
</v-layout>
</v-container>
<v-container
fluid grid-list-md
:key="i"
v-for="(textProject, i) in textProjects"
>
<v-layout
column
wrap
>
<v-card :color="textProject.color" dark>
<v-card-title
primary
class="title"
>
{{ textProject.name }}
</v-card-title>
<v-card-text>{{ textProject.description }}</v-card-text>
<v-btn :href="textProject.url">Go to Project</v-btn>
</v-card>
</v-layout>
</v-container>
</v-layout>
</template>

<script>
export default {
layout: 'phenomic',
data: () => ({
imageBaseUrl: 'images/projects',
imageProjects: [
{
name: 'Propeller Parallax P8X32A DemoBoard',
color: 'red darken-3',
description: 'A Project I’ve worked on during University which demonstrates the multi-cog approach of the Parallax Propeller Multicore Microcontroller in combination with my selfbuilt DemoBoard. It emulates the C64\'s MOS Technology 6581/8580 SID (Sound Interface Device) chip and is able to emulate the data read from an micro sd card. It also displays a terminal over the VGA port which can be controlled via a PS/2 Mouse and Keyboard which allows you to chose the song you want to play. Written in a combination of SPIN and some assembler.',
url: 'https://git.phenomic.net/PHENOM/Parallax-Propeller-DemoBoard',
imageBaseUrl: 'demoboard',
imageUrls: ['1.jpg', '2.jpg']
},
{
name: 'SmartHome Control',
color: 'indigo darken-3',
description: 'A small smart-home control unit. It uses the ESP8266 WiFi Module to connect to the internet and Data can be exchanged via the internet to control your home. It is also able to read out the current ambient room temperature and display it over the integrated HTTP Server.',
url: 'https://git.phenomic.net/PHENOM/SmartHome-Control',
imageBaseUrl: 'smarthome',
imageUrls: ['1.jpg', '2.jpg', '3.png', '4.png', '5.png', '6.png']
},
{
name: 'Game Boy Cartridge Reader',
color: 'green darken-3',
description: 'A Game Boy Cartridge reader with an Atmel Atmega 32 Microcontroller, that is able to read out the ROM, RAM and Realtime Clock over an virtual serial RS232 Interface.',
url: 'https://git.phenomic.net/PHENOM/Gameboy-Color-Cart-Reader',
imageBaseUrl: 'gameboyreader',
imageUrls: ['1.jpg']
},
{
name: 'Game Boy Emulator',
color: 'lime darken-3',
description: 'A Game Boy Emulator written in the Go programming language. It\'s still a work in progress and is being actively worked on.',
url: 'https://git.phenomic.net/PHENOM/GameBoyEmulator',
imageBaseUrl: 'gameboyemulator',
imageUrls: ['1.png']
},
{
name: 'Texas Instruments CC2531 AT-Command Firmware',
color: 'purple darken-3',
description: 'A project I worked on at University for the mobile systems course. The goal was to implement an AT-styled Commandset that communicates over an virtual serial USB interface on the CC2531 using the Open Source IoT Operating System Contiki. Written in pure C.',
url: 'https://git.phenomic.net/PHENOM/Texas-Instruments-CC2531-AT-Command-Firmware',
imageBaseUrl: 'ti',
imageUrls: ['1.jpg', '2.jpg']
}
],
textProjects: [
{
name: 'PHENOMIC.net',
color: 'blue-grey darken-3',
description: 'My personal website made with Nuxt.js, Vue.js and the Vuetify Material Design Component framework',
url: 'https://git.phenomic.net/PHENOM/PHENOMIC.net'
},
{
name: 'Bytebeat Synthesizer',
color: 'cyan darken-3',
description: 'A Bytebeat Synthesizer, that is able to make music or simple beats from a single one-line Javascript Expression using the Web Audio API. It is not completely finished yet, but basic functionality is established.',
url: 'https://git.phenomic.net/PHENOM/PHENOMIC.net/src/branch/master/pages/bytebeat.vue'
},
{
name: 'Omegle Discord Bot',
color: 'teal darken-3',
description: 'A Discord Bot that is able to connect to Omegle and interact as a bridge between Discord and Omegle. This bot was written in C#. Sadly this project is now defunct, since Omegle uses now reCAPTCHA v2/3, which makes it impossible for me to handle the received captchas in Discord itself. This project required a MySQL Database, due to it\'s permission and multi-guild system.',
url: 'https://git.phenomic.net/PHENOM/Omegle-Discord-Bot'
},
{
name: 'OpenGL Engine',
color: 'brown darken-3',
description: 'A very simple graphics engine using OpenGL. I\'ve worked on this project for computer graphics courses. It isn\'t fully functional, but can render primitive shapes, has a basic lighting and camera system.',
url: 'https://git.phenomic.net/PHENOM/OpenGL-Engine'
}
]
}),
methods: {
getCompleteImageUrls (project) {
return project.imageUrls.map(image => {
return this.imageBaseUrl + '/' + project.imageBaseUrl + '/' + image
})
}
},
mounted () {
}
}
</script>

Loading…
Cancel
Save