+++ update
더 나은 프사가 생겨서 우주-블루 테마로 바꿨다. 보다 큰 포부를 담아서! 🚀
+++
트로피가 잘못 설정되어있어서 다시 업데이트했다 ㅎㅎ
organization에 열심히 참여한게 반영되었다!
Intro: 깃허브 프로필을 꾸며보자! ✨
깃허브 프로필을 새로 꾸몄다!
기존에 github stats를 사용하고 있었으나 내 커밋이나 활동 수치가 잘 반영되지 않고 있는다고 느꼈고,
그걸 계기로 프로필을 들여다봤더니 나를 잘 나타내지 못하는 것 같아 확 바꿔버렸다.
음 마음에 드는군! 하고 그냥 넘어가려 했으나...
생각보다 주변에서 프로필 꾸미기에 어려움을 겪는 분들이 많은 것 같아서 글을 쓰러 왔다 (질문이 자주 들어오기 때문)
그래서 각 파트별로 어떤 부분을 신경썼고, 또 어떻게 했는지 공유도 할 겸 포스팅을 작성해본다 😸
1. 프로필 이미지
프로필 이미지는 AI 이미지 생성기로 만들었다.
MidJourney, Dalle 등 여러 서비스를 썼지만 내가 원하는...그..뭐랄까 힙하고 레트로한 느낌을 내지 못했다 (묘하게 서구적인 취향에 가까운 느낌)
그래서 프롬프트 템플릿이 일정 부분 생성되어 있고, 무료 크레딧으로 내 취향에 맞게 이미지를 생성할 수 있는 사이트를 찾다가 이 플랫폼을 발견했다. 아래 사이트에서 회원가입 후 무료 크레딧을 받아 이미지를 생성할 수 있다. 크레딧을 꽤나 주기 때문에 최소 100장 정도는 만들 수 있을 것 같았다.. (실제로 50번 넘게 시도한 기억이..!)
https://pokeit.ai/?utm_source=google&utm_medium=cpc&utm_campaign=korea&utm_content=03_ai_drawing&utm_term=%EA%B7%B8%EB%A6%BC%20ai
여기서 무한 이미지 생성 끝에 프사 겟!
마음에 드는 다른 이미지도 꽤나 있었어서, 그 이미지들은 나중에 환기가 필요하면 바꿔주려고 저장해두었다.
레트로, 애니, 실사풍 등 여러 테마를 선택할 수 있는데, 이 테마들이 다른 해외 플랫폼에 비해 비교적 트렌디하고 내 취향에 더 잘맞아서 적극 사용했다.
2. 자기소개 텍스트 (w. 타이핑 효과)
프로필 상단에 초록색으로, 애니메이션 효과와 함께 2개 나라 언어(스웨덴어, 영어)의 자기소개 멘트가 나온다
두 언어로 설정한 이유는 내가 스웨덴어 전공이고 그 점이 나와 떼놓을 수 없는 특징이라고 생각해서! 처음에 강조하여 넣었다
이 텍스트 효과는 깃허브를 돌아다니다가 발견했는데, 아래 레포지토리에서 자세한 가이드라인을 확인하고 편집기를 사용할 수 있다.
https://github.com/DenverCoder1/readme-typing-svg
편집기에서는 텍스트를 여러 줄 작성할 수 있고, 해당 텍스트의 색상이나 사이즈를 선택할 수 있다.
타이핑 효과가 적용되어 있으므로 애니메이션에 대한 속도나 공백 시간 등을 설정할 수도 있다.
나는 구글 폰트를 서치해서 마음에 드는 것으로 적용했더니 한층 원하는 모습에 가까워진 것을 확인할 수 있었다.
3. 나를 나타내는 뱃지 넣기 (feat. Stat Trophies)
그 다음으로는 나를 더 잘 나타낼 수 있는 내용들을 추가해주었다.
이미 유명한 스택 버튼이나 SNS 아이콘은 이전에도 들어가 있던 거라서 패스하고, 이번에는 다른 부분에 변화를 주었다.
기존에는 Github Stats가 들어있었는데.. 이 녀석이 내 활동을 잘 기록하지 못하는 것 같았다.
내 상태에는 큰 변화가 없는데 갑자기 커밋 수가 확 줄어든다거나, 전체 수치는 그대로인데 등급이 2~3단계가 내려갔다가 올라간다던지 하는 크고 작은 문제들이 있어 불안정하다고 느꼈다.
그래서 이를 대체할 요소를 찾다가, Github Trophies를 발견했다!
정확한 명칭은 github-profile-trophy로, 아래 레포지토리에서 자세한 가이드를 확인하고 활용할 수 있다.
https://github.com/ryo-ma/github-profile-trophy
이 가이드를 보면서 몇 가지 커스텀화를 했다.
우선 나는 다크 테마를 지향하므로..ㅎㅎ discord 테마를 적용했다.
아래와 같이 뒤에 디스코드 테마 코드를 붙여주면 테마를 변경할 수 있다.
https://github-profile-trophy.vercel.app/?username=ryo-ma&theme=discord
👇 실제로 적용한 모습
가이드를 보면 뭔가 특별한 경우에 secret trophy가 열린다고 하던데 첫번째에 보이는 무지개색 트로피가 그게 아닐까 싶다.
생각보다 S, A 등 괜찮은 트로피가 많이 보여서 일단 기분이 좋았다. 더 자세한 랭크 확인을 위해 아래 가이드를 확인해봤다 ㅎㅎ
S가 많으면 자랑해도 된다기에 괜히 더 뿌듯해졌다.ㅋㅋㅋㅋ 깃허브 열심히 관리한 보람이 있군..! (지독한 깃허브충)
또, 위에서 말했다시피 secret 트로피 모습이 내가 가진 것과 거의 유사해서 또 기분이 좋아졌다. 우하핫 😸 (이런 숨겨진 요소 너무 좋아) 성적도 괜찮고, 멋진 트로피로 프로필을 꾸밀 수 있으니 더욱 즐겁다는 거!
그런데 꼭 S가 아니라 다른 트로피도 예쁘고 화려하게 생겨서 우선 올려두고 꾸준히 키우는 재미도 있을 것 같다. 나의 경우에는 떨어지지 않도록, 또 부족한 부분을 올리기 위해 더욱 열심히 해야할 것 같다 :)
이렇게 깃허브 프로필을 꾸민 후기와, 소스에 대해서 공유를 해봤다.
주변 사람들한테 질문을 많이 받던 부분이라 어려움이 많은가보다, 싶어서 글을 쓰기 시작했는데.. 사실 나보다 잘 꾸미는 사람이 워낙 많아서 도움이 될 지 모르겠다 😅
그래도 혹시나 궁금한 점이 더 있다면 언제든 질문 환영합니다! ✨
'Web > HTML, CSS' 카테고리의 다른 글
[CSS] child 에게만 주는 속성 (align-self, order) (0) | 2022.10.10 |
---|---|
소소한 블로그 수리 (feat. a 태그) (0) | 2022.08.07 |
[CSS] 블로그 테마 리뉴얼하기 (0) | 2022.08.06 |
[CSS] 링크드인 기술평가 도전!🙋♂️ (0) | 2022.07.31 |
[CSS] Flexbox 연습 - Flexbox Froggy 게임 (0) | 2022.07.17 |