diff --git a/about.html b/about.html new file mode 100644 index 0000000..4c41345 --- /dev/null +++ b/about.html @@ -0,0 +1,96 @@ + + + + + + Nick Vila: About + + + +
+ +
+
+
+
+

Post-Production

+ +

+ One of my favorite hobbies, video post-production using tools like + Adobe Premiere and After Affects. I was fortunate enough to work + with LI Joe, the FGC's most favorite underdog and EVO host for the + past 5 years. Together we were capable of a high view count and a + rapid growth in followers. +

+
+
+

VHS Tapes

+ +

+ One CRT, one VCR and over 500+ VHS tapes. Some may call it a problem + but I call it a good time. It started off as a simple hobby but the + hunt for a good flick rapidly became an addiction for more + nostalgia. In the video above, my favorite podcast group read an + email I wrote to them discussing my hobby. I couldn't have been more + happier! +

+
+
+

Hydroponic Gardening

+ Hydroponic Tower +

+ Easily the most practical hobby I've ever picked up in my life. I'm + fascinated by the science behind hydroponics. It's efficient, safe + and incredibly therapeutic. I started this around 2019 - thank you + COVID? 3D printed my own hydroponics tower and taught myself how to + sustain healthy vegetables through much trial and error. +

+
+
+

Music

+ Mahal by Glass Beams +

"Mahal" by Glass Beams

+

+ My father raised me to have an appreciation for music - no matter + the genre. Teaching me various instruments and even taking me to see + live music on occasion. Unfortunately my interests in playing music + didn't last as long as I wish but my desire to find good tunes only + grows stronger the older I get. +

+
+
+
+ + diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..66f9a4b --- /dev/null +++ b/contact.html @@ -0,0 +1,56 @@ + + + + + + Nick Vila: Contact + + + +
+ +
+
+
+ +

Got something you wanna say!?

+

Please leave your contact info below and leave a message!

+

I'll get back to you as soon as possible.

+
+ +
+ +
+ +
+ +
+ +
+
+ + diff --git a/imgs/IMG_3333.JPEG b/imgs/IMG_3333.JPEG new file mode 100644 index 0000000..5548f57 Binary files /dev/null and b/imgs/IMG_3333.JPEG differ diff --git a/imgs/contact.jpg b/imgs/contact.jpg new file mode 100644 index 0000000..ebac6a0 Binary files /dev/null and b/imgs/contact.jpg differ diff --git a/imgs/session-zero.png b/imgs/session-zero.png new file mode 100644 index 0000000..f157df8 Binary files /dev/null and b/imgs/session-zero.png differ diff --git a/imgs/thisislijoe.png b/imgs/thisislijoe.png new file mode 100644 index 0000000..8ab5ed9 Binary files /dev/null and b/imgs/thisislijoe.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..dc8e408 --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + Nick Vila: Home + + + +
+ +
+
+
+

Nerd, Designer, Developer

+ Weird looking dude +

+ Always eager to learn new things. I've acquired a number of skills + through hobby and hope to make them all part of my profession. I + aspire to work with like minded people within the video game realm and + genres alike. +

+ +

+ "Nothing is worse than having an itch you can never scratch."
- Leon Kowalski +

+
+
+ + diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 0000000..ba68c65 --- /dev/null +++ b/portfolio.html @@ -0,0 +1,67 @@ + + + + + + + Nick Vila: Portfolio + + +
+ +
+
+
+
+

DnD Session Zero

+ AI Generated Logo for Session Zero + dnd-session-zero.com +

+ In Dungeon and Dragons terms, 'session zero' implies the part where + the player creates their characters. While most D&D players leave + this part up to their imagination, others like to have some visual + guide to help feed their imaginations. In this application I use AI + to help me generate the art style so I can focus on the + functionality. It forces me to work heavily with JavaScript. +

+
+
+

Youtube - @thisislijoe

+ thisislijoe youtube logo + youtube.com/@thisislijoe +

+ One of my closets friends Youtube channels. I helped manage, produce + and upload to youtube weekly for a while. Working together with + friend was a great experience for me. Together we were able to + achieve a lot. While he was the face of the channel I was the behind + the scenes (preferably). It gave me the oppurtunity to learn about + Youtube'system and more importantly how to expand on tools such as + the Adobe Suite (Photoshop / Premiere / After Effects) Most content + on his page related to Street Fighter 6 is my handy work. +

+
+
+

AI Voice Work

+ +

To further exercise my production skills I decided to make a quick video for a role-playing game called Mutant Crawl Classics. I used creative common (CC) footage and art, along with an AI generated voice over to piece these together. Sadly it never went anywhere but this was only for practice and to earn some more experience with AI tools.

