Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fraineralex/fraineralex.dev
✨ My personal website showcases my experience, skills, projects, and blog.
https://github.com/fraineralex/fraineralex.dev
nextjs personal-website portfolio react typescript
Last synced: 30 days ago
JSON representation
✨ My personal website showcases my experience, skills, projects, and blog.
- Host: GitHub
- URL: https://github.com/fraineralex/fraineralex.dev
- Owner: fraineralex
- License: mit
- Created: 2023-11-14T20:07:56.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-15T15:43:23.000Z (2 months ago)
- Last Synced: 2024-10-16T15:58:46.135Z (2 months ago)
- Topics: nextjs, personal-website, portfolio, react, typescript
- Language: TypeScript
- Homepage: https://www.fraineralex.dev
- Size: 23 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 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!
## 🛠️ Main Technologies
###
## 🚀 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.
## :checkered_flag: Requirements
Before getting started, make sure you have [Git](https://git-scm.com) and [Node.js](https://nodejs.org) v18 or higher installed.
## 🚀 How to Run Locally?
```bash
# 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`](https://github.com/fraineralex/fraineralex.dev/blob/main/.env.example).*
**Then**
```bash
# Install dependencies
$ pnpm install
# Run the project
$ pnpm run dev
```
> *Open [http://localhost:3000](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.
## :memo: License ##
This project is under license from MIT. For more details, see the [LICENSE](/LICENSE.md) 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! 🚀