Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Life Informtion #11

Merged
merged 2 commits into from
Jan 10, 2024
Merged

Life Informtion #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c4f5ea3
fix life section css (not done)
toxoscorp Jan 10, 2024
6a955c8
add life information
toxoscorp Jan 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
207 changes: 149 additions & 58 deletions src/components/MyLife.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,162 @@
<script setup>
import MyLifeCard from './MyLifeCard.vue';

const cards = [
{
Title: 'University of Ottawa',
SubTitle: 'Software Engineering',
Description: 'I am currently a student at the University of Ottawa in the Software Engineering program. I am currently in my second year of the program.',
Date: '2023 - 2028',
},
{
Title: 'College Nouvelles-Frontières',
SubTitle: 'High School Diploma',
Description: 'I graduated from College Nouvelles-Frontières in 2023 with a high school diploma.',
Date: '2018 - 2023',
},
{
Title: 'University of Ottawa',
SubTitle: 'Software Engineering',
Description: 'I am currently a student at the University of Ottawa in the Software Engineering program. I am currently in my second year of the program.',
Date: '2023 - 2028',
}
]
defineProps({
cards: Object
})
</script>

<template>
<div class="lifePath">
<div class="left">
<div class="itemcards" v-for="(card, index) in cards" :key="index">
<MyLifeCard v-if="index % 2 == 0" :card="card" />
<div class="empty" v-if="index % 2 != 0"></div>
</div>
</div>
<div class="middle">
<div class="dot" v-for="card in cards"></div>
</div>
<div class="right">
<div class="itemcards" v-for="(card, index) in cards" :key="index">
<MyLifeCard v-if="index % 2 != 0" :card="card" />
<div class="empty" v-if="index % 2 == 0"></div>
</div>
</div>
</div>
<ul class="lifePath">
<li class="itemcards" v-for="(card, index) in cards" :key="index" :style="{ '--accent-color': card.color }">
<div class="date">{{ card.Date }}</div>
<div class="title">{{ card.Title }} - {{ card.SubTitle }}</div>
<div class="descr">{{ card.Description }}</div>
</li>
</ul>
</template>

<style scoped>
.lifePath {
display: grid;
grid-template-columns: 5fr 1fr 5fr;
--col-gap: 2rem;
--row-gap: 2rem;
--path-width: 0.25rem;
display: grid;
grid-template-columns: var(--path-width) 1fr;
grid-auto-columns: max-content;
column-gap: var(--col-gap);
list-style: none;
width: min(60rem, 90%);
margin-inline: auto;
}

/* line */
.lifePath::before {
content: "";
grid-column: 1;
grid-row: 1 / span 20;
background: rgb(225, 225, 225);
border-radius: calc(var(--path-width) / 2);
}

/* row gaps */
.lifePath .itemcards:not(:last-child) {
margin-bottom: var(--row-gap);
}

/* card */
.lifePath .itemcards {
grid-column: 2;
--inlineP: 1.5rem;
margin-inline: var(--inlineP);
grid-row: span 2;
display: grid;
grid-template-rows: min-content min-content min-content;
}

/* date */
.lifePath .itemcards .date {
--date-height: 3rem;
height: var(--date-height);
margin-inline: calc(var(--inlineP) * -1);

text-align: center;
background-color: var(--accent-color);

color: white;
font-size: 1.25rem;
font-weight: 700;

display: grid;
place-content: center;
position: relative;

border-radius: calc(var(--date-height) / 2) 0 0 calc(var(--date-height) / 2);
}

/* circle */
.lifePath .itemcards .date::after {
content: "";
position: absolute;
width: 2rem;
aspect-ratio: 1;
background: var(--color-background);
border: 0.3rem solid var(--accent-color);
border-radius: 50%;
top: 50%;

transform: translate(50%, -50%);
right: calc(100% + var(--col-gap) + var(--path-width) / 2);
}