+
+
+
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..ae79230 --- /dev/null +++ b/script.js @@ -0,0 +1 @@ +console.log(`Hey, I'm Nick Vila!`); diff --git a/style.css b/style.css new file mode 100644 index 0000000..db19089 --- /dev/null +++ b/style.css @@ -0,0 +1,373 @@ +:root { + --green: #3a5a40; + --dark-green: #344e41; + --white: #dad7cd; + --red: #f28482; + --dark-red: #ef476f; +} + +* { + box-sizing: content-box; + margin: 0; + padding: 0; +} + +header { + background-color: var(--green); + color: var(--white); + height: 3rem; +} + +nav { + display: flex; + justify-content: space-around; + align-items: center; + padding-top: 0.3rem; + max-width: 1080px; + margin: 0 auto; +} + +header ul { + display: flex; + justify-content: center; + list-style: none; +} + +header li { + margin-right: 0.8rem; +} + +header a { + text-decoration: none; + color: var(--white); + transition: color 0.3s ease-in-out; + font-weight: bold; +} + +header a:hover { + color: var(--red); +} + +header a:active { + color: var(--red); +} + +main { + display: flex; + justify-content: center; + align-items: center; +} +/* Homepage --------------------------------- */ + +.profile { + width: 90%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin-top: 0.8rem; +} + +.profile h2 { + font-size: 1.8rem; + margin-bottom: 0.5rem; +} + +.profile img { + height: 20rem; + border-radius: 0.5rem; + margin-bottom: 0.5rem; +} + +.profile p { + font-size: 1.2rem; + text-align: justify; + margin-top: 2rem; + max-width: 80%; +} + +@keyframes metalGear { + 0% { + right: 35%; + } + 50% { + right: -35%; + transform: rotateY(0deg); + } + 51% { + transform: rotateY(180deg); + } + 100% { + right: 35%; + transform: rotateY(180deg); + } +} + +#metal-gear { + height: 6rem; + position: relative; + animation: metalGear 5s infinite ease-in-out; +} + +#quote { + font-style: italic; +} + +#quote span { + font-style: normal; +} + +/* End of Homepage --------------------------------- */ + +/* About Page --------------------------------- */ +.list-view { + display: grid; + margin-top: 1rem; + margin-bottom: 2rem; + gap: 20px; +} + +.card { + border: 0.2rem var(--dark-green) solid; + width: 25rem; + min-height: 30rem; + border-radius: 0.6rem; +} + +.card h2 { + text-align: center; + padding: 0.3rem 0 0.3rem 0; + background-color: var(--green); + color: var(--white); +} + +.card img { + width: 400px; +} + +.card p { + padding: 0.5rem; + text-align: justify; + font-size: 1.1rem; +} + +#album-name { + text-align: center; +} + +/* End of About --------------------------------- */ + +/* Portfolio Page --------------------------------- */ + +#dnd-session-zero img { + background-color: black; +} + +.card a { + text-decoration: none; + display: flex; + justify-content: center; + font-weight: bold; + font-style: italic; + color: var(--dark-green); + font-size: 1.1rem; + transition: color 0.3s ease-in-out; +} + +.card a:hover { + color: var(--red); +} + +/* End of Portfolio --------------------------------- */ + +/* Contact --------------------------------- */ + +.contact-box { + display: grid; + grid-template-columns: 1fr; + margin-top: 1rem; + margin: 5rem auto; +} + +form { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +form > input, +textarea { + border: 2px var(--dark-green) solid; + padding: 10px; + width: 300px; +} + +form input { + margin-top: 1rem; +} + +form textarea { + margin-top: 1rem; +} + +form label { + margin-top: 1rem; + margin-bottom: -0.5rem; + text-align: left; +} + +.submit-button { + margin-top: 1rem; + width: 8rem; + height: 1.5rem; + border: none; + background-color: var(--dark-green); + color: var(--white); + font-weight: bold; + transition: background-color 0.3s ease-in-out; +} + +.submit-button:hover { + background-color: var(--red); + /* color: var(--dark-green); */ +} + +.contact-img { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.contact-img img { + height: 9.4rem; +} + +.contact-img p { + margin-top: 0.5rem; + width: 22rem; + font-size: 1.2rem; + text-align: center; +} + +.contact-img p:nth-child(3) { + color: var(--dark-red); + font-weight: bold; +} + +.contact-box p:first-of-type { + font-weight: bold; +} + +/* End of Contact --------------------------------- */ + +/* Media Queries --------------------------------- */ + +@media only screen and (min-width: 768px) { + main { + } + + header li { + font-size: 1.5rem; + } + + .profile { + width: 60%; + } + + .profile p { + margin-top: 2rem; + } +} + +@media only screen and (min-width: 992px) { + main { + max-width: 88%; + margin: 0 auto; + } + + .profile { + margin-top: 20%; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 5rem 1fr 1fr; + width: 75%; + } + + .profile h2 { + font-size: 2.2rem; + grid-column: 1 / span 2; + grid-row: 1; + } + + .profile p { + grid-column: 1 / span 2; + grid-row: 2; + margin-top: -10rem; + padding-right: 0.8rem; + } + + .profile img { + grid-column: 3; + grid-row: 1 / span 2; + } + + #quote { + grid-column: 1 / span 3; + grid-row: 3; + text-align: center; + } + @keyframes metalGear { + 0% { + right: 5%; + } + 50% { + right: -120%; + transform: rotateY(0deg); + } + 51% { + transform: rotateY(180deg); + } + 100% { + right: 5%; + transform: rotateY(180deg); + } + } + + #metal-gear { + grid-column: 1; + grid-row: 3; + margin-top: -25rem; + } + + .list-view { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + } +} + +@media only screen and (min-width: 1200px) { + main { + max-width: 1080px; + margin: 0 auto; + } + + .profile { + /* max-width: 30%; */ + /* min-width: 67%; */ + } + + .profile p { + grid-column: 1 / span 2; + grid-row: 2 / span 2; + padding-right: 0.8rem; + margin-top: -25rem; + } + + #quote { + grid-column: 1 / span 3; + grid-row: 4; + } +}