From 78365bbce35c15d79dfea62cf3ec3942093121cb Mon Sep 17 00:00:00 2001 From: TO Date: Tue, 28 Mar 2023 02:15:58 +0200 Subject: [PATCH] projects finished need to add other projects to not overflow viewer --- src/assets/images/check.svg | 7 ++ src/assets/images/github.svg | 1 + src/assets/images/perso.svg | 7 ++ src/assets/images/school.svg | 7 ++ src/assets/json/projects.json | 6 +- src/assets/ts/project.ts | 63 +++++++++++ src/components/project.vue | 180 +++++++++++++++++++++++++++----- src/components/techAndLinks.vue | 113 ++++++++++++++++++++ 8 files changed, 355 insertions(+), 29 deletions(-) create mode 100644 src/assets/images/check.svg create mode 100644 src/assets/images/github.svg create mode 100644 src/assets/images/perso.svg create mode 100644 src/assets/images/school.svg create mode 100644 src/components/techAndLinks.vue diff --git a/src/assets/images/check.svg b/src/assets/images/check.svg new file mode 100644 index 0000000..0c59490 --- /dev/null +++ b/src/assets/images/check.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/assets/images/github.svg b/src/assets/images/github.svg new file mode 100644 index 0000000..37fa923 --- /dev/null +++ b/src/assets/images/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/perso.svg b/src/assets/images/perso.svg new file mode 100644 index 0000000..c5ba08d --- /dev/null +++ b/src/assets/images/perso.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/assets/images/school.svg b/src/assets/images/school.svg new file mode 100644 index 0000000..d4159c0 --- /dev/null +++ b/src/assets/images/school.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/assets/json/projects.json b/src/assets/json/projects.json index 6896c5d..6980b2b 100644 --- a/src/assets/json/projects.json +++ b/src/assets/json/projects.json @@ -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", diff --git a/src/assets/ts/project.ts b/src/assets/ts/project.ts index 8306dd9..37ab0c2 100644 --- a/src/assets/ts/project.ts +++ b/src/assets/ts/project.ts @@ -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 '' } \ No newline at end of file diff --git a/src/components/project.vue b/src/components/project.vue index fe9859c..c5f86b7 100644 --- a/src/components/project.vue +++ b/src/components/project.vue @@ -1,25 +1,37 @@ @@ -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; + } } \ No newline at end of file diff --git a/src/components/techAndLinks.vue b/src/components/techAndLinks.vue new file mode 100644 index 0000000..c8aa3a5 --- /dev/null +++ b/src/components/techAndLinks.vue @@ -0,0 +1,113 @@ + + + + + + \ No newline at end of file