feat: Use NuxtJS for the full stack
This commit is contained in:
parent
c89540978a
commit
f14cc0ef71
GPG Key ID:
9C5DF8B5AF67BFB2
8
.dockerignore
Normal file
8
.dockerignore
Normal file
@ -0,0 +1,8 @@
|
||||
.idea/
|
||||
.git/
|
||||
.nuxt/
|
||||
.output/
|
||||
node_modules/
|
||||
|
||||
.gitignore
|
||||
README.md
|
||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
@ -1,13 +0,0 @@
|
||||
# You can override the included template(s) by including variable overrides
|
||||
# SAST customization: https://docs.gitlab.com/ee/user/application_security/sast/#customizing-the-sast-settings
|
||||
# Secret Detection customization: https://docs.gitlab.com/ee/user/application_security/secret_detection/#customizing-settings
|
||||
# Dependency Scanning customization: https://docs.gitlab.com/ee/user/application_security/dependency_scanning/#customizing-the-dependency-scanning-settings
|
||||
# Container Scanning customization: https://docs.gitlab.com/ee/user/application_security/container_scanning/#customizing-the-container-scanning-settings
|
||||
# Note that environment variables can be set in several places
|
||||
# See https://docs.gitlab.com/ee/ci/variables/#cicd-variable-precedence
|
||||
stages:
|
||||
- test
|
||||
sast:
|
||||
stage: test
|
||||
include:
|
||||
- template: Security/SAST.gitlab-ci.yml
|
||||
51
Dockerfile
51
Dockerfile
@ -1,22 +1,35 @@
|
||||
FROM alpine@sha256:0a4eaa0eecf5f8c050e5bba433f58c052be7587ee8af3e8b3910ef9ab5fbe9f5 AS base
|
||||
LABEL maintainer="Christian Goeschel Ndjomouo"
|
||||
RUN apk update
|
||||
RUN apk add nginx
|
||||
RUN adduser -D -g 'www' www
|
||||
RUN mkdir /www
|
||||
RUN chown -R www:www /var/lib/nginx
|
||||
RUN chown -R www:www /www
|
||||
FROM node:18.12.1-alpine AS build
|
||||
# Create Nuxt app directory
|
||||
WORKDIR /app
|
||||
|
||||
# Get all NodeJS project depencencies needed for production
|
||||
COPY ./package*.json ./
|
||||
RUN npm install
|
||||
|
||||
# Copy project source files
|
||||
COPY ./ /app
|
||||
|
||||
# Build the Nuxt application
|
||||
RUN npm run build
|
||||
|
||||
# Build the release image
|
||||
FROM gcr.io/distroless/nodejs:18 AS release
|
||||
LABEL org.opencontainers.image.authors="cgoesc2@wgu.edu"
|
||||
LABEL maintainer="Christian Goeschel Ndjomouo <cgoesc2@wgu.edu>"
|
||||
LABEL description="Portfolio NUXTJs App"
|
||||
|
||||
# Set environmental variables
|
||||
ENV HOST='0.0.0.0'
|
||||
ENV PORTS='3000'
|
||||
|
||||
# Copy built static source files to container
|
||||
COPY --from=build /app/.output /app/.output
|
||||
|
||||
# Expose and start the app
|
||||
EXPOSE 3000
|
||||
WORKDIR /app
|
||||
# This image has node.js as entrypoint so we can pass the index.mjs as argument directly
|
||||
CMD ["/app/.output/server/index.mjs"]
|
||||
|
||||
WORKDIR /etc/nginx/
|
||||
COPY nginx/nginx.conf nginx.conf
|
||||
RUN mkdir conf.d/
|
||||
WORKDIR /
|
||||
|
||||
FROM base AS portfolio-proxy
|
||||
RUN mkdir -p /etc/ssl/letsencrypt/
|
||||
EXPOSE 443/tcp
|
||||
CMD ["nginx","-g","daemon off;"]
|
||||
|
||||
FROM base AS portfolio-web
|
||||
EXPOSE 8080/tcp
|
||||
CMD ["nginx","-g","daemon off;"]
|
||||
|
||||
116
README.md
116
README.md
@ -1,93 +1,75 @@
|
||||
# Portfolio
|
||||
# Nuxt Minimal Starter
|
||||
|
||||
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
## Getting started
|
||||
Make sure to install dependencies:
|
||||
|
||||
To make it easy for you to get started with GitLab, here's a list of recommended next steps.
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
## Add your files
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
|
||||
- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
|
||||
|
||||
```
|
||||
cd existing_repo
|
||||
git remote add origin https://gitlab.com/christiangoeschel/portfolio.git
|
||||
git branch -M main
|
||||
git push -uf origin main
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Integrate with your tools
|
||||
## Development Server
|
||||
|
||||
- [ ] [Set up project integrations](https://gitlab.com/christiangoeschel/portfolio/-/settings/integrations)
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
## Collaborate with your team
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
|
||||
- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
|
||||
- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
|
||||
- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
|
||||
- [ ] [Set auto-merge](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
|
||||
# pnpm
|
||||
pnpm dev
|
||||
|
||||
## Test and Deploy
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
Use the built-in continuous integration in GitLab.
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
|
||||
- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing (SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
|
||||
- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
|
||||
- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
|
||||
- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
|
||||
## Production
|
||||
|
||||
***
|
||||
Build the application for production:
|
||||
|
||||
# Editing this README
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thanks to [makeareadme.com](https://www.makeareadme.com/) for this template.
|
||||
# pnpm
|
||||
pnpm build
|
||||
|
||||
## Suggestions for a good README
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
## Name
|
||||
Choose a self-explaining name for your project.
|
||||
Locally preview production build:
|
||||
|
||||
## Description
|
||||
Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
## Badges
|
||||
On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
|
||||
# pnpm
|
||||
pnpm preview
|
||||
|
||||
## Visuals
|
||||
Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
## Installation
|
||||
Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
## Usage
|
||||
Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
|
||||
|
||||
## Support
|
||||
Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
|
||||
|
||||
## Roadmap
|
||||
If you have ideas for releases in the future, it is a good idea to list them in the README.
|
||||
|
||||
## Contributing
|
||||
State if you are open to contributions and what your requirements are for accepting them.
|
||||
|
||||
For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
|
||||
|
||||
You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
|
||||
|
||||
## Authors and acknowledgment
|
||||
Show your appreciation to those who have contributed to the project.
|
||||
|
||||
## License
|
||||
For open source projects, say how it is licensed.
|
||||
|
||||
## Project status
|
||||
If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
|
||||
5
app/app.vue
Normal file
5
app/app.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
0
app/assets/loading.html
Normal file
0
app/assets/loading.html
Normal file
41
app/components/Footer.vue
Normal file
41
app/components/Footer.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="container lg:fixed mx-auto items-center pt-2 pb-2 bottom-0 right-0 left-0 space-mono-regular text-xs bg-white z-10">
|
||||
<footer class="mx-auto lg:flex justify-between">
|
||||
<div class="object-center text-center pb-5 lg:text-left lg:pb-0">
|
||||
<p class="text-xs">Portfolio website for Christian Goeschel Ndjomouo - <a href="https://gitea.christiangoeschel.com/christiangoeschel/portfolio/" target="_blank">(v0.1.1)</a><br />
|
||||
({{ current_year }}) This page is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en" target="_blank">CC BY-SA 4.0 ↗</a></p>
|
||||
</div>
|
||||
|
||||
<div class="text-center pb-5 lg:text-left lg:pb-0">
|
||||
<nav>
|
||||
<ul class="flex justify-center space-x-5 lg:justify-end">
|
||||
<li class="nav-item">
|
||||
<a href="https://gitea.christiangoeschel.com/christiangoeschel/" target="_blank">Gitea ↗</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.linkedin.com/in/christian-gn/" target="_blank">LinkedIn ↗</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://discordapp.com/users/userc23o" target="_blank">Discord ↗</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="mailto:cgoesc2@wgu.edu">Email ↗</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="text-center pb-5 lg:text-right lg:pb-0">
|
||||
<p>This page was loaded <NuxtTime :datetime="Date.now() - 5 * 60 * 1000" relative/></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {useTemplateRef} from "vue";
|
||||
const year = new Date().getFullYear()
|
||||
const current_year = ref(null)
|
||||
|
||||
onMounted(async () => {
|
||||
current_year.value = year;
|
||||
})
|
||||
</script>
|
||||
114
app/components/Header.vue
Normal file
114
app/components/Header.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="container flex fixed items-center mx-auto pt-2 pb-2 top-0 right-0 left-0 justify-between bg-white z-10">
|
||||
<header class="w-full flex items-center space-mono-regular justify-between">
|
||||
<div @click="mobileMenuActive = false">
|
||||
<NuxtLink to="/"><img class="h-10" src="/icons/cgn-icon-blk.svg" alt="Black CGN SVG icon"/></NuxtLink>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<ul id="desktop-nav-list" class="hidden lg:flex space-x-40 text-xs">
|
||||
<li class="nav-item">
|
||||
<NuxtLink ref="home-link" to="/">{{ homeLink }}</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NuxtLink ref="about-link" to="/about">{{ aboutLink }}</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NuxtLink ref="experience-link" to="/experience">{{ experienceLink }}</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NuxtLink ref="contact-link" to="/contact">{{ contactLink }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul id="mobile-nav-button" class="flex lg:hidden space-x-40 text-xs">
|
||||
<a @click="mobileMenuActive = !mobileMenuActive" class="hover:cursor-pointer">MENU</a>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div :class="{active: mobileMenuActive}" class="mobile-menu items-center space-mono-regular">
|
||||
<div class="menu inline-flex mx-auto h-auto w-auto">
|
||||
<nav class="text-center">
|
||||
<ul class="text-2xl">
|
||||
<li>
|
||||
<NuxtLink @click="mobileMenuActive = false" ref="home-link" to="/">HOME</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink @click="mobileMenuActive = false" ref="about-link" to="/about">ABOUT ME</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink @click="mobileMenuActive = false" ref="experience-link" to="/experience">EXPERIENCE</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink @click="mobileMenuActive = false" ref="contact-link" to="/contact">CONTACT</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {useTemplateRef} from "vue";
|
||||
|
||||
const mobileMenuActive = ref(false);
|
||||
const route = useRoute();
|
||||
const homeLink = ref("HOME")
|
||||
const aboutLink = ref("ABOUT ME")
|
||||
const experienceLink = ref("EXPERIENCE")
|
||||
const contactLink = ref("CONTACT")
|
||||
|
||||
function clearLinkHighlight(){
|
||||
homeLink.value = "HOME";
|
||||
aboutLink.value = "ABOUT ME";
|
||||
experienceLink.value = "EXPERIENCE";
|
||||
contactLink.value = "CONTACT";
|
||||
}
|
||||
|
||||
function highlightCurrentLink(route: String) {
|
||||
switch (route.name) {
|
||||
case "index":
|
||||
homeLink.value = "> HOME <";
|
||||
break;
|
||||
case "about":
|
||||
aboutLink.value = "> ABOUT ME <";
|
||||
break;
|
||||
case "experience":
|
||||
experienceLink.value = "> EXPERIENCE <";
|
||||
break;
|
||||
case "contact":
|
||||
contactLink.value = "> CONTACT <";
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
clearLinkHighlight();
|
||||
highlightCurrentLink(route);
|
||||
});
|
||||
|
||||
watch(() => route.path, (to, from) => {
|
||||
clearLinkHighlight();
|
||||
highlightCurrentLink(route);
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 9;
|
||||
transition: height .5s ease, background-color .5s ease;
|
||||
}
|
||||
|
||||
.active {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
6
app/components/MainContentBody.vue
Normal file
6
app/components/MainContentBody.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div class="mt-20">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
28
app/components/NextPagePointer.vue
Normal file
28
app/components/NextPagePointer.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="inline-block w-auto">
|
||||
<div id="find-out-link">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
#find-out-link {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
margin: 20px 0px;
|
||||
a:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 0;
|
||||
background: transparent;
|
||||
transition: width .5s ease, background-color .5s ease;
|
||||
}
|
||||
|
||||
a:hover:after {
|
||||
width: 100%;
|
||||
background: #000000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
11
app/components/PageRouteHeader.vue
Normal file
11
app/components/PageRouteHeader.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="flex justify-between item-center inter-300 italic text-3xl lg:text-5xl text-gray-300">
|
||||
<h1>
|
||||
<slot></slot>
|
||||
</h1>
|
||||
<h1>{{route.path}}</h1>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
</script>
|
||||
106
app/components/ProjectList.vue
Normal file
106
app/components/ProjectList.vue
Normal file
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="inter-300">
|
||||
<span @click="toggleAll" class="space-mono-regular text-lg text-gray-500">> Projects <</span>
|
||||
<br><br>
|
||||
|
||||
<div v-for="(obj, index) in CollapsibleObjects" class="collapsible-object-wrapper">
|
||||
<div @click="CollapsibleObjects[index].collapsed = !CollapsibleObjects[index].collapsed" class="collapsible-list-label">
|
||||
<span class="text-xl lg:text-3xl">{{ obj.label }}</span>
|
||||
<span class="collapsible-list-button">{{ expandIcon(index) }}</span>
|
||||
</div>
|
||||
<div v-if="!CollapsibleObjects[index].collapsed" class="collapsible-list-wrapper">
|
||||
<p class="mb-2" v-html="obj.project.description"></p>
|
||||
<a v-bind:href="obj.project.url" target="_blank" class="text-xs lg:text-base hover:underline">{{ obj.project.url }}↗</a>
|
||||
<ul class="collapsible-list mt-2">
|
||||
<li v-for="stack in obj.project.techStack" class="text-sm lg:text-xl">
|
||||
{{ stack.item }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
type Project = {
|
||||
url: string;
|
||||
description: string;
|
||||
techStack: Array<Object>;
|
||||
}
|
||||
|
||||
type CollapsibleObject = {
|
||||
label: string;
|
||||
collapsed: boolean;
|
||||
project: Project;
|
||||
};
|
||||
|
||||
const CollapsibleObjects = ref<Array<CollapsibleObject>>([
|
||||
{ label: 'Genesis', collapsed: true,
|
||||
project: { url: 'https://gitea.christiangoeschel.com/christiangoeschel/genesis',
|
||||
description: 'A simple command line tool to control the built-in keyboard backlight via the org.freedesktop.UPower D-Bus service.',
|
||||
techStack: [{item: 'Golang'}, {item: 'D-Bus'}]},
|
||||
},
|
||||
{ label: 'Asahi Linux Debian Installer', collapsed: true,
|
||||
project: { url: 'https://gitea.christiangoeschel.com/christiangoeschel/asahi-debian',
|
||||
description: 'In this project I bootstrapped, pre-partitioned and automated the system configuration of a Debian installation image,' +
|
||||
' which served as base image in the Asahi Linux installer for Apple Silicon devices.<br><br>' +
|
||||
'During the process I learned how to mount files as loop devices, partition a disk, use rsync, create system critical configuration files in /etc, ' +
|
||||
'install custom firmware, create a post-installation script and use the mkosi tool to bootstrap installer images.',
|
||||
techStack: [{item: 'Bash'}, {item: 'mkosi'}]},
|
||||
},
|
||||
{ label: 'SHX', collapsed: true,
|
||||
project: { url: 'https://gitea.christiangoeschel.com/christiangoeschel/shx',
|
||||
description: 'A simple command line tool that searches for the shared file extents of a given file on a CoW enabled filesystem.',
|
||||
techStack: [{item: 'Golang'}]},
|
||||
},
|
||||
{ label: 'MyDocs', collapsed: true,
|
||||
project: { url: 'https://docs.christiangoeschel.com',
|
||||
description: 'MyDocs is my personal knowledge base website that is built and served using Mkdocs Materials in Docker,' +
|
||||
' and hosted in my Homelab server exposed to the public via a public reverse proxy instance.',
|
||||
techStack: [{item: 'Docker'}, {item: 'Yaml'}, {item: 'Markdown'}, {item: 'JavaScript'}]},
|
||||
},
|
||||
{ label: 'Portfolio', collapsed: true,
|
||||
project: { url: 'https://www.christiangoeschel.com',
|
||||
description: 'My personal portfolio website hosted on my Homelab server using Docker',
|
||||
techStack: [{item: 'HTML'}, {item: 'CSS'}, {item: 'TailwindCSS'}, {item: 'JavaScript/Typescript'}, {item: 'NUXTJs (Vue)'}]},
|
||||
},
|
||||
]);
|
||||
|
||||
function expandIcon(i: number){
|
||||
return CollapsibleObjects.value[i].collapsed ? '+' : '-'
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
div {
|
||||
transition: all .2s ease-out;
|
||||
}
|
||||
|
||||
.collapsible-object-wrapper {
|
||||
border-bottom: black solid 1px;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
}
|
||||
|
||||
.collapsible-list-label {
|
||||
@apply flex justify-between lg:p-2;
|
||||
|
||||
&:hover {
|
||||
background-color: #000000;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible-list-wrapper {
|
||||
@apply inline p-2;
|
||||
}
|
||||
|
||||
.collapsible-list {
|
||||
@apply lg:flex lg:space-x-5;
|
||||
}
|
||||
|
||||
.collapsible-list-button {
|
||||
@apply text-xl lg:text-3xl hover:cursor-pointer;
|
||||
}
|
||||
</style>
|
||||
73
app/components/TechStackList.vue
Normal file
73
app/components/TechStackList.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="inter-300">
|
||||
<span @click="toggleAll" class="space-mono-regular text-lg text-gray-500">> Technologies <</span>
|
||||
<br><br>
|
||||
|
||||
<div v-for="(obj, index) in CollapsibleObjects" class="collapse-list-wrapper">
|
||||
<div @click="CollapsibleObjects[index].collapsed = !CollapsibleObjects[index].collapsed" class="collapse-list-label">
|
||||
<span class="text-xl lg:text-3xl">{{ obj.label }}</span>
|
||||
<span class="collapse-list-button">{{ expandIcon(index) }}</span>
|
||||
</div>
|
||||
<ul class="collapsible-list" v-if="!CollapsibleObjects[index].collapsed">
|
||||
<li class="text-xl lg:text-xl" v-for="list in obj.list">
|
||||
{{ list.item }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
type CollapsibleObject = {
|
||||
label: string;
|
||||
collapsed: boolean;
|
||||
list: Array<Object>;
|
||||
};
|
||||
|
||||
const CollapsibleObjects = ref<Array<CollapsibleObject>>([
|
||||
{label: 'Operating Systems', collapsed: true, list: [{ item: 'GNU/Linux' }, { item: 'macOS' }, { item: 'FreeBSD' }, { item: 'Windows' }]},
|
||||
{label: 'Programming/Scripting', collapsed: true, list: [{ item: 'Golang' }, { item: 'Bash' }, { item: 'Python' }, { item: 'C' },
|
||||
{ item: 'Javascript/Typescript' }, { item: 'Java' }, { item: 'PowerShell' }]},
|
||||
{label: 'Frameworks', collapsed: true, list: [{ item: 'Bubbletea (Golang)' }, { item: 'NuxtJS' }]},
|
||||
{label: 'Monitoring/Observability', collapsed: true, list: [{ item: 'Node Exporter (Prometheus)' }, { item: 'Grafana' }, { item: 'OpsGenie' }, { item: 'auditd (GNU/Linux)' }]},
|
||||
{label: 'Database Management', collapsed: true, list: [{ item: 'MySQL' }, { item: 'PostgreSQL' }, { item: 'SQLite' } ]},
|
||||
{label: 'Webservers', collapsed: true, list: [{ item: 'Nginx' }, { item: 'Apache 2.0' }]},
|
||||
{label: 'Virtualization/Containerization', collapsed: true, list: [{ item: 'Docker' }, { item: 'Proxmox' }, {item: 'Kubernetes'}, {item: 'VMWare Fusion'}]},
|
||||
{label: 'Configuration Management Systems', collapsed: true, list: [{ item: 'Puppet' }, { item: 'Ansible' }]},
|
||||
{label: 'Networking', collapsed: true, list: [{ item: 'Cisco IOS' }, { item: 'Tailscale' }, { item: 'Wireguard' }]},
|
||||
]);
|
||||
|
||||
function expandIcon(i: number){
|
||||
return CollapsibleObjects.value[i].collapsed ? '+' : '-'
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
div {
|
||||
transition: all .2s ease-out;
|
||||
}
|
||||
|
||||
.collapse-list-wrapper {
|
||||
border-bottom: black solid 1px;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
}
|
||||
|
||||
.collapse-list-label {
|
||||
@apply flex justify-between lg:p-2;
|
||||
|
||||
&:hover {
|
||||
background-color: #000000;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible-list {
|
||||
@apply inline-block h-auto lg:flex lg:space-x-5 p-2;
|
||||
}
|
||||
|
||||
.collapse-list-button {
|
||||
@apply text-xl lg:text-3xl hover:cursor-pointer;
|
||||
}
|
||||
</style>
|
||||
133
app/layouts/default.vue
Normal file
133
app/layouts/default.vue
Normal file
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="container h-full lg:h-auto mx-auto">
|
||||
<MainContentBody>
|
||||
<slot></slot>
|
||||
</MainContentBody>
|
||||
</div>
|
||||
<Header />
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
useHead({
|
||||
titleTemplate: '%s - Christian Goeschel Ndjomouo\'s portfolio',
|
||||
|
||||
link: [
|
||||
{
|
||||
rel: 'preconnect',
|
||||
href: 'https://fonts.googleapis.com',
|
||||
},
|
||||
{
|
||||
rel: 'preconnect',
|
||||
href: 'https://fonts.gstatic.com',
|
||||
crossOrigin: '',
|
||||
},
|
||||
{
|
||||
rel: 'stylesheet',
|
||||
href: 'https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'
|
||||
},
|
||||
{
|
||||
rel: 'stylesheet',
|
||||
href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'
|
||||
},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.space-mono-regular {
|
||||
font-family: "Space Mono", serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.space-mono-bold {
|
||||
font-family: "Space Mono", serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.space-mono-regular-italic {
|
||||
font-family: "Space Mono", serif;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.space-mono-bold-italic {
|
||||
font-family: "Space Mono", serif;
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.inter-100 {
|
||||
font-family: "Inter", serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.inter-150 {
|
||||
font-family: "Inter", serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 150;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.inter-200 {
|
||||
font-family: "Inter", serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.inter-300 {
|
||||
font-family: "Inter", serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.inter-400 {
|
||||
font-family: "Inter", serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.inter-500 {
|
||||
font-family: "Inter", serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply overflow-y-scroll;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.container {
|
||||
@apply max-w-full px-5 self-center;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
margin: 0px;
|
||||
|
||||
a:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 0;
|
||||
background: transparent;
|
||||
transition: width .5s ease, background-color .5s ease;
|
||||
}
|
||||
|
||||
a:hover:after {
|
||||
width: 100%;
|
||||
background: #000000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
app/pages/about.vue
Normal file
59
app/pages/about.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<PageRouteHeader>
|
||||
About Me
|
||||
</PageRouteHeader>
|
||||
<MainContentBody>
|
||||
<div class="max-w-4xl mt-5 mx-auto pb-40">
|
||||
<span class="space-mono-regular text-lg text-gray-500">> Me <</span>
|
||||
<br>
|
||||
<p class="inter-300 text-3xl lg:text-4xl">My name is Christian Goeschel Ndjomouo, and I am a {{age}}-year-old <i>Systems Engineer</i> living in Montreal, Canada and originally from Germany.</p>
|
||||
<br><br>
|
||||
<span class="space-mono-regular text-lg text-gray-500">> Occupation <</span>
|
||||
<br>
|
||||
<p class="inter-300 text-3xl lg:text-4xl">Currently, I am enrolled at Western Governors University, pursuing my <i>B.Sc.in Software Engineering</i>, and have been working as an <i>IT Administrator</i> for Europe's leading cloud service provider, OVHcloud for almost 3 years.</p>
|
||||
<br><br>
|
||||
<span class="space-mono-regular text-lg text-gray-500">> Motive <</span>
|
||||
<br>
|
||||
<p class="inter-300 text-3xl lg:text-4xl">I am considerably <em class="blue">curious</em> and <em class="blue">passionate</em> about technology and eager to learn more whenever possible to avoid complacency pitfalls and <em class="red">ensure continuous improvements</em>.</p>
|
||||
<br><br>
|
||||
<span class="space-mono-regular text-lg text-gray-500">> Strength <</span>
|
||||
<br>
|
||||
<p class="inter-300 text-3xl lg:text-4xl">In addition, I am <em class="blue">critical</em> and <em class="blue">resilient</em>, which is significantly helpful when I <em class="red">solve complex problems</em> for high-priority incidents or <em class="red">debug critical business tools</em>.</p>
|
||||
<br><br>
|
||||
<span class="space-mono-regular text-lg text-gray-500">> Value <</span>
|
||||
<br>
|
||||
<p class="inter-300 text-3xl lg:text-4xl">Lastly, I see myself as a true <em class="blue">team player</em> who enjoys sharing knowledge with peers because I firmly believe that <em class="red">progress can only be achieved in collaboration</em>.</p>
|
||||
|
||||
<NextPagePointer>
|
||||
<NuxtLink class="inter-300 text-3xl lg:text-4xl" to="/experience">Find out about my skills ↗</NuxtLink>
|
||||
</NextPagePointer>
|
||||
</div>
|
||||
</MainContentBody>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {useTemplateRef} from "vue";
|
||||
const myBirthday = new Date(1999, 10, 10);
|
||||
const myBirthdayEpochSec = Math.floor(myBirthday.getTime() / 1000);
|
||||
const currentDateEpochSec = Math.floor(Date.now() / 1000);
|
||||
const ageEpochSec = currentDateEpochSec - myBirthdayEpochSec;
|
||||
const age = ref(null)
|
||||
|
||||
onMounted(async () => {
|
||||
age.value = parseInt(ageEpochSec / 31536000);
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
i {
|
||||
font-family: "Space Mono";
|
||||
@apply tracking-tighter;
|
||||
}
|
||||
|
||||
em.blue {
|
||||
@apply text-blue-400;
|
||||
}
|
||||
|
||||
em.red {
|
||||
@apply text-red-400;
|
||||
}
|
||||
</style>
|
||||
36
app/pages/contact.vue
Normal file
36
app/pages/contact.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<PageRouteHeader>
|
||||
Contact
|
||||
</PageRouteHeader>
|
||||
<MainContentBody>
|
||||
<div class="display-inline lg:flex lg:space-x-10 pb-40 justify-center">
|
||||
<div class="space-mono-regular text-base lg:text-lg">
|
||||
<span class="inter-300">Email</span><br>
|
||||
<a href="mailto:cgoesc2@wgu.edu">cgoesc2@wgu.edu</a>
|
||||
<br><br>
|
||||
<span class="inter-300">Gitea</span><br>
|
||||
<a href="https://gitea.christiangoeschel.com/christiangoeschel/" target="_blank">gitea.christiangoeschel.com/christiangoeschel/</a>
|
||||
<br><br>
|
||||
<span class="inter-300">LinkedIn</span><br>
|
||||
<a href="https://www.linkedin.com/in/christian-gn/" target="_blank">linkedin.com/in/christian-gn/</a>
|
||||
<br><br>
|
||||
<span class="inter-300">Discord</span><br>
|
||||
<a href="https://discord.com/users/userc23o" target="_blank">@userc23o</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</MainContentBody>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<style scoped>
|
||||
input, select {
|
||||
@apply outline-none mx-2 bg-transparent;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-width: 350px;
|
||||
height: 150px;
|
||||
@apply outline-none bg-transparent;
|
||||
}
|
||||
</style>
|
||||
18
app/pages/experience.vue
Normal file
18
app/pages/experience.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<PageRouteHeader>
|
||||
Experience
|
||||
</PageRouteHeader>
|
||||
|
||||
<MainContentBody>
|
||||
<div class="max-w-4xl mt-5 mx-auto pb-40">
|
||||
<p class="inter-300 text-xs lg:text-lg">Below you will find a non-exhaustive list of different technologies that I have worked and am familiar with.
|
||||
<br>
|
||||
You will also find some of my most recent notable projects with a link to the respective git repository or website.</p>
|
||||
<TechStackList class="mt-10"></TechStackList>
|
||||
<ProjectList class="mt-10 mb-10"></ProjectList>
|
||||
<NextPagePointer>
|
||||
<NuxtLink class="inter-300 text-3xl lg:text-4xl" to="/contact">Lets get in touch↗</NuxtLink>
|
||||
</NextPagePointer>
|
||||
</div>
|
||||
</MainContentBody>
|
||||
</template>
|
||||
54
app/pages/index.vue
Normal file
54
app/pages/index.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<PageRouteHeader>
|
||||
Home
|
||||
</PageRouteHeader>
|
||||
<MainContentBody>
|
||||
<div class="max-w-2xl mx-auto pb-40 inter-300 text-3xl lg:text-5xl">
|
||||
<h3>Information technology caters perfectly to my <em>curiosity</em>
|
||||
and gives me the <em>freedom</em> and <em>resources</em> to <i>create</i>, <i>explore</i>, <i>improve</i> and <i>innovate</i> for me and others.</h3>
|
||||
<br>
|
||||
<NextPagePointer>
|
||||
<NuxtLink to="/about">Find out who I am ↗</NuxtLink>
|
||||
</NextPagePointer>
|
||||
|
||||
</div>
|
||||
</MainContentBody>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
useSeoMeta({
|
||||
title: 'Homepage',
|
||||
description: 'This is Christian Goeschel Ndjomouo\'s portfolio website',
|
||||
ogTitle: 'Portfolio - Christian Goeschel Ndjomouo',
|
||||
ogDescription: 'Visit Christian Goeschel Ndjomouo\'s portfolio website',
|
||||
ogImage: '[og:image]',
|
||||
ogUrl: 'christiangoeschel.com',
|
||||
twitterTitle: 'Portfolio - Christian Goeschel Ndjomouo',
|
||||
twitterDescription: 'Visit Christian Goeschel Ndjomouo\'s portfolio website',
|
||||
twitterImage: '[twitter:image]',
|
||||
twitterCard: 'summary'
|
||||
})
|
||||
|
||||
useHead({
|
||||
htmlAttrs: {
|
||||
lang: 'en'
|
||||
},
|
||||
link: [
|
||||
{
|
||||
rel: 'icon',
|
||||
type: 'image/x-icon',
|
||||
href: '/favicon.ico',
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
em {
|
||||
@apply text-blue-400
|
||||
}
|
||||
|
||||
i {
|
||||
@apply text-red-400
|
||||
}
|
||||
</style>
|
||||
@ -1,34 +0,0 @@
|
||||
# This is an example of the kind of things you can do in a configuration file.
|
||||
# All flags used by the client can be configured here. Run Certbot with
|
||||
# "--help" to learn more about the available options.
|
||||
#
|
||||
# Note that these options apply automatically to all use of Certbot for
|
||||
# obtaining or renewing certificates, so options specific to a single
|
||||
# certificate on a system with several certificates should not be placed
|
||||
# here.
|
||||
|
||||
# Use ECC for the private key
|
||||
key-type = ecdsa
|
||||
elliptic-curve = secp384r1
|
||||
|
||||
# Use a 4096 bit RSA key instead of 2048
|
||||
rsa-key-size = 4096
|
||||
|
||||
# Uncomment and update to register with the specified e-mail address
|
||||
email = cndjomouo@icloud.com
|
||||
|
||||
# Uncomment to use the standalone authenticator on port 443
|
||||
authenticator = standalone
|
||||
|
||||
# Uncomment to use the webroot authenticator. Replace webroot-path with the
|
||||
# path to the public_html / webroot folder being served by your web server.
|
||||
# authenticator = webroot
|
||||
# webroot-path = /usr/share/nginx/html
|
||||
|
||||
# Uncomment to automatically agree to the terms of service of the ACME server
|
||||
agree-tos = true
|
||||
|
||||
# An example of using an alternate ACME server that uses EAB credentials
|
||||
# server = https://acme.sectigo.com/v2/InCommonRSAOV
|
||||
# eab-kid = somestringofstuffwithoutquotes
|
||||
# eab-hmac-key = yaddayaddahexhexnotquoted
|
||||
@ -1,31 +1,12 @@
|
||||
services:
|
||||
proxy:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
target: portfolio-proxy
|
||||
container_name: portfolio-proxy
|
||||
networks:
|
||||
- portfolio-net
|
||||
ports:
|
||||
- "443:443/tcp"
|
||||
volumes:
|
||||
- /etc/letsencrypt/:/etc/ssl/letsencrypt/:ro
|
||||
- ./nginx/default-nginx-proxy.conf:/etc/nginx/conf.d/default.conf:ro
|
||||
restart: unless-stopped
|
||||
|
||||
web:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
target: portfolio-web
|
||||
container_name: portfolio-web
|
||||
networks:
|
||||
- portfolio-net
|
||||
volumes:
|
||||
- ./nginx/default-nginx-web.conf:/etc/nginx/conf.d/default.conf:ro
|
||||
- ./src:/www
|
||||
restart: unless-stopped
|
||||
|
||||
networks:
|
||||
portfolio-net:
|
||||
portfolio:
|
||||
ports:
|
||||
- "3000:3000"
|
||||
build:
|
||||
dockerfile: Dockerfile
|
||||
working_dir: /app
|
||||
command: /app/.output/server/index.mjs
|
||||
stdin_open: true
|
||||
tty: true
|
||||
networks:
|
||||
- default
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name localhost;
|
||||
|
||||
location / {
|
||||
proxy_buffering on;
|
||||
proxy_buffers 16 4k;
|
||||
proxy_buffer_size 4k;
|
||||
proxy_busy_buffers_size 8k;
|
||||
proxy_pass http://portfolio-web:8080;
|
||||
}
|
||||
|
||||
error_page 500 502 503 504 /50x.html;
|
||||
location = /50x.html {
|
||||
root /usr/share/nginx/html;
|
||||
}
|
||||
}
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
server_name christiangoeschel.com;
|
||||
ssl_certificate /etc/ssl/letsencrypt/live/christiangoeschel.com/fullchain.pem;
|
||||
ssl_certificate_key /etc/ssl/letsencrypt/live/christiangoeschel.com/privkey.pem;
|
||||
|
||||
location / {
|
||||
proxy_pass http://portfolio-web:8080;
|
||||
proxy_buffering on;
|
||||
proxy_buffers 16 4k;
|
||||
proxy_buffer_size 4k;
|
||||
proxy_busy_buffers_size 8k;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
}
|
||||
}
|
||||
|
||||
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
|
||||
#
|
||||
#location ~ \.php$ {
|
||||
# proxy_pass http://127.0.0.1;
|
||||
#}
|
||||
|
||||
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
|
||||
#
|
||||
#location ~ \.php$ {
|
||||
# root html;
|
||||
# fastcgi_pass 127.0.0.1:9000;
|
||||
# fastcgi_index index.php;
|
||||
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
|
||||
# include fastcgi_params;
|
||||
#}
|
||||
|
||||
# deny access to .htaccess files, if Apache's document root
|
||||
# concurs with nginx's one
|
||||
#
|
||||
#location ~ /\.ht {
|
||||
# deny all;
|
||||
#}
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
server {
|
||||
listen 8080;
|
||||
listen [::]:8080;
|
||||
server_name localhost;
|
||||
|
||||
#access_log /var/log/nginx/host.access.log main;
|
||||
|
||||
location / {
|
||||
root /www;
|
||||
index index.html index.htm;
|
||||
}
|
||||
|
||||
#error_page 404 /404.html;
|
||||
|
||||
# redirect server error pages to the static page /50x.html
|
||||
#
|
||||
error_page 500 502 503 504 /50x.html;
|
||||
location = /50x.html {
|
||||
root /usr/share/nginx/html;
|
||||
}
|
||||
|
||||
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
|
||||
#
|
||||
#location ~ \.php$ {
|
||||
# proxy_pass http://127.0.0.1;
|
||||
#}
|
||||
|
||||
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
|
||||
#
|
||||
#location ~ \.php$ {
|
||||
# root html;
|
||||
# fastcgi_pass 127.0.0.1:9000;
|
||||
# fastcgi_index index.php;
|
||||
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
|
||||
# include fastcgi_params;
|
||||
#}
|
||||
|
||||
# deny access to .htaccess files, if Apache's document root
|
||||
# concurs with nginx's one
|
||||
#
|
||||
#location ~ /\.ht {
|
||||
# deny all;
|
||||
#}
|
||||
}
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name localhost;
|
||||
|
||||
#access_log /var/log/nginx/host.access.log main;
|
||||
|
||||
location / {
|
||||
root /usr/share/nginx/html;
|
||||
index index.html index.htm;
|
||||
}
|
||||
|
||||
#error_page 404 /404.html;
|
||||
|
||||
# redirect server error pages to the static page /50x.html
|
||||
#
|
||||
error_page 500 502 503 504 /50x.html;
|
||||
location = /50x.html {
|
||||
root /usr/share/nginx/html;
|
||||
}
|
||||
|
||||
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
|
||||
#
|
||||
#location ~ \.php$ {
|
||||
# proxy_pass http://127.0.0.1;
|
||||
#}
|
||||
|
||||
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
|
||||
#
|
||||
#location ~ \.php$ {
|
||||
# root html;
|
||||
# fastcgi_pass 127.0.0.1:9000;
|
||||
# fastcgi_index index.php;
|
||||
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
|
||||
# include fastcgi_params;
|
||||
#}
|
||||
|
||||
# deny access to .htaccess files, if Apache's document root
|
||||
# concurs with nginx's one
|
||||
#
|
||||
#location ~ /\.ht {
|
||||
# deny all;
|
||||
#}
|
||||
}
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
|
||||
user www;
|
||||
worker_processes auto;
|
||||
|
||||
error_log /var/log/nginx/error.log notice;
|
||||
pid /var/run/nginx.pid;
|
||||
|
||||
|
||||
events {
|
||||
worker_connections 1024;
|
||||
}
|
||||
|
||||
|
||||
http {
|
||||
include /etc/nginx/mime.types;
|
||||
default_type application/octet-stream;
|
||||
|
||||
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
|
||||
'$status $body_bytes_sent "$http_referer" '
|
||||
'"$http_user_agent" "$http_x_forwarded_for"';
|
||||
|
||||
access_log /var/log/nginx/access.log main;
|
||||
|
||||
sendfile on;
|
||||
#tcp_nopush on;
|
||||
|
||||
keepalive_timeout 65;
|
||||
|
||||
#gzip on;
|
||||
|
||||
include /etc/nginx/conf.d/*.conf;
|
||||
}
|
||||
19
nuxt.config.ts
Normal file
19
nuxt.config.ts
Normal file
@ -0,0 +1,19 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
import {resolve} from "path";
|
||||
|
||||
export default defineNuxtConfig({
|
||||
future: {
|
||||
compatibilityVersion: 4,
|
||||
},
|
||||
alias: {
|
||||
'@': resolve(__dirname, "/"),
|
||||
},
|
||||
loadingIndicator: {
|
||||
name: '~/assets/loading.html',
|
||||
background: 'white'
|
||||
},
|
||||
modules: ['@nuxtjs/tailwindcss', "nuxt-time"],
|
||||
compatibilityDate: '2024-11-01',
|
||||
devtools: { enabled: false },
|
||||
spaLoadingTemplate: false,
|
||||
})
|
||||
11033
package-lock.json
generated
Normal file
11033
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
22
package.json
Normal file
22
package.json
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "nuxt-app",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"nuxt": "^3.6.0",
|
||||
"nuxt-time": "^0.1.3",
|
||||
"vue": "latest",
|
||||
"vue-router": "latest",
|
||||
"vue-time": "^0.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxtjs/tailwindcss": "^6.13.1"
|
||||
}
|
||||
}
|
||||
0
src/icons/favicon.ico → public/favicon.ico
Executable file → Normal file
0
src/icons/favicon.ico → public/favicon.ico
Executable file → Normal file
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
90
public/icons/cgn-icon-blk.svg
Normal file
90
public/icons/cgn-icon-blk.svg
Normal file
@ -0,0 +1,90 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
|
||||
<svg
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 1920 1920"
|
||||
style="enable-background:new 0 0 1920 1920;"
|
||||
xml:space="preserve"
|
||||
sodipodi:docname="cgn-icon-blk.svg"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs9" /><sodipodi:namedview
|
||||
id="namedview9"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="0.099344202"
|
||||
inkscape:cx="447.93756"
|
||||
inkscape:cy="1263.2846"
|
||||
inkscape:window-width="1151"
|
||||
inkscape:window-height="902"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="g8" />
|
||||
<style
|
||||
type="text/css"
|
||||
id="style1">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g
|
||||
id="g9">
|
||||
<g
|
||||
id="g8">
|
||||
<g
|
||||
id="g2"
|
||||
style="fill:#000000">
|
||||
<g
|
||||
id="g1"
|
||||
style="fill:#000000">
|
||||
<path
|
||||
class="st0"
|
||||
d="M1329.69,654.38h117.96c-46.03,220.09-225.84,368.25-466.07,368.25c-281.94,0-509.22-218.65-509.22-507.78 S699.64,8.5,981.58,8.5c240.23,0,420.04,146.72,466.07,366.81h-117.96c-40.28-159.67-169.74-260.36-348.11-260.36 c-221.52,0-394.14,171.18-394.14,399.9s172.62,401.33,394.14,401.33C1159.95,916.18,1289.41,812.61,1329.69,654.38z"
|
||||
id="path1"
|
||||
style="fill:#000000" />
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="g7"
|
||||
style="fill:#000000">
|
||||
<g
|
||||
id="g4"
|
||||
style="fill:#000000">
|
||||
<g
|
||||
id="g3"
|
||||
style="fill:#000000">
|
||||
<path
|
||||
class="st0"
|
||||
d="M1019.91,1377.83v516.41h-92.06l-8.63-199.95c-70.48,130.9-195.63,217.21-374,217.21 c-289.14,0-506.35-224.4-506.35-499.15c0-296.33,228.72-513.54,513.54-513.54c212.9,0,409.97,122.27,464.63,340.92H894.76 c-48.91-158.23-197.07-234.47-340.92-234.47c-225.84,0-399.9,169.74-399.9,407.09c0,212.9,162.55,392.7,391.27,392.7 c199.95,0,326.53-139.53,353.87-322.22H535.14v-105.01H1019.91z"
|
||||
id="path2"
|
||||
style="fill:#000000" />
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="g6"
|
||||
style="fill:#000000">
|
||||
<g
|
||||
id="g5"
|
||||
style="fill:#000000">
|
||||
<path
|
||||
class="st0"
|
||||
d="M1881.14,916.07v978.16h-94.94l-625.74-771.02v771.02h-113.64V916.07h92.06l628.61,781.09V916.07H1881.14z "
|
||||
id="path4"
|
||||
style="fill:#000000" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
80
public/icons/cgn-icon-wht.svg
Normal file
80
public/icons/cgn-icon-wht.svg
Normal file
@ -0,0 +1,80 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
|
||||
<svg
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 1920 1920"
|
||||
style="enable-background:new 0 0 1920 1920;"
|
||||
xml:space="preserve"
|
||||
sodipodi:docname="cgn-icon-wht.svg"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs9" /><sodipodi:namedview
|
||||
id="namedview9"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="0.099344202"
|
||||
inkscape:cx="447.93756"
|
||||
inkscape:cy="1263.2846"
|
||||
inkscape:window-width="1151"
|
||||
inkscape:window-height="902"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="g8" />
|
||||
<style
|
||||
type="text/css"
|
||||
id="style1">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g
|
||||
id="g9">
|
||||
<g
|
||||
id="g8">
|
||||
<g
|
||||
id="g2">
|
||||
<g
|
||||
id="g1">
|
||||
<path
|
||||
class="st0"
|
||||
d="M1329.69,654.38h117.96c-46.03,220.09-225.84,368.25-466.07,368.25c-281.94,0-509.22-218.65-509.22-507.78 S699.64,8.5,981.58,8.5c240.23,0,420.04,146.72,466.07,366.81h-117.96c-40.28-159.67-169.74-260.36-348.11-260.36 c-221.52,0-394.14,171.18-394.14,399.9s172.62,401.33,394.14,401.33C1159.95,916.18,1289.41,812.61,1329.69,654.38z"
|
||||
id="path1" />
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="g7">
|
||||
<g
|
||||
id="g4">
|
||||
<g
|
||||
id="g3">
|
||||
<path
|
||||
class="st0"
|
||||
d="M1019.91,1377.83v516.41h-92.06l-8.63-199.95c-70.48,130.9-195.63,217.21-374,217.21 c-289.14,0-506.35-224.4-506.35-499.15c0-296.33,228.72-513.54,513.54-513.54c212.9,0,409.97,122.27,464.63,340.92H894.76 c-48.91-158.23-197.07-234.47-340.92-234.47c-225.84,0-399.9,169.74-399.9,407.09c0,212.9,162.55,392.7,391.27,392.7 c199.95,0,326.53-139.53,353.87-322.22H535.14v-105.01H1019.91z"
|
||||
id="path2" />
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="g6">
|
||||
<g
|
||||
id="g5">
|
||||
<path
|
||||
class="st0"
|
||||
d="M1881.14,916.07v978.16h-94.94l-625.74-771.02v771.02h-113.64V916.07h92.06l628.61,781.09V916.07H1881.14z "
|
||||
id="path4" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 4.2 MiB After Width: | Height: | Size: 4.2 MiB |
1
public/robots.txt
Normal file
1
public/robots.txt
Normal file
@ -0,0 +1 @@
|
||||
|
||||
3
server/tsconfig.json
Normal file
3
server/tsconfig.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "../.nuxt/tsconfig.server.json"
|
||||
}
|
||||
@ -1,72 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'Messina Sans Mono SemiBold';
|
||||
src: url('../fonts/Messina/MessinaSansMono-SemiBold.eot');
|
||||
src: local('Messina Sans Mono SemiBold'), local('MessinaSansMono-SemiBold'),
|
||||
url('../fonts/Messina/MessinaSansMono-SemiBold.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/Messina/MessinaSansMono-SemiBold.woff2') format('woff2'),
|
||||
url('../fonts/Messina/MessinaSansMono-SemiBold.woff') format('woff'),
|
||||
url('../fonts/Messina/MessinaSansMono-SemiBold.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Messina Sans Mono Light';
|
||||
src: url('../fonts/Messina/MessinaSansMono-Light.eot');
|
||||
src: local('Messina Sans Mono Light'), local('MessinaSansMono-Light'),
|
||||
url('../fonts/Messina/MessinaSansMono-Light.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/Messina/MessinaSansMono-Light.woff2') format('woff2'),
|
||||
url('../fonts/Messina/MessinaSansMono-Light.woff') format('woff'),
|
||||
url('../fonts/Messina/MessinaSansMono-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Messina Sans Mono Book';
|
||||
src: url('MessinaSansMono-Book.eot');
|
||||
src: local('Messina Sans Mono Book'), local('MessinaSansMono-Book'),
|
||||
url('MessinaSansMono-Book.eot?#iefix') format('embedded-opentype'),
|
||||
url('MessinaSansMono-Book.woff2') format('woff2'),
|
||||
url('MessinaSansMono-Book.woff') format('woff'),
|
||||
url('MessinaSansMono-Book.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Messina Sans Mono';
|
||||
src: url('../fonts/Messina/MessinaSansMono-Bold.eot');
|
||||
src: local('Messina Sans Mono Bold'), local('MessinaSansMono-Bold'),
|
||||
url('../fonts/Messina/MessinaSansMono-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/Messina/MessinaSansMono-Bold.woff2') format('woff2'),
|
||||
url('../fonts/Messina/MessinaSansMono-Bold.woff') format('woff'),
|
||||
url('../fonts/Messina/MessinaSansMono-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Messina Sans Mono';
|
||||
src: url('../fonts/Messina/MessinaSansMono-Regular.eot');
|
||||
src: local('Messina Sans Mono Regular'), local('MessinaSansMono-Regular'),
|
||||
url('../fonts/Messina/MessinaSansMono-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/Messina/MessinaSansMono-Regular.woff2') format('woff2'),
|
||||
url('../fonts/Messina/MessinaSansMono-Regular.woff') format('woff'),
|
||||
url('../fonts/Messina/MessinaSansMono-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Messina Sans Mono';
|
||||
src: url('../fonts/Messina/MessinaSansMono-Black.eot');
|
||||
src: local('Messina Sans Mono Black'), local('MessinaSansMono-Black'),
|
||||
url('../fonts/Messina/MessinaSansMono-Black.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/Messina/MessinaSansMono-Black.woff2') format('woff2'),
|
||||
url('../fonts/Messina/MessinaSansMono-Black.woff') format('woff'),
|
||||
url('../fonts/Messina/MessinaSansMono-Black.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@ -1,182 +0,0 @@
|
||||
@import url(messina-stylesheet.css);
|
||||
@import url(basis-stylesheet.css);
|
||||
|
||||
@font-face {
|
||||
font-family: "CamptonBook";
|
||||
src:
|
||||
url("../fonts/CamptonBook.otf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "VoyageReg";
|
||||
src:
|
||||
url('..fonts/VoyageReg.eot?#iefix') format('embedded-opentype'),
|
||||
url("../fonts/VoyageReg.otf") format("opentype"),
|
||||
url('../fonts/VoyageReg.svg#VoyagerReg') format('svg');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "MaisonNeueMono";
|
||||
src:
|
||||
url('../fonts/MaisonNeueMono.ttf') format('truetype');
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "GT-Flexa";
|
||||
src: url("../fonts/GT-Flexa/GT-Flexa-Medium-Trial.otf") format("opentype");
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
html { font-size: 15px; }
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
html { font-size: 13px; }
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #3c40c6; /* WebKit/Blink Browsers */
|
||||
}
|
||||
::-moz-selection {
|
||||
background: #3c40c6; /* Gecko Browsers */
|
||||
}
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #4d463c;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #999999;
|
||||
}
|
||||
|
||||
.floating_message::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
|
||||
}
|
||||
|
||||
/* Track */
|
||||
.floating_message::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
.floating_message::-webkit-scrollbar-thumb {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
.floating_message::-webkit-scrollbar-thumb:hover {
|
||||
background: #484848;
|
||||
}
|
||||
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #fffef8;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
font-size: 17px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
ul, li {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.interactive_button {
|
||||
|
||||
transition: background-color 280ms cubic-bezier(0.37, 0, 0.63, 1) 70ms;
|
||||
transition: color 200ms cubic-bezier(0.37, 0, 0.63, 1) 50ms;
|
||||
|
||||
}
|
||||
|
||||
#right_section{
|
||||
width:45%;
|
||||
height: 100%;
|
||||
background-image: url("../images/gutenberg.png");
|
||||
background-size: auto 100%;
|
||||
background-position-x: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#left_section{
|
||||
width:55%;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.flex_container{
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex_container_item{
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fci_title{
|
||||
font-family: Messina Sans Mono;
|
||||
font-size: 1vw;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.fci_text{
|
||||
font-family: Messina Sans Mono SemiBold;
|
||||
font-size: 2vw;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Loading cover */
|
||||
.loading_cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
background-color: #141312;
|
||||
display: flex;
|
||||
bottom:0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
transition: bottom 350ms cubic-bezier(0.37, 0, 0.63, 1) 70ms;
|
||||
}
|
||||
|
||||
.loading_cover.loaded {
|
||||
bottom: -100%;
|
||||
}
|
||||
|
||||
.loading_cover_inner {
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: inline-flex;
|
||||
margin: auto;
|
||||
animation: fadeInOut 700ms cubic-bezier(0.37, 0, 0.63, 1) 100ms infinite;
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,35 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 1920 1920" style="enable-background:new 0 0 1920 1920;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M1329.69,654.38h117.96c-46.03,220.09-225.84,368.25-466.07,368.25c-281.94,0-509.22-218.65-509.22-507.78
|
||||
S699.64,8.5,981.58,8.5c240.23,0,420.04,146.72,466.07,366.81h-117.96c-40.28-159.67-169.74-260.36-348.11-260.36
|
||||
c-221.52,0-394.14,171.18-394.14,399.9s172.62,401.33,394.14,401.33C1159.95,916.18,1289.41,812.61,1329.69,654.38z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M1019.91,1377.83v516.41h-92.06l-8.63-199.95c-70.48,130.9-195.63,217.21-374,217.21
|
||||
c-289.14,0-506.35-224.4-506.35-499.15c0-296.33,228.72-513.54,513.54-513.54c212.9,0,409.97,122.27,464.63,340.92H894.76
|
||||
c-48.91-158.23-197.07-234.47-340.92-234.47c-225.84,0-399.9,169.74-399.9,407.09c0,212.9,162.55,392.7,391.27,392.7
|
||||
c199.95,0,326.53-139.53,353.87-322.22H535.14v-105.01H1019.91z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M1881.14,916.07v978.16h-94.94l-625.74-771.02v771.02h-113.64V916.07h92.06l628.61,781.09V916.07H1881.14z
|
||||
"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1,58 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Christian Goeschel Ndjomouo - Portfolio</title>
|
||||
<link rel="icon" type="image/x-icon" href="icons/favicon.ico">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
|
||||
<script src="js/anim.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
</head>
|
||||
<body id="page_body" class="flex_container">
|
||||
<div id="left_section">
|
||||
<div class="flex_container_item">
|
||||
<p class="fci_title">PORTFOLIO OF</p>
|
||||
<span class="fci_text">Christian Goeschel-Ndjomouo</span>
|
||||
</div>
|
||||
<div class="flex_container_item">
|
||||
<p class="fci_title">CURRENT OCCUPATION</p>
|
||||
<span class="fci_text">Helpdesk Administrator @ OVHcloud</span>
|
||||
<span class="fci_text">Undergraduate @ Western Governors University (School of Technology)</span>
|
||||
</div>
|
||||
|
||||
<div class="flex_container_item">
|
||||
<p class="fci_title">TECHNOLOGY STACK</p>
|
||||
<span class="fci_text">GNU/Linux</span></br>
|
||||
<span class="fci_text">TCP/IP</span></br>
|
||||
<span class="fci_text">Bash Scripting</span></br>
|
||||
<span class="fci_text">FreeBSD/Unix</span></br>
|
||||
<span class="fci_text">macOS</span></br>
|
||||
<span class="fci_text">Windows OS</span></br>
|
||||
<span class="fci_text">Docker</span></br>
|
||||
<span class="fci_text">Webdev</span></br>
|
||||
<span class="fci_text">C</span></br>
|
||||
<span class="fci_text">Golang</span></br>
|
||||
<span class="fci_text">Python</span></br>
|
||||
</div>
|
||||
|
||||
<div class="flex_container_item">
|
||||
<p class="fci_title">SPOKEN LANGUAGES</p>
|
||||
<span class="fci_text">English</span></br>
|
||||
<span class="fci_text">French</span></br>
|
||||
<span class="fci_text">German</span></br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="right_section">
|
||||
<!-- Gutenberg Image -->
|
||||
</div>
|
||||
<!--LOADING COVER-->
|
||||
<div class="loading_cover">
|
||||
|
||||
<div class="loading_cover_inner">
|
||||
<img src="icons/cgnicon.svg" width="100em" height="auto"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,12 +0,0 @@
|
||||
//Animation function for bottomright_message
|
||||
function changePos(id) {
|
||||
$(
|
||||
id).style.bottom = "-100%";
|
||||
}
|
||||
|
||||
//Timer for loading cover
|
||||
setTimeout(function(){
|
||||
$('.loading_cover').addClass('loaded')
|
||||
},3000);
|
||||
|
||||
|
||||
4
tsconfig.json
Normal file
4
tsconfig.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user