Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/amaringonz/portfolio-v1

A customizable portfolio template built in Next.js with TypeScript, perfect for showcasing creative projects with interactive prototypes, responsive design, and clean typography. Easily adaptable for designers, developers, and creatives looking to highlight their work professionally and visually.
https://github.com/amaringonz/portfolio-v1

cv eslint html-css javascript nextjs portfolio-website reactjs tailwindcss typescript

Last synced: 3 months ago
JSON representation

Host: GitHub
URL: https://github.com/amaringonz/portfolio-v1
Owner: amaringonz
License: mit
Created: 2024-09-05T06:30:01.000Z (4 months ago)
Default Branch: master
Last Pushed: 2024-10-27T22:12:10.000Z (3 months ago)
Last Synced: 2024-10-28T01:51:17.228Z (3 months ago)
Topics: cv, eslint, html-css, javascript, nextjs, portfolio-website, reactjs, tailwindcss, typescript
Language: TypeScript
Homepage: https://amaringonz.dev
Size: 363 KB
Stars: 1
Watchers: 1
Forks: 2
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Portfolio-v1 made Next.js 14+, Tailwind CSS 3.4, and TypeScript
![Cover](https://github.com/user-attachments/assets/6db130ba-cad6-402a-9e25-5150fe00bdfe)

🚀 Next.js Portfolio Template with App Router, Tailwind CSS, and TypeScript, built for an exceptional developer experience. It features Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Vitest (replacing Jest), Testing Library, Commitlint, VSCode integration, Tailwind CSS, Storybook, and multi-language (i18n) support, all optimized for seamless development. Ready for Next.js 15, this template is perfect for creating your own portfolio. Clone it and customize it to showcase your work. Check out the [live demo](https://amaringonz.dev) at my personal portfolio.

### Features
Prioritizing developer experience, this template offers a highly flexible code structure, allowing you to keep only what's essential:

- ⚡ [Next.js](https://nextjs.org) with App Router support
- 🔥 Type checking [TypeScript](https://www.typescriptlang.org)
- 💎 Integrate with [Tailwind CSS](https://tailwindcss.com)
- ✅ Strict Mode for TypeScript and React 18
- 🌐 Multi-language support via [next-intl](https://next-intl-docs.vercel.app/)
- ♻️ Type-safe environment variables using T3 Env
- 📏 Linter with [ESLint](https://eslint.org) (Next.js, Core Web Vitals, Tailwind CSS, Antfu configuration)
- 💖 Code formatting with [Prettier](https://prettier.io)
- 🦊 Git Hooks with Husky
- 🚫 Staged file linting with Lint-staged
- 🚓 Git commit linting with Commitlint
- 📓 Standard commit messages with Commitizen
- 🦺 Unit testing with Vitest and React Testing Library
- 👷 Test automation with GitHub Actions
- 🎉 UI development with Storybook
- 🎁 Automatic changelog generation via Semantic Release
- 💡 Absolute Imports using `@` prefix
- 🗂 VSCode configuration: Debug, Settings, Tasks, Extensions
- 🤖 SEO metadata, JSON-LD, and Open Graph tags
- 🗺️ Auto-generated Sitemap.xml and robots.txt
- ⚙️ Bundle analysis with [@next/bundle-analyzer](https://www.npmjs.com/package/@next/bundle-analyzer)
- 🌈 Free minimalist theme included
- 💯 Optimized for maximum Lighthouse scores

Built-in Features from Next.js:

- ☕ Minified HTML & CSS for optimal performance
- 💨 Live reload for real-time development changes
- ✅ Cache busting to ensure updated content delivery

### Philosophy

- Complete transparency: nothing is hidden, allowing full control for adjustments to match your needs.
- Free to start with no upfront costs
- Simple to customize
- Minimal, clean code
- Unstyled, flexible template
- SEO-friendly by design
- 🚀 Ready for production deployment

### Requirements

- Node.js 20+ and npm

### Getting started

To get started, run the following commands in your local environment:

```shell
git clone --depth=1 https://github.com/amaringonz/portfolio-v1.git my-project-name
cd my-project-name
npm install
```

All dependencies are kept up to date on a monthly basis.

Next, run the project in development mode with live reload by executing:
```shell
npm run dev
```

Then, open [http://localhost:3000](http://localhost:3000) in your favorite browser to view your project in action.

### Contributions

Everyone is welcome to contribute to this project! 🎉 Feel free to open an issue if you have any questions, encounter a bug, or want to suggest improvements. We're totally open to feedback and contributions to make this project even better.

### License

See [LICENSE](LICENSE) for more information.

Made with ♥ by [amaringonz](https://github.com/amaringonz)