diff --git a/Bakery.png b/Bakery.png new file mode 100644 index 0000000..aec3b77 Binary files /dev/null and b/Bakery.png differ diff --git a/Dino.png b/Dino.png new file mode 100644 index 0000000..ad6f669 Binary files /dev/null and b/Dino.png differ diff --git a/Furniture.png b/Furniture.png new file mode 100644 index 0000000..966d1b5 Binary files /dev/null and b/Furniture.png differ diff --git a/Jaxx.jpg b/Jaxx.jpg new file mode 100644 index 0000000..09d0e21 Binary files /dev/null and b/Jaxx.jpg differ diff --git a/about.css b/about.css new file mode 100644 index 0000000..a7ac930 --- /dev/null +++ b/about.css @@ -0,0 +1,129 @@ +html { + background-color: #4f4964; +} + +body { + display: flex; + flex-direction: column; + background-color: #635e74; + color:#F5EFFF; + box-shadow: 0px 0px 10px 10px #393644; + font-family: Georgia, Times, 'Times New Roman', serif; + max-width: 800px; + margin: 0 auto; +} + +header { + background-color: #302B3D; + display: flex; + justify-content: space-between; + align-items: baseline; + padding-inline: 10px; + position: fixed; + left: 0; + right: 0; +} + +.name { + font-size: 2rem; +} + +nav { + display: flex; + gap: 30px; +} + +nav :hover{ + color: #9D6BFF ; +} + +a { + color: #F5EFFF; + text-decoration: none; + font-size: 1.5rem; + transition-duration: 0.4s; +} + +main { + display: flex; + flex-grow: 1; + flex-direction: column; + align-items: center; + padding-block: 100px; + margin-block: 20px; + gap: 20px; +} + +section { + background-color: #7e7894; + border: 3px solid #4f4964; + border-radius: 10px; + width: 80%; + padding-left: 20px; +} + +section p { + text-align: center; + padding-top: 10px; +} + +img { + width: 15rem; + float: right; + margin: 0 20px 24px 5px; +} + +footer { + display: flex; + justify-content: center; + align-items: center; + background-color: #302B3D; + height: 100px; + font-size: 1.5rem; + position: fixed; + left: 0; + right: 0; + bottom: 0; +} + +@media (max-width: 600px) { + header { + flex-direction: row; + align-items: center; + text-align: center; + } + + .name { + font-size: 1.5rem; + } + + a { + font-size: 1rem; + } + + nav { + flex-direction: row; + gap: 10px; + } + + section { + display: flex; + flex-direction: column; + align-items: center; + padding-inline: 10px; + } + + section h2, p { + text-align: center; + } + + img { + max-width: 60%; + margin: 0; + } + + footer { + font-size: 1rem; + height: 75px; + } +} \ No newline at end of file diff --git a/about.html b/about.html new file mode 100644 index 0000000..ff955c6 --- /dev/null +++ b/about.html @@ -0,0 +1,53 @@ + + + + + + Personal Website + + + +
+

Jaxx Mistry

+ +
+
+
+

What I'm Working With Right Now

+ A laptop with code + +

I enjoy exploring both front-end and back-end development as I grow, and I’m especially interested in creating accessible, intuitive interfaces.

+
+
+

Looking Ahead

+ A notebook with a plan on it +

My goal is to keep building real-world applications, deepen my understanding of software engineering principles, and eventually contribute to impactful projects — ones that are useful, thoughtful, and make a difference.

+
+
+

Outside of Code

+ A forest +

When I’m not coding, you can usually find me:

+ +
+
+ + + + \ No newline at end of file diff --git a/contact.css b/contact.css new file mode 100644 index 0000000..ddf34d4 --- /dev/null +++ b/contact.css @@ -0,0 +1,128 @@ +html { + background-color: #4f4964; +} + +body { + height: 100vh; + display: flex; + flex-direction: column; + background-color: #635e74; + color:#F5EFFF; + box-shadow: 0px 0px 10px 10px #393644; + font-family: Georgia, Times, 'Times New Roman', serif; + max-width: 800px; + margin: 0 auto; +} + +header { + background-color: #302B3D; + display: flex; + justify-content: space-between; + align-items: baseline; + padding-inline: 10px; + position: fixed; + left: 0; + right: 0; +} + +.name { + font-size: 2rem; +} + +nav { + display: flex; + gap: 30px; +} + +nav :hover{ + color: #9D6BFF ; +} + +a { + color: #F5EFFF; + text-decoration: none; + font-size: 1.5rem; + transition-duration: 0.4s; +} + +main { + display: flex; + flex-grow: 1; + flex-direction: column; + justify-content: center; + align-items: center; + padding-block: 100px; +} + +section { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #7e7894; + border: 3px solid #4f4964; + border-radius: 10px; + padding: 20px; + padding-bottom: 25px; +} + + section p, h1 { + text-align: center; + margin: 10px; +} + +form { + display: flex; + flex-direction: column; + width: 50%; +} + +input, textarea, button { + background-color: #4f4964; + border: 2px solid #3d394d; + margin-bottom: 15px; + color: #F5EFFF; +} + +footer { + display: flex; + justify-content: center; + align-items: center; + background-color: #302B3D; + height: 100px; + font-size: 1.5rem; + position: fixed; + left: 0; + right: 0; + bottom: 0; +} + +@media (max-width: 600px) { + header { + flex-direction: row; + align-items: center; + text-align: center; + } + + .name { + font-size: 1.5rem; + } + + a { + font-size: 1rem; + } + + nav { + flex-direction: row; + gap: 10px; + } + + section { + max-width: 70%; + } + + footer { + font-size: 1rem; + height: 75px; + } +} \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..d9d4555 --- /dev/null +++ b/contact.html @@ -0,0 +1,37 @@ + + + + + + Personal Website + + + +
+

Jaxx Mistry

+ +
+
+
+

Send a Message

+

Have feedback, an interesting idea, or just want to say hello? I’d love to hear from you.

+
+ + + + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/index.css b/index.css new file mode 100644 index 0000000..905bb25 --- /dev/null +++ b/index.css @@ -0,0 +1,124 @@ +html { + background-color: #4f4964; +} + +body { + height: 100vh; + display: flex; + flex-direction: column; + background-color: #635e74; + color:#F5EFFF; + box-shadow: 0px 0px 10px 10px #393644; + font-family: Georgia, Times, 'Times New Roman', serif; + max-width: 800px; + margin: 0 auto; +} + +header { + background-color: #302B3D; + display: flex; + justify-content: space-between; + align-items: baseline; + padding-inline: 10px; + position: fixed; + left: 0; + right: 0; +} + +.name { + font-size: 2rem; +} + +nav { + display: flex; + gap: 30px; +} + +nav :hover{ + color: #9D6BFF ; +} + +a { + color: #F5EFFF; + text-decoration: none; + font-size: 1.5rem; + transition-duration: 0.4s; +} + +main { + display: flex; + flex-grow: 1; + flex-direction: column; + justify-content: space-evenly; + padding-block: 100px; +} + +div { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; +} + +img { + width: 20rem; +} + +.bio { + text-align: center; + font-size: 2rem; + font-weight: bolder; + font-style: italic; + padding-inline: 20px; +} + +footer { + display: flex; + justify-content: center; + align-items: center; + background-color: #302B3D; + height: 100px; + font-size: 1.5rem; + position: fixed; + left: 0; + right: 0; + bottom: 0; +} + +@media (max-width: 600px) { + header { + flex-direction: row; + align-items: center; + text-align: center; + } + + .name { + font-size: 1.5rem; + } + + a { + font-size: 1rem; + } + + nav { + flex-direction: row; + gap: 10px; + } + + div { + flex-direction: column; + } + + .bio { + font-size: 1rem; + } + + img { + max-width: 60%; + } + + footer { + font-size: 1rem; + height: 75px; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..7f46a69 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + Personal Website + + + +
+

Jaxx Mistry

+ +
+
+
+

Fullstack Student

+ +
+

Welcome, I’m a software development student with a strong interest in building functional, and user-centered applications. I’m currently expanding my skills through hands-on learning and real-world projects.

+
+ + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..c7505ec --- /dev/null +++ b/index.js @@ -0,0 +1 @@ +console.log("Jasmine Ann Gutierrez"); diff --git a/portfolio.css b/portfolio.css new file mode 100644 index 0000000..94747cb --- /dev/null +++ b/portfolio.css @@ -0,0 +1,150 @@ +html { + background-color: #4f4964; +} + +body { + display: flex; + flex-direction: column; + background-color: #635e74; + color:#F5EFFF; + box-shadow: 0px 0px 10px 10px #393644; + font-family: Georgia, Times, 'Times New Roman', serif; + max-width: 800px; + margin: 0 auto; +} + +header { + background-color: #302B3D; + display: flex; + justify-content: space-between; + align-items: baseline; + padding-inline: 10px; + position: fixed; + left: 0; + right: 0; +} + +.name { + font-size: 2rem; +} + +nav { + display: flex; + gap: 30px; +} + +nav :hover{ + color: #9D6BFF ; +} + +a { + color: #F5EFFF; + text-decoration: none; + font-size: 1.5rem; + transition-duration: 0.4s; +} + +main { + display: flex; + flex-grow: 1; + flex-direction: column; + padding-block: 100px; +} + +h1 { + text-align: center; +} + +section { + background-color: #4E485D; + border: outset #302B3D; + box-shadow: 5px 5px 15px 5px rgb(39, 34, 44); + margin: 20px; + padding-inline: 15px; +} + +h2 { + + border-bottom: 2px solid #302B3D; + +} + +section p { + padding-top: 10px; +} + +img { + width: 15rem; + float: right; + margin: 0 5px 24px 5px; +} + +.git { + color: #9D6BFF ; + font-size: 1rem; + transition-duration: 0.4s; +} + +.git:hover{ + color: #282231; +} + +footer { + display: flex; + justify-content: center; + align-items: center; + background-color: #302B3D; + height: 100px; + font-size: 1.5rem; + position: fixed; + left: 0; + right: 0; + bottom: 0; +} + +@media (max-width: 600px) { + header { + flex-direction: row; + align-items: center; + text-align: center; + } + + .name { + font-size: 1.5rem; + } + + a { + font-size: 1rem; + } + + nav { + flex-direction: row; + gap: 10px; + } + + section { + display: flex; + flex-direction: column; + align-items: center; + padding-inline: 10px; + box-shadow: 5px 5px 15px 2px rgb(39, 34, 44); + } + + section h2, h3, p { + text-align: center; + } + + section p { + padding: 0; + } + + img { + max-width: 60%; + margin: 0; + } + + footer { + font-size: 1rem; + height: 75px; + } +} \ No newline at end of file diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 0000000..475003a --- /dev/null +++ b/portfolio.html @@ -0,0 +1,52 @@ + + + + + + Personal Website + + + +
+

Jaxx Mistry

+ +
+
+

Here are a few projects I’ve completed while learning web development.

+
+

Furniture Page

+ Furniture webpage +

A basic layout exercise using HTML and CSS.

+

This was a styling practice focused on spacing, alignment, and applying consistent typography.

+

What I practiced: CSS styling, page structure, layout basics.

+

Tech used: HTML, CSS

+ GitHub +
+
+

Bakery Page

+ Bakery webpage +

A responsive layout created using CSS Flexbox.

+

I built a mock website for a bakery to practice flex containers, alignment, and spacing.

+

What I practiced: Flexbox, responsive layout design.

+

Tech used: HTML, CSS

+ GitHub +
+
+

Dino Survey

+ Dino webpage +

A playful form for user input and submission.

+

This was a form-building exercise where I created input fields, radio buttons, dropdowns, checkboxes, and a submit button.

+

What I practiced: Form elements, accessibility, user input design.

+

Tech used: HTML, basic CSS

+ GitHub +
+
+ + + + \ No newline at end of file