Site Used AI
I heard a lot about AstroJS and its capabilities, especially for static site generation (SSG). So I decided to build my website using it and at the same time try this framework. In addition, I am happy that I did so. I loved this framework.
I take some time to understand how things work, and the learning curve of Astro is faster than most other frameworks. I suggest it for anyone, especially for the SSG sites like portfolios and blogs. Since Astro works to serve zero JavaScript by default, it makes the whole page HTML, which is best for SEO.
Let's talk about my website:
My website includes my portfolio, blog, projects, repos, education, technologies, now page, biolink (you could only get to by going to /bio from the search bar), and contact page. All these pages are built using Astro, which includes the functionality of the contact form.
The portfolio includes sections for favourite technologies, projects, and current education, and all the sections include a link to a full page of info, not just what appears in the portfolio.
All the website content is written as markdown files or mdx files that enable me to change the content of the whole website by just using the integrated cms (decap cms).
I have used some beautiful astro community integrations rather than the official integrations, which are vite-pwa/astro and astro-collection-search. That makes setting something like the search and PWA easier for the website.
One of the largest problems that I faced during building this website is that when you use clientrouter, Astro downloads the page content, not the scripts, and that could affect things like the theme toggle and the search overlay handling, after swapping, and you should use astro:after-swap lifecycle event from astro to solve that, but things usually do not work as expected.
You may ask what the benefit of the client router is; it enables you to move between pages without reloading the whole page with smooth transitions.
Rather than suffer, I make Astro my favourite frontend framework.
What AI helped with:
- Styling my website and choosing colors
- Solving some problems (wasn't very useful in most cases since Astro was still considered a new framework, so most of his knowledge is old, even before Astro 5, but it was considered helpful).
- Writing some of the page's content and the readme
- Helped in creating the website favicon.
Followers
No followers yet
Ship Your Project
Get ready!
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
Timeline
I have finalized the website for now, solved the problem of the PWA not working, and updated its config with a custom manifest file. Updated the readme file and added MIT license. In addition, I added vercel.json to handle caches
This is a video moving through the whole website
I have solved the problem of search overlay by swapping, and I have added favicons and icons to the website. I have added integration for Vite-PWA and changed the titles and description for the website.
Improved the blog styles and added pagination, added author pages, solved the problem of themes and search overlay after swapping, and enhanced the styles of the search overlay. Added RSS feed for the blog posts using astro/rss. Added system theme option to the themes. A lot of problems occur because of the client routing and swapping, and that's painful. Currently, there are some problems with the search overlay in the blog. I will work on them during the next development session. However, most of the website functionality is good now, and you could test it from Here.
During this devlog, I created the projects section and the education section that show the current education records in the portfolio. In addition, I have created education pages that display my complete education records throughout my life. In addition, I have created a projects section with a link to the repo page. I have created the hero section and improved the about section. Now, the project is running on my domain
You could view the full details at this commit
In this devlog, I have worked on improving the blog by adding a search to the blog. In addition, I have started working on the portfolio, I have completed the about section and technologies section. I want to make things different than any portfolio and at the same time benefit from astro ssg abilities. So, after created my technologies section as any normal portfolio. I have changed the way of displaying technologies to display only the favourite technologies, not all technologies, and made another page at /tech to view the full list of my skills and technologies with a simple description and a link to more info on an external website. I am working on making my website provide the full content from markdown files to enable editing from decap cms at production without changing the source code, and thanks to Astro for that.
During this devlog, I have resolved the issues with content loading, and I have enhanced the blog post UI to be better. In addition, I have added the Netlify adaptor to the astro config to enable the deploying with the SSR (server side rendering) functions and API routes. I have added functions for client-side tracking and send the information of the sender to the entered email to avoid any suspious and bad users behaiver using the contact form. I have added a default reply message that will be sent to the user after using the contact form with the data provided in the form and the user's IP address, city, and country. I have implemented themes for the reply message, dark and light, that will be sent to the user according to his chosen theme on the website.
In this time, I have created complete light/dark mode support for all the completed pages, and I have improved the contact form functionality by loading and disabling the state for 2 seconds to avoid sending a lot of emails by mistake. I made the mailer send the form content to the sender's email.
At this time, I have created a live config for my Hackatime stats and added it to the top of the repository's page, along with a block for them. This made the stats page useless for now, so I have removed it. In addition, I have created a new page called the 'now' page, which is a page where you write about what you are doing in the present time. If you want to understand more about the now pages, you could view THIS for more info. At the end, I have created a contact me page (frontend only for now), and I am handling the logic for submission and so on now. I will work on that in the coming devlog. Things could seem easy to do, but using live config is so confusing.
I am happy to have reached this moment after hours of trying to use Astro live.config from Astro 5.10 (astro now at 5.11 btw). The feature is known, so using it was not that easy since it is a new feature and their no way to use it except from the docs, and I failed a lot of type errors since the feature expects a specific way of setting data and types not as anyone want. However the process of learning was so funny. I am happy now to complete the repos page using this beautiful feature.
I am now working on improving the blog and not just like before by adding pagination, searching, and things like that. But first, I am currently working on improving the style of the blog. In addition, I am currently trying to find I way where I could use the astro/image integration since this Image component provides image optimization to your image by turning them to webp or avif, and that provides faster moving. However, the problem is that when the photos are in the src directory, you should import the img src as a component and put it in the src of the astro/image component, so I am trying to find a way to make that dynamically according to each post but their are some problems that I face some problem in that. In addition, while I am reading the astro blog for the latest updates, during Astro 5.0 and higher. I found something called live.config, which is a built-in feature in Astro that lets you load and fetch the content dynamically, and I think it is better than using client-side data fetching in my stats page.
What I have created to:
I created the blog posts layout, the head, and the cards for them. Updated the posts collections to use the latest Astro content API with glob, set a 404 page, and improved the styling of the bio page and more, but this is what I remember to write for now.
I was working on updating the blog, so I have created the navbar and the footer of the blog section. In addition, I have created the stats page with some stats like my coding time for today and the overall total, and the latest 2 repos I have created on GitHub. I used the hackatime API and github API for that. In addition, I have created a simple biolink tree page.
- Refactored blog header and footer components for better structure.
- Introduced a new NavBar component for consistent navigation across the site.
- Updated BlogLayout to include NavBar and BlogFooter.
- Enhanced Post component to support new image structure with alt text.
- Added new Link component for reusable link styling.
- Created a new 404 page with a user-friendly message.
- Implemented a biolink page showcasing social links and contact information.
- Added stats page to display coding statistics and latest GitHub repositories.
- Introduced a secret page with one-time token functionality.
- Updated global styles for improved design consistency.
- Added new SVG icons for better visual representation.
- Included avatar image for personal branding.
I have added a secret page. I have added functions to get my HackaTime stats and the latest GitHub repos. In addition, I added a 500 error page, don't know why, but it won't harm. I added Prettier, robots.txt, StarRepo button. Furthermore, I have refactored layouts to MainLayout/BlogLayout. The secret page is no longer secure, but working on that. You could look at this commit for the full information.
I have initialized the astro project. This is the first time to used this framework, so I took some time to understand what's going on. I have created the blog part of the website. I think I won't edit its logic in the future, maybe only the styling. In addition, adding decap cms for admin managing to the blog (editing, creating, and deleting) and using Netlify Identity for it was really like hell. However, it is now working very well.
