diff --git a/assets/index/skills/skills_data.py b/assets/asset_data.py similarity index 80% rename from assets/index/skills/skills_data.py rename to assets/asset_data.py index aeb52f0..bcdfa01 100644 --- a/assets/index/skills/skills_data.py +++ b/assets/asset_data.py @@ -1,5 +1,30 @@ from typing import NamedTuple +# Logo Paths +FOOTER_LOGO = "/shared/icon-inverted.png" +LINKEDIN_LOGO = "/shared/social_icons/linkedin.png" +MEDIUM_LOGO = "/shared/social_icons/medium.png" +GITHUB_LOGO = "/shared/social_icons/github.png" +EMAIL_LOGO = "/shared/social_icons/email.png" +NAVBAR_LOGO = "/shared/icon.png" + +# Social Media Links +GITHUB_URL = "https://github.com/jakepenzak" +CONTACT_URL = "mailto:jakepzak@gmail.com" +LINKEDIN_URL = "https://www.linkedin.com/in/japieniazek/" +MEDIUM_URL = "https://medium.com/@jakepenzak" + +# Article Links +FWL_URL = "https://towardsdatascience.com/controlling-for-x-9cb51652f7ad" +LOGISTIC_URL = "https://towardsdatascience.com/predictive-parameters-in-a-logistic-regression-making-sense-of-it-all-476bde9825f3" +NM1_URL = "https://towardsdatascience.com/optimization-newtons-method-profit-maximization-part-1-basic-optimization-theory-ff7c5f966565" +NM2_URL = "https://towardsdatascience.com/optimization-newtons-method-profit-maximization-part-2-constrained-optimization-theory-dc18613c5770" +NM3_URL = "https://towardsdatascience.com/optimization-newtons-method-profit-maximization-part-3-applied-profit-maximization-23a8c16167cd" +TSNE_URL = "https://towardsdatascience.com/t-sne-from-scratch-ft-numpy-172ee2a61df7" +DML1_URL = "https://towardsdatascience.com/double-machine-learning-simplified-part-1-basic-causal-inference-applications-3f7afc9852ee" +DML2_URL = "https://towardsdatascience.com/double-machine-learning-simplified-part-2-extensions-the-cate-99926151cac" + +# Index Page skills_data = [ { "subject": "Econometrics/Causal Inference", @@ -109,6 +134,10 @@ class LogoMeta(NamedTuple): asset_path="/index/skills/tech_logos/powerbi.png", link="https://powerbi.microsoft.com/en-us/", ), + "Delta Lake": LogoMeta( + asset_path="/index/skills/tech_logos/delta.png", + link="https://delta.io/", + ), } diff --git a/assets/index/skills/tech_logos/delta.png b/assets/index/skills/tech_logos/delta.png new file mode 100644 index 0000000..9dfe4a0 Binary files /dev/null and b/assets/index/skills/tech_logos/delta.png differ diff --git a/assets/index/skills/tech_logos/linux.png b/assets/index/skills/tech_logos/linux.png index 9d2bc96..a801d72 100644 Binary files a/assets/index/skills/tech_logos/linux.png and b/assets/index/skills/tech_logos/linux.png differ diff --git a/assets/index/skills/tech_logos/powerbi.png b/assets/index/skills/tech_logos/powerbi.png index 6d32afe..ecc0730 100644 Binary files a/assets/index/skills/tech_logos/powerbi.png and b/assets/index/skills/tech_logos/powerbi.png differ diff --git a/assets/shared/links.py b/assets/shared/links.py deleted file mode 100644 index 79a4924..0000000 --- a/assets/shared/links.py +++ /dev/null @@ -1,15 +0,0 @@ -# Social Media Links -GITHUB_URL = "https://github.com/jakepenzak" -CONTACT_URL = "mailto:jakepzak@gmail.com" -LINKEDIN_URL = "https://www.linkedin.com/in/japieniazek/" -MEDIUM_URL = "https://medium.com/@jakepenzak" - -# Article Links -FWL_URL = "https://towardsdatascience.com/controlling-for-x-9cb51652f7ad" -LOGISTIC_URL = "https://towardsdatascience.com/predictive-parameters-in-a-logistic-regression-making-sense-of-it-all-476bde9825f3" -NM1_URL = "https://towardsdatascience.com/optimization-newtons-method-profit-maximization-part-1-basic-optimization-theory-ff7c5f966565" -NM2_URL = "https://towardsdatascience.com/optimization-newtons-method-profit-maximization-part-2-constrained-optimization-theory-dc18613c5770" -NM3_URL = "https://towardsdatascience.com/optimization-newtons-method-profit-maximization-part-3-applied-profit-maximization-23a8c16167cd" -TSNE_URL = "https://towardsdatascience.com/t-sne-from-scratch-ft-numpy-172ee2a61df7" -DML1_URL = "https://towardsdatascience.com/double-machine-learning-simplified-part-1-basic-causal-inference-applications-3f7afc9852ee" -DML2_URL = "https://towardsdatascience.com/double-machine-learning-simplified-part-2-extensions-the-cate-99926151cac" diff --git a/personal_website/__init__.py b/personal_website/__init__.py index e1d2863..e69de29 100644 --- a/personal_website/__init__.py +++ b/personal_website/__init__.py @@ -1 +0,0 @@ -"""Base template for Reflex.""" diff --git a/personal_website/components/footer.py b/personal_website/components/footer.py index 6dd68ad..b8ab7b8 100644 --- a/personal_website/components/footer.py +++ b/personal_website/components/footer.py @@ -1,55 +1,40 @@ import reflex as rx -from assets.shared import links +from assets import asset_data from personal_website.styles import FOOTER -FOOTER_LOGO = "/shared/icon-inverted.png" -LINKEDIN_LOGO = "/shared/social_icons/linkedin.png" -MEDIUM_LOGO = "/shared/social_icons/medium.png" -GITHUB_LOGO = "/shared/social_icons/github.png" -EMAIL_LOGO = "/shared/social_icons/email.png" - -def footer_logo(**style_props): - """Create a Reflex logo component. - - Args: - style_props: The style properties to apply to the component. +def footer() -> rx.Component: """ - return rx.chakra.link( - rx.chakra.image( - src=FOOTER_LOGO, - **style_props, - ), - href="/", - ) - + Creates a footer component with links to social media profiles and contact information. -def footer(): - return rx.chakra.box( + Returns: + rx.Component: The footer component. + """ + footer = rx.chakra.box( rx.chakra.hstack( rx.chakra.hstack( rx.chakra.link( - rx.chakra.image(src=LINKEDIN_LOGO, height="3em"), - href=links.LINKEDIN_URL, + rx.chakra.image(src=asset_data.LINKEDIN_LOGO, height="3em"), + href=asset_data.LINKEDIN_URL, style=FOOTER["FOOTER_ITEM_STYLE"], is_external=True, ), rx.chakra.link( - rx.chakra.image(src=MEDIUM_LOGO, height="3em"), - href=links.MEDIUM_URL, + rx.chakra.image(src=asset_data.MEDIUM_LOGO, height="3em"), + href=asset_data.MEDIUM_URL, style=FOOTER["FOOTER_ITEM_STYLE"], is_external=True, ), rx.chakra.link( - rx.chakra.image(src=GITHUB_LOGO, height="3em"), - href=links.GITHUB_URL, + rx.chakra.image(src=asset_data.GITHUB_LOGO, height="3em"), + href=asset_data.GITHUB_URL, style=FOOTER["FOOTER_ITEM_STYLE"], is_external=True, ), rx.chakra.link( - rx.chakra.image(src=EMAIL_LOGO, height="3em"), - href=links.CONTACT_URL, + rx.chakra.image(src=asset_data.EMAIL_LOGO, height="3em"), + href=asset_data.CONTACT_URL, style=FOOTER["FOOTER_ITEM_STYLE"], ), ), @@ -61,3 +46,24 @@ def footer(): ), **FOOTER["FOOTER_STYLE"], ) + + return footer + + +def footer_logo(**style_props) -> rx.Component: + """ + Create a Reflex logo component. + + Args: + style_props: The style properties to apply to the component. + + Returns: + rx.Component: The logo component. + """ + return rx.chakra.link( + rx.chakra.image( + src=asset_data.FOOTER_LOGO, + **style_props, + ), + href="/", + ) diff --git a/personal_website/components/navbar.py b/personal_website/components/navbar.py index 0129ba7..b80d5f4 100644 --- a/personal_website/components/navbar.py +++ b/personal_website/components/navbar.py @@ -1,67 +1,18 @@ import reflex as rx from personal_website.styles import NAVBAR +from assets import asset_data -NAVBAR_LOGO = "/shared/icon.png" - -def navbar_logo(**style_props): - """Create a Reflex logo component. - - Args: - style_props: The style properties to apply to the component. +def navbar() -> rx.Component: """ - return rx.chakra.link( - rx.chakra.image( - src=NAVBAR_LOGO, - **style_props, - ), - href="/", - ) - - -## For mobile & when screen is small -pages = ["Articles", "Resume", "Research", "Projects"] - - -def menu_button() -> rx.Component: - """The menu button on the top right of the page. + Create the navbar component. Returns: - The menu button component. + rx.Component: The created navbar component. """ - return rx.chakra.box( - rx.chakra.menu( - rx.chakra.menu_button( - rx.chakra.icon(tag="hamburger", size="4em"), - ), - rx.chakra.menu_list( - *[ - rx.chakra.menu_item( - rx.chakra.link( - page, - href=f"/{page.lower()}", - width="100%", - ) - ) - for page in pages - ], - ), - ), - display=["flex", "flex", "flex", "flex", "none", "none"], - ) - - -def navbar(sidebar: rx.Component = None) -> rx.Component: - """Create the navbar component. - - Args: - sidebar: The sidebar component to use. - """ - - # Create the navbar component. - return rx.chakra.vstack( + navbar = rx.chakra.vstack( rx.chakra.box( rx.chakra.hstack( navbar_logo(**NAVBAR["NAVBAR_LOGO_STYLE"]), @@ -124,3 +75,59 @@ def navbar(sidebar: rx.Component = None) -> rx.Component: top="0", z_index="999", ) + + return navbar + + +def navbar_logo(**style_props) -> rx.Component: + """ + Create a Reflex logo component. + + Args: + style_props: The style properties to apply to the component. + + Returns: + rx.Component: The logo component. + """ + navbar_logo = rx.chakra.link( + rx.chakra.image( + src=asset_data.NAVBAR_LOGO, + **style_props, + ), + href="/", + ) + + return navbar_logo + + +## For mobile & when screen is small +def menu_button() -> rx.Component: + """The menu button on the top right of the page. + + Returns: + rx.Component: The menu button component. + """ + pages = ["Articles", "Resume", "Research", "Projects"] + + menu_button = rx.chakra.box( + rx.chakra.menu( + rx.chakra.menu_button( + rx.chakra.icon(tag="hamburger", size="4em"), + ), + rx.chakra.menu_list( + *[ + rx.chakra.menu_item( + rx.chakra.link( + page, + href=f"/{page.lower()}", + width="100%", + ) + ) + for page in pages + ], + ), + ), + display=["flex", "flex", "flex", "flex", "none", "none"], + ) + + return menu_button diff --git a/personal_website/components/spline.py b/personal_website/components/spline.py index fb05882..b29ab5f 100644 --- a/personal_website/components/spline.py +++ b/personal_website/components/spline.py @@ -17,7 +17,13 @@ class Spline_Index(rx.Component): spline_index = Spline_Index.create -def spline_component_index_page(): +def spline_component_index_page() -> rx.Component: + """ + Returns a Chakra UI component for the index page of the spline component. + + Returns: + rx.Component: The Chakra UI component for the index page. + """ return rx.chakra.center( rx.chakra.center( spline_index(), diff --git a/personal_website/pages/articles.py b/personal_website/pages/articles.py index 02dfa04..f40ef20 100644 --- a/personal_website/pages/articles.py +++ b/personal_website/pages/articles.py @@ -1,19 +1,11 @@ """The articles page.""" - import reflex as rx -from assets.shared import links +from assets import asset_data from personal_website.styles import ARTICLES_PAGE from personal_website.templates import template from personal_website.utilities.markdown import read_markdown - - -def container(*children, **kwargs): - kwargs = {"max_width": "1440px", "padding_x": ["1em", "2em", "3em"], **kwargs} - return rx.chakra.container( - *children, - **kwargs, - ) +from personal_website.utilities.container import container ## Articles Header @@ -104,7 +96,7 @@ def body(): padding_x="3em", padding_bottom="3em", ), - href=links.FWL_URL, + href=asset_data.FWL_URL, is_external=True, ) @@ -129,7 +121,7 @@ def body(): padding_x="3em", padding_bottom="3em", ), - href=links.LOGISTIC_URL, + href=asset_data.LOGISTIC_URL, is_external=True, ) @@ -154,7 +146,7 @@ def body(): padding_x="3em", padding_bottom="3em", ), - href=links.NM1_URL, + href=asset_data.NM1_URL, is_external=True, ) @@ -179,7 +171,7 @@ def body(): # padding_x="3em", MIDDLE COLUMN padding_bottom="3em", ), - href=links.NM2_URL, + href=asset_data.NM2_URL, is_external=True, ) @@ -204,7 +196,7 @@ def body(): padding_x="3em", padding_bottom="3em", ), - href=links.NM3_URL, + href=asset_data.NM3_URL, is_external=True, ) @@ -229,7 +221,7 @@ def body(): padding_x="3em", padding_bottom="3em", ), - href=links.TSNE_URL, + href=asset_data.TSNE_URL, is_external=True, ) @@ -254,7 +246,7 @@ def body(): # padding_x="3em", MIDDLE COLUMN padding_bottom="3em", ), - href=links.DML1_URL, + href=asset_data.DML1_URL, is_external=True, ) @@ -279,7 +271,7 @@ def body(): padding_x="3em", padding_bottom="3em", ), - href=links.DML2_URL, + href=asset_data.DML2_URL, is_external=True, ) diff --git a/personal_website/pages/index.py b/personal_website/pages/index.py index 8367683..b2983c7 100644 --- a/personal_website/pages/index.py +++ b/personal_website/pages/index.py @@ -1,35 +1,63 @@ -"""The home page of the app.""" - +"""The home page of the website.""" import reflex as rx - +from typing import Tuple from personal_website.components.spline import spline_component_index_page from personal_website.styles import INDEX_PAGE from personal_website.templates import template from personal_website.utilities.markdown import read_markdown -from assets.index.skills.skills_data import ( +from assets.asset_data import ( skills_data, tech_logos_dict, library_logos_dict, ) +from personal_website.utilities.container import container + + +# Create the Home page +@template(route="/", title="Home") +def index() -> rx.Component: + """The home page. + Returns: + rx.Component: The UI for the home page. + """ -def container(*children, **kwargs): - kwargs = {"max_width": "1440px", "padding_x": ["1em", "2em", "3em"], **kwargs} - return rx.chakra.container( - *children, - **kwargs, + return rx.box( + header(), + intro(), + skillsets_section(), + width="100%", + max_width="100%", + overflow_x="hidden", + **INDEX_PAGE["INDEX_PAGE_STYLE"], ) -def image_link(src, href): +## Helper functions +def image_link(src: str, href: str) -> rx.Component: + """ + Creates a link with an image. + + Args: + src (str): The source URL of the image. + href (str): The URL that the link should navigate to. + + Returns: + rx.Component: The link component with the specified image source and target URL. + """ return rx.link(rx.image(src=src), href=href, target="_blank") -## Header +## Header Section def header() -> rx.Component: - """The header section of the home page.""" + """ + The header section of the home page. - heading = container( + Returns: + rx.Component: The header component. + """ + + header = container( rx.chakra.hstack( rx.chakra.center( rx.chakra.heading( @@ -61,12 +89,17 @@ def header() -> rx.Component: **INDEX_PAGE["HEADER_CONTAINER_STYLE"], ) - return heading + return header -## Introduction +## Introduction Section def intro() -> rx.Component: - """The introduction section of the home page.""" + """ + The introduction section of the home page. + + Returns: + rx.Component: The rendered introduction section. + """ welcome = rx.chakra.heading( """ @@ -116,7 +149,18 @@ def intro() -> rx.Component: return intro +## Skillsets Section def skillsets_section() -> rx.Component: + """ + Returns a component representing the skillsets section of the personal website. + + This section includes a heading, a radar chart displaying skill ratings, + a section for libraries, and a section for the tech stack. The layout of + the sections is responsive, adapting to different screen sizes. + + Returns: + rx.Component: The skillsets section component. + """ header = rx.heading( """ Skillsets @@ -143,7 +187,56 @@ def skillsets_section() -> rx.Component: height="50vh", ) - libraries_heading = rx.heading( + ( + libraries_header, + libraries_intro, + libraries_grid, + libraries, + ) = create_libraries_section() + + stack_header, stack_intro, stack_grid, tech_stack = create_tech_stack_section() + + # Used for mobile and tablet view + skills_tabs = create_skills_tabs( + **{ + "libraries_intro": libraries_intro, + "libraries_grid": libraries_grid, + "stack_intro": stack_intro, + "stack_grid": stack_grid, + } + ) + + skill_section = rx.box( + rx.container(**INDEX_PAGE["SKILLS_CONTAINER_STYLE"]), + rx.vstack( + header, + skills_radar, + rx.hstack( + libraries, + tech_stack, + padding_x="3em", + width="100%", + ), + display=["none", "none", "none", "flex", "flex", "flex"], + ), + rx.vstack( + header, + skills_tabs, + display=["flex", "flex", "flex", "none", "none", "none"], + ), + ) + + return skill_section + + +def create_libraries_section() -> Tuple[rx.Component]: + """ + Creates a section for displaying Python libraries. + + Returns: + Tuple[rx.Component]: A tuple containing the header, intro, grid, and the entire libraries section. + """ + libraries_header = rx.heading( """ Python Libraries """, @@ -173,7 +266,7 @@ def skillsets_section() -> rx.Component: libraries = rx.center( rx.vstack( - libraries_heading, + libraries_header, libraries_intro, libraries_grid, ), @@ -181,7 +274,17 @@ def skillsets_section() -> rx.Component: width="100%", ) - stack_heading = rx.heading( + return libraries_header, libraries_intro, libraries_grid, libraries + + +def create_tech_stack_section() -> Tuple[rx.Component]: + """ + Create a section displaying the tech stack and tools used. + + Returns: + Tuple[rx.Component]: A tuple containing the components of the tech stack section. + """ + stack_header = rx.heading( """ Tech Stack & Tools """, @@ -210,7 +313,7 @@ def skillsets_section() -> rx.Component: tech_stack = rx.center( rx.vstack( - stack_heading, + stack_header, stack_intro, stack_grid, ), @@ -218,12 +321,24 @@ def skillsets_section() -> rx.Component: width="100%", ) - stack = rx.hstack( - libraries, - tech_stack, - padding_x="3em", - width="100%", - ) + return stack_header, stack_intro, stack_grid, tech_stack + + +def create_skills_tabs(**kwargs) -> rx.Component: + """ + Creates a tabbed component for displaying skills, Python libraries, and tech stack. + + Args: + **kwargs: Additional keyword arguments to pass to the tabbed component. + + Returns: + rx.Component: The tabbed component for displaying skills, Python libraries, and tech stack. + """ + + libraries_intro = kwargs.get("libraries_intro") + libraries_grid = kwargs.get("libraries_grid") + stack_intro = kwargs.get("stack_intro") + stack_grid = kwargs.get("stack_grid") ## Used for mobile and tablet view skills_list = rx.unordered_list( @@ -260,38 +375,4 @@ def skillsets_section() -> rx.Component: width="100%", ) - skill_section = rx.box( - rx.container(**INDEX_PAGE["SKILLS_CONTAINER_STYLE"]), - rx.vstack( - header, - skills_radar, - stack, - display=["none", "none", "none", "flex", "flex", "flex"], - ), - rx.vstack( - header, - skills_tabs, - display=["flex", "flex", "flex", "none", "none", "none"], - ), - ) - - return skill_section - - -@template(route="/", title="Home") -def index() -> rx.Component: - """The home page. - - Returns: - The UI for the home page. - """ - - return rx.box( - header(), - intro(), - skillsets_section(), - width="100%", - max_width="100%", - overflow_x="hidden", - **INDEX_PAGE["INDEX_PAGE_STYLE"], - ) + return skills_tabs diff --git a/personal_website/pages/projects.py b/personal_website/pages/projects.py index b43bd49..fb3f163 100644 --- a/personal_website/pages/projects.py +++ b/personal_website/pages/projects.py @@ -1,20 +1,41 @@ """The projects page.""" - import reflex as rx from personal_website.styles import PROJECTS_PAGE from personal_website.templates import template +from personal_website.utilities.container import container -def container(*children, **kwargs): - kwargs = {"max_width": "1440px", "padding_x": ["1em", "2em", "3em"], **kwargs} - return rx.chakra.container( - *children, - **kwargs, +# Create the projects page +@template(route="/projects", title="Projects") +def projects() -> rx.Component: + """ + The projects page. + + Returns: + rx.Component: The UI for the projects page. + """ + return rx.chakra.vstack( + header(), + rx.chakra.divider(width="80vh"), + rx.chakra.text( + "Under construction...", + font_size="flex", + padding_y="2em", + font_family="Hack", + text_align="center", + width="100%", + ), + rx.chakra.center(rx.chakra.image(src="/shared/website_bar.png", width="100%")), + position="relative", + min_height="80vh", + width="100%", + max_width="100%", + overflow_x="hidden", ) -## Projects Page Heading +## Header Section def header(): heading = rx.chakra.heading( "Projects", @@ -41,30 +62,3 @@ def header(): ) return header - - -@template(route="/projects", title="Projects") -def projects() -> rx.Component: - """The projects page. - - Returns: - The UI for the projects page. - """ - return rx.chakra.vstack( - header(), - rx.chakra.divider(width="80vh"), - rx.chakra.text( - "Under construction...", - font_size="flex", - padding_y="2em", - font_family="Hack", - text_align="center", - width="100%", - ), - rx.chakra.center(rx.chakra.image(src="/shared/website_bar.png", width="100%")), - position="relative", - min_height="80vh", - width="100%", - max_width="100%", - overflow_x="hidden", - ) diff --git a/personal_website/pages/research.py b/personal_website/pages/research.py index 7990601..5ab2244 100644 --- a/personal_website/pages/research.py +++ b/personal_website/pages/research.py @@ -4,20 +4,43 @@ from personal_website.styles import RESEARCH_PAGE from personal_website.templates import template from personal_website.utilities.markdown import read_markdown +from personal_website.utilities.container import container -def container(*children, **kwargs): - kwargs = {"max_width": "1440px", "padding_x": ["1em", "2em", "3em"], **kwargs} - return rx.chakra.container( - *children, - **kwargs, +# Create the research page +@template(route="/research", title="Research") +def research() -> rx.Component: + """The research page. + + Returns: + rx.Component: The UI for the research page. + """ + return rx.chakra.vstack( + header(), + rx.chakra.divider(width="80vh"), + body(), + rx.chakra.box( + rx.chakra.center( + rx.chakra.image(src="/shared/website_bar.png", width="100%") + ), + padding_top="5em", + ), + position="relative", + min_height="80vh", + width="100%", + max_width="100%", + overflow_x="hidden", ) -## Research Header -def heading(): - """The heading section of the resume page.""" +## Header Section +def header() -> rx.Component: + """ + Returns the heading component for the research page. + Returns: + rx.Component: The heading component. + """ heading = rx.chakra.heading( """ Research @@ -49,10 +72,14 @@ def heading(): return header -## Research Body -def body(): - """The body section of the articles page.""" +## Body Section +def body() -> rx.Component: + """ + Returns the body component for the research page. + Returns: + rx.Component: The body component. + """ p1 = rx.chakra.link( read_markdown("assets/research/thesis.md"), href="/research/thesis.pdf", @@ -69,28 +96,3 @@ def body(): ) return body - - -@template(route="/research", title="Research") -def research() -> rx.Component: - """The research page. - - Returns: - The UI for the research page. - """ - return rx.chakra.vstack( - heading(), - rx.chakra.divider(width="80vh"), - body(), - rx.chakra.box( - rx.chakra.center( - rx.chakra.image(src="/shared/website_bar.png", width="100%") - ), - padding_top="5em", - ), - position="relative", - min_height="80vh", - width="100%", - max_width="100%", - overflow_x="hidden", - ) diff --git a/personal_website/pages/resume.py b/personal_website/pages/resume.py index f1d83e1..8b09be0 100644 --- a/personal_website/pages/resume.py +++ b/personal_website/pages/resume.py @@ -3,18 +3,31 @@ from personal_website.styles import RESUME_PAGE from personal_website.templates import template +from personal_website.utilities.container import container -def container(*children, **kwargs): - kwargs = {"max_width": "1440px", "padding_x": ["1em", "2em", "3em"], **kwargs} - return rx.chakra.container( - *children, - **kwargs, +# Create the resume page +@template(route="/resume", title="Professional Resume") +def resume() -> rx.Component: + """The resume page. + + Returns: + rx.Component: The UI for the resume page. + """ + return rx.chakra.vstack( + heading(), + rx.chakra.divider(width="80vh"), + body(), + position="relative", + min_height="80vh", + width="100%", + max_width="100%", + overflow_x="hidden", ) -## Resume Page Heading -def heading(): +## Header Section +def heading() -> rx.Component: """The heading section of the resume page.""" heading = rx.chakra.heading( @@ -70,22 +83,3 @@ def body(): ) return resume - - -@template(route="/resume", title="Professional Resume") -def resume() -> rx.Component: - """The resume page. - - Returns: - The UI for the resume page. - """ - return rx.chakra.vstack( - heading(), - rx.chakra.divider(width="80vh"), - body(), - position="relative", - min_height="80vh", - width="100%", - max_width="100%", - overflow_x="hidden", - ) diff --git a/personal_website/personal_website.py b/personal_website/personal_website.py index 712beb5..ae9b3a6 100644 --- a/personal_website/personal_website.py +++ b/personal_website/personal_website.py @@ -1,5 +1,3 @@ -"""Welcome to Reflex!.""" - import reflex as rx from personal_website import styles diff --git a/personal_website/utilities/container.py b/personal_website/utilities/container.py new file mode 100644 index 0000000..94f058a --- /dev/null +++ b/personal_website/utilities/container.py @@ -0,0 +1,19 @@ +import reflex as rx + + +def container(*children, **kwargs) -> rx.Component: + """ + A function that creates a container component with optional customizations. + + Args: + *children: Variable-length argument list of child components. + **kwargs: Keyword arguments for customizing the container component. + + Returns: + rx.Component: An instance of the container component. + """ + kwargs = {"max_width": "1440px", "padding_x": ["1em", "2em", "3em"], **kwargs} + return rx.chakra.container( + *children, + **kwargs, + )