Initial commit

.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

.prettierrc

@@ -0,0 +1,14 @@
+{
+    "printWidth": 160,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "tabWidth": 4,
+    "overrides": [
+        {
+            "files": ["*.md", "*.mdx", "*.yaml"],
+            "options": {
+                "tabWidth": 2
+            }
+        }
+    ]
+}

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,27 @@
+{
+    "editor.tabSize": 4,
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit"
+    },
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+    },
+    "[yaml]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.tabSize": 2
+    },
+    "[toml]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.tabSize": 2
+    },
+    "[markdown]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.tabSize": 2
+    },
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "files.associations": {
+        "*.css": "tailwindcss",
+    }
+}

LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

README.md

@@ -0,0 +1,92 @@
+# Dante - Astro & Tailwind CSS Theme by justgoodui.com
+
+Dante is a single-author blog and portfolio theme for Astro.js. Featuring a minimal, slick, responsive and content-focused design. For more Astro.js themes please check [justgoodui.com](https://justgoodui.com/).
+
+![Dante Astro.js Theme](public/dante-preview.jpg)
+
+[![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/JustGoodUI/dante-astro-theme)
+
+If you click this☝️ button, it will create a new repo for you that looks exactly like this one, and sets that repo up immediately for deployment on Netlify.
+
+## Theme Features:
+
+- ✅ Dark and light color mode
+- ✅ Hero section with bio
+- ✅ Portfolio collection
+- ✅ Pagination support
+- ✅ Post tags support
+- ✅ Subscription form
+- ✅ View transitions
+- ✅ Tailwind CSS
+- ✅ Mobile-first responsive layout
+- ✅ SEO-friendly with canonical URLs and OpenGraph data
+- ✅ Sitemap support
+- ✅ RSS Feed support
+- ✅ Markdown & MDX support
+
+## Template Integrations
+
+- @astrojs/tailwind - https://docs.astro.build/en/guides/integrations-guide/tailwind/
+- @astrojs/sitemap - https://docs.astro.build/en/guides/integrations-guide/sitemap/
+- @astrojs/mdx - https://docs.astro.build/en/guides/markdown-content/
+- @astrojs/rss - https://docs.astro.build/en/guides/rss/
+
+## Project Structure
+
+Inside of Dante Astro theme, you'll see the following folders and files:
+
+```text
+├── public/
+├── src/
+│   ├── components/
+│   ├── content/
+│   ├── data/
+│   ├── icons/
+│   ├── layouts/
+│   ├── pages/
+│   ├── styles/
+│   └── utils/
+├── astro.config.mjs
+├── package.json
+├── README.md
+├── tailwind.config.cjs
+└── tsconfig.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro (`.astro`) components.
+
+The `src/content/` directory contains "collections" of related Markdown and MDX documents. Use `getCollection()` to retrieve posts from `src/content/blog/`, and type-check your frontmatter using an optional schema. See [Astro's Content Collections docs](https://docs.astro.build/en/guides/content-collections/) to learn more.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## Astro.js Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## Want to learn more about Astro.js?
+
+Check out [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+
+## Credits
+
+- Demo content generate with [Chat GPT](https://chat.openai.com/)
+- Images for demo content from [Unsplash](https://unsplash.com/)
+
+## Astro Themes by Just Good UI
+
+- [Ovidius](https://github.com/JustGoodUI/ovidius-astro-theme) is a free single author blog theme.
+
+## License
+
+Licensed under the [GPL-3.0](https://github.com/JustGoodUI/dante-astro-theme/blob/main/LICENSE) license.

astro.config.mjs

@@ -0,0 +1,16 @@
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import sitemap from '@astrojs/sitemap';
+import tailwind from '@astrojs/tailwind';
+
+// https://astro.build/config
+export default defineConfig({
+    site: 'https://example.com',
+    integrations: [
+        mdx(),
+        sitemap(),
+        tailwind({
+            applyBaseStyles: false
+        })
+    ]
+});

package.json

@@ -0,0 +1,28 @@
+{
+    "name": "dante-astro-theme",
+    "type": "module",
+    "version": "0.1.0",
+    "scripts": {
+        "dev": "astro dev",
+        "start": "astro dev",
+        "build": "astro build",
+        "preview": "astro preview",
+        "astro": "astro"
+    },
+    "dependencies": {
+        "@astrojs/mdx": "^4.0.7",
+        "@astrojs/rss": "^4.0.11",
+        "@astrojs/sitemap": "^3.2.1",
+        "@astrojs/tailwind": "^5.1.5",
+        "@fontsource-variable/inter": "^5.1.1",
+        "@fontsource-variable/newsreader": "^5.1.1",
+        "astro": "^5.1.8",
+        "marked": "^15.0.4",
+        "tailwindcss": "^3.4.17"
+    },
+    "devDependencies": {
+        "@tailwindcss/typography": "^0.5.15",
+        "prettier": "^3.4.2",
+        "prettier-plugin-tailwindcss": "^0.6.9"
+    }
+}

public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

src/components/BaseHead.astro

@@ -0,0 +1,72 @@
+---
+import interWoff2 from '@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url';
+import newsreaderWoff2 from '@fontsource-variable/newsreader/files/newsreader-latin-wght-normal.woff2?url';
+import siteConfig from '../data/site-config';
+import '../styles/global.css';
+
+export type Props = {
+    title?: string;
+    description?: string;
+    image?: { src: string; alt?: string };
+    pageType?: 'website' | 'article';
+};
+
+const { description = '', image = siteConfig.image, pageType = 'website' } = Astro.props;
+const title = [Astro.props.title, siteConfig.title].filter(Boolean).join(' | ');
+const resolvedImage = image?.src
+    ? {
+          src: new URL(image.src, Astro.site).toString(),
+          alt: image.alt
+      }
+    : undefined;
+const canonicalURL = new URL(Astro.request.url, Astro.site);
+
+/**
+ * Enforce some standard canonical URL formatting across the site.
+ */
+function formatCanonicalURL(url: string | URL) {
+    const path = url.toString();
+    const hasQueryParams = path.includes('?');
+    // If there are query params, make sure the URL has no trailing slash
+    if (hasQueryParams) {
+        path.replace(/\/?$/, '');
+    }
+    // otherwise, canonical URL always has a trailing slash
+    return path.replace(/\/?$/, hasQueryParams ? '' : '/');
+}
+---
+
+<!-- High Priority Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>{title}</title>
+<meta name="generator" content={Astro.generator} />
+
+<!-- Fonts -->
+<link rel="preload" as="font" type="font/woff2" href={interWoff2} crossorigin="anonymous" />
+<link rel="preload" as="font" type="font/woff2" href={newsreaderWoff2} crossorigin="anonymous" />
+
+<!-- Low Priority Global Metadata -->
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="sitemap" href="/sitemap-index.xml" />
+<link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS" />
+
+<!-- Page Metadata -->
+<link rel="canonical" href={formatCanonicalURL(canonicalURL)} />
+<meta name="description" content={description} />
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content={pageType} />
+<meta property="og:url" content={formatCanonicalURL(canonicalURL)} />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+{resolvedImage?.src && <meta property="og:image" content={resolvedImage.src} />}
+{resolvedImage?.alt && <meta property="og:image:alt" content={resolvedImage.alt} />}
+
+<!-- X/Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={formatCanonicalURL(canonicalURL)} />
+<meta property="twitter:title" content={title} />
+<meta property="twitter:description" content={description} />
+{resolvedImage?.src && <meta property="twitter:image" content={resolvedImage.src} />}
+{resolvedImage?.alt && <meta name="twitter:image:alt" content={resolvedImage?.alt} />}

src/components/Button.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type AnchorProps = HTMLAttributes<'a'> & { type?: never };
+type ButtonProps = HTMLAttributes<'button'> & { href?: never };
+
+type Props = ButtonProps | AnchorProps;
+
+const { href, class: className, ...rest } = Astro.props;
+const buttonClasses =
+    'inline-flex items-center justify-center px-6 py-2 font-serif leading-tight italic text-main bg-main border border-main rounded-full transition hover:bg-muted';
+---
+
+{
+    href ? (
+        <a href={href} class:list={[buttonClasses, className]} {...rest}>
+            <slot />
+        </a>
+    ) : (
+        <button class:list={[buttonClasses, className]} {...rest}>
+            <slot />
+        </button>
+    )
+}

src/components/Footer.astro

@@ -0,0 +1,46 @@
+---
+import siteConfig from '../data/site-config';
+
+const socialLinks = siteConfig.socialLinks || [];
+const navLinks = siteConfig.footerNavLinks || [];
+---
+
+<footer class="w-full max-w-3xl mx-auto pt-12 pb-10 sm:pt-24 sm:pb-14">
+    {
+        navLinks.length > 0 && (
+            <div class="mb-4 flex flex-wrap gap-x-6 gap-y-1">
+                {navLinks.map((link) => (
+                    <a class="font-serif hover:underline hover:underline-offset-2" href={link.href}>
+                        {link.text}
+                    </a>
+                ))}
+            </div>
+        )
+    }
+    <div
+        class:list={[
+            'pt-6 flex flex-col gap-4 border-t border-dashed border-main',
+            { 'sm:flex-row-reverse sm:justify-between sm:items-center': socialLinks.length > 0 }
+        ]}
+    >
+        {
+            socialLinks.length > 0 && (
+                <div class="flex flex-wrap gap-x-4 gap-y-1">
+                    {socialLinks.map((link) => (
+                        <a
+                            class="inline-flex items-center justify-center text-sm hover:underline hover:underline-offset-2"
+                            href={link.href}
+                            target="_blank"
+                            rel="noopener noreferer"
+                        >
+                            {link.text}
+                        </a>
+                    ))}
+                </div>
+            )
+        }
+        <p class="text-sm">
+            &copy; {new Date().getFullYear()}&nbsp;<a class="hover:underline hover:underline-offset-2" href="/">{siteConfig.title}</a>. All rights reserved.
+        </p>
+    </div>
+</footer>

src/components/FormattedDate.astro

@@ -0,0 +1,15 @@
+---
+type Props = { date: Date };
+
+const { date } = Astro.props;
+---
+
+<time datetime={date.toISOString()}>
+    {
+        date.toLocaleDateString('en-us', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+        })
+    }
+</time>

src/components/Header.astro

@@ -0,0 +1,18 @@
+---
+import siteConfig from '../data/site-config';
+---
+
+<header class="w-full max-w-3xl mx-auto mb-12 sm:mb-16">
+    {
+        siteConfig.logo && siteConfig.logo?.src ? (
+            <a href="/">
+                <img src={siteConfig.logo.src} alt={siteConfig.logo.alt || ''} class="max-h-12" />
+            </a>
+        ) : (
+            <a class="font-serif text-2xl leading-tight font-medium text-theme-foreground sm:text-4xl" href="/">
+                {siteConfig.title}
+            </a>
+        )
+    }
+    {siteConfig.subtitle && <p class="text-sm leading-tight mt-1">{siteConfig.subtitle}</p>}
+</header>

src/components/Hero.astro

@@ -0,0 +1,29 @@
+---
+import { marked } from 'marked';
+import Button from './Button.astro';
+import siteConfig from '../data/site-config';
+
+const hero = siteConfig.hero;
+---
+
+{
+    (hero?.title || hero?.image?.src || hero?.text || (hero?.actions && hero.actions.length > 0)) && (
+        <section class="w-full flex flex-col gap-8 mb-16 sm:mb-24">
+            {hero.title && <h1 class="text-3xl leading-tight font-serif font-medium sm:text-5xl sm:leading-tight">{hero.title}</h1>}
+            {hero.image?.src && (
+                <figure>
+                    <img class="w-full" src={hero.image.src} loading="lazy" decoding="async" alt={hero.image.alt || ''} />
+                    {hero.image.caption && <figcaption class="mt-1.5 text-xs sm:text-sm">{hero.image.caption}</figcaption>}
+                </figure>
+            )}
+            {hero.text && <div class="max-w-none prose prose-dante sm:prose-lg" set:html={marked.parse(hero.text)} />}
+            {hero.actions && hero.actions.length > 0 && (
+                <div class="flex flex-wrap gap-4">
+                    {hero.actions.map((action) => (
+                        <Button href={action.href}>{action.text}</Button>
+                    ))}
+                </div>
+            )}
+        </section>
+    )
+}

src/components/IconButton.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type AnchorProps = HTMLAttributes<'a'> & { type?: never };
+type ButtonProps = HTMLAttributes<'button'> & { href?: never };
+
+type Props = ButtonProps | AnchorProps;
+
+const { href, class: className, ...rest } = Astro.props;
+const buttonClasses = 'inline-flex items-center justify-center p-2 text-main bg-main border border-main rounded-full transition hover:bg-muted';
+---
+
+{
+    href ? (
+        <a href={href} class:list={[buttonClasses, className]} {...rest}>
+            <slot />
+        </a>
+    ) : (
+        <button class:list={[buttonClasses, className]} {...rest}>
+            <slot />
+        </button>
+    )
+}

src/components/Nav.astro

@@ -0,0 +1,102 @@
+---
+import NavLink from './NavLink.astro';
+import ThemeToggle from './ThemeToggle.astro';
+import siteConfig from '../data/site-config';
+
+const navLinks = siteConfig.headerNavLinks || [];
+---
+
+<nav class="min-h-10 pt-4 pb-12 relative sm:min-h-14 sm:pb-24 md:pt-8">
+    {
+        navLinks.length > 0 && (
+            <div class="w-full max-w-3xl mx-auto relative">
+                <button
+                    class="menu-toggle w-8 h-8 -ml-1 flex items-center justify-center relative z-30 md:hidden"
+                    aria-label="Open Menu"
+                    aria-expanded="false"
+                    aria-controls="menu-items"
+                >
+                    <span class="menu-toggle-icon w-6 h-px relative bg-current" />
+                </button>
+                <ul id="menu-items" class="menu flex gap-6">
+                    {navLinks.map((link) => (
+                        <li class="py-1">
+                            <NavLink
+                                class="text-xl font-serif text-main hover:underline hover:underline-offset-2 hover:decoration-1 md:text-base"
+                                href={link.href}
+                            >
+                                {link.text}
+                            </NavLink>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        )
+    }
+    <div class="absolute right-0 top-4 z-10 md:top-8">
+        <ThemeToggle />
+    </div>
+</nav>
+
+<style>
+    @media (max-width: 767px) {
+        .menu {
+            @apply flex-col gap-1 absolute -top-2.5 -left-2.5 max-w-64 px-3 pt-16 pb-10 z-20 bg-main border border-dashed border-main invisible opacity-0;
+            width: calc(100% + 1.25rem);
+        }
+        .menu.is-visible {
+            @apply visible opacity-100;
+            transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
+        }
+        .menu-toggle-icon {
+            transition: width 0.1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+        }
+        .menu-toggle.is-active .menu-toggle-icon {
+            @apply w-0;
+            transition: width 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .menu-toggle-icon:before,
+        .menu-toggle-icon:after {
+            @apply w-6 h-px absolute left-1/2 top-0 origin-center -translate-x-1/2 bg-current;
+            content: '';
+            transition:
+                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+                margin 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
+        }
+        .menu-toggle-icon:before {
+            @apply -mt-1.5;
+        }
+        .menu-toggle-icon:after {
+            @apply mt-1.5;
+        }
+        .menu-toggle.is-active .menu-toggle-icon:before,
+        .menu-toggle.is-active .menu-toggle-icon:after {
+            @apply mt-0;
+            transition:
+                margin 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
+                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+        }
+        .menu-toggle.is-active .menu-toggle-icon:before {
+            @apply rotate-45;
+        }
+        .menu-toggle.is-active .menu-toggle-icon:after {
+            @apply -rotate-45;
+        }
+    }
+</style>
+
+<script>
+    function menuToggle() {
+        const menu = document.querySelector('.menu');
+        const menuToggleBtn = document.querySelector('.menu-toggle');
+        menuToggleBtn?.addEventListener('click', () => {
+            const isMenuExpanded = menuToggleBtn.getAttribute('aria-expanded') === 'true';
+            menuToggleBtn.classList.toggle('is-active');
+            menuToggleBtn.setAttribute('aria-expanded', isMenuExpanded ? 'false' : 'true');
+            menuToggleBtn.setAttribute('aria-label', isMenuExpanded ? 'Open Menu' : 'Close Menu');
+            menu?.classList.toggle('is-visible');
+        });
+    }
+    menuToggle();
+    document.addEventListener('astro:after-swap', menuToggle);
+</script>

src/components/NavLink.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'a'>;
+
+const { href, class: className, ...props } = Astro.props;
+
+const { pathname } = Astro.url;
+const isActive = href === pathname || href === pathname.replace(/\/$/, '');
+---
+
+<a class:list={[className, { 'underline underline-offset-2 decoration-1': isActive }]} href={href} {...props}>
+    <slot />
+</a>

src/components/Pagination.astro

@@ -0,0 +1,33 @@
+---
+import ArrowLeft from '../icons/ArrowLeft.astro';
+import ArrowRight from '../icons/ArrowRight.astro';
+import IconButton from './IconButton.astro';
+
+const { page, class: className } = Astro.props;
+---
+
+<nav aria-label="Pagination" class:list={['px-12 py-2 relative text-center', className]}>
+    {
+        page.url.prev && (
+            <IconButton
+                class="absolute left-0 top-1/2 -translate-y-1/2"
+                href={page.url.prev}
+                aria-label={`Go to page ${page.currentPage - 1} of ${page.lastPage}`}
+            >
+                <ArrowLeft class="w-5 h-5 fill-current" />
+            </IconButton>
+        )
+    }
+    <span class="text-sm" aria-current="page">Page {page.currentPage} of {page.lastPage}</span>
+    {
+        page.url.next && (
+            <IconButton
+                class="absolute right-0 top-1/2 -translate-y-1/2"
+                href={page.url.next}
+                aria-label={`Go to page ${page.currentPage + 1} of ${page.lastPage}`}
+            >
+                <ArrowRight class="w-5 h-5 fill-current" />
+            </IconButton>
+        )
+    }
+</nav>

src/components/PostPreview.astro

@@ -0,0 +1,38 @@
+---
+import { type CollectionEntry } from 'astro:content';
+import ArrowRight from '../icons/ArrowRight.astro';
+import FormattedDate from './FormattedDate.astro';
+
+type Props = { post: CollectionEntry<'blog'>; class?: string; headingLevel?: 'h2' | 'h3' };
+
+const { post, class: className, headingLevel = 'h2' } = Astro.props;
+const { title, publishDate, updatedDate, excerpt } = post.data;
+const TitleTag = headingLevel;
+---
+
+<a class:list={['flex justify-between items-start gap-8 group', className]} href={`/blog/${post.id}/`}>
+    <div class="grow">
+        <TitleTag
+            class="text-xl leading-tight font-serif font-medium group-hover:underline group-hover:decoration-dashed group-hover:underline-offset-4 group-hover:decoration-1 sm:text-2xl"
+        >
+            {title}
+        </TitleTag>
+        <div class="mt-1 text-sm leading-normal">
+            <FormattedDate date={publishDate} />
+            {
+                updatedDate && (
+                    <>
+                        {' '}
+                        <span>
+                            (Updated on <FormattedDate date={updatedDate} />)
+                        </span>
+                    </>
+                )
+            }
+        </div>
+        {excerpt && <div class="mt-3 text-sm leading-normal">{excerpt}</div>}
+    </div>
+    <div class="hidden font-serif italic opacity-0 transition group-hover:opacity-100 sm:inline-flex sm:gap-1 sm:items-center sm:shrink-0">
+        Read Post <ArrowRight class="fill-current w-4 h-4" />
+    </div>
+</a>

src/components/ProjectPreview.astro

@@ -0,0 +1,24 @@
+---
+import { type CollectionEntry } from 'astro:content';
+import ArrowRight from '../icons/ArrowRight.astro';
+
+type Props = { project: CollectionEntry<'projects'>; class?: string; headingLevel?: 'h2' | 'h3' };
+
+const { project, class: className, headingLevel = 'h2' } = Astro.props;
+const { title, description } = project.data;
+const TitleTag = headingLevel;
+---
+
+<a class:list={['flex justify-between items-start gap-8 group', className]} href={`/projects/${project.id}/`}>
+    <div class="grow">
+        <TitleTag
+            class="text-xl leading-tight font-serif font-medium group-hover:underline group-hover:decoration-dashed group-hover:underline-offset-4 group-hover:decoration-1 sm:text-2xl"
+        >
+            {title}
+        </TitleTag>
+        {description && <div class="mt-1 text-sm leading-normal">{description}</div>}
+    </div>
+    <div class="hidden font-serif italic opacity-0 transition group-hover:opacity-100 sm:inline-flex sm:gap-1 sm:items-center sm:shrink-0">
+        View Project <ArrowRight class="fill-current w-4 h-4" />
+    </div>
+</a>

src/components/Subscribe.astro

@@ -0,0 +1,45 @@
+---
+import Button from './Button.astro';
+import siteConfig from '../data/site-config';
+
+const subscribe = siteConfig.subscribe;
+
+const { class: className } = Astro.props;
+---
+
+{
+    subscribe?.formUrl && (
+        <section class:list={['px-8 py-12 flex flex-col items-center border border-dashed border-main text-center sm:px-12 sm:py-16', className]}>
+            {subscribe.title && (
+                <h2 class:list={['w-full max-w-xl text-2xl leading-tight font-serif font-medium sm:text-4xl', subscribe.text ? 'mb-4' : 'mb-8']}>
+                    {subscribe.title}
+                </h2>
+            )}
+            {subscribe.text && <p class="w-full max-w-xl mb-8 text-sm leading-normal">{subscribe.text}</p>}
+            <form
+                action={subscribe.formUrl}
+                method="post"
+                id="subscribe-form"
+                name="subscribe-form"
+                class="w-full max-w-xl flex flex-col gap-3.5 sm:flex-row"
+                target="_blank"
+            >
+                <label for="email" class="sr-only">
+                    Email Address
+                </label>
+                <input
+                    type="email"
+                    name="email"
+                    id="email"
+                    class="w-full h-9 px-5 py-2 text-sm text-main bg-transparent border border-main rounded-full placeholder:text-main/60 focus:outline-none"
+                    required=""
+                    value=""
+                    placeholder="Your email"
+                />
+                <Button type="submit" name="subscribe" class="w-full h-9 sm:w-auto">
+                    Subscribe
+                </Button>
+            </form>
+        </section>
+    )
+}

src/components/ThemeToggle.astro

@@ -0,0 +1,49 @@
+---
+
+---
+
+<button id="theme-toggle" class="w-8 h-8 -mr-2 flex items-center justify-center" aria-label="Change color scheme">
+    <svg class="w-4 h-4 fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="8" cy="8" r="8"></circle>
+    </svg>
+</button>
+
+<script>
+    document.addEventListener('astro:page-load', () => {
+        const theme = (() => {
+            if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+                return localStorage.getItem('theme') || 'light';
+            }
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                return 'dark';
+            }
+            return 'light';
+        })();
+
+        if (theme === 'light') {
+            document.documentElement.classList.remove('dark');
+        } else {
+            document.documentElement.classList.add('dark');
+        }
+
+        window.localStorage.setItem('theme', theme);
+
+        const handleToggleClick = () => {
+            const element = document.documentElement;
+            element.classList.toggle('dark');
+
+            const isDark = element.classList.contains('dark');
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        };
+
+        document.getElementById('theme-toggle')?.addEventListener('click', handleToggleClick);
+    });
+</script>
+
+<script>
+    document.addEventListener('astro:after-swap', () => {
+        if (localStorage.theme === 'dark') {
+            document.documentElement.classList.add('dark');
+        }
+    });
+</script>

src/content.config.ts

@@ -0,0 +1,48 @@
+import { defineCollection, z } from 'astro:content';
+import { glob } from 'astro/loaders';
+
+const seoSchema = z.object({
+    title: z.string().min(5).max(120).optional(),
+    description: z.string().min(15).max(160).optional(),
+    image: z
+        .object({
+            src: z.string(),
+            alt: z.string().optional()
+        })
+        .optional(),
+    pageType: z.enum(['website', 'article']).default('website')
+});
+
+const blog = defineCollection({
+    loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
+    schema: z.object({
+        title: z.string(),
+        excerpt: z.string().optional(),
+        publishDate: z.coerce.date(),
+        updatedDate: z.coerce.date().optional(),
+        isFeatured: z.boolean().default(false),
+        tags: z.array(z.string()).default([]),
+        seo: seoSchema.optional()
+    })
+});
+
+const pages = defineCollection({
+    loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/pages' }),
+    schema: z.object({
+        title: z.string(),
+        seo: seoSchema.optional()
+    })
+});
+
+const projects = defineCollection({
+    loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/projects' }),
+    schema: z.object({
+        title: z.string(),
+        description: z.string().optional(),
+        publishDate: z.coerce.date(),
+        isFeatured: z.boolean().default(false),
+        seo: seoSchema.optional()
+    })
+});
+
+export const collections = { blog, pages, projects };

src/content/blog/post-1.md

@@ -0,0 +1,47 @@
+---
+title: The Advantages & Disadvantages of Working from Home
+excerpt: In recent years, the way we work has undergone a significant transformation, largely due to advancements in technology and changing attitudes toward work-life balance. One of the most notable changes has been the rise of remote work, allowing employees to work from the comfort of their own homes.
+publishDate: 'Aug 5 2023'
+tags:
+  - Guide
+seo:
+  image:
+    src: '/post-1.jpg'
+    alt: A person standing at the window
+---
+
+![A person standing at the window](/post-1.jpg)
+
+**Note:** This post was created using Chat GPT to demonstrate the features of the _[Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/)_.
+
+In recent years, the way we work has undergone a significant transformation, largely due to advancements in technology and changing attitudes toward work-life balance. One of the most notable changes has been the rise of remote work, allowing employees to work from the comfort of their own homes. While this shift has brought about many benefits, it has also introduced its fair share of challenges. Let's explore the advantages and disadvantages of working from home.
+
+## Advantages of Working from Home
+
+1. **Flexibility:** One of the most significant advantages of remote work is the flexibility it offers. Employees can often set their own hours, which can be particularly beneficial for those with family responsibilities or other commitments.
+
+2. **Reduced Commute:** Eliminating the daily commute not only saves time but also reduces stress and expenses associated with transportation. This can lead to better mental health and increased job satisfaction.
+
+3. **Cost Savings:** Working from home can result in significant cost savings. Employees can save money on transportation, work attire, and daily meals, which can have a positive impact on their overall financial well-being.
+
+4. **Increased Productivity:** Many people find that they are more productive when working from home. The absence of office distractions and the ability to create a personalized work environment can lead to improved focus and efficiency.
+
+5. **Work-Life Balance:** Remote work allows for better work-life balance. Employees can better manage their personal and professional lives, leading to reduced burnout and increased job satisfaction.
+
+> Your ability to discipline yourself to set clear goals and then work toward them every day will do more to guarantee your success than any other single factor.
+
+## Disadvantages of Working from Home
+
+1. **Isolation:** Remote work can be lonely. The absence of coworkers and face-to-face interaction can lead to feelings of isolation and loneliness, which may negatively impact mental health.
+
+2. **Difficulty in Communication:** Effective communication can be a challenge when working remotely. Misunderstandings, lack of clear communication, and delayed responses can hinder teamwork and collaboration.
+
+3. **Work-Life Boundaries:** While remote work can improve work-life balance, it can also blur the lines between work and personal life. It can be challenging to establish clear boundaries, leading to overwork and burnout.
+
+4. **Technology Issues:** Technical problems, such as internet connectivity issues or software glitches, can disrupt work and cause frustration.
+
+5. **Distractions:** Working from home can be riddled with distractions, ranging from household chores to noisy neighbors. Maintaining focus can be a constant struggle for some.
+
+6. **Career Growth:** Some employees may feel that working remotely limits their opportunities for career advancement, as they may have less visibility within the organization.
+
+While it offers flexibility, cost savings, and improved work-life balance, it can also lead to isolation, communication challenges, and distractions. The key to successful remote work lies in finding a balance that suits individual preferences and addressing potential drawbacks through effective communication, time management, and self-discipline. As remote work continues to evolve, understanding and adapting to these advantages and disadvantages will be crucial for both employees and employers.

src/content/blog/post-10.md

@@ -0,0 +1,58 @@
+---
+title: 'The Rise of Headless CMS: What You Need to Know'
+excerpt: In the ever-evolving landscape of content management systems (CMS), a new player has been gaining significant traction - the headless CMS.
+publishDate: 'Nov 14 2023'
+tags:
+  - Security
+  - UX
+  - Web
+seo:
+  image:
+    src: '/post-10.jpg'
+    alt: Light straight lines
+---
+
+![Light straight lines](/post-10.jpg)
+
+**Note:** This post was created using Chat GPT to demonstrate the features of the _[Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/)_.
+
+In the ever-evolving landscape of content management systems (CMS), a new player has been gaining significant traction - the headless CMS. This innovative approach to content management is reshaping the way businesses deliver content across various digital channels. Let's delve into the rise of **headless CMS** and what you need to know about this transformative technology.
+
+## Understanding Headless CMS
+
+Traditional CMS solutions have been the backbone of managing and delivering content for websites and applications. However, they often come with limitations, especially when it comes to flexibility and scalability. This is where headless CMS comes into play.
+
+> Headless CMS empowers content creators to think beyond the webpage, fostering a mindset where content is liberated from presentation constraints, ready to reach audiences across diverse digital touchpoints.
+
+A headless CMS is fundamentally different from traditional CMS architectures. Instead of being tightly coupled with a specific frontend presentation layer, a headless CMS focuses solely on content creation and storage. The "head" or frontend layer is decoupled, allowing for more flexibility and agility in content delivery.
+
+## Benefits of Headless CMS
+
+1. **Flexibility and Omnichannel Delivery:**
+   Headless CMS enables content to be created and stored without being tied to a specific presentation format. This flexibility allows businesses to deliver content seamlessly across various channels, including websites, mobile apps, IoT devices, and more.
+
+2. **Improved Developer Productivity:**
+   Developers appreciate the freedom headless CMS provides. With the separation of concerns between content creation and presentation, developers can choose the most suitable technology stack for each aspect. This leads to increased productivity and the ability to adapt to evolving technologies.
+
+3. **Enhanced Performance:**
+   Since headless CMS eliminates the need for a monolithic system, the performance of your digital properties can be optimized. This is especially crucial in today's fast-paced digital landscape, where users expect instantaneous and responsive experiences.
+
+4. **Easier Content Updates:**
+   With headless CMS, content updates can be made independently of the frontend. This means that content creators can modify and publish content without waiting for developers to implement changes on the presentation layer, resulting in a more streamlined workflow.
+
+## Challenges and Considerations
+
+While headless CMS offers numerous advantages, it's essential to be aware of potential challenges:
+
+1. **Learning Curve:**
+   Adopting a headless CMS may require a learning curve for both content creators and developers, as it deviates from the traditional CMS model.
+
+2. **Integration Complexity:**
+   Integrating a headless CMS with existing systems and tools can be complex. However, once implemented, the flexibility it provides often outweighs the initial integration challenges.
+
+3. **Content Preview:**
+   Previewing content in the context of the final presentation can be challenging in a headless CMS. Solutions like API-based previews are emerging to address this concern.
+
+## Conclusion
+
+The rise of headless CMS marks a paradigm shift in the way organizations manage and deliver content. While it presents challenges, the flexibility, scalability, and improved developer workflows make it an attractive option for businesses looking to future-proof their digital experiences. As the digital landscape continues to evolve, staying informed about emerging technologies like headless CMS is crucial for businesses aiming to stay ahead of the curve.

src/content/blog/post-11.md

@@ -0,0 +1,72 @@
+---
+title: The Ultimate Front-End Developer Career Roadmap
+excerpt: Are you interested in embarking on a rewarding career as a front-end developer or looking to advance your existing skills in this dynamic field?
+publishDate: 'Dec 15 2023'
+tags:
+  - Web
+  - Guide
+seo:
+  image:
+    src: '/post-11.jpg'
+    alt: Empty road into the Horizon
+---
+
+![Empty road into the Horizon](/post-11.jpg)
+
+**Note:** This post was created using Chat GPT to demonstrate the features of the _[Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/)_.
+
+Are you interested in embarking on a rewarding career as a front-end developer or looking to advance your existing skills in this dynamic field? Front-end development is an exciting and ever-evolving realm of the tech industry, and to succeed, having a well-defined roadmap can make all the difference. In this post, we'll provide you with "The Ultimate Front-End Developer Career Roadmap" to guide you through the journey from a beginner to an expert.
+
+## Stage 1: Getting Started
+
+**Learn HTML, CSS, and Basic JavaScript:** Begin your journey by mastering the fundamentals. Understand how HTML, CSS, and JavaScript work together to create web pages.
+
+**Create Simple Websites:** Practice by building basic websites and web pages. Get comfortable with the structure and layout.
+
+**Version Control:** Learn the basics of version control with Git and GitHub to track changes in your code.
+
+**Responsive Web Design:** Understand the principles of responsive design to make your websites look great on all devices.
+
+## Stage 2: Building a Solid Foundation
+
+**Advanced JavaScript:** Dive deeper into JavaScript, learning about ES6 features, asynchronous programming, and the DOM (Document Object Model).
+
+**CSS Preprocessors:** Explore CSS preprocessors like SASS or LESS to streamline your stylesheets.
+
+**Learn a Front-End Framework:** Start with a framework like Tailwind CSS to enhance your website-building capabilities.
+
+**8. Web Performance:** Study web performance optimization techniques to ensure fast-loading websites.
+
+## Stage 3: Mastering Modern Front-End Technologies
+
+**JavaScript Frameworks:** Learn popular front-end frameworks like React, Angular, or Vue.js.
+
+**Build Single Page Applications (SPAs):** Create interactive web applications using your chosen framework.
+
+**Package Managers:** Get comfortable with package managers like npm and yarn to manage your project dependencies.
+
+**Module Bundlers:** Explore module bundlers like Webpack or Parcel for efficient code organization.
+
+## Stage 4: Specialization and Advanced Topics
+
+**Advanced CSS:** Dive deep into CSS with techniques like Flexbox, Grid, and CSS-in-JS.
+
+**Accessibility:** Ensure your websites are accessible to all users by learning WCAG guidelines.
+
+**Performance Optimization:** Continue improving performance with advanced techniques like lazy loading and code splitting.
+
+**Testing and Debugging:** Master unit testing and debugging tools for front-end development.
+
+## Stage 5: Real-World Experience and Career Advancement
+
+**Building Projects:** Create a portfolio of real-world projects to showcase your skills.
+
+**Networking:** Attend meetups, conferences, and online communities to connect with other front-end developers.
+
+**Soft Skills:** Hone your communication and collaboration skills, as they are invaluable in a professional setting.
+
+**Job Search:** Prepare a strong resume and online portfolio. Start applying for front-end development positions or freelance opportunities.
+
+**Continuous Learning:** Stay up-to-date with the latest front-end technologies and trends. Consider advanced topics like Progressive Web Apps (PWAs) and serverless architecture.
+
+Remember, the journey of a front-end developer is continuous. The field is always evolving, and staying curious and adaptable is key to your success. The ultimate career roadmap is not a one-size-fits-all guide, but it provides a clear path to help you navigate the world of front-end development. By following this roadmap and continuously learning and improving, you can build a rewarding and successful career in this dynamic field. Good luck on your journey!

src/content/blog/post-12.md

@@ -0,0 +1,67 @@
+---
+title: Unleashing the Power of Tailwind CSS
+excerpt: In the ever-evolving world of web development, staying on top of the latest trends and tools is essential. One such tool that has gained immense popularity in recent years is Tailwind CSS.
+publishDate: 'Jan 02 2024'
+tags:
+  - Web
+  - Guide
+  - CSS
+seo:
+  image:
+    src: '/post-12.jpg'
+    alt: Wind turbine
+---
+
+![Wind turbine](/post-12.jpg)
+
+**Note:** This post was created using Chat GPT to demonstrate the features of the _[Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/)_.
+
+In the ever-evolving world of web development, staying on top of the latest trends and tools is essential. One such tool that has gained immense popularity in recent years is Tailwind CSS. Tailwind CSS is not just another CSS framework; it's a utility-first framework that revolutionizes the way developers write and manage their styles. In this post, we'll explore the ins and outs of Tailwind CSS and why it's a game-changer for modern web development.
+
+## What is Tailwind CSS?
+
+Tailwind CSS is a utility-first CSS framework created by Adam Wathan, Jonathan Reinink, David Hemphill, and Steve Schoger. Unlike traditional CSS frameworks like Bootstrap or Foundation, which provide pre-designed components, Tailwind CSS offers a set of utility classes that you can apply directly to HTML elements.
+
+## Key Features of Tailwind CSS
+
+1. **Modularity:** Tailwind CSS promotes a modular approach to styling. Each utility class corresponds to a specific CSS property, making it easy to compose and modify styles.
+
+2. **Customization:** Tailwind CSS is highly customizable. You can configure the framework to generate only the CSS you need, keeping your project's file size to a minimum.
+
+3. **Responsive Design:** Tailwind CSS makes it effortless to create responsive layouts. You can apply responsive classes to elements to control their appearance on different screen sizes.
+
+4. **Extensibility:** The framework can be extended using plugins, allowing you to add custom utilities or integrate with third-party libraries seamlessly.
+
+## Why Choose Tailwind CSS?
+
+1. **Rapid Development:** With Tailwind CSS, you can build user interfaces quickly. No more writing custom CSS for every component, as you can leverage pre-defined utility classes.
+
+2. **Maintainability:** The utility-first approach reduces the chances of writing redundant or conflicting styles, making your codebase cleaner and easier to maintain.
+
+3. **Consistency:** Tailwind CSS enforces a consistent design language across your project, ensuring a cohesive user experience.
+
+4. **Developer-Friendly:** Developers love Tailwind CSS for its clear and intuitive class names, which make it easy to understand and collaborate on the codebase.
+
+## Getting Started with Tailwind CSS
+
+To start using Tailwind CSS, follow these steps:
+
+1. **Installation:**
+
+Install Tailwind CSS via npm or yarn:
+
+```
+npm install tailwindcss
+```
+
+2. **Configuration:** Create a configuration file (usually named `tailwind.config.js`) to customize the framework's settings.
+
+3. **Integration:** Include Tailwind CSS in your project by importing it into your main CSS file and using the utility classes in your HTML.
+
+4. **Build:** Use a build tool like Webpack or PostCSS to process and generate the final CSS file.
+
+## Conclusion
+
+Tailwind CSS has emerged as a powerhouse in modern web development. Its utility-first approach, flexibility, and developer-friendly features have made it a top choice for front-end developers worldwide. Whether you're a seasoned developer looking to streamline your workflow or a newcomer seeking a versatile CSS framework, Tailwind CSS is worth exploring.
+
+As the web development landscape continues to evolve, Tailwind CSS stands as a testament to the power of innovation in simplifying and enhancing the way we build beautiful and responsive web applications. Give it a try, and you might find that it transforms the way you approach styling in your projects.

src/content/blog/post-13.md

@@ -0,0 +1,53 @@
+---
+title: 'A Guide to Web Performance Metrics'
+excerpt: Dive deep into web performance metrics, including tools and techniques for measuring and optimizing loading times. Discuss the significance of metrics like First Contentful Paint, Time to Interactive, and more.
+publishDate: 'Jan 03 2024'
+tags:
+  - Web
+  - Guide
+isFeatured: true
+seo:
+  image:
+    src: '/post-13.jpg'
+    alt: Abstract snow
+---
+
+![Abstract snow](/post-13.jpg)
+
+**Note:** This post was created using Chat GPT to demonstrate the features of the _[Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/)_.
+
+In the ever-evolving landscape of the internet, user expectations for fast and responsive websites continue to rise. **Web performance is a critical factor** that directly impacts user experience, search engine rankings, and overall business success. To ensure your website meets these expectations, it's essential to understand and optimize key web performance metrics. In this guide, we'll explore some crucial metrics and offer insights on how to improve them.
+
+> Web performance is user experience. It's not just about faster pages; it's about creating a smoother, more enjoyable journey for your visitors.
+
+## Page Load Time
+
+Page load time is the total time it takes for a web page to fully load. This metric is a cornerstone of web performance, as users tend to abandon slow-loading sites. Google, in particular, considers page speed as a ranking factor for search results. To optimize page load time, consider compressing images, leveraging browser caching, and minimizing HTTP requests.
+
+## Time to First Byte (TTFB)
+
+TTFB measures the time it takes for a browser to receive the first byte of data from the server. It includes the time spent on server processing, network latency, and data transfer. A low TTFB contributes to faster page load times. To improve TTFB, optimize server response times, utilize content delivery networks (CDNs), and consider server upgrades if necessary.
+
+## Render Time
+
+Render time focuses on how quickly a web page can render and display content. This metric is crucial for providing a seamless user experience. Optimize render time by minimizing render-blocking resources, optimizing CSS and JavaScript, and utilizing techniques like lazy loading for images.
+
+## Mobile Performance
+
+With the increasing prevalence of mobile users, optimizing web performance for mobile devices is paramount. Google's mobile-first indexing means that mobile performance directly influences search rankings. Ensure your website is responsive, utilize mobile-friendly design practices, and prioritize mobile performance metrics such as mobile page speed and mobile-friendliness.
+
+## Resource Utilization
+
+Monitoring resource utilization involves tracking how efficiently your website uses server resources, such as CPU and memory. Overloaded servers can lead to slower response times and degraded user experience. Regularly audit and optimize your website's code, databases, and server configurations to ensure efficient resource utilization.
+
+## Conversion Rate and Bounce Rate
+
+Web performance directly affects user engagement and conversion rates. Slow-loading pages can result in higher bounce rates and lower conversion rates. Use tools like Google Analytics to track user behavior, analyze bounce rates, and identify pages that may need performance improvements.
+
+## Web Vitals
+
+Google's Web Vitals initiative introduced three core metrics – Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). These metrics focus on key aspects of user experience, including loading performance, interactivity, and visual stability. Aim to optimize these metrics to enhance overall user satisfaction and meet Google's performance expectations.
+
+## Conclusion
+
+Prioritizing web performance metrics is essential for creating a positive user experience, improving search engine rankings, and achieving business goals. Regularly monitor and optimize these metrics to ensure your website not only meets but exceeds user expectations in an ever-competitive online environment. By implementing best practices and staying informed about evolving performance standards, you can future-proof your website and provide a seamless experience for your visitors.

src/content/blog/post-14.md

@@ -0,0 +1,67 @@
+---
+title: Your Roadmap to Framework Selection Success
+excerpt: Choosing the right framework for your web project is a critical decision that can significantly impact the development process and the success of your project. With so many options available, it's essential to consider various factors before making a choice.
+publishDate: 'Jan 11 2024'
+isFeatured: true
+tags:
+  - Web
+  - Guide
+seo:
+  image:
+    src: '/post-14.jpg'
+    alt: Wavy lines
+---
+
+![Wavy lines](/post-14.jpg)
+
+**Note:** This post was created using Chat GPT to demonstrate the features of the _[Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/)_.
+
+**Choosing the right framework** for your web project is a critical decision that can significantly impact the development process and the success of your project. With so many options available, it's essential to consider various factors before making a choice. Here's a step-by-step guide on how to choose the right framework for your web project.
+
+> Web frameworks are the architectural blueprints that empower developers to build the digital landscapes of tomorrow.
+
+## Understand Your Project Requirements
+
+Start by thoroughly understanding the specific requirements of your web project. Consider factors such as the project's scope, complexity, and the features you need. Ask questions like:
+
+- What is the project's purpose?
+- What are the key functionalities it should have?
+- Are there any specific technical or performance requirements?
+
+## Define Your Tech Stack
+
+Determine your preferred technology stack. This includes choices for the frontend (HTML, CSS, JavaScript), backend (programming language, database), and any other technologies you plan to use. Your framework should align with your chosen tech stack.
+
+## Consider Your Team's Expertise
+
+Assess the skills and expertise of your development team. Choose a framework that your team is comfortable with or is willing to learn. If your team is experienced in a particular language or framework, it may be more efficient to stick with what they know.
+
+## Community and Ecosystem
+
+The strength and vitality of a framework's community and ecosystem are paramount considerations when making your choice. A thriving community signifies that the framework is actively used and supported by developers worldwide. Here's why this matters.
+
+> Good code is its own best documentation. As you're about to add a comment, ask yourself, 'How can I improve the code so that this comment isn't needed? - **Steve McConnell**
+
+**Support and Problem Solving:** A robust community ensures that you won't be left in the dark when you encounter issues or challenges during development. It's a vast network of developers who are willing to help and share their knowledge. You can turn to forums, Stack Overflow, GitHub discussions, and various online communities for assistance. The more active the community, the faster you're likely to get answers and solutions to your problems.
+
+**Third-Party Libraries and Plugins:** An active ecosystem often means a wealth of third-party libraries, plugins, and extensions that can extend the functionality of your chosen framework. This can significantly speed up development by providing pre-built solutions for common features and functionalities.
+
+**Continuous Improvement:** A large and engaged community usually translates to continuous improvement of the framework. Developers are more likely to contribute bug fixes, enhancements, and new features, leading to faster updates and a more stable platform. These contributions keep the framework up-to-date and aligned with industry standards.
+
+**Tutorials and Learning Resources:** A thriving community often generates a plethora of tutorials, blog posts, video courses, and documentation. This abundance of learning resources can be immensely valuable for both beginners and experienced developers looking to master the framework. It makes the learning curve smoother and promotes the adoption of best practices.
+
+**Long-Term Viability:** A framework with a strong community is more likely to have a longer lifespan. It's reassuring to know that the framework you choose today will still be supported and updated in the years to come, reducing the risk of your project becoming obsolete due to a lack of maintenance.
+
+## Documentation and Learning Resources
+
+Check the quality and availability of documentation and learning resources for the framework. Well-documented frameworks are easier for developers to learn and work with.
+
+## Scalability and Performance
+
+Consider whether the framework can scale to meet your project's future needs. Will it handle increased traffic and data without performance bottlenecks?
+
+## Security
+
+Security is crucial for any web project. Ensure that the framework has security features built in and is actively maintained to address security vulnerabilities promptly.
+
+In conclusion, choosing the right framework for your web project involves a careful evaluation of your project's requirements, your team's expertise, community support, and various technical factors. Taking the time to make an informed decision at the outset can save you time, resources, and headaches as your project progresses.

src/content/blog/post-2.md

@@ -0,0 +1,70 @@
+---
+title: Building an Impressive Front-End Developer Portfolio
+excerpt: In the competitive world of front-end development, a strong portfolio is your ticket to showcasing your skills, making a lasting impression on potential employers or clients, and advancing your career.
+publishDate: 'October 5 2023'
+tags:
+  - Web
+  - Web development
+seo:
+  image:
+    src: '/post-2.jpg'
+    alt: Half open laptop on a desk
+---
+
+![Half open laptop on a desk](/post-2.jpg)
+
+**Note:** This post was created using Chat GPT to demonstrate the features of the _[Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/)_.
+
+In the competitive world of front-end development, a strong portfolio is your ticket to showcasing your skills, making a lasting impression on potential employers or clients, and advancing your career. Your portfolio is your digital business card, and it should be a reflection of your talent, creativity, and expertise. In this post, we'll walk you through the steps to create an impressive front-end developer portfolio that will help you stand out in the crowd.
+
+## 1. Showcase a Diverse Range of Projects
+
+Your portfolio should be a testament to your versatility. Include a variety of projects that demonstrate your skills in different areas of front-end development. Consider including projects like:
+
+- **Responsive Websites:** Showcase your ability to create websites that adapt seamlessly to various screen sizes and devices.
+
+- **Interactive Web Applications:** Feature web applications that engage users with dynamic features and functionalities.
+
+- **E-commerce Websites:** If you've worked on e-commerce sites, include them to demonstrate your expertise in handling complex web development tasks.
+
+- **Open Source Contributions:** Highlight your involvement in open-source projects or contributions to online coding communities.
+
+## 2. Highlight Your Coding Skills
+
+Your portfolio should provide a clear view of your coding proficiency. Consider the following:
+
+- **Clean and Organized Code:** Present your code in a clean and well-organized manner. Use proper indentation, comments, and coding standards.
+
+- **Use of Version Control:** Showcase your use of version control systems like Git and GitHub to demonstrate your collaboration and code management skills.
+
+- **Code Samples:** Include snippets of code from your projects to give visitors an insight into your coding style and problem-solving abilities.
+
+## 3. Emphasize Responsive Design
+
+As a front-end developer, responsive design is paramount. Ensure that your portfolio itself is a shining example of responsive design. It should look and function flawlessly on a variety of devices, including desktops, tablets, and smartphones.
+
+## 4. User Experience (UX) Matters
+
+Front-end development is not just about writing code; it's about creating a great user experience. Explain your thought process behind the user interface (UI) and UX decisions you made in your projects. Discuss how you optimized performance and accessibility.
+
+## 5. Document Your Projects
+
+Accompany each project with a detailed description. Explain the project's goals, your role in it, the technologies and tools you used, and any challenges you overcame. This documentation provides context and depth to your work.
+
+## 6. Regularly Update Your Portfolio
+
+A stagnant portfolio can give the impression of inactivity or lack of progress. Regularly update your portfolio with your latest work and projects. Remove outdated or less impressive work to keep your portfolio relevant and impactful.
+
+## 7. Test and Optimize Load Times
+
+Slow-loading websites can turn visitors away. Ensure your portfolio loads quickly by optimizing images and using proper techniques to minimize load times.
+
+## 8. Seek Feedback
+
+Before finalizing your portfolio, seek feedback from peers, mentors, or online communities. Constructive criticism can help you refine your portfolio and make it even more impressive.
+
+## 9. Personalize Your Portfolio
+
+Your portfolio is not just about your work; it's also about you. Add a personal touch by including an **"About Me"** section that tells your story, your passions, and what makes you unique as a front-end developer.
+
+Remember, your front-end developer portfolio is an ongoing project. Keep refining it, stay up-to-date with the latest trends, and let it evolve as your skills and experience grow. An impressive portfolio not only serves as a testament to your abilities but also opens doors to exciting opportunities in the world of front-end development.

src/content/blog/post-3.md

@@ -0,0 +1,61 @@
+---
+title: Communication and Collaboration for Front-End Developers
+excerpt: Front-end development is not just about writing code; it's also about working seamlessly with others to create outstanding user experiences.
+publishDate: 'October 6 2023'
+tags:
+  - Web
+  - UX
+  - Web development
+seo:
+  image:
+    src: '/post-3.jpg'
+    alt: Beach ocean shore
+---
+
+![Beach ocean shore](/post-3.jpg)
+
+**Note:** This post was created using Chat GPT to demonstrate the features of the _[Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/)_.
+
+Front-end development is not just about writing code; it's also about working seamlessly with others to create outstanding user experiences. Effective communication and collaboration are essential skills for front-end developers to succeed in today's dynamic and interdependent tech industry. In this post, we'll explore why these skills matter and provide practical tips for front-end developers looking to excel in these areas.
+
+## The Significance of Communication and Collaboration
+
+1. **Cross-Functional Teams:** Front-end development is rarely a solitary endeavor. You'll often collaborate with designers, back-end developers, project managers, and other stakeholders. Effective communication ensures that everyone is on the same page and working toward a common goal.
+
+2. **User-Centric Focus:** Front-end developers play a crucial role in shaping the user experience. Clear communication with designers and user researchers is essential to understand user needs and deliver an intuitive interface.
+
+3. **Continuous Learning:** Staying updated in the rapidly evolving world of web development requires engaging with the community, reading documentation, and sharing knowledge with others. Effective communication facilitates this process.
+
+## Tips for Effective Communication
+
+1. **Active Listening:** Pay close attention to what others are saying. Understanding their perspectives and concerns is the first step to effective communication.
+
+2. **Ask Questions:** Don't hesitate to ask for clarification if something is unclear. This helps avoid misunderstandings and ensures you're on the right track.
+
+3. **Use Clear and Concise Language:** Avoid jargon and technical terms when speaking with non-technical stakeholders. Explain complex concepts in simple, understandable terms.
+
+4. **Documentation:** Keep detailed records of project decisions and discussions. This helps in case of disputes and provides a valuable reference.
+
+5. **Regular Updates:** Keep your team informed about your progress. Share updates on what you've accomplished and any challenges you've encountered.
+
+6. **Feedback:** Be open to feedback from others, whether it's about your code, your design choices, or your communication style. Constructive criticism is a valuable tool for growth.
+
+## Tips for Effective Collaboration
+
+1. **Establish a Workflow:** Define a clear workflow and responsibilities within your team. Tools like project management software and version control systems can help streamline collaboration.
+
+2. **Design Reviews:** Regularly meet with designers and other team members to review designs and discuss how to implement them effectively.
+
+3. **Code Reviews:** Collaborate with other developers through code reviews. This ensures code quality, identifies issues early, and fosters knowledge sharing.
+
+4. **Empathy:** Put yourself in the shoes of other team members. Understand their constraints, priorities, and challenges.
+
+5. **Conflict Resolution:** Conflicts can arise, but approach them with a problem-solving mindset. Seek compromises and solutions that benefit the project.
+
+6. **Celebrate Achievements:** Recognize and celebrate both small and large achievements with your team. This builds morale and a positive collaborative environment.
+
+## Building a Collaborative Culture
+
+Ultimately, effective communication and collaboration are not just individual skills; they're also cultural aspects of your development team. Encourage a culture of openness, transparency, and continuous improvement. As a front-end developer, you can play a pivotal role in fostering this culture by leading through example and actively participating in team discussions and initiatives.
+
+In the world of front-end development, where innovation and user experience are paramount, the ability to communicate and collaborate effectively is a game-changer. By honing these skills, you'll not only improve the quality of your work but also contribute to the success of your projects and your career as a front-end developer.

src/content/blog/post-4.md

@@ -0,0 +1,53 @@
+---
+title: 'Ensuring Cross-Browser Compatibility for a Seamless User Experience'
+excerpt: A website that functions flawlessly across different browsers not only enhances user satisfaction but also broadens its reach.
+publishDate: 'October 7 2023'
+tags:
+  - Web
+  - UX
+  - Web development
+seo:
+  image:
+    src: '/post-4.jpg'
+    alt: Wavy lines on a dark background
+---
+
+![Wavy lines on a dark background](/post-4.jpg)
+
+**Note:** This post was created using Chat GPT to demonstrate the features of the _[Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/)_.
+
+In the dynamic landscape of the internet, where users access websites through a myriad of browsers and devices, ensuring cross-browser compatibility is crucial for delivering a seamless user experience. A website that functions flawlessly across different browsers not only enhances user satisfaction but also broadens its reach. Here are some key strategies to ensure your web project thrives on diversity and provides a consistent experience for all users:
+
+### 1. **Test Across Multiple Browsers and Versions:**
+
+Before launching your website, thoroughly test it on popular browsers such as Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, and Opera. Additionally, consider testing on various versions of these browsers to identify and address compatibility issues that may arise.
+
+### 2. **Responsive Design:**
+
+Adopt a responsive design approach to ensure your website adapts to different screen sizes and resolutions. Utilize flexible grids and layouts, CSS media queries, and fluid images to create a visually appealing and functional experience across desktops, laptops, tablets, and smartphones.
+
+### 3. **Graceful Degradation and Progressive Enhancement:**
+
+Implement graceful degradation and progressive enhancement techniques to accommodate varying levels of browser capabilities. Graceful degradation involves building a website with advanced features that may not be supported by older browsers but still ensuring a basic, functional experience. Progressive enhancement, on the other hand, starts with a fundamental version and progressively adds features for modern browsers.
+
+### 4. **Vendor Prefixes and Standard Compliance:**
+
+While utilizing cutting-edge CSS and JavaScript features, be mindful of vendor prefixes. Prefixes like `-webkit-` or `-moz-` are often necessary for experimental or browser-specific features. However, it's crucial to implement standardized versions of these features once they become widely supported.
+
+### 5. **Regularly Update Third-Party Libraries and Frameworks:**
+
+If your website relies on third-party libraries or frameworks, ensure they are up-to-date. Developers frequently release updates to address compatibility issues and improve performance. Staying current with these updates helps maintain compatibility across various browsers.
+
+### 6. **Browser-Specific CSS and JavaScript:**
+
+Identify browser-specific issues and use conditional CSS and JavaScript to address them. This technique allows you to apply specific styles or scripts tailored to particular browsers, ensuring a consistent and optimized experience for each.
+
+### 7. **User-Agent Detection:**
+
+Employ user-agent detection to identify the browser and device a user is using. While this method should be used sparingly, it can be helpful for implementing specific optimizations or workarounds for known issues with certain browsers.
+
+### 8. **Regular Testing and Monitoring:**
+
+Even after the initial launch, periodically test your website on different browsers and devices. Browser updates and changes can introduce new compatibility challenges. Regular monitoring helps you identify and address issues promptly, maintaining a seamless user experience over time.
+
+In conclusion, achieving cross-browser compatibility is an ongoing commitment that requires careful planning, testing, and adaptation. By prioritizing these strategies, you can ensure that your website provides a consistent and enjoyable experience for users, regardless of the browser they choose to use. Embracing diversity in the digital realm ultimately leads to a broader audience and increased user satisfaction.

src/content/blog/post-5.md

@@ -0,0 +1,50 @@
+---
+title: 'Essential Security Measures Every Web Developer Should Know'
+excerpt: 'Create a post on essential security practices for web developers. Cover topics such as secure coding, HTTPS implementation, and protection against common web vulnerabilities.'
+publishDate: 'October 8 2023'
+tags:
+  - Security
+  - Web
+seo:
+  image:
+    src: '/post-5.jpg'
+    alt: Dark sphere
+---
+
+![Dark sphere](/post-5.jpg)
+
+**Note:** This post was created using Chat GPT to demonstrate the features of the _[Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/)_.
+
+In an era dominated by digital advancements, web developers play a crucial role in shaping the online landscape. As the creators of websites and web applications, developers carry the responsibility of ensuring the security and integrity of the platforms they build. With cyber threats on the rise, implementing robust security measures is no longer an option but a necessity. Here are some fundamental security measures that every web developer should be well-versed in:
+
+1. **HTTPS Encryption:**
+   Implementing HTTPS (Hypertext Transfer Protocol Secure) is non-negotiable. It encrypts the data exchanged between the user's browser and the server, protecting sensitive information from eavesdroppers. Acquiring an SSL/TLS certificate is a fundamental step toward establishing a secure connection.
+
+2. **Input Validation:**
+   Unvalidated user inputs are a common entry point for security breaches. Developers should validate and sanitize all user inputs to prevent injection attacks such as SQL injection, cross-site scripting (XSS), and cross-site request forgery (CSRF).
+
+3. **Password Policies:**
+   Enforce strong password policies and consider incorporating multi-factor authentication (MFA). Encourage users to create complex passwords and regularly update them. Hash and salt passwords before storing them in databases to add an extra layer of protection.
+
+4. **Content Security Policy (CSP):**
+   CSP mitigates the risks of XSS attacks by allowing developers to define and control the sources of content that a browser can load. It helps prevent unauthorized execution of scripts and protects against other code injection attacks.
+
+5. **Regular Software Updates:**
+   Keeping all software, including web servers, frameworks, and libraries, up-to-date is essential. Regular updates patch known vulnerabilities and strengthen the overall security of the web application.
+
+6. **Session Management:**
+   Implement secure session management practices, including unique session IDs, session timeout settings, and secure session storage. Invalidate sessions after logout to prevent session hijacking.
+
+7. **Cross-Origin Resource Sharing (CORS):**
+   Define and enforce a proper CORS policy to control which domains can access resources on your server. This helps prevent cross-origin attacks and enhances the overall security of the web application.
+
+8. **Security Headers:**
+   Utilize HTTP security headers such as Strict-Transport-Security (HSTS), X-Content-Type-Options, X-Frame-Options, and Content-Security-Policy to enhance the security posture of the web application.
+
+9. **Error Handling:**
+   Customize error messages to provide minimal information to users while logging detailed error reports internally. This prevents attackers from exploiting potential vulnerabilities by gaining insights into the system.
+
+10. **Regular Security Audits and Testing:**
+    Conduct thorough security audits and penetration testing regularly. Identify and address vulnerabilities before they can be exploited. Automated tools and manual testing should be part of the security testing process.
+
+By incorporating these security measures into their development practices, web developers can contribute to the creation of safer and more resilient online experiences. As the digital landscape evolves, staying informed about emerging threats and best practices is crucial for maintaining the security of web applications.

src/content/blog/post-6.md

@@ -0,0 +1,54 @@
+---
+title: 'The Evolution of Front-End Development: A Journey Through Time'
+excerpt: Choosing the right framework for your web project is a critical decision that can significantly impact the development process and the success of your project. With so many options available, it's essential to consider various factors before making a choice.
+publishDate: 'October 9 2023'
+tags:
+  - Web
+  - Guide
+seo:
+  image:
+    src: '/post-6.jpg'
+    alt: Walking person silhouette
+---
+
+![Walking person silhouette](/post-6.jpg)
+
+**Note:** This post was created using Chat GPT to demonstrate the features of the _[Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/)_.
+
+Front-end development has come a long way since the early days of the World Wide Web. From static HTML pages to dynamic and interactive web applications, the evolution of front-end development has been nothing short of remarkable. In this post, we'll take a fascinating journey through time to explore how front-end development has evolved over the years.
+
+## The Static HTML Era (1990s - Early 2000s)
+
+In the early days of the web, front-end development primarily involved creating static HTML pages. These pages were simple, text-heavy, and often lacked the visual and interactive elements we take for granted today. Cascading Style Sheets (CSS) started to gain popularity during this era, allowing developers to style web pages and make them more visually appealing.
+
+## The Rise of JavaScript (Late 1990s - Early 2000s)
+
+JavaScript emerged as a powerful tool for adding interactivity to web pages. This era witnessed the birth of technologies like DHTML (Dynamic HTML), which allowed developers to create dynamic and animated web content. This marked the beginning of a more engaging web experience.
+
+## The Era of Browser Wars (Late 1990s - Early 2000s)
+
+During this period, web developers faced challenges due to the "browser wars" between Internet Explorer and Netscape Navigator. Cross-browser compatibility became a significant concern, leading to the development of various JavaScript libraries and frameworks to help tackle these issues.
+
+## The Web 2.0 Revolution (Mid-2000s)
+
+Web 2.0 brought about a shift in front-end development. Websites started to become more interactive and user-centric. Ajax (Asynchronous JavaScript and XML) became a key technology, enabling seamless data retrieval and updates without requiring full page reloads.
+
+## Responsive Web Design (2010s)
+
+With the proliferation of smartphones and tablets, responsive web design became essential. Front-end developers had to adapt to building websites that could gracefully resize and restructure themselves to fit various screen sizes. This era saw the widespread use of CSS frameworks like Bootstrap and Foundation.
+
+## The Era of JavaScript Frameworks (2010s - Present)
+
+JavaScript frameworks like Angular, React, and Vue.js transformed front-end development. They introduced concepts like component-based architecture and virtual DOM, making it easier to build complex, dynamic web applications. Single-page applications (SPAs) became increasingly popular, providing smoother user experiences.
+
+## The Progressive Web App (PWA) Movement (2010s - Present)
+
+PWAs combined the best of web and mobile app experiences. Front-end developers started focusing on creating websites that not only worked well on browsers but also functioned offline, provided push notifications, and offered a more app-like experience to users.
+
+## WebAssembly and Beyond (Present - Future)
+
+WebAssembly (Wasm) is an emerging technology that allows running compiled code in web browsers at near-native speed. It opens up possibilities for front-end developers to build high-performance web applications and even port existing applications from other languages.
+
+## Conclusion
+
+Front-end development has evolved significantly, from static HTML pages to dynamic, responsive, and highly interactive web applications. With emerging technologies and ongoing advancements, the journey of front-end development continues to be exciting. As front-end developers, it's essential to stay updated, adapt to new trends, and embrace the ever-changing landscape of web development to create compelling user experiences on the internet.

src/content/blog/post-7.md

@@ -0,0 +1,51 @@
+---
+title: Exploring the Future of Front-End Development with Astro.js
+excerpt: In recent years, we've seen the rise of various tools and frameworks that have revolutionized the way we build web applications. One such exciting addition to the front-end development landscape is Astro.js.
+publishDate: 'October 10 2023'
+tags:
+  - Web
+  - UX
+  - Web development
+seo:
+  image:
+    src: '/post-7.jpg'
+    alt: Bright lines on a dark background
+---
+
+![Bright lines on a dark background](/post-7.jpg)
+
+**Note:** This post was created using Chat GPT to demonstrate the features of the _[Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/)_.
+
+Front-end development is a dynamic field that continually evolves to meet the demands of modern web development. In recent years, we've seen the rise of various tools and frameworks that have revolutionized the way we build web applications. One such exciting addition to the front-end development landscape is Astro.js. In this post, we'll explore what Astro.js is and how it promises to shape the future of front-end development.
+
+## What Is Astro.js?
+
+Astro.js is a new static site generator and front-end framework that is gaining traction within the web development community. It was created by the team at Vercel, the company behind popular tools like Next.js and Vercel Hosting. Astro.js aims to provide a new approach to front-end development that combines the best of both static site generation (SSG) and server-rendered frameworks.
+
+## Key Features of Astro.js
+
+1. **Faster Loading Times:** Astro.js takes a unique approach by only sending the JavaScript required for a specific page, reducing the initial load time and enhancing performance.
+
+2. **Partial Hydration:** It allows for selective hydration of components, optimizing the interactivity of your web pages while maintaining fast loading speeds.
+
+3. **Universal Rendering:** Astro.js enables you to use a single codebase for both server-rendered and static sites, simplifying development and maintenance.
+
+4. **Framework Agnostic:** It's designed to work with any JavaScript framework or library, allowing developers to choose their preferred tools.
+
+5. **Incremental Adoption:** Astro.js is flexible and can be incrementally adopted into existing projects, making it accessible for developers transitioning from other frameworks.
+
+## The Future of Front-End Development with Astro.js
+
+1. **Enhanced Performance:** Astro.js's focus on performance optimization will be a driving force in the future of front-end development. Faster-loading web applications are crucial for user retention and SEO ranking.
+
+2. **Seamless Integration:** As Astro.js gains popularity, we can expect more integration with popular JavaScript libraries and frameworks, making it even easier to use in a variety of projects.
+
+3. **Simplified Development Workflow:** Astro.js's universal rendering and framework-agnostic approach will streamline the development process, reducing the complexity of maintaining web applications.
+
+4. **Improved SEO:** With faster loading times and server-rendered content, Astro.js can significantly boost SEO performance, making it a preferred choice for websites aiming to rank higher in search engine results.
+
+5. **Community Growth:** As more developers and companies adopt Astro.js, we can anticipate a growing community that will contribute to its development and create a rich ecosystem of extensions and plugins.
+
+## Conclusion
+
+Astro.js is a promising addition to the front-end development landscape, offering a new approach that prioritizes performance, developer experience, and future scalability. As the web development community continues to evolve, Astro.js is well-positioned to play a significant role in shaping the future of front-end development. Whether you're an experienced developer or just starting your journey, keeping an eye on Astro.js and exploring its capabilities could be a valuable investment in your web development toolkit.

src/content/blog/post-8.md

@@ -0,0 +1,86 @@
+---
+title: 'Unveiling the Magic: Exploring the Latest CSS Features'
+excerpt: 'Highlight and explain the newest CSS features or updates. Include examples and demonstrate how these features can enhance the styling and layout of web pages.'
+publishDate: 'October 11 2023'
+tags:
+  - CSS
+  - Web development
+isFeatured: true
+seo:
+  image:
+    src: '/post-8.jpg'
+    alt: Light lines on a dark background
+---
+
+![Light lines on a dark background](/post-8.jpg)
+
+**Note:** This post was created using Chat GPT to demonstrate the features of the _[Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/)_.
+
+CSS, the styling powerhouse of the web, is constantly evolving to meet the demands of modern web development. In the ever-expanding landscape of front-end technologies, staying abreast of the latest CSS features is crucial for creating sleek, responsive, and visually stunning websites. Let's take a deep dive into some of the most exciting and powerful CSS features that have emerged in recent times.
+
+## 1. **Grid Layouts for Responsive Design**
+
+CSS Grid Layout has been a game-changer in web design, allowing developers to create complex layouts with ease. It provides a two-dimensional grid system, enabling precise control over both rows and columns. This feature is especially valuable for responsive design, as it facilitates the creation of flexible and dynamic page structures.
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+}
+```
+
+## 2. **Custom Properties (CSS Variables)**
+
+Custom properties, or CSS variables, bring a new level of flexibility and maintainability to stylesheets. They allow you to define reusable values and apply them throughout your CSS, making it easier to update styles consistently across a project.
+
+```css
+:root {
+  --primary-color: #3498db;
+}
+
+.button {
+  background-color: var(--primary-color);
+}
+```
+
+## 3. **Dark Mode Styling**
+
+With the rise of dark mode preferences among users, CSS has adapted to provide better support for this feature. The `prefers-color-scheme` media query allows developers to adjust styles based on the user's preferred color scheme.
+
+```css
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #1a1a1a;
+    color: #ffffff;
+  }
+}
+```
+
+### 4. **Scroll Snap for Smooth Navigation**
+
+Scroll Snap enhances the user experience by providing a smooth scrolling effect. It allows you to define specific points within a container to which the scroll should snap, creating a more polished and user-friendly interface.
+
+```css
+.container {
+  scroll-snap-type: y mandatory;
+}
+
+.section {
+  scroll-snap-align: start;
+}
+```
+
+### 5. **Responsive Typography with Clamp()**
+
+The `clamp()` function is a powerful addition for achieving responsive typography. It allows you to set a font size that is responsive within a specified range, ensuring readability across various screen sizes.
+
+```css
+h1 {
+  font-size: clamp(2rem, 5vw, 4rem);
+}
+```
+
+## Conclusion
+
+As web development continues to evolve, staying informed about the latest CSS features is essential for creating modern and user-friendly interfaces. These features empower developers to build more responsive, visually appealing, and accessible websites. Incorporating these tools into your workflow will not only enhance your development process but also contribute to a richer and more engaging web for users around the globe. Happy coding!

src/content/blog/post-9.md

@@ -0,0 +1,56 @@
+---
+title: Front-End Techniques for Optimizing Website Performance
+excerpt: Slow-loading websites can frustrate users, affect search engine rankings, and ultimately lead to loss of traffic and revenue. Front-end optimization is the key to ensuring a fast, responsive, and user-friendly website.
+publishDate: 'October 12 2023'
+tags:
+  - Web
+  - Web development
+seo:
+  image:
+    src: '/post-9.jpg'
+    alt: Mountains
+---
+
+![Mountains](/post-9.jpg)
+
+**Note:** This post was created using Chat GPT to demonstrate the features of the _[Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/)_.
+
+In an age where instant gratification is the norm, website performance is paramount. Slow-loading websites can frustrate users, affect search engine rankings, and ultimately lead to loss of traffic and revenue. Front-end optimization is the key to ensuring a fast, responsive, and user-friendly website. In this post, we'll explore some essential front-end techniques for optimizing website performance.
+
+1. **Image Optimization:**
+   Images are often the largest assets on a web page. Optimizing them is crucial. Use modern image formats like WebP, which offer better compression and quality. Compress images to reduce their file size while maintaining quality. Consider lazy loading images to load them only when they enter the user's viewport.
+
+2. **Minification and Compression:**
+   Minify your HTML, CSS, and JavaScript files to remove unnecessary whitespace and reduce file size. Additionally, enable server-side compression like Gzip or Brotli to further reduce data transfer. Smaller files mean faster load times.
+
+3. **CDN (Content Delivery Network):**
+   Implement a CDN to distribute your website's assets across multiple servers located in various geographic regions. This reduces latency and accelerates content delivery to users, regardless of their location.
+
+4. **Reduce HTTP Requests:**
+   Each HTTP request made by the browser adds latency. Minimize the number of requests by combining CSS and JavaScript files and using image sprites to reduce the number of image requests. Also, consider asynchronous loading of non-essential scripts.
+
+5. **Caching:**
+   Leverage browser caching by setting appropriate cache headers for your assets. This allows returning visitors to load your website more quickly since their browsers will already have cached some of the resources.
+
+6. **Critical CSS and Font Loading:**
+   Implement critical CSS to load only the essential styles needed for the above-the-fold content. For fonts, use the "font-display" property to specify how fonts are loaded to ensure that text content remains visible while fonts are being fetched.
+
+7. **Responsive Design:**
+   Design with mobile in mind and use responsive design techniques. This includes using media queries to adjust layouts and optimizing images for different screen sizes. Mobile users expect fast load times.
+
+8. **Prefetching and Preloading:**
+   Utilize HTML tags like `<link rel="preload">` and `<link rel=prefetch">` to give browsers hints about which resources to fetch ahead of time. This can improve the perceived performance of your website.
+
+9. **Reducing Third-Party Scripts:**
+   Limit the number of third-party scripts on your website, as they can significantly slow down load times. Evaluate the necessity of each script and consider asynchronous loading to prevent blocking the rendering of your page.
+
+10. **Progressive Web App (PWA):**
+    Implementing a PWA can drastically improve website performance and user experience. PWAs allow for offline access, fast loading times, and provide an app-like experience on the web.
+
+11. **Monitoring and Testing:**
+    Continuously monitor your website's performance using tools like Google PageSpeed Insights, GTmetrix, or WebPageTest. Regularly run performance tests to identify and address bottlenecks.
+
+12. **Reducing Animations and Effects:**
+    While animations and effects can enhance user experience, excessive use can slow down your website. Use them sparingly and consider reducing their complexity.
+
+In conclusion, optimizing front-end performance is a never-ending journey. It's crucial to balance aesthetics and functionality with the need for speed. Regularly assess your website's performance and implement the most appropriate front-end techniques to ensure a fast, responsive, and user-friendly experience for your visitors. By following these tips, you'll not only please your users but also boost your search engine rankings and drive better business results.

src/content/pages/about.md

@@ -0,0 +1,43 @@
+---
+title: About
+seo:
+  title: About Me
+  description: Learn more about the person behind the website and embark on a journey of inspiration and shared experiences.
+  image:
+    src: '/about.jpeg'
+    alt: A person sitting at a desk in front of a computer
+---
+
+![Alt text for image](/about.jpeg)
+
+**Note!:** This about page is entirely fictional and created for the purpose of showcasing [Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/).
+
+## Ethan Donovan - Web Developer based in Estonia
+
+**Greetings!** I'm Ethan Donovan, a passionate web developer residing in the picturesque landscapes of [Estonia](https://en.wikipedia.org/wiki/Estonia). With a keen eye for design and a love for crafting seamless digital experiences, I bring a unique blend of creativity and technical expertise to the world of web development.
+
+## Skills and Expertise
+
+I specialize in front-end and back-end development, utilizing the latest technologies to build responsive and user-friendly websites. My proficiency includes **HTML**, **CSS**, **JavaScript**, and frameworks such as **Astro.js** for dynamic and interactive user interfaces. On the server side, I'm well-versed in Node.js and have experience with database management systems like MongoDB.
+
+## Innovation and Problem-Solving
+
+I thrive on solving complex problems and transforming ideas into functional, elegant websites. Whether it's optimizing performance, implementing new features, or troubleshooting issues, I approach each challenge with enthusiasm and a commitment to delivering high-quality solutions.
+
+## Global Perspective, Local Impact
+
+Living in Estonia has not only influenced my appreciation for nature and culture but has also shaped my approach to web development. I understand the importance of creating digital solutions that resonate with local audiences while maintaining a global perspective.
+
+## Continuous Learning
+
+The dynamic nature of the tech industry inspires me to stay up-to-date with the latest trends and advancements. I'm always eager to expand my skill set and embrace emerging technologies that enhance the functionality and aesthetics of the websites I create.
+
+## Collaboration and Communication
+
+I believe in the power of collaboration and effective communication. Whether working with clients, designers, or fellow developers, I value clear communication to ensure the success of every project.
+
+## Get in Touch
+
+Are you looking to elevate your online presence or bring your digital ideas to life? I'd love to hear from you! Feel free to reach out for collaboration, consultation, or just a friendly chat about all things web development.
+
+_Let's build something amazing together!_

src/content/pages/contact.md

@@ -0,0 +1,14 @@
+---
+title: Get in touch
+seo:
+  title: Contact
+  description: Get in touch through email or social media! Let me know how I can help.
+---
+
+Thank you for reaching out! Whether you have a question, a suggestion, or just want to share your thoughts, I'm all ears. Feel free to get in touch through any of the methods below:
+
+_Email:_
+Feel free to drop me an email at [example@example.com](mailto:example@example.com), and I'll do my best to respond as soon as possible.
+
+_Social Media:_
+Connect with me on social media as well. Find me on [Twitter](https://twitter.com) or [LinkedIn](https://www.linkedin.com/).

src/content/pages/terms.md

@@ -0,0 +1,52 @@
+---
+title: Terms of Service
+seo:
+  title: Terms of Service
+  description: Explore the terms and conditions of Dante website for a clear understanding of guidelines and responsibilities.
+---
+
+**Last updated on January 11, 2024**
+
+These Terms of Service ("Terms") govern your access to and use of [Website Name] ("the Website") and any related services provided by [Website Owner/Company] ("we," "us," or "our"). Please read these Terms carefully before using the Website.
+
+**1. Acceptance of Terms**
+
+By accessing or using the Website, you agree to be bound by these Terms and our Privacy Policy. If you do not agree to these Terms or the Privacy Policy, please do not use the Website.
+
+**2. Changes to Terms**
+
+We reserve the right to modify, amend, or update these Terms at any time. Such changes will be effective upon posting on the Website. It is your responsibility to review these Terms regularly. Your continued use of the Website after any changes indicates your acceptance of the revised Terms.
+
+**3. Use of the Website**
+
+You agree to use the Website for lawful purposes and in a manner consistent with these Terms. You are responsible for any content you post or submit on the Website.
+
+**4. Registration and Account**
+
+Certain areas of the Website may require registration or the creation of an account. You agree to provide accurate, current, and complete information during the registration process and to update such information to keep it accurate, current, and complete. You are responsible for maintaining the confidentiality of your account credentials and for all activities that occur under your account.
+
+**5. Content and Intellectual Property**
+
+The content on the Website, including text, graphics, logos, images, audio, video, software, and other materials, is owned or licensed by us and is protected by copyright and other intellectual property laws. You may not use, reproduce, or distribute the content without our prior written consent.
+
+**6. Third-Party Links**
+
+The Website may contain links to third-party websites or resources. We do not endorse and are not responsible for the content, products, or services provided by third parties. Your use of such websites is at your own risk.
+
+**7. Termination**
+
+We may, at our sole discretion, terminate or suspend your access to the Website at any time and for any reason, without notice.
+
+**8. Disclaimer**
+
+The Website and its content are provided on an "as is" and "as available" basis. We make no warranties or representations about the accuracy or completeness of the content. We do not guarantee that the Website will be error-free or uninterrupted.
+
+**9. Limitation of Liability**
+
+To the fullest extent permitted by law, we shall not be liable for any direct, indirect, incidental, special, consequential, or exemplary damages, including but not limited to damages for loss of profits, goodwill, use, data, or other intangible losses, arising out of or in connection with the use or inability to use the Website.
+
+**10. Governing Law**
+
+These Terms are governed by and construed in accordance with the laws of [Your Jurisdiction], without regard to its conflict of laws principles. Any disputes arising under these Terms shall be subject to the exclusive jurisdiction of the courts of [Your Jurisdiction].
+
+_Thank you for reading our Terms of Service. By using the Website, you agree to be bound by these Terms._

src/content/projects/project-1.md

@@ -0,0 +1,66 @@
+---
+title: 'EcoBuddy: Sustainable Living App'
+description: EcoBuddy is a mobile app that gamifies sustainable living. Users can set eco-friendly goals, track their carbon footprint, and earn virtual rewards for adopting environmentally conscious habits.
+publishDate: 'Jan 02 2024'
+seo:
+  image:
+    src: '/project-1.jpg'
+    alt: Project preview
+---
+
+![Project preview](/project-1.jpg)
+
+**Note:** This case study is entirely fictional and created for the purpose of showcasing [Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/).
+
+**Project Overview:**
+EcoBuddy is a revolutionary mobile application designed to make sustainable living accessible, engaging, and rewarding. With a focus on gamification and real-world impact, EcoBuddy encourages users to adopt eco-friendly habits, reduce their carbon footprint, and contribute to a healthier planet.
+
+## Objectives
+
+1. Develop a user-friendly mobile app that motivates individuals to adopt sustainable practices in their daily lives.
+2. Utilize gamification elements to make sustainable living fun and interactive.
+3. Provide educational resources and personalized challenges to empower users to make informed eco-conscious decisions.
+
+## Features
+
+1. **EcoScore and Challenges:**
+
+- Users are assigned an EcoScore based on their sustainable activities and choices.
+- Daily and weekly challenges encourage users to adopt new habits and compete with friends or the community to earn EcoPoints.
+
+2. **Personalized Eco-Goals:**
+
+- Users can set and track personalized eco-goals, such as reducing plastic usage, conserving water, or choosing eco-friendly transportation.
+- The app provides tips and suggestions to help users achieve their goals.
+
+3. **Green Rewards Marketplace:**
+
+- EcoPoints earned through challenges and sustainable actions can be redeemed in a virtual Green Rewards Marketplace.
+- The marketplace offers discounts on eco-friendly products, services, and even contributions to environmental causes.
+
+4. **Community Hub:**
+
+- A community feature allows users to connect, share their eco-friendly achievements, and inspire others.
+- Users can join local eco-groups, organize clean-up events, and collaborate on sustainability projects.
+
+5. **EcoEducator AI Assistant:**
+
+- An AI-powered assistant, EcoEducator, provides personalized eco-tips, facts, and information based on users' preferences and habits.
+- Users can chat with EcoEducator for instant advice on sustainable living.
+
+## Technology Stack
+
+- Frontend: React Native for cross-platform mobile app development.
+- Backend: Firebase for real-time data synchronization and user authentication.
+- Database: Firestore for scalable and flexible data storage.
+- AI Integration: Dialogflow for natural language processing and conversation with EcoEducator.
+
+## Outcome
+
+EcoBuddy has successfully created a community of environmentally conscious individuals who actively participate in sustainable living practices. The app not only educates and motivates users but also provides tangible rewards for their commitment to a greener lifestyle, fostering a positive impact on the environment.
+
+## Client Testimonial
+
+> We couldn't be happier with the results delivered by Ethan Donovan. From the initial concept discussions to the final product, their responsiveness and collaborative approach were impressive. Our startup's website now stands out, thanks to their creative input and commitment to excellence.
+
+**Note:** This case study is entirely fictional and created for the purpose of showcasing [Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/).

src/content/projects/project-2.md

@@ -0,0 +1,64 @@
+---
+title: 'TimeWarp - Travel Agency Website'
+description: Explore the possibilities of time travel through an immersive website for a fictional travel agency, complete with dynamic destination timelines and interactive historical events.
+publishDate: 'Oct 2 2023'
+isFeatured: true
+seo:
+  image:
+    src: '/project-2.jpg'
+    alt: Project preview
+---
+
+![Project preview](/project-2.jpg)
+
+**Note:** This case study is entirely fictional and created for the purpose of showcasing [Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/).
+
+**Project Overview:**
+TimeWarp Travel Agency aims to redefine the travel experience by offering an innovative and immersive online platform that explores the concept of time travel. The website combines cutting-edge technology with captivating storytelling to provide users with a unique journey through time.
+
+> Working with Ethan Donovan was a game-changer for our online presence. Their innovative solutions and attention to detail turned our vision into a reality. The website not only looks fantastic but also functions seamlessly. A true professional who exceeded our expectations!
+
+## Objectives
+
+1. Create a visually stunning and user-friendly website that captures the essence of time travel.
+2. Integrate interactive elements to engage users and make the experience memorable.
+3. Develop a responsive design to ensure a seamless user experience across various devices.
+
+## Features
+
+1. **Dynamic Destination Timelines:**
+
+- Users can explore destinations through dynamic timelines, showcasing significant historical events, cultural developments, and architectural milestones.
+- Interactive sliders allow users to navigate through different eras, providing a visual representation of the historical evolution of each location.
+
+2. **Interactive Historical Events:**
+
+- Users can click on specific points in the timeline to reveal detailed information about key historical events related to the chosen destination.
+- Rich multimedia content, including images, videos, and articles, provides a comprehensive understanding of each event.
+
+3. **Personalized Time Travel Planner:**
+
+- A personalized planner feature enables users to create their time travel itineraries by selecting specific eras and destinations.
+- The system suggests thematic experiences, such as attending historical events or meeting famous personalities.
+
+4. **Time-Port Virtual Reality Experience:**
+
+- For an extra layer of immersion, users can opt for the Time-Port VR experience, allowing them to virtually step into different time periods and explore the surroundings in 360 degrees.
+
+5. **Chronicle Explorer Blog:**
+
+- A blog section, "Chronicle Explorer," offers in-depth articles and stories about various historical periods and their impact on the destinations featured on the platform.
+- Users can engage with the content, comment, and share their own historical insights.
+
+## Technology Stack
+
+- **Frontend:** [Astro.js](https://astro.build/) for a dynamic and responsive user interface and [Tailwind CSS](https://tailwindcss.com/) for styling.
+- **Backend:** Node.js for handling server-side logic and API integration.
+- **Database:** MongoDB for efficient storage and retrieval of historical data.
+- **VR Integration:** A-Frame framework for creating immersive virtual reality experiences.
+
+## Outcome
+
+The TimeWarp Travel Agency Website successfully brings the concept of time travel to life, providing users with a captivating and educational experience. The website not only serves as a travel planning tool but also as an interactive platform that encourages users to explore and appreciate the rich tapestry of human history.
+
+**Note:** This case study is entirely fictional and created for the purpose of showcasing [Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/).

src/content/projects/project-3.md

@@ -0,0 +1,64 @@
+---
+title: 'RoboChef - AI Powered Cooking Guide'
+description: RoboChef Recipe Assistant is a groundbreaking mobile application that leverages artificial intelligence to redefine the cooking experience.
+publishDate: 'Oct 12 2023'
+isFeatured: true
+seo:
+  image:
+    src: '/project-3.jpg'
+---
+
+![Project preview](/project-3.jpg)
+
+**Note:** This case study is entirely fictional and created for the purpose of showcasing [Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/).
+
+**Project Overview:**
+RoboChef Recipe Assistant is a groundbreaking mobile application that leverages artificial intelligence to redefine the cooking experience. By combining machine learning with culinary expertise, RoboChef empowers users to explore a world of flavors, improve their cooking skills, and enjoy personalized recipe recommendations.
+
+## Objectives
+
+1. Develop a user-friendly mobile app that utilizes AI to provide personalized recipe suggestions based on user preferences, dietary restrictions, and available ingredients.
+2. Create an interactive cooking guide that assists users with step-by-step instructions, cooking tips, and real-time assistance.
+3. Implement a smart learning system that refines recommendations over time, adapting to users' taste preferences and dietary changes.
+
+## Features
+
+1. **AI-Powered Recipe Recommendations:**
+
+- RoboChef analyzes users' taste preferences, dietary restrictions, and ingredient availability to suggest personalized recipes.
+- Machine learning algorithms continuously learn from user interactions, refining recommendations for an increasingly tailored experience.
+
+2. **Ingredient Scanner and Inventory Management:**
+
+- Users can scan their pantry and refrigerator using the app's built-in ingredient scanner.
+- RoboChef provides recipe suggestions based on available ingredients and helps users manage their inventory by suggesting recipes that utilize soon-to-expire items.
+
+3. **Step-by-Step Cooking Guide:**
+
+- Each recipe includes a detailed step-by-step cooking guide with interactive multimedia elements.
+- Users can watch video tutorials, view images, and receive real-time tips from RoboChef as they progress through each cooking stage.
+
+4. **Nutritional Insights and Meal Planning:**
+
+- RoboChef provides nutritional information for each recipe, helping users make informed decisions about their meals.
+- The app offers meal planning features, allowing users to create weekly menus based on dietary goals and preferences.
+
+5. **Voice-Activated Assistance:**
+
+- Users can interact with RoboChef using voice commands for a hands-free cooking experience.
+- The AI assistant responds to queries, provides cooking tips, and adapts recipes based on user preferences.
+
+## Technology Stack
+
+- Frontend: Flutter for a seamless cross-platform mobile app experience.
+- Backend: Django for handling server-side logic and API integration.
+- Database: PostgreSQL for efficient data storage and retrieval.
+- AI Integration: TensorFlow for machine learning models powering recipe recommendations.
+
+> Ethan Donovan possesses a rare blend of technical expertise and creative flair. They skillfully transformed our vague ideas into a visually stunning and highly functional website. The end result exceeded our expectations, and we continue to receive compliments on the design and user experience.
+
+## Outcome
+
+RoboChef Recipe Assistant has revolutionized the way users approach cooking, making it an enjoyable and educational experience. The AI-powered features not only simplify the cooking process but also contribute to users' culinary growth, creating a personalized and evolving cooking journey.
+
+**Note:** This case study is entirely fictional and created for the purpose of showcasing [Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/).

src/content/projects/project-4.md

@@ -0,0 +1,61 @@
+---
+title: 'NeuralPlaylist - AI Generated Music Recommendations'
+description: Leveraging advanced algorithms and machine learning, NeuralPlaylist crafts personalized music recommendations based on users' preferences, moods, and even biometric data.
+publishDate: 'Oct 19 2023'
+seo:
+  image:
+    src: '/project-4.jpg'
+---
+
+![Project preview](/project-4.jpg)
+
+**Note:** This case study is entirely fictional and created for the purpose of showcasing [Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/).
+
+**Project Overview:**
+NeuralPlaylist is a cutting-edge web application that redefines music discovery through the power of artificial intelligence. Leveraging advanced algorithms and machine learning, NeuralPlaylist crafts personalized music recommendations based on users' preferences, moods, and even biometric data.
+
+## Objectives
+
+1. Develop an intuitive and user-friendly web application that utilizes AI to curate personalized music playlists for users.
+2. Implement machine learning models that analyze user behavior, preferences, and physiological responses to create dynamic and context-aware music recommendations.
+3. Provide an immersive and interactive platform that enhances the music listening experience and introduces users to new genres and artists.
+
+## Features
+
+1. **Biometric Mood Analysis:**
+
+- NeuralPlaylist incorporates biometric data analysis to understand users' moods and emotional states.
+- The AI algorithms use facial recognition and heart rate data to curate playlists that match users' current emotional states.
+
+2. **Personalized Playlists:**
+
+- Users receive dynamic and highly personalized playlists based on their music history, preferences, and contextual factors.
+- NeuralPlaylist adapts to users' evolving tastes, introducing them to new genres and artists that align with their musical journey.
+
+3. **Context-Aware Recommendations:**
+
+- The application takes into account contextual factors such as time of day, weather, and location to tailor music recommendations.
+- Users receive playlists suited for specific occasions, moods, and environments.
+
+4. **Collaborative Playlists:**
+
+- NeuralPlaylist encourages social interaction by allowing users to create and share collaborative playlists with friends.
+- Friends can contribute to the playlist, creating a shared musical experience that adapts to the collective preferences of the group.
+
+5. **Real-Time Feedback Integration:**
+
+- Users can provide real-time feedback on song selections, allowing the AI to continuously refine recommendations.
+- The system learns from user interactions to enhance the accuracy of future music suggestions.
+
+## Technology Stack
+
+- Frontend: Vue.js for a dynamic and responsive user interface.
+- Backend: Flask for handling server-side logic and API integration.
+- Database: MongoDB for efficient storage and retrieval of user and music data.
+- AI Integration: PyTorch for developing machine learning models for music recommendation and biometric analysis.
+
+## Outcome
+
+NeuralPlaylist has redefined the music listening experience by harnessing the power of AI to provide users with hyper-personalized and context-aware playlists. The application not only adapts to users' musical preferences but also introduces them to new and exciting musical journeys based on their emotions and surroundings.
+
+**Note:** This case study is entirely fictional and created for the purpose of showcasing [Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/).

src/content/projects/project-5.md

@@ -0,0 +1,62 @@
+---
+title: 'PixelPerfect Art Gallery'
+description: PixelPerfect Art Gallery is an innovative online platform that transcends traditional art exhibition spaces.
+publishDate: 'Oct 25 2023'
+isFeatured: true
+seo:
+  image:
+    src: '/project-5.jpg'
+---
+
+![Project preview](/project-5.jpg)
+
+**Note:** This case study is entirely fictional and created for the purpose of showcasing [Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/).
+
+**Project Overview:**
+PixelPerfect Art Gallery is an innovative online platform that transcends traditional art exhibition spaces. This web application is dedicated to showcasing and celebrating pixel art in the form of Non-Fungible Tokens (NFTs), providing artists with a digital canvas to display their unique creations while ensuring secure ownership through blockchain technology.
+
+## Objectives
+
+1. Create an immersive online gallery experience specifically tailored for pixel art enthusiasts and NFT collectors.
+2. Utilize blockchain technology to authenticate and secure ownership of digital artworks, ensuring a transparent and tamper-proof art marketplace.
+3. Foster a community of digital artists and art collectors, providing a platform for collaboration, appreciation, and exchange.
+
+## Features
+
+1. **NFT Art Exhibition:**
+
+- PixelPerfect features a curated exhibition of pixel art NFTs, showcasing a diverse range of styles, themes, and techniques.
+- Users can explore and appreciate the intricate details of each digital artwork in a visually stunning online gallery.
+
+2. **Blockchain Authentication:**
+
+- Each pixel art piece is tokenized as an NFT on a blockchain, ensuring authenticity, provenance, and secure ownership.
+- Users can view the blockchain records to verify the origin and history of the digital artworks.
+
+3. **Virtual Art Auctions:**
+
+- PixelPerfect hosts virtual art auctions, allowing users to bid on and acquire exclusive pixel art NFTs.
+- The auction platform provides a dynamic and engaging environment for art enthusiasts and collectors.
+
+4. **Community Collaboration Spaces:**
+
+- Dedicated community spaces allow artists to connect, collaborate, and showcase their creative process.
+- Users can discuss techniques, share insights, and even collaborate on pixel art projects within the PixelPerfect community.
+
+5. **Interactive Pixel Art Creation Workshop:**
+
+- PixelPerfect provides a virtual workshop where users can create their own pixel art and potentially tokenize their creations as NFTs.
+- Artists can share their works with the community or submit them for consideration in future exhibitions.
+
+## Technology Stack
+
+- Frontend: Angular for a dynamic and responsive user interface.
+- Backend: Node.js for handling server-side logic and API integration.
+- Database: Ethereum blockchain for storing NFT ownership and transaction details.
+- Smart Contracts: Solidity for developing blockchain smart contracts.
+
+## Outcome
+
+PixelPerfect Art Gallery has successfully created a digital haven for pixel art enthusiasts, providing a secure and engaging platform for artists and collectors alike. The integration of blockchain technology ensures transparency and authenticity in the world of digital art, fostering a vibrant community that appreciates the uniqueness and creativity of pixel art NFTs.
+
+**Note:** This case study is entirely fictional and created for the purpose of showcasing [Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/).

src/content/projects/project-6.md

@@ -0,0 +1,61 @@
+---
+title: FitQuest - AR Fitness Adventure Game
+description: This web application encourages users to embark on thrilling adventures, complete challenges, and achieve fitness goals in an engaging virtual environment.
+publishDate: 'Dec 28 2023'
+seo:
+  image:
+    src: '/project-6.jpg'
+---
+
+![Project preview](/project-6.jpg)
+
+**Note:** This case study is entirely fictional and created for the purpose of showcasing [Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/).
+
+**Project Overview:**
+FitQuest is an augmented reality (AR) fitness adventure game that revolutionizes traditional workout routines by combining physical exercise with immersive gameplay. This web application encourages users to embark on thrilling adventures, complete challenges, and achieve fitness goals in an engaging virtual environment.
+
+## Objectives
+
+1. Develop a fitness app that leverages augmented reality to make workouts more enjoyable and interactive.
+2. Integrate real-world locations and landmarks into the game, turning everyday environments into exciting adventure settings.
+3. Motivate users to stay active and maintain a consistent fitness routine by blending physical activity with a captivating storyline.
+
+## Features
+
+1. **Augmented Reality Workouts:**
+
+- FitQuest utilizes AR technology to overlay game elements onto the real-world environment, creating an immersive and dynamic workout experience.
+- Users engage in exercises that align with the game's storyline while interacting with virtual elements superimposed on their surroundings.
+
+2. **Interactive Storyline and Challenges:**
+
+- The app features an adventure-driven storyline where users embark on quests and missions to complete fitness challenges.
+- Challenges include cardio exercises, strength training, and flexibility workouts, seamlessly integrated into the game's narrative.
+
+3. **Real-World Landmarks Integration:**
+
+- FitQuest incorporates real-world landmarks and locations as key elements in the game, turning parks, streets, and other environments into virtual fitness arenas.
+- Users explore these locations while completing fitness challenges and unlocking new levels.
+
+4. **Multiplayer Mode and Team Challenges:**
+
+- Users can connect with friends or join teams to participate in multiplayer challenges.
+- Team-based missions encourage collaboration and friendly competition, enhancing the social aspect of fitness.
+
+5. **Fitness Tracking and Progress Monitoring:**
+
+- The app includes a comprehensive fitness tracking system that monitors users' progress, calories burned, and achievements.
+- Users can set personalized fitness goals and track their improvement over time.
+
+## Technology Stack
+
+- Frontend: Unity for AR game development.
+- Backend: Node.js for handling server-side logic and real-time data synchronization.
+- Database: MongoDB for storing user profiles, fitness data, and game progress.
+- AR Integration: ARCore (Android) and ARKit (iOS) for augmented reality features.
+
+## Outcome
+
+FitQuest has transformed the fitness landscape by merging physical activity with immersive gaming experiences. Users not only enjoy staying active but also find motivation in the storyline and challenges, creating a unique and entertaining approach to maintaining a healthy lifestyle.
+
+**Note:** This case study is entirely fictional and created for the purpose of showcasing [Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/).

src/content/projects/project-7.md

@@ -0,0 +1,62 @@
+---
+title: CryptoTrader - Cryptocurrency Portfolio Manager
+description: CryptoTrader Dashboard is a comprehensive web application designed to empower cryptocurrency enthusiasts with tools to manage and optimize their digital asset portfolios.
+publishDate: 'Jan 10 2024'
+isFeatured: true
+seo:
+  image:
+    src: 'project-7.jpg'
+---
+
+![Project preview](/project-7.jpg)
+
+**Note:** This case study is entirely fictional and created for the purpose of showcasing [Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/).
+
+**Project Overview:**
+CryptoTrader Dashboard is a comprehensive web application designed to empower cryptocurrency enthusiasts with tools to manage and optimize their digital asset portfolios. By providing real-time market data, analytics, and portfolio tracking, the dashboard offers a seamless experience for users to monitor and enhance their cryptocurrency investments.
+
+## Objectives
+
+1. Develop a user-friendly and feature-rich dashboard that consolidates real-time data from various cryptocurrency exchanges.
+2. Provide tools for users to analyze market trends, track their portfolio performance, and make informed investment decisions.
+3. Create a secure and efficient platform that ensures users have a holistic view of their cryptocurrency holdings.
+
+## Features
+
+1. **Multi-Exchange Integration:**
+
+- CryptoTrader Dashboard aggregates data from multiple cryptocurrency exchanges, allowing users to view their entire portfolio in one centralized location.
+- Real-time updates provide the latest market prices, trading volumes, and order book data.
+
+2. **Portfolio Analytics:**
+
+- Users can analyze their portfolio's performance through interactive charts and graphs.
+- The dashboard offers insights into historical performance, asset allocation, and profit/loss over time.
+
+3. **Risk Management Tools:**
+
+- Advanced risk management tools help users assess the volatility and potential risks associated with their cryptocurrency investments.
+- Users receive alerts for significant market fluctuations or changes in their portfolio value.
+
+4. **Automated Transaction Tracking:**
+
+- The dashboard automatically tracks and records users' cryptocurrency transactions, simplifying the process of updating and managing portfolios.
+- Users can categorize transactions, add notes, and maintain a comprehensive transaction history.
+
+5. **News and Market Insights:**
+
+- A dedicated section provides real-time news and market insights relevant to users' cryptocurrency holdings.
+- Users can stay informed about market trends, regulatory developments, and news affecting their investment decisions.
+
+## Technology Stack
+
+- Frontend: React for a responsive and interactive user interface.
+- Backend: Django for server-side logic and API integration.
+- Database: PostgreSQL for efficient storage and retrieval of portfolio and market data.
+- API Integration: Integration with cryptocurrency exchange APIs for real-time market data.
+
+## Outcome
+
+CryptoTrader Dashboard has become a trusted companion for cryptocurrency investors, offering a consolidated and user-friendly platform for managing their portfolios. The robust analytics, real-time market data, and risk management tools empower users to make informed decisions and navigate the dynamic world of cryptocurrency with confidence.
+
+**Note:** This case study is entirely fictional and created for the purpose of showcasing [Dante Astro.js theme functionality](https://justgoodui.com/astro-themes/dante/).

src/data/site-config.ts

@@ -0,0 +1,121 @@
+export type Image = {
+    src: string;
+    alt?: string;
+    caption?: string;
+};
+
+export type Link = {
+    text: string;
+    href: string;
+};
+
+export type Hero = {
+    title?: string;
+    text?: string;
+    image?: Image;
+    actions?: Link[];
+};
+
+export type Subscribe = {
+    title?: string;
+    text?: string;
+    formUrl: string;
+};
+
+export type SiteConfig = {
+    logo?: Image;
+    title: string;
+    subtitle?: string;
+    description: string;
+    image?: Image;
+    headerNavLinks?: Link[];
+    footerNavLinks?: Link[];
+    socialLinks?: Link[];
+    hero?: Hero;
+    subscribe?: Subscribe;
+    postsPerPage?: number;
+    projectsPerPage?: number;
+};
+
+const siteConfig: SiteConfig = {
+    title: 'Dante',
+    subtitle: 'Minimal Astro.js theme',
+    description: 'Astro.js and Tailwind CSS theme for blog and portfolio by justgoodui.com',
+    image: {
+        src: '/dante-preview.jpg',
+        alt: 'Dante - Astro.js and Tailwind CSS theme'
+    },
+    headerNavLinks: [
+        {
+            text: 'Home',
+            href: '/'
+        },
+        {
+            text: 'Projects',
+            href: '/projects'
+        },
+        {
+            text: 'Blog',
+            href: '/blog'
+        },
+        {
+            text: 'Tags',
+            href: '/tags'
+        }
+    ],
+    footerNavLinks: [
+        {
+            text: 'About',
+            href: '/about'
+        },
+        {
+            text: 'Contact',
+            href: '/contact'
+        },
+        {
+            text: 'Terms',
+            href: '/terms'
+        },
+        {
+            text: 'Download theme',
+            href: 'https://github.com/JustGoodUI/dante-astro-theme'
+        }
+    ],
+    socialLinks: [
+        {
+            text: 'Dribbble',
+            href: 'https://dribbble.com/'
+        },
+        {
+            text: 'Instagram',
+            href: 'https://instagram.com/'
+        },
+        {
+            text: 'X/Twitter',
+            href: 'https://twitter.com/'
+        }
+    ],
+    hero: {
+        title: 'Hi There & Welcome to My Corner of the Web!',
+        text: "I'm **Ethan Donovan**, a web developer at Amazing Studio, dedicated to the realms of collaboration and artificial intelligence. My approach involves embracing intuition, conducting just enough research, and leveraging aesthetics as a catalyst for exceptional products. I have a profound appreciation for top-notch software, visual design, and the principles of product-led growth. Feel free to explore some of my coding endeavors on <a href='https://github.com/JustGoodUI/dante-astro-theme'>GitHub</a> or follow me on <a href='https://twitter.com/justgoodui'>Twitter/X</a>.",
+        image: {
+            src: '/hero.jpeg',
+            alt: 'A person sitting at a desk in front of a computer'
+        },
+        actions: [
+            {
+                text: 'Get in Touch',
+                href: '/contact'
+            }
+        ]
+    },
+    subscribe: {
+        title: 'Subscribe to Dante Newsletter',
+        text: 'One update per week. All the latest posts directly in your inbox.',
+        formUrl: '#'
+    },
+    postsPerPage: 8,
+    projectsPerPage: 8
+};
+
+export default siteConfig;

src/icons/ArrowLeft.astro

@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const { class: className, ...props } = Astro.props;
+---
+
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class={className} {...props}>
+    <path
+        d="M19.714 12c0 0.533-0.432 0.964-0.964 0.964v0h-11.172l4.14 4.138c0.175 0.175 0.283 0.416 0.283 0.683 0 0.533-0.432 0.965-0.965 0.965-0.267 0-0.508-0.108-0.683-0.283v0l-5.785-5.785c-0.175-0.175-0.283-0.416-0.283-0.683s0.108-0.508 0.283-0.683l5.785-5.785c0.175-0.175 0.416-0.283 0.683-0.283 0.533 0 0.965 0.432 0.965 0.965 0 0.267-0.108 0.508-0.283 0.683v0l-4.14 4.138h11.172c0.533 0 0.964 0.432 0.964 0.964v0z"
+    ></path>
+</svg>

src/icons/ArrowRight.astro

@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const { class: className, ...props } = Astro.props;
+---
+
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class={className} {...props}>
+    <path
+        d="M4.286 12c0-0.533 0.432-0.964 0.964-0.964v0h11.172l-4.14-4.138c-0.175-0.175-0.283-0.416-0.283-0.683 0-0.533 0.432-0.965 0.965-0.965 0.267 0 0.508 0.108 0.683 0.283v0l5.785 5.785c0.175 0.175 0.283 0.416 0.283 0.683s-0.108 0.508-0.283 0.683l-5.785 5.785c-0.175 0.175-0.416 0.283-0.683 0.283-0.533 0-0.965-0.432-0.965-0.965 0-0.267 0.108-0.508 0.283-0.683v0l4.14-4.138h-11.172c-0.533 0-0.964-0.432-0.964-0.964v0z"
+    ></path>
+</svg>

src/layouts/BaseLayout.astro

@@ -0,0 +1,34 @@
+---
+import { ClientRouter } from 'astro:transitions';
+import BaseHead, { type Props as HeadProps } from '../components/BaseHead.astro';
+import Footer from '../components/Footer.astro';
+import Header from '../components/Header.astro';
+import Nav from '../components/Nav.astro';
+
+export type Props = HeadProps & { showHeader?: boolean };
+
+const { showHeader = true, ...head } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en" class="antialiased break-words">
+    <head>
+        <BaseHead {...head} />
+        <script>
+            if (localStorage.theme === 'dark') {
+                document.documentElement.classList.add('dark');
+            }
+        </script>
+        <ClientRouter />
+    </head>
+    <body class="bg-main text-main">
+        <div class="flex flex-col min-h-screen px-4 md:px-8">
+            <Nav />
+            {showHeader && <Header />}
+            <main class="grow w-full max-w-3xl mx-auto">
+                <slot />
+            </main>
+            <Footer />
+        </div>
+    </body>
+</html>

src/pages/[...id].astro

@@ -0,0 +1,31 @@
+---
+import { type CollectionEntry, getCollection, render } from 'astro:content';
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+export async function getStaticPaths() {
+    const pages = await getCollection('pages');
+    return pages.map((page) => {
+        return {
+            params: { id: page.id },
+            props: { page }
+        };
+    });
+}
+
+type Props = { page: CollectionEntry<'pages'> };
+
+const { page } = Astro.props;
+const { title, seo } = page.data;
+const { Content } = await render(page);
+---
+
+<BaseLayout title={seo?.title ?? title} description={seo?.description} image={seo?.image} showHeader={false}>
+    <article class="mb-16 sm:mb-24">
+        <header class="mb-8">
+            <h1 class="text-3xl leading-tight font-serif font-medium sm:text-5xl sm:leading-tight">{title}</h1>
+        </header>
+        <div class="max-w-none prose prose-dante sm:prose-lg">
+            <Content />
+        </div>
+    </article>
+</BaseLayout>

src/pages/blog/[...page].astro

@@ -0,0 +1,32 @@
+---
+import type { GetStaticPathsOptions, Page } from 'astro';
+import { type CollectionEntry, getCollection } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import Pagination from '../../components/Pagination.astro';
+import PostPreview from '../../components/PostPreview.astro';
+import Subscribe from '../../components/Subscribe.astro';
+import siteConfig from '../../data/site-config';
+import { sortItemsByDateDesc } from '../../utils/data-utils';
+
+export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
+    const posts = (await getCollection('blog')).sort(sortItemsByDateDesc);
+    return paginate(posts, { pageSize: siteConfig.postsPerPage || 4 });
+}
+
+type Props = { page: Page<CollectionEntry<'blog'>> };
+
+const { page } = Astro.props;
+const blog = page.data;
+---
+
+<BaseLayout
+    title="Blog"
+    description="Embark on a journey of personal insights and experiences through my blog"
+    image={{ src: '/dante-preview.jpg', alt: 'The preview of the site' }}
+    showHeader={false}
+>
+    <h1 class="mb-12 text-2xl leading-tight font-serif italic sm:mb-16 sm:text-4xl">Blog Archive</h1>
+    {blog.map((post) => <PostPreview post={post} class="mb-10 sm:mb-12" />)}
+    <Pagination page={page} class="my-16 sm:my-24" />
+    <Subscribe class="my-16 sm:my-24" />
+</BaseLayout>

src/pages/blog/[id].astro

@@ -0,0 +1,100 @@
+---
+import { type CollectionEntry, getCollection, render } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import Button from '../../components/Button.astro';
+import FormattedDate from '../../components/FormattedDate.astro';
+import PostPreview from '../../components/PostPreview.astro';
+import Subscribe from '../../components/Subscribe.astro';
+import { sortItemsByDateDesc } from '../../utils/data-utils';
+import { slugify } from '../../utils/common-utils';
+
+export async function getStaticPaths() {
+    const posts = (await getCollection('blog')).sort(sortItemsByDateDesc);
+    const postCount = posts.length;
+    return posts.map((post, index) => ({
+        params: { id: post.id },
+        props: {
+            post,
+            prevPost: index + 1 !== postCount ? posts[index + 1] : null,
+            nextPost: index !== 0 ? posts[index - 1] : null
+        }
+    }));
+}
+
+type Props = { post: CollectionEntry<'blog'>; prevPost: CollectionEntry<'blog'>; nextPost: CollectionEntry<'blog'> };
+
+const { href } = Astro.url;
+const { post, prevPost, nextPost } = Astro.props;
+const { title, publishDate, updatedDate, excerpt, tags = [], seo } = post.data;
+const { Content } = await render(post);
+---
+
+<BaseLayout title={seo?.title ?? title} description={seo?.description ?? excerpt} image={seo?.image} pageType="article" showHeader={false}>
+    <article class="mb-16 sm:mb-24">
+        <header class="mb-8">
+            <h1 class="text-3xl leading-tight font-serif font-medium sm:text-5xl sm:leading-tight">{title}</h1>
+            <div class="mt-4 text-sm">
+                <FormattedDate date={publishDate} />
+                {
+                    updatedDate && (
+                        <>
+                            {' '}
+                            <span>
+                                (Updated on <FormattedDate date={updatedDate} />)
+                            </span>
+                        </>
+                    )
+                }
+            </div>
+        </header>
+        <div class="max-w-none prose prose-dante sm:prose-lg">
+            <Content />
+        </div>
+        <div class="mt-8 flex flex-wrap items-center gap-6 text-sm justify-between sm:mt-12 sm:text-base">
+            {
+                tags.length > 0 && (
+                    <div class="flex flex-wrap gap-x-5 gap-y-1 text-sm">
+                        {tags.map((tag) => (
+                            <a class="text-main hover:underline" href={`/tags/${slugify(tag)}`}>
+                                #{tag}
+                            </a>
+                        ))}
+                    </div>
+                )
+            }
+            <Button class="copy-url-button" aria-label="Copy link" data-url={href} data-tooltip-default="Copy link" data-tooltip-success="Copied">Share</Button>
+        </div>
+    </article>
+    {
+        (prevPost || nextPost) && (
+            <div class="my-16 sm:my-24">
+                <h2 class="mb-12 text-xl font-serif italic sm:mb-16 sm:text-2xl">Read Next</h2>
+                {nextPost && <PostPreview post={nextPost} class="mb-10 sm:mb-12" headingLevel="h3" />}
+                {prevPost && <PostPreview post={prevPost} class="mb-10 sm:mb-12" headingLevel="h3" />}
+            </div>
+        )
+    }
+    <Subscribe class="my-16 sm:my-24" />
+</BaseLayout>
+
+<script>
+    document.addEventListener('astro:page-load', () => {
+        const copyUrlButton = document.querySelector('.copy-url-button') as HTMLButtonElement;
+        copyUrlButton?.addEventListener('click', async () => {
+            await copyUrl(copyUrlButton);
+        });
+
+        async function copyUrl(button: HTMLButtonElement) {
+            let url = button.getAttribute('data-url') || '';
+            let label = button.innerText;
+
+            await navigator.clipboard.writeText(url);
+
+            button.innerText = 'Copied';
+
+            setTimeout(() => {
+                button.innerText = label;
+            }, 2500);
+        }
+    });
+</script>

src/pages/index.astro

@@ -0,0 +1,46 @@
+---
+import { getCollection } from 'astro:content';
+import BaseLayout from '../layouts/BaseLayout.astro';
+import Button from '../components/Button.astro';
+import Hero from '../components/Hero.astro';
+import PostPreview from '../components/PostPreview.astro';
+import ProjectPreview from '../components/ProjectPreview.astro';
+import siteConfig from '../data/site-config';
+import { sortItemsByDateDesc } from '../utils/data-utils';
+
+const posts = (await getCollection('blog')).sort(sortItemsByDateDesc);
+const featuredPosts = posts.filter(({ data }) => data.isFeatured);
+
+const projects = (await getCollection('projects')).sort(sortItemsByDateDesc);
+const featuredProjects = projects.filter(({ data }) => data.isFeatured);
+---
+
+<BaseLayout description={siteConfig.description} image={siteConfig.image}>
+    <Hero />
+    {
+        featuredProjects?.length > 0 && (
+            <div class="mb-16 sm:mb-24">
+                <h2 class="mb-12 text-xl font-serif italic sm:mb-16 sm:text-2xl">Projects</h2>
+                {featuredProjects.map((project) => (
+                    <ProjectPreview project={project} class="mb-10 sm:mb-12" headingLevel="h3" />
+                ))}
+                <div class="mt-12 sm:mt-16">
+                    <Button href="/projects">View All Projects</Button>
+                </div>
+            </div>
+        )
+    }
+    {
+        featuredPosts?.length > 0 && (
+            <div class="mb-16 sm:mb-24">
+                <h2 class="mb-12 text-xl font-serif italic sm:mb-16 sm:text-2xl">Writing</h2>
+                {featuredPosts.map((post) => (
+                    <PostPreview post={post} class="mb-10 sm:mb-12" headingLevel="h3" />
+                ))}
+                <div class="mt-12 sm:mt-16">
+                    <Button href="/blog">View All Posts</Button>
+                </div>
+            </div>
+        )
+    }
+</BaseLayout>

src/pages/projects/[...page].astro

@@ -0,0 +1,30 @@
+---
+import type { GetStaticPathsOptions, Page } from 'astro';
+import { type CollectionEntry, getCollection } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import Pagination from '../../components/Pagination.astro';
+import ProjectPreview from '../../components/ProjectPreview.astro';
+import siteConfig from '../../data/site-config';
+import { sortItemsByDateDesc } from '../../utils/data-utils';
+
+export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
+    const projects = (await getCollection('projects')).sort(sortItemsByDateDesc);
+    return paginate(projects, { pageSize: siteConfig.projectsPerPage || 6 });
+}
+
+type Props = { page: Page<CollectionEntry<'projects'>> };
+
+const { page } = Astro.props;
+const portfolio = page.data;
+---
+
+<BaseLayout
+    title="Portfolio"
+    description="Explore a diverse portfolio showcasing my passion and expertise"
+    image={{ src: '/dante-preview.jpg', alt: 'The preview of the site' }}
+    showHeader={false}
+>
+    <h1 class="mb-12 text-2xl leading-tight font-serif italic sm:mb-16 sm:text-4xl">Projects</h1>
+    {portfolio.map((project) => <ProjectPreview project={project} class="mb-10 sm:mb-12" />)}
+    <Pagination page={page} class="my-16 sm:my-24" />
+</BaseLayout>

src/pages/projects/[id].astro

@@ -0,0 +1,45 @@
+---
+import { type CollectionEntry, getCollection, render } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import ProjectPreview from '../../components/ProjectPreview.astro';
+import { sortItemsByDateDesc } from '../../utils/data-utils';
+
+export async function getStaticPaths() {
+    const projects = (await getCollection('projects')).sort(sortItemsByDateDesc);
+    const projectCount = projects.length;
+    return projects.map((project, index) => ({
+        params: { id: project.id },
+        props: {
+            project,
+            prevProject: index + 1 !== projectCount ? projects[index + 1] : null,
+            nextProject: index !== 0 ? projects[index - 1] : null
+        }
+    }));
+}
+
+type Props = { project: CollectionEntry<'projects'>; prevProject: CollectionEntry<'projects'>; nextProject: CollectionEntry<'projects'> };
+
+const { project, prevProject, nextProject } = Astro.props;
+const { title, description, seo } = project.data;
+const { Content } = await render(project);
+---
+
+<BaseLayout title={seo?.title ?? title} description={seo?.description ?? description} image={seo?.image} pageType="article" showHeader={false}>
+    <article class="mb-16 sm:mb-24">
+        <header class="mb-8">
+            <h1 class="text-3xl leading-tight font-serif font-medium sm:text-5xl sm:leading-tight">{title}</h1>
+        </header>
+        <div class="max-w-none prose prose-dante sm:prose-lg">
+            <Content />
+        </div>
+    </article>
+    {
+        (prevProject || nextProject) && (
+            <div class="my-16 sm:my-24">
+                <h2 class="mb-12 text-xl font-serif italic sm:mb-16 sm:text-2xl">View Next</h2>
+                {nextProject && <ProjectPreview project={nextProject} class="mb-10 sm:mb-12" headingLevel="h3" />}
+                {prevProject && <ProjectPreview project={prevProject} class="mb-10 sm:mb-12" headingLevel="h3" />}
+            </div>
+        )
+    }
+</BaseLayout>

src/pages/rss.xml.js

@@ -0,0 +1,19 @@
+import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+import siteConfig from '../data/site-config.ts';
+import { sortItemsByDateDesc } from '../utils/data-utils.ts';
+
+export async function GET(context) {
+    const posts = (await getCollection('blog')).sort(sortItemsByDateDesc);
+    return rss({
+        title: siteConfig.title,
+        description: siteConfig.description,
+        site: context.site,
+        items: posts.map((item) => ({
+            title: item.data.title,
+            description: item.data.excerpt,
+            link: `/blog/${item.id}/`,
+            pubDate: item.data.publishDate.setUTCHours(0)
+        }))
+    });
+}

src/pages/tags/[id]/[...page].astro

@@ -0,0 +1,46 @@
+---
+import type { GetStaticPathsOptions, Page } from 'astro';
+import { type CollectionEntry, getCollection } from 'astro:content';
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import Pagination from '../../../components/Pagination.astro';
+import PostPreview from '../../../components/PostPreview.astro';
+import Subscribe from '../../../components/Subscribe.astro';
+import siteConfig from '../../../data/site-config';
+import { sortItemsByDateDesc, getAllTags, getPostsByTag } from '../../../utils/data-utils';
+
+export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
+    const posts = (await getCollection('blog')).sort(sortItemsByDateDesc);
+    const tags = getAllTags(posts);
+
+    return tags.flatMap((tag) => {
+        const filteredPosts = getPostsByTag(posts, tag.id);
+        return paginate(filteredPosts, {
+            params: { id: tag.id },
+            pageSize: siteConfig.postsPerPage || 4
+        });
+    });
+}
+
+type Props = { page: Page<CollectionEntry<'blog'>> };
+
+const { page } = Astro.props;
+const blog = page.data;
+const params = Astro.params;
+const allPosts = await getCollection('blog');
+const allTags = getAllTags(allPosts);
+const currentTag = allTags.find((tag) => {
+    return tag.id === params.id;
+});
+---
+
+<BaseLayout
+    title={`Posts Tagged ${currentTag?.name}`}
+    description={`Explore a curated collection of blog posts under ${currentTag?.name}`}
+    image={{ src: '/dante-preview.jpg', alt: 'The preview of the site' }}
+    showHeader={false}
+>
+    <h1 class="mb-12 text-2xl leading-tight font-serif italic sm:mb-16 sm:text-4xl">Posts Tagged "{currentTag?.name}"</h1>
+    {blog.map((post) => <PostPreview post={post} class="mb-10 sm:mb-12" />)}
+    <Pagination page={page} class="my-16 sm:my-24" />
+    <Subscribe class="my-16 sm:my-24" />
+</BaseLayout>

src/pages/tags/index.astro

@@ -0,0 +1,43 @@
+---
+import { getCollection } from 'astro:content';
+import ArrowRight from '../../icons/ArrowRight.astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import Subscribe from '../../components/Subscribe.astro';
+import { sortItemsByDateDesc, getAllTags, getPostsByTag } from '../../utils/data-utils';
+
+const posts = (await getCollection('blog')).sort(sortItemsByDateDesc);
+const tags = getAllTags(posts).sort((tagA, tagB) => {
+    const postCountTagA = getPostsByTag(posts, tagA.id).length;
+    const postCountTagB = getPostsByTag(posts, tagB.id).length;
+    return postCountTagB - postCountTagA;
+});
+---
+
+<BaseLayout
+    title="Tags"
+    description="Explore tag directory for easy navigation and discovery. Find a wide range of topics, articles, and insights organized by tags, making it effortless to locate the content that interests you most."
+    showHeader={false}
+>
+    <h1 class="mb-12 text-2xl font-serif italic sm:mb-16 sm:text-4xl">All Tags</h1>
+    {
+        tags.map((tag) => {
+            const postCount = getPostsByTag(posts, tag.id).length;
+            return (
+                <a class="mb-10 flex justify-between items-start gap-8 group sm:mb-12" href={`/tags/${tag.id}`}>
+                    <div class="grow">
+                        <h2 class="text-xl leading-tight font-serif font-medium group-hover:underline group-hover:decoration-dashed group-hover:underline-offset-4 group-hover:decoration-1 sm:text-2xl">
+                            {tag.name}
+                        </h2>
+                        <div class="mt-1 text-sm leading-normal">
+                            {postCount} {postCount === 1 ? 'post' : 'posts'}
+                        </div>
+                    </div>
+                    <div class="hidden font-serif italic opacity-0 transition group-hover:opacity-100 sm:inline-flex sm:gap-1 sm:items-center sm:shrink-0">
+                        View Tag Archive <ArrowRight class="fill-current w-4 h-4" />
+                    </div>
+                </a>
+            );
+        })
+    }
+    <Subscribe class="my-16 sm:my-24" />
+</BaseLayout>

src/styles/global.css

@@ -0,0 +1,54 @@
+@import '@fontsource-variable/inter';
+@import '@fontsource-variable/newsreader';
+@import '@fontsource-variable/newsreader/wght-italic.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --color-text-main: 23 23 23; /* #171717 */
+        --color-bg-main: 242 241 236; /* #F2F1EC */
+        --color-bg-muted: 234 233 225; /* #EAE9E1 */
+        --color-border-main: 23 23 23; /* #171717 */
+    }
+    html.dark {
+        --color-text-main: 242 241 236; /* #F2F1EC */
+        --color-bg-main: 23 23 23; /* #171717 */
+        --color-bg-muted: 36 36 36; /* #242424 */
+        --color-border-main: 242 241 236; /* #F2F1EC */
+    }
+
+    /* Cyan */
+    /*
+    :root {
+        --color-text-main: 22 42 43;
+        --color-bg-main: 214 224 226;
+        --color-bg-muted: 204 216 219;
+        --color-border-main: 22 42 43;
+    }
+    html.dark {
+        --color-text-main: 214 224 226;
+        --color-bg-main: 22 42 43;
+        --color-bg-muted: 28 53 55;
+        --color-border-main: 214 224 226;
+    }
+    */
+
+    /* Green */
+    /*
+    :root {
+        --color-text-main: 58 66 56;
+        --color-bg-main: 243 239 230;
+        --color-bg-muted: 238 233 220;
+        --color-border-main: 58 66 56;
+    }
+    html.dark {
+        --color-text-main: 243 239 230;
+        --color-bg-main: 94 108 91;
+        --color-bg-muted: 89 103 86;
+        --color-border-main: 243 239 230;
+    }
+    */
+}