/* title descr */
.lifePath .itemcards .title,
.lifePath .itemcards .descr {
background: var(--color-background);
position: relative;
padding-inline: 1.5rem;
}
/* make a vertical line with dote evenly distributed on it in the middle div */
.middle {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100%;
content: '';
width: 1px;
background-color: var(--color-text);
.lifePath .itemcards .title {
overflow: hidden;
padding-block-start: 1.5rem;
padding-block-end: 1rem;
font-weight: 500;
}
.dot {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--color-text);
.lifePath .itemcards .descr {
padding-block-end: 1.5rem;
font-weight: 300;
}
.empty {
height: 250px;

/* shadows */
.lifePath .itemcards .title::before,
.lifePath .itemcards .descr::before {
content: "";
position: absolute;
width: 90%;
height: 0.5rem;
background: rgba(0, 0, 0, 0.5);
left: 50%;
border-radius: 50%;
filter: blur(4px);
transform: translate(-50%, 50%);
}
.lifePath .itemcards .title::before {
bottom: calc(100% + 0.125rem);
}

.lifePath .itemcards .descr::before {
z-index: -1;
bottom: 0.25rem;
}

@media (min-width: 40rem) {
.lifePath {
grid-template-columns: 1fr var(--path-width) 1fr;
}
.lifePath::before {
grid-column: 2;
}
.lifePath .itemcards:nth-child(odd) {
grid-column: 1;
}
.lifePath .itemcards:nth-child(even) {
grid-column: 3;
}

/* start second card */
.lifePath .itemcards:nth-child(2) {
grid-row: 2/4;
}

.lifePath .itemcards:nth-child(odd) .date::before {
clip-path: polygon(0 0, 100% 0, 100% 100%);
left: 0;
}

.lifePath .itemcards:nth-child(odd) .date::after {
transform: translate(-50%, -50%);
left: calc(100% + var(--col-gap) + var(--path-width) / 2);
}
.lifePath .itemcards:nth-child(odd) .date {
border-radius: 0 calc(var(--date-height) / 2) calc(var(--date-height) / 2) 0;
}
}
</style>
34 changes: 0 additions & 34 deletions src/components/MyLifeCard.vue
View file
Open in desktop

This file was deleted.

76 changes: 60 additions & 16 deletions src/components/sections/Life.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,82 @@
<script setup>
import MyLife from '@/components/MyLife.vue';
import { ref } from 'vue';

const op = ref(false);
const ps = ref(false);

setTimeout(() => {
op.value = true;
}, 1);
setTimeout(() => {
ps.value = true;
}, 200);

import PageSwitcher from '@/components/PageSwitcher.vue';
defineProps({
inView: Boolean
})

const cards = [
{
Title: 'University of Ottawa',
SubTitle: 'Software Engineering COOP Student',
Description: 'I am currently a student at the University of Ottawa in the Software Engineering program. I am currently in my second year of the program.',
Date: '2023 - 2028',
color: '#3ecd5e'
},
{
Title: 'UOttawa SuperMilage',
SubTitle: 'Engineering Team',
Description: 'I am currently a member of the UOttawa SuperMilage Team. I\'m working on the software for the car a car that will be competing in the Shell Eco-Marathon Americas in 2023.',
Date: '2023 - Present',
color: 'red'
},
{
Title: 'Waterloo Canadian Computing Competition',
SubTitle: 'Programming Competition',
Description: 'I participated in the Waterloo Canadian Computing Competition in 2021, 2022 and 2023. In 2020 I was just practicing and did not participate in the competition. I placed 2st in my school in 2021 and 2022. In 2023, I placed 1st in my school and I was on the Waterloo Honour Roll.',
Date: '2020 - 2023',
color: 'orange'
},
{
Title: 'Odyssé de l’Objet',
SubTitle: 'Competition in Industrial Design',
Description: 'I participated in the Odyssé de l’Objet competition three times. My team and I won third place in 2019 and 2021. In 2023, we won best presentation.',
Date: '2019, 2021, 2023',
color: 'orange'
},
{
Title: 'College Nouvelles-Frontières',
SubTitle: 'High School Diploma',
Description: 'I graduated from College Nouvelles-Frontières in 2023 with a high school diploma.',
Date: '2018 - 2023',
color: '#3ecd5e'
}
]
</script>

<template>
<div class="life">
<Transition name="slide-fade">
<div class="life-inside" v-if="inView">
<h1>My Life</h1>
<MyLife />
<MyLife :cards="cards" />
</div>
</Transition>
</div>
</template>

<style scoped>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.life {
height: 100vh;
width: 80vw;
/* background-color: yellow; */
min-height: 190vh;
}
.life-inside {
display: grid;
align-content: center;
gap: 2rem;
padding: 2rem;
min-height: 100vh;
}

h1 {
font-size: 3rem;
color: var(--color-heading);
text-align: center;
}
</style>
11 changes: 0 additions & 11 deletions src/components/sections/Projects.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,6 @@ const projects = [
color: "#3ecd5e"
}
]
import { ref } from 'vue';

const op = ref(false);
const ps = ref(false);

setTimeout(() => {
op.value = true;
}, 1);
setTimeout(() => {
ps.value = true;
}, 200);
defineProps({
inView: Boolean
})
Expand Down
Loading