diff --git a/assets/js/dashboard.js b/assets/js/dashboard.js
new file mode 100644
index 0000000..46ffe5c
--- /dev/null
+++ b/assets/js/dashboard.js
@@ -0,0 +1,151 @@
+async function getAllEvents(username) {
+ const oneMonthAgo = new Date();
+ oneMonthAgo.setDate(oneMonthAgo.getDate() - 30);
+ let page = 1;
+ let events = [];
+
+ while (true) {
+ const url = `https://api.github.com/users/${username}/events/public?per_page=100&page=${page}`;
+
+ try {
+ const response = await fetch(url);
+ const data = await response.json();
+
+ if (data.length === 0) {
+ break;
+ }
+
+ events = events.concat(data.filter(event => {
+ const eventDate = new Date(event.created_at);
+ return eventDate > oneMonthAgo;
+ }));
+
+ page++;
+ } catch (error) {
+ console.error(error);
+ return 'Error';
+ }
+ }
+
+ console.log(events);
+
+ return events;
+}
+
+async function getCommits(events) {
+ let commitCount = 0;
+
+ const commits = events.filter(event => event.type === 'PushEvent');
+
+ commits.forEach(commit => {
+ commitCount += commit.payload.size;
+ });
+
+ return commitCount;
+}
+
+async function getPullRequests(events) {
+ let pullRequestCount = 0;
+
+ const pullRequests = events.filter(event => event.type === 'PullRequestEvent');
+
+ pullRequestCount += pullRequests.length;
+
+ return pullRequestCount;
+}
+
+async function getIssues(events) {
+ let issueCount = 0;
+
+ const issues = events.filter(event => event.type === 'IssuesEvent' || event.type === 'IssueCommentEvent');
+
+ issueCount += issues.length;
+
+ return issueCount;
+}
+
+async function getFollowers(username) {
+ const url = `https://api.github.com/users/${username}`;
+
+ try {
+ const response = await fetch(url);
+ const data = await response.json();
+
+ return data.followers;
+ } catch (error) {
+ console.error(error);
+ return 'Error';
+ }
+}
+
+async function getAllRepos(username) {
+ const url = `https://api.github.com/users/${username}/repos`;
+
+ try {
+ const response = await fetch(url);
+ const data = await response.json();
+
+ return data;
+ } catch (error) {
+ console.error(error);
+ return 'Error';
+ }
+}
+
+async function getTotalStars(repos) {
+ let totalStars = 0;
+ repos.forEach(repo => {
+ totalStars += repo.stargazers_count;
+ });
+
+ return totalStars;
+}
+
+async function getTotalForks(repos) {
+ let totalForks = 0;
+ repos.forEach(repo => {
+ totalForks += repo.forks_count;
+ });
+
+ return totalForks;
+}
+
+const username = 'WCY-dt';
+
+const commit = document.querySelector('#commit number');
+const pullRequest = document.querySelector('#pr number');
+const issue = document.querySelector('#issue number');
+
+getAllEvents(username).then(events => {
+ getCommits(events).then(commitCount => {
+ commit.textContent = commitCount;
+ });
+
+ getPullRequests(events).then(pullRequestCount => {
+ pullRequest.textContent = pullRequestCount;
+ });
+
+ getIssues(events).then(issueCount => {
+ issue.textContent = issueCount;
+ });
+})
+
+const follower = document.querySelector('#follower number');
+getFollowers(username).then(followerCount => {
+ follower.textContent = followerCount;
+});
+
+
+const star = document.querySelector('#star number');
+const fork = document.querySelector('#fork number');
+getAllRepos(username).then(repos => {
+ getTotalStars(repos).then(starCount => {
+ star.textContent = starCount;
+ });
+
+ getTotalForks(repos).then(forkCount => {
+ fork.textContent = forkCount;
+ });
+});
+
+
diff --git a/assets/js/menu.js b/assets/js/menu.js
new file mode 100644
index 0000000..7b69d8b
--- /dev/null
+++ b/assets/js/menu.js
@@ -0,0 +1,12 @@
+window.addEventListener('scroll', function() {
+ var menuItems = document.querySelectorAll('#menu a');
+ menuItems.forEach(function(menuItem) {
+ var targetElement = document.querySelector(menuItem.getAttribute('href'));
+ var rect = targetElement.getBoundingClientRect();
+ if (rect.top <= 0 && rect.bottom >= 0) {
+ menuItem.parentElement.classList.add('active');
+ } else {
+ menuItem.parentElement.classList.remove('active');
+ }
+ });
+});
\ No newline at end of file
diff --git a/assets/styles/dashboard.css b/assets/styles/dashboard.css
new file mode 100644
index 0000000..ec22234
--- /dev/null
+++ b/assets/styles/dashboard.css
@@ -0,0 +1,69 @@
+.dashboard {
+ width: 100%;
+}
+
+.dashboard-content {
+ width: calc(100% - 8rem);
+ background-color: var(--primary-color);
+ display: grid;
+ grid-template-columns: repeat(3, auto);
+ gap: 1rem;
+ padding: 4rem;
+ justify-content: center;
+ align-items: center;
+}
+
+.dashboard-item {
+ position: relative;
+ background-color: var(--white-color);
+ color: var(--black-color);
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr auto;
+ gap: 1rem;
+ width: 15rem;
+ padding: 2rem;
+ box-shadow: 0 0 1rem var(--black-shadow-primary-color);
+ transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+}
+
+.dashboard-item:hover {
+ transform: translateY(-0.25rem);
+ box-shadow: 0 0 2rem var(--black-shadow-secondary-color);
+}
+
+.dashboard-item .icon {
+ position: absolute;
+ top: 0.5rem;
+ right: 0.5rem;
+ font-size: 9rem;
+ color: var(--tertiary-color);
+}
+
+.dashboard-item number {
+ font-size: 5rem;
+ line-height: 4rem;
+ font-weight: 900;
+ letter-spacing: 0.5rem;
+ font-family: var(--primary-font);
+ text-transform: uppercase;
+ margin: 0;
+ z-index: 10;
+}
+
+.dashboard-item .dashboard-text {
+ font-size: 1.2rem;
+ margin: 0;
+ z-index: 10;
+}
+
+@media screen and (max-width: 768px) {
+ .dashboard-content {
+ grid-template-columns: auto auto;
+ }
+
+ .dashboard-item {
+ width: 12rem;
+ height: 9rem;
+ }
+}
\ No newline at end of file
diff --git a/assets/styles/index.css b/assets/styles/index.css
index 9b33e22..09fe41d 100644
--- a/assets/styles/index.css
+++ b/assets/styles/index.css
@@ -4,8 +4,10 @@
@import url('./info.css');
@import url('./skill.css');
@import url('./link.css');
-/* @import url('./project.css'); */
+@import url('./project.css');
+@import url('./dashboard.css');
@import url('./footer.css');
+@import url('./menu.css');
:root {
--primary-color: hsl(225, 100%, 50%);
diff --git a/assets/styles/menu.css b/assets/styles/menu.css
new file mode 100644
index 0000000..c94f6f2
--- /dev/null
+++ b/assets/styles/menu.css
@@ -0,0 +1,60 @@
+.menu {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ position: fixed;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%) translateY(-3rem);
+ margin: 0;
+ padding: 0.75rem 1rem 0.25rem 1rem;
+ background-color: var(--primary-color);
+ box-shadow: 0 0 0.5rem var(--black-shadow-primary-color), 0 0 2rem var(--black-shadow-secondary-color);
+ opacity: 0.5;
+ transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
+}
+
+.menu:hover {
+ transform: translateX(-50%) translateY(0);
+ opacity: 1;
+}
+
+.menu ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ height: 100%;
+}
+
+.menu ul li {
+ width: 2rem;
+ height: 2rem;
+}
+
+
+
+.menu ul li a {
+ display: block;
+ width: 2rem;
+ height: 2rem;
+ background-color: var(--white-color);
+ transform: scale(0.75);
+ transition: background-color 0.25s ease-in-out, transform 0.25s ease-in-out;
+}
+
+.menu ul li.active a {
+ background-color: var(--secondary-color);
+ transform: scale(1);
+}
+
+.menu hr {
+ width: 40%;
+ height: 0.1rem;
+ background-color: var(--white-color);
+ margin: 0.5rem 0 0 0;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e5e2974..63fd16d 100644
--- a/index.html
+++ b/index.html
@@ -79,10 +79,44 @@ link
-