nessar/Portfolio
1
0 Fork 0
Code Issues 2 Pull Requests 3 Packages Projects Releases Wiki Activity

projects finished need to add other projects to not overflow viewer

Browse Source
This commit is contained in:
nessar committed 2023-03-28 02:15:58 +02:00
1 parent 60179ca684
commit 78365bbce3
8 files changed
+355 -29
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/assets/images/check.svg
+7
View File
@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
␍<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Interface / Check_All">
<path id="Vector" d="M8 12.4854L12.2426 16.728L20.727 8.24268M3 12.4854L7.24264 16.728M15.7279 8.24268L12.5 11.5001" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 470 B

src/assets/images/github.svg
+1
View File
@@ -0,0 +1 @@
<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 963 B

src/assets/images/perso.svg
+7
View File
@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
␍<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Navigation / House_03">
<path id="Vector" d="M2 20.0001H4M4 20.0001H10M4 20.0001V11.4522C4 10.9179 4 10.6506 4.06497 10.4019C4.12255 10.1816 4.21779 9.97307 4.3457 9.78464C4.49004 9.57201 4.69064 9.39569 5.09277 9.04383L9.89436 4.84244C10.6398 4.19014 11.0126 3.86397 11.4324 3.73982C11.8026 3.63035 12.1972 3.63035 12.5674 3.73982C12.9875 3.86406 13.3608 4.19054 14.1074 4.84383L18.9074 9.04383C19.3095 9.39568 19.5102 9.57202 19.6546 9.78464C19.7825 9.97307 19.877 10.1816 19.9346 10.4019C19.9995 10.6506 20 10.9179 20 11.4522V20.0001M10 20.0001H14M10 20.0001V16.0001C10 14.8955 10.8954 14.0001 12 14.0001C13.1046 14.0001 14 14.8955 14 16.0001V20.0001M14 20.0001H20M20 20.0001H22" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1012 B

src/assets/images/school.svg
+7
View File
@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
␍<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Interface / Suitcase">
<path id="Vector" d="M8 8H6.2002C5.08009 8 4.51962 8 4.0918 8.21799C3.71547 8.40973 3.40973 8.71547 3.21799 9.0918C3 9.51962 3 10.0801 3 11.2002V16.8002C3 17.9203 3 18.4801 3.21799 18.9079C3.40973 19.2842 3.71547 19.5905 4.0918 19.7822C4.5192 20 5.07899 20 6.19691 20H17.8031C18.921 20 19.48 20 19.9074 19.7822C20.2837 19.5905 20.5905 19.2842 20.7822 18.9079C21 18.4805 21 17.9215 21 16.8036V11.1969C21 10.079 21 9.5192 20.7822 9.0918C20.5905 8.71547 20.2837 8.40973 19.9074 8.21799C19.4796 8 18.9203 8 17.8002 8H16M8 8H16M8 8C8 5.79086 9.79086 4 12 4C14.2091 4 16 5.79086 16 8" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 931 B

