Merging in the dev site (#2)

* sets up routing to dev, and dev container

creates:
-dev routing in browserrouter
-dev routing in nav bar
-dev container with "test"

* Starting to build the dev site

-bringing in headshot
-starting to style
-starting to put actual content on the dev page

* Adds resume downloading

Adds:
-resume pdf
-downloadable html tag for it

* trying to make the lists less ugly

is it working? who can say?

* cleaninggg

-adds rxgnosis image
-gets rid of the iframe of doom
-converts two gnarly lists into paragraphs

* centers h1 and h2 headings, adds one for blog and resume

* A bunch of dev site changes and some routing updates for art

-changes client side routing on art from "work" to "art" in App, Work, and Nav
- adds dev.to blog to social
-puts the blockquote back in as a placeholder and adds styling to it so dev site is consistent with homepage
-move some text around on dev site and add a bunch of icons for *ambiance*

* trying to make icons easier to look at

* replacing headshot, updating content

* Fixing content for blog, quote, styling, and manifest.json

also adds back in favicons

public/manifest.json

@@ -0,0 +1,20 @@
+{
+  "background_color": "#ffffff",
+  "theme_color": "#333333",
+  "name": "femmefaust.us",
+  "short_name": "femmefaut.us",
+  "display": "minimal-ui",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/favicon-16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    }
+  ]
+}

src/App.tsx

@@ -1,9 +1,10 @@
 import Home from "./pages/home";
+import Dev from "./pages/dev";
 import Nav from "./components/nav";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Social from "./components/social";
 import Contact from "./components/contact";
-import Work from "./pages/work";
+import Art from "./pages/work";
 import "./App.css";
 
 export default function App() {
@@ -15,7 +16,8 @@ export default function App() {
         <main>
           <Routes>
             <Route path="/" element={<Home />} />
-            <Route path="/work" element={<Work />} />
+            <Route path="/art" element={<Art />} />
+            <Route path="/dev" element={<Dev />} />
           </Routes>
         </main>
       </BrowserRouter>
@@ -41,4 +43,3 @@ export default function App() {
     </>
   );
 }
-

src/components/nav.tsx

@@ -11,11 +11,17 @@ export default function Nav() {
         home
       </NavLink>
       <NavLink
-        to="/work"
+        to="/art"
         className={({ isActive }) => (isActive ? $active : $link)}
       >
         art
       </NavLink>
+      <NavLink
+        to="/dev"
+        className={({ isActive }) => (isActive ? $active : $link)}
+      >
+        dev
+      </NavLink>
     </nav>
   );
 }

src/components/social.tsx

@@ -1,6 +1,7 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import {
+  faBlog,
   faEnvelope,
   faFileAlt,
   faUser,
@@ -26,7 +27,11 @@ const data: Link[] = [
     url: "https://github.com/Varlotte",
     icon: faGithub,
   },
-
+  {
+    name: "Dev Blog",
+    url: "https://dev.to/varlotte",
+    icon: faBlog,
+  },
   {
     name: "LinkedIn",
     url: "https://www.linkedin.com/in/charlottebush7/",

src/pages/dev.css.ts

@@ -0,0 +1,78 @@
+import { style } from "@vanilla-extract/css";
+
+export const $hcenter = style({
+  textAlign: "center",
+});
+
+export const $blurb = style({
+  "@media": {
+    "screen and (min-width: 768px)": {
+      display: "flex",
+      flexFlow: "row nowrap",
+      alignItems: "center",
+      justifyContent: "space-between",
+      margin: "40px auto",
+    },
+  },
+});
+
+export const $figure = style({
+  width: "100%",
+  //   maxWidth: "300px",
+  margin: "0 15px 0px",
+});
+
+export const $img = style({
+  width: "100%",
+  margin: "0",
+  maxWidth: "300px",
+});
+
+export const $figcaptions = style({
+  fontStyle: "italic",
+});
+
+export const $listholder = style({
+  display: "flex",
+  margin: "0",
+});
+
+export const $list = style({
+  display: "inline-block",
+  margin: "5px 0 0",
+  padding: "0 10% 0",
+  listStyleType: "circle",
+});
+
+export const $blockquote = style({
+  width: "100%",
+  maxWidth: "420px",
+  margin: "20px auto",
+  textAlign: "center",
+});
+
+export const $blockquotep = style({
+  display: "block",
+  margin: "0",
+  position: "relative",
+});
+
+export const $icon = style({
+  margin: "6px",
+});
+
+export const $listitem = style({
+  display: "inline-flex",
+  justifyContent: "center",
+});
+
+export const $blog = style({
+  display: "block",
+  justifyContent: "center",
+  padding: "10px 20px",
+  margin: "10px",
+  border: "1px solid",
+  boxShadow: "10px 10px 5px 0px rgba(0,0,0,0.75)",
+});
+
+export const $blockquotecite = style({ textAlign: "right" });