Are developers engineers? Maybe not in the strictest sense, but sometimes we like to geek out and over-engineer things, especially when it comes to our own portfolios.
Portfolio websites are the perfect playground for unleashing our creativity and showcasing our skills without worrying about going overboard. In this mini-series, we'll be transforming our portfolio site
into an expressive masterpiece that truly reflects who we are as developers.
To begin, we'll lay the groundwork with our signature color scheme and a hero section featuring a striking image of ourselves. Get ready to dive into the world of code and design as we breathe life into our digital canvas!
Next, we'll unveil a curated showcase of our most impressive projects, seamlessly integrated into the site. While hardcoding them is an option, we'll opt for a more dynamic approach by fetching them directly from our GitHub repository. This ensures our portfolio always reflects our latest and greatest creations.
But why stop at a simple project list when we can paint a richer portrait of our coding prowess? Let's infuse the site with captivating programming language statistics, revealing the languages we've mastered and the depths of our expertise. While pre-built solutions like github-readme-stats
that we can embed directly into our markdown or html ,
It's limitation is that it'll only fetch the first 100 repos.
const fetcher = (variables, token) => {
return request(
{
query: `
query userInfo($login: String!) {
user(login: $login) {
# fetch only owner repos & not forks
repositories(ownerAffiliations: OWNER, isFork: false, first: 100) {
nodes {
name
languages(first: 10, orderBy: {field: SIZE, direction: DESC}) {
edges {
size
node {
color
name
}
}
}
}
}
}
}
`,
variables,
},
{
Authorization: `token ${token}`,
},
);
};
This is good enough but in my case I have at least 200 (i plan to delete most of these as soon as I fix up another tool for that 😜)
So I made a recursive version of it to fetch all our repositories
export async function getViewerRepos(
viewer_token: string,
cursor: string | null = null,
): Promise<{ data: ViewerRepos | null; error: BadDataGitHubError | null }> {
const query = `
query($first: Int!,$after: String) {
viewer {
repositories(
first: $first
after: $after
isFork: false
orderBy: {field: PUSHED_AT, direction: DESC}
) {
edges {
node {
id
name
nameWithOwner
languages(first: 10) {
edges {
node {
id
name
color
}
}
}
}
}
totalCount
pageInfo {
endCursor
startCursor
}
}
}
}
`;
try {
const response = await fetch("https://api.github.com/graphql", {
method: "POST",
headers: {
"Authorization": `bearer ${viewer_token}`,
"Content-Type": "application/json",
"accept": "application/vnd.github.hawkgirl-preview+json",
},
body: JSON.stringify({
query,
variables: {
first: 50,
after: cursor,
},
// operationName,
}),
});
const data = await response.json() as unknown as ViewerRepos;
if ("message" in data) {
console.log("throw error fetching viewer repos ==> ", data);
return { data: null, error: data as unknown as BadDataGitHubError };
}
// logSuccess("all user repositories ===== ", data);
return { data, error: null };
} catch (err) {
console.log("catch error fetching viewer repos ==> ", err);
return { data: null, error: err as BadDataGitHubError };
}
}
export interface ViewerRepos {
data: Data;
}
export interface Data {
viewer: Viewer;
}
export interface Viewer {
repositories: Repositories;
}
export interface Repositories {
edges: Edge[];
totalCount: number;
pageInfo: PageInfo;
}
export interface Edge {
cursor: string;
node: Node;
}
export interface Node {
id: string;
name: string;
nameWithOwner: string;
languages: Languages;
}
export interface Languages {
edges: LanguageEdge[];
}
export interface LanguageEdge {
node: LanguageNode;
}
export interface LanguageNode {
id: string;
name: string;
color: string;
}
export interface PageInfo {
endCursor: string;
startCursor: string;
}
export interface BadDataGitHubError {
message: string;
documentation_url: string;
}
recursively fetch all the repos
async function fetchReposRecursivelyWithGQL({
viewer_token,
all_repos = [],
cursor,
}: FetchRepoRecursivelyWithGQL) {
try {
const repos = await getViewerRepos(viewer_token, cursor);
if (repos.data) {
const fetched_repos = repos.data.data.viewer.repositories.edges;
const totalCount = repos.data.data.viewer.repositories.totalCount;
const next_cursor =
repos.data.data.viewer.repositories.pageInfo.endCursor;
const new_repos = all_repos.concat(fetched_repos);
console.log({
fetched_repos_count: new_repos.length,
totalCount,
next_cursor,
});
if (new_repos.length < totalCount) {
return fetchReposRecursivelyWithGQL({
viewer_token,
cursor: next_cursor,
all_repos: new_repos,
});
}
return new_repos;
}
} catch (error) {
logError(error);
}
}
then we'll loop over these with .reduce and output the languages stats and return an array of type
const top_langs: {
name: string;
color: string;
percentage: number;
}[] | undefined
import { LanguagePercentage } from "./helpers";
interface GithubLangiagesProps {
top_langs: LanguagePercentage[];
}
export function GithubLangiagesPercentage({top_langs}:GithubLangiagesProps){
if(!top_langs){
return null
}
return (
<div className="w-full h-full flex items-center py-2 ">
<div className="w-full h-full">
<ul className="w-full flex flex-wrap list-none m-0 px-5 gap-3 ">
{top_langs.map(({color,name,percentage}, index: number) => {
const percent = percentage
const percetage = percent < 5 ? percent + 2 : percent;
if(percentage<1){
return null
}
return (
<li
key={name + index}
className=" md:max-w-[70%] min-w-fit gap-1 flex flex-col justify-center "
style={{
width: `${percetage}%`,
}}>
<div
className="min-w-[20%] rounded-xl w-full h-4"
style={{
backgroundColor: color ?? "",
}}>
</div>
<div className="pl-1 text-xs flex min-w-fit gap-2">
<div>{name}</div>
<div> {percentage}%</div>
</div>
</li>
);
})}
</ul>
</div>
</div>
);
}
finally we display the stats bars
export async function GithubLanguages({}: LanguagesProps) {
const top_langs = await getGithubViewerLanguages();
if (!top_langs) return;
return (
<div
className=" w-full h-full p-5
flex flex-wrap items-center justify-center text-xs md:text-base
gap-2 rounded-xl ">
<SectionHeader heading="Languages Stats on Github" id="stats" />
<GithubLangiagesPercentage top_langs={top_langs} />
</div>
);
}
In the next part we fix react's biggest problem: the lack of a cool ".react" file extension like Vue or svelte , because how else are people going to know what all that html,CSS and JavaScript was being used for
Top comments (0)