Skip to content

Commit 3e40ea7

Browse files
FlamingHerbFlamingHerb
authored
Merge pull request #11 from FlamingHerb/dev
more proper site
2 parents 8f23841 + fa42f12 commit 3e40ea7

File tree

8 files changed

+431
-318
lines changed

8 files changed

+431
-318
lines changed

‎package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@
88
"preview": "vite preview"
99
},
1010
"devDependencies": {
11-
"@sveltejs/adapter-auto": "^3.0.0",
11+
"@sveltejs/adapter-auto": "^3.2.2",
1212
"@sveltejs/adapter-static": "^3.0.2",
13-
"@sveltejs/kit": "^2.0.0",
14-
"@sveltejs/vite-plugin-svelte": "^3.0.0",
15-
"sass": "^1.77.2",
16-
"svelte": "^4.2.7",
17-
"vite": "^5.0.3"
13+
"@sveltejs/kit": "^2.5.18",
14+
"@sveltejs/vite-plugin-svelte": "^3.1.1",
15+
"sass": "^1.77.8",
16+
"svelte": "^4.2.18",
17+
"vite": "^5.3.4"
1818
},
1919
"type": "module"
2020
}

‎pnpm-lock.yaml

Lines changed: 242 additions & 243 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/Navbar.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
}
1919
.current{
2020
text-decoration: underline;
21-
color: #ff9600;
21+
color: white;
2222
}
2323
.pages-section {
2424
display: flex;

‎src/routes/(app)/+layout.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
max-width: 500px;
103103
}
104104
105-
@media only screen and (max-width: $global-max-width){
105+
@media only screen and (max-width: 530px){
106106
#navbar-comp {
107107
margin: 25px 1.2rem 0px 1.2rem;
108108
}

‎src/routes/(app)/+page.svelte

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@
3939

4040
<style lang="scss">
4141
42-
$base-color: #018060;
43-
$border-color: #DCBB57;
4442
4543
.subtitle-holder {
4644
font-size: 14px;
@@ -78,7 +76,7 @@
7876
7977
.sharp-fold {
8078
position: relative;
81-
background: $base-color;
79+
background: $background-color;
8280
8381
&:before {
8482
content: '';
@@ -104,7 +102,7 @@
104102
position: absolute;
105103
top: 0;
106104
right: 0;
107-
background: $base-color;
105+
background: $background-color;
108106
width: 2em;
109107
height: 4em;
110108
}

‎src/routes/(app)/about/+page.svelte

Lines changed: 113 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,32 +21,78 @@
2121
<title>About Me | Vaccaria's Website</title>
2222
</head>
2323

24-
<div class="container wrapper column-direction">
25-
<div class="section">
26-
<h1>INTRODUCTION</h1>
24+
<div class="container wrapper column-direction" style="margin-bottom: 4rem;">
25+
<div class="section forced-top">
2726
<figure id="authorimg">
2827
<img src="{authorimg}" alt="A witch profile." on:mouseover={handleMouseOver} on:focus={handleMouseOver} on:blur={handleMouseOut} on:mouseout={handleMouseOut}>
2928
<figcaption>{caption}</figcaption>
3029
</figure>
30+
<h1>Michael Omisol</h1>
31+
<p style="color: white; text-align: center;">Game Maker, Software/Web Developer, Creative Writer</p>
32+
</div>
33+
<div class="section">
34+
<p>
35+
Hello, I'm Michael Omisol (but you can either call me Omi or Vaccaria). My fascination with games has led me, first, to creating games at a young age. Sooner enough, that drive for creating led me to be a hobbyist writer as well as my delving into the realm of software development and Computer Science.
36+
</p>
37+
<p>
38+
I still am active when it comes to making any creative endeavours, though they are more in the backpedal these days in order to focus more in my career.
39+
</p>
3140
<p>
32-
I am Michael Sean Brian B. Omisol. Also known as Vaccaria. I am a {year - 2001} old game/software developer and writer, currently a {year - 2020}rd year BS Computer Science student in the University of the Philippines — Diliman. I have past experience in making games, writing stuff about games, and working with various game devs, including leading a group in the past.
41+
If you <strong>want to work with me or want to hire me</strong>, <a href="/contact">please contact me</a> through the following details.
3342
</p>
3443
</div>
44+
45+
<!-- Skills Section -->
3546
<div class="section">
36-
<h1>EXPERIENCE</h1>
37-
<p>a</p>
47+
<h1 style="margin-bottom: 0;">Skills</h1>
48+
<div class="flex-container">
49+
<div class="skills-tab">
50+
<h2>Languages</h2>
51+
<div class="images-part">
52+
<img alt="C" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/c/c-original.svg" />
53+
<img alt="C++" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/cplusplus/cplusplus-original.svg" />
54+
<img alt="Python" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg" />
55+
<img alt="Ruby" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/ruby/ruby-original.svg" />
56+
<img alt="HTML5" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/html5/html5-original.svg" />
57+
<img alt="CSS" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/css3/css3-original.svg" />
58+
<img alt="Java" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/java/java-original.svg" />
59+
<img alt="JS" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg" />
60+
<img alt="TS" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-original.svg" />
61+
<img alt="PHP" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/php/php-original.svg" />
62+
</div>
63+
64+
</div>
65+
<div class="skills-tab">
66+
<h2>Libraries and Frameworks</h2>
67+
<div class="images-part">
68+
<img alt="Svelte" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/svelte/svelte-original.svg" />
69+
<img alt="Sass" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/sass/sass-original.svg" />
70+
<img alt="MySQL" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mysql/mysql-original.svg" />
71+
</div>
72+
</div>
73+
<div class="skills-tab">
74+
<h2>Technologies and Engines</h2>
75+
<div class="images-part">
76+
<img alt="Godot" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/godot/godot-original.svg" />
77+
<img alt="Git" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/git/git-original.svg" />
78+
<img alt="GitLab" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/gitlab/gitlab-original.svg" />
79+
<img alt="GitHub" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg" />
80+
<img alt="Bitbucket" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/bitbucket/bitbucket-original.svg" />
81+
<img alt="NodeJS" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nodejs/nodejs-original.svg" />
82+
<img alt="pnpm" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/pnpm/pnpm-original.svg" />
83+
</div>
84+
</div>
85+
</div>
3886
</div>
87+
88+
3989
</div>
4090

4191
<style lang="scss">
4292
43-
h1 {
44-
display: block;
45-
margin-bottom: 0;
46-
}
4793
4894
p {
49-
text-align:justify;
95+
text-align: justify;
5096
}
5197
5298
#authorimg {
@@ -60,15 +106,65 @@
60106
}
61107
}
62108
63-
.section {
109+
.flex-container {
110+
display: flex;
111+
flex-wrap: wrap;
112+
gap: 50px;
113+
}
114+
115+
/*
116+
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#grid_lines
117+
*/
118+
.skills-tab {
119+
flex: 1 1 0%;
120+
min-width: 220px;
121+
max-width: 250px;
122+
margin: auto;
123+
margin-top: 0;
124+
justify-content: center;
64125
65-
min-width: 85%;
66-
max-width: 85%;
67-
margin-left: 1.2em;
68-
margin-right: 1.2em;
126+
h2 {
127+
height: 2rem;
128+
font-size: 1rem;
129+
text-align: center;
130+
margin-bottom: 1rem;
131+
}
132+
133+
134+
.images-part {
135+
display: grid;
136+
grid-template-columns: repeat(4, 1fr);
137+
grid-auto-rows: minmax(100px, auto);
138+
139+
align-items: center;
140+
justify-items: center;
141+
142+
img {
143+
display: inline-grid;
144+
width: 50px;
145+
}
146+
}
147+
}
148+
149+
.forced-top {
150+
margin-top: 20px;
151+
}
69152
153+
.section {
154+
width: 100%;
70155
p {
71-
font-size: 1rem;
156+
font-size: 0.9rem;
157+
}
158+
h1 {
159+
text-align: center;
160+
}
161+
}
162+
163+
@media only screen and (max-width: 537px){
164+
#authorimg {
165+
float: none;
166+
margin: auto;
167+
text-align: center;
72168
}
73169
}
74170
</style>

‎src/routes/(app)/contact/+page.svelte

Lines changed: 52 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,41 @@
1-
<script>
2-
3-
const d = new Date();
4-
let year = d.getFullYear();
5-
6-
let authorimg = "/images/witch.png";
7-
let caption = "If you're wondering, that ain't me.";
8-
9-
function handleMouseOver() {
10-
authorimg = '/images/pranked.png';
11-
caption = "You like kissing boys, don't you?";
12-
}
13-
function handleMouseOut() {
14-
authorimg = '/images/witch.png';
15-
caption = "If you're wondering, that ain't me.";
16-
}
17-
18-
</script>
19-
201
<head>
21-
<title>About Me | Vaccaria's Website</title>
2+
<title>Contact | Vaccaria's Website</title>
223
</head>
234

24-
<div class="container wrapper column-direction">
25-
<div class="section">
26-
<h1>INTRODUCTION</h1>
27-
<figure id="authorimg">
28-
<img src="{authorimg}" alt="A witch profile." on:mouseover={handleMouseOver} on:focus={handleMouseOver} on:blur={handleMouseOut} on:mouseout={handleMouseOut}>
29-
<figcaption>{caption}</figcaption>
30-
</figure>
31-
<p>
32-
I am Michael Sean Brian B. Omisol. Also known as Vaccaria. I am a {year - 2001} old game/software developer and writer, currently a {year - 2020}rd year BS Computer Science student in the University of the Philippines — Diliman. I have past experience in making games, writing stuff about games, and working with various game devs, including leading a group in the past.
33-
</p>
34-
</div>
5+
<div class="container wrapper column-direction container-section">
356
<div class="section">
36-
<h1>EXPERIENCE</h1>
37-
<p>a</p>
7+
<div class="border-section sharp-fold">
8+
<p style="margin-top: 0">Feel free to contact me through the following platforms:</p>
9+
<div class="images-part">
10+
<a target="_blank" href="https://www.facebook.com/OmiLomidotexe/">
11+
<img alt="Facebook" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/facebook/facebook-original.svg" />
12+
</a>
13+
<a target="_blank" href="https://github.com/FlamingHerb">
14+
<img alt="GitHub" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg" />
15+
</a>
16+
<a target="_blank" href="https://www.linkedin.com/in/msbbomisol/">
17+
<img alt="LinkedIn" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linkedin/linkedin-original.svg" />
18+
</a>
19+
</div>
20+
<br>
21+
<hr>
22+
<p style="margin-top: 2em;">Or directly send me an e-mail at either:</p>
23+
<a href="mailto:michaelomisol@protonmail.com">michaelomisol@protonmail.com</a>
24+
<a href="mailto:msbbomisol@gmail.com">msbbomisol@gmail.com</a>
25+
</div>
3826
</div>
3927
</div>
4028

4129
<style lang="scss">
4230
31+
4332
h1 {
4433
display: block;
4534
margin-bottom: 0;
4635
}
4736
4837
p {
49-
text-align:justify;
38+
text-align: center;
5039
}
5140
5241
#authorimg {
@@ -61,14 +50,37 @@
6150
}
6251
6352
.section {
53+
display: flex;
54+
height: 85vh;
55+
//padding: 14px;
56+
57+
flex-direction: column;
58+
justify-content: center;
59+
text-align: center;
60+
}
61+
62+
.border-section {
63+
position: relative;
64+
min-width: 228px;
65+
max-width: 300px;
66+
padding: 40px 20px;
67+
border: 1px solid $border-color;
68+
}
69+
70+
.images-part {
71+
display: grid;
72+
grid-template-columns: repeat(3, 50px);
73+
grid-auto-rows: auto;
6474
65-
min-width: 85%;
66-
max-width: 85%;
67-
margin-left: 1.2em;
68-
margin-right: 1.2em;
75+
justify-content: space-evenly;
76+
justify-items: center;
77+
align-content: space-evenly;
78+
align-items: center;
79+
column-gap: 0.5em;
6980
70-
p {
71-
font-size: 1rem;
81+
img {
82+
display: inline-grid;
83+
width: 50px;
7284
}
7385
}
7486
</style>

‎src/variables.scss

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/* Variables and mixins declared here will be available in all other SCSS files */
22
/* Global Styles */
33

4-
$border-color: #dcbb57;
5-
$background-color: #018060;
4+
$border-color: #FFB232;
5+
$background-color: #009B77;
66
$global-max-width: 428px;
77

88
:global(p) {
@@ -26,13 +26,13 @@ $global-max-width: 428px;
2626
}
2727

2828
&:hover {
29-
color: white;
29+
color: #F05C00;
3030
}
3131
}
3232

3333

3434
:global(h1, h2, h3){
35-
color: #dcbb57;
35+
color: $border-color;
3636
font-family: "Wittgenstein", helvetica, sans-serif;
3737
}
3838

@@ -84,13 +84,21 @@ $global-max-width: 428px;
8484
align-items: center;
8585
overflow: hidden;
8686
//background-color: #ffffff;
87+
max-width: 768px;
8788

88-
margin-left: 15vw;
89-
margin-right: 15vw;
89+
margin: auto;
90+
padding: 0 20px;
91+
9092
justify-content: center;
9193

9294
}
9395

96+
:global(hr){
97+
color: $border-color;
98+
width: 75%;
99+
}
100+
101+
94102
@media only screen and (max-width: 768px) {
95103
:global(.container) {
96104
margin: auto;

0 commit comments

Comments
 (0)