eggsy / website

🔥 My Personal Website

This is a Nuxt.js Fully Static website, so you can use/host it anywhere!

After almost a year that I have published my website's source code on GitHub, I've been working on a new and better version. All I had to do was learn Tailwind CSS, Nuxt.js, and Vue.js better. It's been a long journey since I pushed myself into the Tailwind CSS world, but it was amazing! It doesn't give you any components; it asks you to create your ones! And that is the most important thing to improve yourself in my opinion. It's been a great learning experience for me, and I think I've learned and improved myself a lot.

It is my website that I use daily, so I had to include everything that I needed. You'll see some pages that may not be suitable for you, but this is a real-world app, and I need them 😅

✨ What is included?

Website features many custom built systems, integrations and pages!

• ✅ Sections for a freelancer!
  • Projects, goals, experiences, skills, GitHub repositories, and contact page.
• ✅ Static blog!
  • Completely static, no API needed, Nuxt.js Content blog ready to go!
• ✅ Firebase integration!
  • My "Daily Song" page fetches data from Firebase to display the today's song! It's all statically generated on client!
• ✅ Real-time Discord profile data using Lanyard API!
  • You can see what you're editing, watching or listening on your website.
• ✅ Last.fm API to display your top tracks and recently played songs on a page!
  • To use this, I use a Netlify function, this requires an additional step (read below).
• ✅ Designed with Windi CSS!
  • Windi introduces a JIT engine, a fast Tailwind compiler and many more stuff like variant grouping etc.!
  • Clean, beautiful, fast, and responsive UI!
  • No CSS used! The website is done without touching CSS (except some transitions and directives)
• ✅ Written in TypeScript, so you know what you're doing!
  • Intellisense, module prop auto-completion and all that juicy TS craziness!
• ✅ Over 20+ custom components!
  • Smart components.
  • Beautiful Cards and Skeleton Loaders.
  • Custom props, styles, and classes!

🔧 Getting Started

If you are interested in downloading the code, compiling it and running it, you need some tools!

First of all, all of the systems require Node.js to work, so you'll have to download it and install it on your device. This program comes with a package manager called NPM where you'll use to download all the dependencies of this project, including (but not limited to) Nuxt.js, Vue.js and Tailwind CSS.

If you aren't already using pnpm, I recommend pnpm because it is faster and runs better on most machines. You can install pnpm globally to your system using npm install pnpm -g command. Then you'll have access to pnpm on your terminal (you might need to restart it).

• Download the source as a ZIP folder or clone it via git using the git clone command.
• Install dependencies with your preffered package manager.
  • With pnpm: pnpm install
  • With NPM: npm install
• If you are going to use Firebase, you'll need to rename .env.example to .env and fill the config.
  • P.S. You don't need Firebase in this project except for the Daily page. If you are not going to create one for your own, or use Firebase for other purposes, you'll have to do this step. Otherwise you can just remove the file, delete the parts where it is imported and used, then you'll be ready to go.
• Now you can start the app using one of these commands.
  • For development:
    • With pnpm: pnpm dev
    • With NPM: npm run dev
  • To build and compile:
    • With pnpm: pnpm generate (or pnpm build)
    • With NPM: npm run generate or (npm run build)

If you are going to use the Last.fm Netlify function in .netlify/functions, you need to install the netlify-cli module globally to your system (via pnpm install -g netlify-cli) and run the project with netlify dev instead of the commands above.

If you are wondering about how to host it on free/paid static hosting services like (Netlify, Vercel etc.), you can refer to Nuxt.js docs. My project is hosted on Netlify.

🤔 Don't need Firebase?

If you're here just to fork the website and use it, I bet you will probably never need a Firebase integration and you should definitely remove Firebase from the project if that's the case. Here's how you can do it properly:

1. Remove firebase and @nuxtjs/firebase modules, they're HUGE! You'll save lots of space when you remove them.
2. Remove @nuxtjs/firebase from tsconfig.json.
3. Remove firebase import and the line of @nuxtjs/firebase reference in the array in config/modules.ts file.
4. Remove @/plugins/Firebase reference from the plugins array in config/plugins.ts (remove the whole object), and delete that file from plugins directory, you don't need it anymore.
5. Delete config/modules/firebase.ts.
6. Delete the Daily page: src/pages/daily.vue.
   • After deleting this page, you should also remove every link to that page, there are links around the website, like in Navbar and some blog posts. You have to remove all references or you can't generate the website and it'll throw "route not found" error.

That's all you have to do if you're not going to need Firebase integration! Don't hesitate to create an issue if you run into any problems!

❓ What has changed?

In (package.json) version 5.0.0, in addition to latest changes, I made lots of layout changes and added more pages such as Songs and did some improvements on all the pages. Changed some components design and added paddings all over so it doesn't look weird with the titles.

In (package.json) version 4.5.0, I changed almost every dark colors and reworked on the whole project fixing some type issues, typos in blog posts, design and structure of the files. I created separate pages for Repositories, Contact and Goals.

In (package.json) version 4.0.0, I've worked on each page and component to make them compatible with Vite, which is an upcoming and blazing fast tool for Nuxt! You'll feel the difference!

In (package.json) version 3.0.0, I moved and rewrote everything in TypeScript. Now it's using TypeScript for more powerful stuff!

In (package.json) version 2.6.0, I've moved from Tailwind to WindiCSS for its features, gold-class support for Vue/Nuxt. Everything is same, but there are more stuff (like variant grouping, important prefix etc.)!

If you are wondering what has changed and what are the differences from the old version; I can only say: "EVERYTHING!"

You can take a look at old.eggsy.xyz and compare it yourself 😂 You can already say UI is a lot nicer and there are some additional pages in this new one! But I also had to remove some features, including my whole API for "Overlay Creator" (it's still available under the old.eggsy.xyz domain but you won't be able to access it anymore from the main domain).

🙏 Thanks

Nuxt.js, WindiCSS, Tailwind CSS, amazing module authors and contributors of this project!