content

src/web/web/components/navbar.py

@@ -2,14 +2,15 @@ import reflex as rx
 from web.state import *
 from web.style import *
 
+
 def navbar():
     return rx.box(
         rx.center(
             rx.flex(
-                rx.link("About", href="/about")
+                rx.link("Home", href="/")
             ),
             rx.flex(
-                rx.link("Projects", href="/projects")
+                rx.link("Projects", href="/projects"),
             ),
             rx.flex(
                 rx.link("Resume", href="/resume")
@@ -23,3 +24,4 @@ def navbar():
             spacing="7",
         )
     )
+

src/web/web/pages/__init__.py

@@ -1,7 +1,10 @@
 from web.route import Route
 
 from .index import index
-from .about import about
+from .projects import projects
+from .resume import resume
+from .blog import blog
+from .shop import shop
 from .page404 import page404
 
 routes = [

src/web/web/pages/about.py

@@ -1,14 +0,0 @@
-import reflex as rx
-from web.templates import webpage
-
-@webpage(path="/about", title="About")
-def about():
-    return rx.box(
-        rx.center(
-            rx.vstack(
-                rx.heading("About", sixe="9"),
-                align="center"
-            ),
-            height="100vh",
-        )
-    )

src/web/web/pages/blog.py

@@ -0,0 +1,20 @@
+import reflex as rx
+from web.templates import webpage
+
+@webpage(path="/blog", title="Blog")
+def blog():
+    return rx.box(
+        blog_content()
+    )
+
+def blog_content():
+    return rx.center(
+        rx.vstack(
+            rx.heading("Blog", size="9"),
+            align="center",
+            spacing="7",
+        ),
+        height="100vh"
+    )
+
+

src/web/web/pages/index.py

@@ -1,6 +1,7 @@
 import reflex as rx
 from web.components import navbar
 from web.templates import webpage
+from web.motion import motion
 
 @webpage(path="/", title="Timothy Pidashev")
 def index() -> rx.Component:
@@ -10,10 +11,15 @@ def index() -> rx.Component:
 
 def index_content():
     return rx.center(
-        rx.vstack(
-            rx.heading("Index", size="9"),
+        rx.vstack(  # Using stack instead of vstack for scrollability
+            motion(  # Wrap the text with motion to apply animation
+                rx.heading("Hello, my name is Timothy Pidashev.", size="9"),
+                initial={"opacity": 0, "y": 50},  # Initial styles (hidden and moved down)
+                animate={"opacity": 1, "y": 0},  # Animation styles (fade in and move up)
+                transition={"type": "tween", "duration": 1, "delay": 0.5},  # Animation transition (smooth transition)
+            ),
             align="center",
-            spacing="7",
+            overflow="auto",  # Enable scrolling
         ),
         height="100vh"
     )

src/web/web/pages/projects.py

@@ -0,0 +1,18 @@
+import reflex as rx
+from web.templates import webpage
+
+@webpage(path="/projects", title="Projects")
+def projects():
+    return rx.box(
+        projects_content()
+    )
+
+def projects_content():
+    return rx.center(
+        rx.vstack(
+            rx.heading("Projects", size="9"),
+            align="center",
+            spacing="7",
+        ),
+        height="100vh"
+    )

src/web/web/pages/resume.py

@@ -0,0 +1,18 @@
+import reflex as rx
+from web.templates import webpage
+
+@webpage(path="/resume", title="Resume")
+def resume():
+    return rx.box(
+        resume_content()
+    )
+
+def resume_content():
+    return rx.center(
+        rx.vstack(
+            rx.heading("Resume", size="9"),
+            align="center",
+            spacing="7",
+        ),
+        height="100vh"
+    )

src/web/web/pages/shop.py

@@ -0,0 +1,20 @@
+import reflex as rx
+from web.templates import webpage
+
+@webpage(path="/shop", title="Shop")
+def shop():
+    return rx.box(
+        shop_content()
+    )
+
+def shop_content():
+    return rx.center(
+        rx.vstack(
+            rx.heading("Shop", size="9"),
+            align="center",
+            spacing="7",
+        ),
+        height="100vh"
+    )
+
+