What I Do
@@ -21,15 +24,17 @@ export default function AboutMe() {Web Design Consulting
-I consult on small teams at Metazu Studio, a Nashville-based startup connecting clients with services in video production, AR/VR, social media, photography, and web design.
+I consult on small teams at Metazu Studio, a Nashville-based startup connecting clients with services in video production, AR/VR, social media, photography, and web design.
I have worked on projects focused on full stack web engineering, real time communications, and designing beautiful user experiences.
Creative minded problem solver
-My rich creative background as a musician, composer, producer, - and artistic collaborator provide me with a unique frame of reference for - solving technical problems and adapting to dynamic environments.
++ My background as a musician, composer, producer, and artistic + collaborator provide me with a unique frame of reference for solving technical + problems and adapting to dynamic environments. +
@@ -32,9 +36,19 @@ export default function CreativeWorks() {
- 
+
diff --git a/src/pages/Links.jsx b/src/pages/Links.jsx
index 9ff4c24..51dd3a2 100644
--- a/src/pages/Links.jsx
+++ b/src/pages/Links.jsx
@@ -10,7 +10,7 @@ const { htmlTheme } = DocumentStyle;
export default function Links() {
return (
If you're interested, you can find some samples of my music at the links below:
+
+
+ 
+ My SoundCloud
+
+
+ 
+ My Bandcamp
+
+
-
diff --git a/src/pages/Technologies.jsx b/src/pages/Technologies.jsx
index 982869a..9b2e853 100644
--- a/src/pages/Technologies.jsx
+++ b/src/pages/Technologies.jsx
@@ -9,6 +9,7 @@ const { htmlTheme } = DocumentStyle;
export default function Technologies() {
return (
Find more about my work at the links below!
+Connect with me and get a closer look at my work!
+ * {
- width: 100%;
- }
-
-
- }
- }
- // mobile queries
- @media only screen and (max-width: 600px) {
- .app-navbar {
- background-color: orange;
- .navbar-left {
- width: 80vw;
- }
- .navbar-right {
- width: 20vw;
- }
- a, h2 {
- font-weight: 600;
- font-size: 1.25rem;
- }
- }
- }
+ @extend %tablet-queries;
+ @extend %mobile-queries;
}
\ No newline at end of file
diff --git a/src/sass/helper/_queries.scss b/src/sass/helper/_queries.scss
new file mode 100644
index 0000000..4244efa
--- /dev/null
+++ b/src/sass/helper/_queries.scss
@@ -0,0 +1,88 @@
+// tablet queries
+
+%tablet-queries {
+ @media only screen and (max-width: 1050px) {
+ .welcome-page {
+ #header-card {
+ padding: 0.7rem;
+ h3 {
+ font-size: 1.2rem;
+ }
+ h4 {
+ font-size: 1rem;
+ }
+ }
+ }
+
+ .about-me-page {
+ height: auto;
+ .about-gallery {
+ margin-top: 0;
+ width: 90vw;
+ height: 100%;
+ flex-flow: column nowrap;
+ align-items: center;
+ .fade {
+ width: 400px;
+ height: 300px;
+ overflow-y: scroll;
+ }
+ }
+ }
+
+ .projects-page {
+ .filter-panel {
+ margin-bottom: 2rem;
+ width: 65%;
+ }
+ }
+
+ .technologies-page {
+ .main-topic {
+ width: 70vw;
+ }
+ }
+
+ .creative-works-page {
+ > * {
+ width: 100%;
+ }
+
+ .cw-gallery img {
+ max-width: 45%;
+ }
+
+ .cw-examples {
+ .examples-left {
+ width: 40vw;
+ }
+ .examples-right {
+ margin-right: 1rem;
+ h2 {
+ padding: 1rem;
+ }
+ width: 50vw;
+ }
+ }
+ }
+ }
+}
+
+%mobile-queries {
+ // mobile queries
+ @media only screen and (max-width: 600px) {
+ .app-navbar {
+ background-color: orange;
+ .navbar-left {
+ width: 80vw;
+ }
+ .navbar-right {
+ width: 20vw;
+ }
+ a, h2 {
+ font-weight: 600;
+ font-size: 1.25rem;
+ }
+ }
+ }
+}
diff --git a/src/sass/pages/AboutMe.scss b/src/sass/pages/AboutMe.scss
index 0843dff..65df214 100644
--- a/src/sass/pages/AboutMe.scss
+++ b/src/sass/pages/AboutMe.scss
@@ -11,7 +11,6 @@
color: white;
border-radius: 12px;
transition: color 0.3s linear;
- text-decoration: none;
&:hover {
color: $purple200;
transition: color 0.3s linear;
diff --git a/src/sass/pages/CreativeWorks.scss b/src/sass/pages/CreativeWorks.scss
index c28d68c..a2cd15a 100644
--- a/src/sass/pages/CreativeWorks.scss
+++ b/src/sass/pages/CreativeWorks.scss
@@ -41,6 +41,9 @@
justify-content: flex-end;
text-align: right;
margin: 0 2rem 3rem 0;
+ p {
+ background-color: rgb(200, 219, 225);
+ }
}
.cw-experiences {
@@ -51,8 +54,33 @@
.cw-examples {
display: flex;
- img {
+ .examples-left {
max-width: 35vw;
}
+ .examples-right {
+ display: flex;
+ min-width: 65vw;
+ flex-flow: column nowrap;
+ align-items: center;
+ .sources {
+ display: inline-flex;
+ flex-flow: row nowrap;
+ justify-content: space-around;
+ width: 100%;
+ > * {
+ display: inline-flex;
+ flex-flow: column nowrap;
+ width: 40%;
+ height: 15rem;
+ align-items: center;
+ justify-content: center;
+ img {
+ width: 100px;
+ height: 100px;
+ margin-bottom: 1rem;
+ }
+ }
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/sass/pages/Technologies.scss b/src/sass/pages/Technologies.scss
index 353e963..4e587ea 100644
--- a/src/sass/pages/Technologies.scss
+++ b/src/sass/pages/Technologies.scss
@@ -4,6 +4,10 @@
@import "../components/Button";
.technologies-page {
+ .tech-title {
+ font-size: 1.4rem;
+ font-weight: bold;
+ }
.main-topic {
display: flex;
flex-direction: column;
These are some of my most frequently used skills and technologies:
{techList.map(item => { return (