Welcome to the my portfolio website's GitHub repository! This site is a showcase of my technical skills and creativity, meticulously crafted using the Eleventy (11ty) static site generator, integrated with the sleek and responsive Tailwind CSS, and enhanced with basic JavaScript for dynamic interactivity. Designed to be both visually appealing and highly functional, this portfolio not only displays my past projects and professional journey but I have also tried to follow good practices. Dive in to explore the code, understand the structure, and feel free to get inspired for your own projects!
This has been a hard decision and now I think I should not have wasted so much time. But, if I wouldn't have I would have not stumbled on 11ty : Eleventy.
Here are all the stuff that I have used for building this website:
- 11ty : Eleventy
- Tailwind CSS
- Google Fonts
- Javascript + esbuild
- Devicons , Font Awesome
- Endpoint Space
- PageSpeed Insights
In this section, I am including all the articles and tutoritals that I have read while building this website. This is not an exhaustive list as there are other articles, blogs and tutorials that I needed on the way for various things, but following these will be enough to get one started.
- Detailed Guide to build a 11ty / eleventy & tailwindCSS static site
- Mike Aparicio - Template Talk - A concise video tutorial for building a website using 11ty, including generation of blogs via templating.
- JavaScript for 11ty with esbuild - Tells us how to integrate esbuild with 11ty for using Javascript in runtime.
- Creating a gallery in 11ty (Eleventy) - I followed this article to create my own Gallery page.
- Optimizing Images with the 11ty Image Plugin - A very well written blog explaining the necessity, use and different scenarios for using 11ty Image plugin for optimizing images at build time.
- Hosting Eleventy on GitHub Pages : Quick and simple tutorial for hosting your eleventy website on GitHub Pages.
- Managing a custom domain for your GitHub Pages site
- Introduction to White Space
- A harmonious spacing system for faster design-dev handoff
- The Principle of Spacing Part 2
- More Padding, Please!
PS: I have not been very strict in following all the rules mentioned in these articles above, but have used these to minimize inconsistency in UI across different pages.
Feel free to drop comments \ reviews \ feedbacks on my mail dipeshkrj14@gmail.com
For rest of the details about the structure of the repo and website, UI rules followed, process and iterations done in building the website, head over to Breaking In Small Steps
I also plan on creating a 11ty starter out of this for anyone who wants to get started fast and reduce the overhead of doing the same things again and again.