-
+
+
+
+
+ {/*
+
+
+
+ {/*
+
*/}
+
+ {/* `rgba(220, 5, 3, ${alpha})`} />
+
+ );
+}
+
+export default App;
diff --git a/src/components/Heatmap.scss b/src/components/Heatmap.scss
new file mode 100644
index 00000000..29b958be
--- /dev/null
+++ b/src/components/Heatmap.scss
@@ -0,0 +1,89 @@
+$cell-height: 10px;
+$cell-width: 10px;
+$cell-margin: 2px;
+$cell-weekdays-width: 30px;
+
+html {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+html, body {
+ height: 100%;
+ width: 100%;
+}
+
+#container {
+ height: 514px;
+ width: 930px;
+ margin: 50px auto;
+}
+
+.timeline {
+ margin: 20px;
+ margin-bottom: 60px;
+
+ .timeline-months {
+ display: flex;
+ padding-left: $cell-weekdays-width;
+
+ &-month {
+ width: $cell-width;
+ margin: $cell-margin;
+ border: 1px solid transparent;
+ font-size: 10px;
+ }
+
+ .Jan~.Jan,
+ .Feb~.Feb,
+ .Mar~.Mar,
+ .Apr~.Apr,
+ .May~.May,
+ .Jun~.Jun,
+ .Jul~.Jul,
+ .Aug~.Aug,
+ .Sep~.Sep,
+ .Oct~.Oct,
+ .Nov~.Nov,
+ .Dec~.Dec {
+ visibility: hidden;
+ }
+ }
+
+ &-body {
+ display: flex;
+
+ .timeline-weekdays {
+ display: inline-flex;
+ flex-direction: column;
+ width: $cell-weekdays-width;
+
+ &-weekday {
+ font-size: 10px;
+ height: $cell-height;
+ border: 1px solid transparent;
+ margin: $cell-margin;
+ vertical-align: middle;
+ }
+ }
+
+ .timeline-cells {
+ display: inline-flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ height: #{(10 + 4) * 8}px;
+
+ &-cell {
+ height: $cell-height;
+ width: $cell-width;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ margin: $cell-margin;
+ border-radius: 2px;
+ background-color: rgba(0, 0, 0, 0.05);
+
+ &:hover {
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 745fa64e..795afa35 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -1,5 +1,7 @@
import { motion } from "framer-motion";
-
+import App from "./Heatmap";
+import React from "react";
+import ReactDOM from "react-dom";
import { styles } from "../styles";
import { ComputersCanvas } from "./canvas";
@@ -9,27 +11,27 @@ const Hero = () => {
+ {monthName}
+
+ );
+}
+
+function WeekDay({ index }) {
+ return (
+
+ {DayNames[index]}
+
+ );
+}
+
+function Timeline({ range, data, colorFunc }) {
+ let days = Math.abs(range[0].diff(range[1], 'days'));
+ let cells = Array.from(new Array(days));
+ let weekDays = Array.from(new Array(7));
+ let months = Array.from(new Array(Math.floor(days / 7)));
+
+ let min = Math.min(0, ...data.map(d => d.value));
+ let max = Math.max(...data.map(d => d.value));
+
+ let colorMultiplier = 1 / (max - min);
+
+ let startDate = range[0];
+ const DayFormat = 'DDMMYYYY';
+
+ return (
+
+
+ );
+}
+
+function App() {
+ let startDate = moment().add(-365, 'days');
+ let dateRange = [startDate, moment()];
+
+ let data = Array.from(new Array(365)).map((_, index) => {
+ return {
+ date: moment(startDate).add(index, 'day'),
+ value: Math.floor(Math.random() * 100)
+ };
+ });
+
+ return (
+ <>
+
+ {months.map((_, index) =>
+
+
+
+ {weekDays.map((_, index) =>
+
+ {cells.map((_, index) => {
+ let date = moment(startDate).add(index, 'day');
+ let dataPoint = data.find(d => moment(date).format(DayFormat) === moment(d.date).format(DayFormat));
+ let alpha = colorMultiplier * dataPoint.value;
+ let color = colorFunc({ alpha });
+
+ return (
+ |
+ );
+ })}
+
+
-
-
-
+
+
+
-
- Hi, I'm Adrian
+
- Hi, I'm Adrian
+
+ Hi, I'm Nikhil
-
- I develop 3D visuals, user
- interfaces and web applications
+
+ I am a Passionate Learner
+ and a Developer
-
-
+
);
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index ffd98c82..ec185210 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -30,7 +30,7 @@ const Navbar = () => {
className={`${
styles.paddingX
} w-full flex items-center py-5 fixed top-0 z-20 ${
- scrolled ? "bg-primary" : "bg-transparent"
+ scrolled ? "bg-nav" : "bg-transparent"
}`}
>
@@ -43,9 +43,9 @@ const Navbar = () => {
}}
>
- setActive(nav.title)}
>
{nav.title}
@@ -81,7 +81,7 @@ const Navbar = () => {
{
setToggle(!toggle);
diff --git a/src/components/Project.jsx b/src/components/Project.jsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Works.jsx b/src/components/Works.jsx
index ba072b4b..b3e4ab13 100644
--- a/src/components/Works.jsx
+++ b/src/components/Works.jsx
@@ -1,5 +1,6 @@
import React from "react";
-import Tilt from "react-tilt";
+import { Tilt } from 'react-tilt'; // Adjust according to the actual export
+// import Tilt from "react-tilt";
import { motion } from "framer-motion";
import { styles } from "../styles";
diff --git a/src/constants/index.js b/src/constants/index.js
index 280fff76..9e21f04e 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -216,7 +216,7 @@ const projects = [
},
],
image: carrent,
- source_code_link: "https://github.com/",
+ source_code_link: "https://github.com/theNKCode",
},
{
name: "Job IT",
diff --git a/src/styles.js b/src/styles.js
index dd32cae6..35430d9d 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -4,7 +4,7 @@ const styles = {
padding: "sm:px-16 px-6 sm:py-16 py-10",
heroHeadText:
- "font-black text-white lg:text-[80px] sm:text-[60px] xs:text-[50px] text-[40px] lg:leading-[98px] mt-2",
+ "font-black text-black lg:text-[80px] sm:text-[60px] xs:text-[50px] text-[40px] lg:leading-[98px] mt-2",
heroSubText:
"text-[#dfd9ff] font-medium lg:text-[30px] sm:text-[26px] xs:text-[20px] text-[16px] lg:leading-[40px]",
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index e9c832c9..7153fece 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -6,6 +6,7 @@ module.exports = {
extend: {
colors: {
primary: "#050816",
+ nav: "#ffffff",
secondary: "#aaa6c3",
tertiary: "#151030",
"black-100": "#100d25",
- Adrian - | JavaScript Mastery +
+ INIT + | HandShake your Career
@@ -54,8 +54,8 @@ const Navbar = () => {