Skip to content

Latest commit

 

History

History
94 lines (64 loc) · 4.34 KB

README.md

File metadata and controls

94 lines (64 loc) · 4.34 KB
Raw

🚀 fraineralex.dev

My personal website, built with Next.js, TypeScript, Tailwind CSS, and deployed to Vercel. This website showcases my experience, skills, projects, and blog where I share insights into web development, software engineering, and whatever else I'm thinking about!

website image example

🛠️ Main Technologies

TypeScript Logo     React Logo     Next.js Logo     Tailwind Logo     Contentlayer Logo     Upstash Logo     CSS Logo     Node.js Logo    

🚀 Key Features

  • Server Side Rendering: Ensures fast and efficient loading for improved user experience.
  • Google Lighthouse Scores: Achieves a perfect 100% on all aspects of Google Lighthouse analysis, including performance, accessibility, best practices, and SEO.
  • Metadata and OpenGraph Images: Every page is meticulously documented with proper metadata and OpenGraph and Twitter images for enhanced social sharing.
  • Skeleton Loaders: Enhances user experience with skeleton loaders for smooth content loading.
  • Multilingual Support: Available in Spanish for a broader audience.
  • Blog with Upstash Redis: Features a blog section where I share articles, and each article's visits are tracked and stored in an Upstash Redis database.
  • Responsive Design: Adapts seamlessly to various screen sizes.
  • Animations: Features subtle entry animations and scroll-based animations, all crafted entirely with CSS.

🏁 Requirements

Before getting started, make sure you have Git and Node.js v18 or higher installed.

🚀 How to Run Locally?

# Clone this project
$ git clone https://github.com/fraineralex/fraineralex.dev.git

# Access the project folder
$ cd fraineralex.dev

Create a .env file similar to .env.example.

Then

# Install dependencies
$ pnpm install

# Run the project
$ pnpm run dev

Open http://localhost:3000 with your browser to see the result.

💡 Future Improvements

  • Enhanced Table of Contents Section in the blog: Introduce a dedicated section on the reading page of the blog to display the table of contents.
  • Expand Content Categories in the blog: Add more sections to the blog such as podcasts, books, and tools that I use.
  • Dark/Light Mode Switch: Provide the ability to switch between light and dark modes for a personalized browsing experience.

📝 License

This project is under license from MIT. For more details, see the LICENSE file.

🤝 Contributions

Thank you for exploring my website! If you find the structure or features useful, feel free to use the template for your project. Contributions are welcome! if you have ideas, corrections, or improvements, open an issue or send a pull request. Your collaboration is valued and appreciated! 🚀