src/utils/common-utils.ts

@@ -0,0 +1,17 @@
+export function slugify(input?: string) {
+    if (!input) return '';
+
+    // make lower case and trim
+    var slug = input.toLowerCase().trim();
+
+    // remove accents from charaters
+    slug = slug.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+
+    // replace invalid chars with spaces
+    slug = slug.replace(/[^a-z0-9\s-]/g, ' ').trim();
+
+    // replace multiple spaces or hyphens with a single hyphen
+    slug = slug.replace(/[\s-]+/g, '-');
+
+    return slug;
+}

src/utils/data-utils.ts

@@ -0,0 +1,25 @@
+import { type CollectionEntry } from 'astro:content';
+import { slugify } from './common-utils';
+
+export function sortItemsByDateDesc(itemA: CollectionEntry<'blog' | 'projects'>, itemB: CollectionEntry<'blog' | 'projects'>) {
+    return new Date(itemB.data.publishDate).getTime() - new Date(itemA.data.publishDate).getTime();
+}
+
+export function getAllTags(posts: CollectionEntry<'blog'>[]) {
+    const tags: string[] = [...new Set(posts.flatMap((post) => post.data.tags || []).filter(Boolean))];
+    return tags
+        .map((tag) => {
+            return {
+                name: tag,
+                id: slugify(tag)
+            };
+        })
+        .filter((obj, pos, arr) => {
+            return arr.map((mapObj) => mapObj.id).indexOf(obj.id) === pos;
+        });
+}
+
+export function getPostsByTag(posts: CollectionEntry<'blog'>[], tagId: string) {
+    const filteredPosts: CollectionEntry<'blog'>[] = posts.filter((post) => (post.data.tags || []).map((tag) => slugify(tag)).includes(tagId));
+    return filteredPosts;
+}

