Light

james-gates-0212 / portfolio Goto Github PK

View Code? Open in Web Editor NEW

32.0 1.0 6.0 888 KB

❤️A portfolio built using Next.js, Tailwind CSS, and Flowbite is the bee's knees! Next.js provides a powerful framework for building web applications, while Tailwind CSS offers a fantastic set of utility classes for styling. Flowbite is a real game-changer when it comes to creating stunning UI components.

Home Page: https://james-gates-portfolio.vercel.app/

License: MIT License

HTML 0.09% CSS 4.07% JavaScript 3.73% TypeScript 92.11%

portfolio bundle-analyzer commitlint nextjs14 prettier reactjs18 tailwindcss yarn typescript vercel-deployment

portfolio's Introduction

Portfolio based on Next.js & tailwindcss

This is a Next.js project bootstrapped with create-next-app.

Environment

node 18.x or later
yarn 1.x or later
npm 8.x or later

Install npm packages

npm i -g yarn
yarn

Getting Started

First, run the development server:

yarn dev

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

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Lint

yarn lint

Prettier

prettier --write ./

# if you couldn't run above command line, it would work after run this...
npm i -g prettier

Build or Start project as production

yarn build

or

yarn start

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Git commit

Please use Conventional Commits for your commits.

e.g.

<type>[scope]: <subject>
[body]
[footer]

Types

type should be one of belows.

add
adopt
apply
build
chore
config
docs
feat
fix
init
refactor
remove
style

Subject

subject should include one of emojis as belows.

♻️ ⚡️ ✅ ✏️ ✨ ❤️ ⬆️ ⬇️ ⭐️ 🌈 🎁 🎉 🏆 🐞 👌 📓 📝 📦 🔀 🔖 🚀 🚧 🚨 🛠️

portfolio's People

Contributors

Stargazers

Watchers

Forkers

mario0212 dragon-8800 koopa0212 bjornremotework samirah369

portfolio's Issues

fix mobile navbar styles

Upgrade Deploy Next.js site to Pages

fix missing environment variables

reconfigure next.js bundle analyzer

https://blog.logrocket.com/how-analyze-next-js-app-bundles/

rewrite vercel.json for assets

to manifest.json, below errors were displayed.
Failed to load resource: net::ERR_CONTENT_DECODING_FAILED

remove gtag for improving performance

make sitemap.xml for seo

update all links for base path❤️

use ❤️Link tag instead of a.
use ❤️Image tag instead of img.

update the whole portfolio content

James Gates' Resume

add repository badges

tag badge
release badge
issues badge

google site verification issue

❤️replace nav bar image url

add interfaces, models, repositories, and services for PostgreSQL management.

configure vercel for cache ttl

A long cache lifetime can speed up repeat visits to your page. Learn more about efficient cache policies.

add experience management

add a migration
add a page for the table list
add a modal for editing

Avoid large layout shifts

These DOM elements were most affected by layout shifts. Some layout shifts may not be included in the CLS metric value due to windowing. Learn how to improve CLS

Make ❤️GitHub workflow for Next.js pages

Update README.md for ❤️GitHub workflow.
Add ❤️GitHub workflow for Next.js pages.

reduce images in navigation bar

reduce images in navigation bar for improving performance of website

improve all links

Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users.
Learn how to make links accessible.

adopt next bundle analysis

https://github.com/hashicorp/nextjs-bundle-analysis

Reduce static assets

Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. Learn how to reduce unused CSS.
Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. Learn how to reduce unused JavaScript.

portfolio based on nextjs

for SEO & improving performance

Apply prettier all files

update logo & avatar in navigation❤️❤️❤️

improve performance for loading

it takes very long time to open portfolio.
it needs to improve performance of the portfolio.

optimize for mobile performance

fix CLS
fix LCP

optimize codes

add gtag for google site verification

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1R1XC6TD2Z"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-1R1XC6TD2Z');
</script>

improve portfolio performance

Add auto assign action

add user management

add model for user table
add base structure for administration layout
add user register page
add new user, edit user, and view user page

upgrade seo meta

update SEO meta using helmet
update icon
update etc information for SEO

navbar image link issue on github pages

Add badges on repository

add repository stars
add top language
add repository files or directories
add repository code size
add repository size

fix nextjs-bundle-analysis.yml issue

      - name: Download base branch bundle stats
        uses: dawidd6/action-download-artifact@v3
        continue-on-error: true
        if: success() && github.event.number
        with:
          workflow: nextjs_bundle_analysis.yml # change to nextjs-bundle-analysis.yml
          branch: ${{ github.event.pull_request.base.ref }}
          path: .next/analyze/base

SEO issues

update SEO information
update manifest.json

add profile management

add a migration
add a page for table list
add a modal for editing

Version up as v0.1.1

update package.json for version as v0.1.1
add vercel badge
add additional repository badges

Add ✨base path as repository name when build in ❤️GitHub actions.

reduce codes & packages for seo

add code owner

Add back-end & administration pages

Add back-end & administration pages

add additional metadata for seo

robots meta
themeColor
keyword meta

❤️

Fix Security Issues

2nd optimize codes

add repository badges

license badge
discussions badge
fork badge

convert all images as webp

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.