src/assets/json/projects.json
+4 -2
View File
@@ -25,7 +25,9 @@
"tech": [
"HTML",
"CSS",
"JavaScript"
"JavaScript",
"Vue",
"Typescript"
],
"links": {
"title": "https://www.google.com",
@@ -57,7 +59,7 @@
"name": "test2",
"year": 2010,
"type": "School Project",
"desc": "This is a super testing project",
"desc": "This is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing projectThis is a super testing project",
"tech": [
"HTML",
"CSS",
src/assets/ts/project.ts
+63
View File
@@ -7,4 +7,67 @@ export interface Project {
links: { [key: string]: string };
logo: string;
video: string;
}
const linksTech: { [key: string]: string } = {
"angular": 'https://angular.io/',
"react": 'https://reactjs.org/',
"vue": 'https://vuejs.org/',
"node": 'https://nodejs.org/',
"express": 'https://expressjs.com/',
"mongodb": 'https://www.mongodb.com/',
"mysql": 'https://www.mysql.com/',
"postgresql": 'https://www.postgresql.org/',
"python": 'https://www.python.org/',
"django": 'https://www.djangoproject.com/',
"flask": 'https://flask.palletsprojects.com/',
"java": 'https://www.java.com/',
"spring": 'https://spring.io/',
"springboot": 'https://spring.io/projects/spring-boot',
"html": 'https://developer.mozilla.org/en-US/docs/Web/HTML',
"css": 'https://developer.mozilla.org/en-US/docs/Web/CSS',
"javascript": 'https://developer.mozilla.org/en-US/docs/Web/JavaScript',
"typescript": 'https://www.typescriptlang.org/',
"jquery": 'https://jquery.com/',
"bootstrap": 'https://getbootstrap.com/',
"materialize": 'https://materializecss.com/',
"tailwind": 'https://tailwindcss.com/',
"firebase": 'https://firebase.google.com/',
"aws": 'https://aws.amazon.com/',
"docker": 'https://www.docker.com/',
"git": 'https://git-scm.com/',
"linux": 'https://www.linux.org/',
"windows": 'https://www.microsoft.com/en-us/windows',
"macos": 'https://www.apple.com/macos/',
"c": 'https://en.wikipedia.org/wiki/C_(programming_language)',
"c++": 'https://en.wikipedia.org/wiki/C%2B%2B',
"c#": 'https://en.wikipedia.org/wiki/C_Sharp_(programming_language)',
"php": 'https://www.php.net/',
"rust": 'https://www.rust-lang.org/',
"swift": 'https://developer.apple.com/swift/',
"objective-c": 'https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html',
"dart": 'https://dart.dev/',
"flutter": 'https://flutter.dev/',
"unity": 'https://unity.com/',
"unreal": 'https://www.unrealengine.com/',
"ocaml": 'https://ocaml.org/',
"sdl2": 'https://www.libsdl.org/',
"opengl": 'https://www.opengl.org/',
"vulkan": 'https://www.khronos.org/vulkan/',
"directx": 'https://www.microsoft.com/en-us/directx',
"opencl": 'https://www.khronos.org/opencl/',
"nodejs": 'https://nodejs.org/',
"javafx": 'https://openjfx.io/',
"smfl": 'https://www.sfml-dev.org/',
"unix": 'https://en.wikipedia.org/wiki/Unix',
}
export function getTechLink(tech: string): string {
for (const key in linksTech) {
if (tech.toLowerCase() === key) {
return linksTech[key]
}
}
return ''
}
src/components/project.vue
+153 -27
View File
@@ -1,25 +1,37 @@
<template>
<div class="project">
<h1>{{ project.name }}</h1>
<div class="title">
<h2 class="year">{{ project.year }}</h2>
<a :href="project.links['title']">
<h1>{{ project.name }} <img class="icon" v-if="icon(project.type) != ''" :src="icon(project.type)" /></h1>
</a>
<h2 class="type">{{ project.type }}</h2>
</div>
<div class="info">
<p>{{ project.desc }}</p>
<a :href="project.links['title']" target="_blank">
<div class="descTechLinksLandscape">
<p class="desc">{{ project.desc }}</p>
<techAndLinks class="landscape" :project="project" :portrait="false" />
</div>
<a :href="project.links['title']" target="_blank" class="videoPreview">
<!-- autoplay -->
<video autoplay loop muted>
<source :src="project.video" type="video/mp4" />
</video>
</a>
</div>
<techAndLinks class="portrait" :project="project" :portrait="true" />
</div>
</template>
<script setup lang="ts">
import { defineComponent } from 'vue';
import type { Project } from '@/assets/ts/project';
import techAndLinks from './techAndLinks.vue';
</script>
<script lang="ts">
export default defineComponent({
name: 'project',
props: {
@@ -50,6 +62,18 @@ export default defineComponent({
}
},
},
methods: {
icon(input: string) {
switch (input) {
case 'School Project':
return 'src/assets/images/school.svg';
case 'Personal Project':
return 'src/assets/images/perso.svg';
default:
return '';
}
}
}
});
</script>
@@ -59,6 +83,7 @@ export default defineComponent({
width: 100vw;
height: v-bind(height);
background-color: v-bind(color);
padding: 1vw 1vh 1vw 1vh;
display: flex;
align-items: center;
justify-content: center;
@@ -66,32 +91,93 @@ export default defineComponent({
transition: width 0.75s, height 0.75s;
}
h1 {
color: black;
font-size: 2.5em;
.descTechLinksLandscape {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: min(2vh, 20px);
max-width: 33%;
max-height: 60%;
flex-grow: 10;
}
p {
.title {
display: flex;
align-items: center;
justify-content: space-between;
width: 80%;
}
.title a {
text-decoration: none;
}
:deep(a:hover:not(.videoPreview)) {
filter: invert(100%);
}
.title h1 {
transition: color 0.5s;
color: black;
font-size: 2.5em;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.title h2 {
color: black;
font-size: 1.5em;
}
:deep(.icon) {
max-width: 40px;
max-height: 40px;
}
.desc {
color: black;
font-size: 1.5em;
z-index: 10;
background-color: gray;
padding: max(1vw, 1vh);
border-radius: 15px;
text-align: center;
overflow-y: auto;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
-ms-overflow-style: none;
scrollbar-width: none;
}
video {
width: 100%;
height: 100%;
.desc::-webkit-scrollbar {
display: none;
}
a {
.videoPreview video {
width: 100%;
height: 100%;
object-fit: cover;
}
.videoPreview {
max-width: 100%;
max-height: 100%;
border-radius: 15px;
overflow: hidden;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 10;
}
.info {
width: 90%;
padding: 2vw;
max-width: 100%;
max-height: 65%;
font-family: montserrat_regular;
display: flex;
align-items: center;
@@ -99,33 +185,73 @@ a {
flex-direction: row;
}
.info p {
background-color: gray;
padding: 25px;
border-radius: 15px;
}
/* if the screen is wider than tall */
@media screen and (orientation: landscape) {
.info p {
margin-right: -35px;
height: 90%;
}
.info {
flex-direction: row;
}
.descTechLinksLandscape {
min-height: 90%;
flex-basis: 50%;
margin-right: -35px;
flex-shrink: 3;
}
.desc {
width: 100%;
}
.portrait {
display: none;
}
}
/* if the screen is taller than wide */
@media screen and (orientation: portrait) {
.info p {
margin-bottom: -35px;
width: 90%;
}
.info {
flex-direction: column;
}
.descTechLinksLandscape {
min-width: 90%;
margin-bottom: max(-2vh, -35px);
}
.title {
flex-direction: column;
align-items: center;
}
.title .type {
order: -1;
}
.title .year {
order: -2;
}
.landscape {
display: none;
}
.desc {
max-width: 90%;
}
}
@media screen and (max-height: 600px) {
.desc {
font-size: 1em;
}
}
@media screen and (max-height: 400px) {
:deep(.icon) {
max-width: 15px;
max-height: 15px;
}
}
</style>
src/components/techAndLinks.vue
+113
View File
@@ -0,0 +1,113 @@
<template>
<div class="techLinks">
<div class="techs">
<a v-for="tech in project.tech" :href="getTechLink(tech)">{{ tech }}</a>
</div>
<div class="images">
<a class="tooltip" v-if="'github' in project.links" :href="project.links['github']" title="See the code"><img
src="src/assets/images/github.svg" alt="GitHub" class="icon" /></a>
<a class="tooltip" v-if="'release' in project.links" :href="project.links['release']"
title="Test the program"><img src="src/assets/images/check.svg" alt="Release" class="icon" /></a>
</div>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from 'vue';
import { getTechLink, type Project } from '@/assets/ts/project';
</script>
<script lang="ts">
export default defineComponent({
name: 'techAndLinks',
props: {
project: {
type: Object as () => Project,
required: true,
}
},
});
</script>
<style scoped>
.techLinks {
width: calc(100% - 35px);
display: flex;
align-items: center;
justify-content: space-between;
align-self: flex-end;
margin-right: 35px;
padding: 0 1vw 0 1vw;
flex-wrap: wrap;
flex-direction: row;
}
.images {
gap: 1vw;
display: flex;
align-items: center;
justify-content: center;
}
.images img {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
border-radius: 50%;
border: 1px solid black;
}
.techs {
display: flex;
align-items: center;
justify-content: center;
gap: 1vw;
flex-wrap: wrap;
}
.techs a {
color: black;
font-weight: bold;
z-index: 10;
}
.tooltip {
position: relative;
display: inline-block;
z-index: 10;
}
.tooltip:hover::before {
content: attr(title);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding: 5px;
background-color: #333;
color: #fff;
font-size: 14px;
white-space: nowrap;
z-index: 10;
border-radius: 15px;
}
@media (orientation: portrait) {
.techLinks {
flex-direction: column;
margin-right: 0;
gap: 1vh;
width: 100%;
}
}
@media (max-width: 1000px) {
.techLinks {
flex-direction: column;
gap: 1vh;
}
}
@media (max-height: 400px) {
.techLinks {
font-size: 0.8em;
}
}
</style>