tailwind.config.cjs

@@ -0,0 +1,85 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+module.exports = {
+    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}'],
+    darkMode: 'class',
+    theme: {
+        fontFamily: {
+            sans: ['Inter Variable', ...defaultTheme.fontFamily.sans],
+            serif: ['Newsreader Variable', ...defaultTheme.fontFamily.serif]
+        },
+        extend: {
+            textColor: {
+                main: 'rgb(var(--color-text-main) / <alpha-value>)'
+            },
+            backgroundColor: {
+                main: 'rgb(var(--color-bg-main) / <alpha-value>)',
+                muted: 'rgb(var(--color-bg-muted) / <alpha-value>)'
+            },
+            borderColor: {
+                main: 'rgb(var(--color-border-main) / <alpha-value>)'
+            },
+            typography: (theme) => ({
+                dante: {
+                    css: {
+                        '--tw-prose-body': theme('textColor.main / 100%'),
+                        '--tw-prose-headings': theme('textColor.main / 100%'),
+                        '--tw-prose-lead': theme('textColor.main / 100%'),
+                        '--tw-prose-links': theme('textColor.main / 100%'),
+                        '--tw-prose-bold': theme('textColor.main / 100%'),
+                        '--tw-prose-counters': theme('textColor.main / 100%'),
+                        '--tw-prose-bullets': theme('textColor.main / 100%'),
+                        '--tw-prose-hr': theme('borderColor.main / 100%'),
+                        '--tw-prose-quotes': theme('textColor.main / 100%'),
+                        '--tw-prose-quote-borders': theme('borderColor.main / 100%'),
+                        '--tw-prose-captions': theme('textColor.main / 100%'),
+                        '--tw-prose-code': theme('textColor.main / 100%'),
+                        '--tw-prose-pre-code': theme('colors.zinc.100'),
+                        '--tw-prose-pre-bg': theme('colors.zinc.800'),
+                        '--tw-prose-th-borders': theme('borderColor.main / 100%'),
+                        '--tw-prose-td-borders': theme('borderColor.main / 100%')
+                    }
+                },
+                DEFAULT: {
+                    css: {
+                        a: {
+                            fontWeight: 'normal',
+                            textDecoration: 'underline',
+                            textDecorationStyle: 'dashed',
+                            textDecorationThickness: '1px',
+                            textUnderlineOffset: '2px',
+                            '&:hover': {
+                                textDecorationStyle: 'solid'
+                            }
+                        },
+                        'h1,h2,h3,h4,h5,h6': {
+                            fontFamily: theme('fontFamily.serif'),
+                            fontWeight: 500
+                        },
+                        blockquote: {
+                            border: 0,
+                            fontFamily: theme('fontFamily.serif'),
+                            fontSize: '1.3125em',
+                            fontStyle: 'italic',
+                            fontWeight: 'normal',
+                            lineHeight: 1.4,
+                            paddingLeft: 0,
+                            '@media (min-width: theme("screens.sm"))': {
+                                fontSize: '1.66667em',
+                                lineHeight: 1.3
+                            }
+                        }
+                    }
+                },
+                lg: {
+                    css: {
+                        blockquote: {
+                            paddingLeft: 0
+                        }
+                    }
+                }
+            })
+        }
+    },
+    plugins: [require('@tailwindcss/typography')]
+};

tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "strictNullChecks": true
+  }
+}