On branch master
Changes to be committed: modified: app/(root)/page.jsx modified: app/about/components/about/about.jsx deleted: app/about/components/about/spotify/animation.jsx deleted: app/about/components/about/spotify/card.jsx deleted: app/about/components/about/spotify/fetch.js modified: app/about/components/education.jsx modified: app/about/layout.jsx modified: app/about/loading.jsx modified: app/about/page.jsx modified: app/layout.jsx modified: app/not-found.jsx modified: app/projects/[slug]/page.jsx modified: app/projects/archive/page.jsx modified: app/projects/layout.jsx modified: app/projects/loading.jsx modified: app/projects/page.jsx deleted: components/Chat.jsx modified: components/Footer.jsx modified: components/Navbar.jsx modified: json/data.json modified: pnpm-lock.yaml new file: public/image/me.jpeg deleted: public/image/me.jpg new file: public/image/me1.jpeg deleted: public/image/me1.jpg new file: public/image/me2.jpeg new file: public/image/me3.jpeg deleted: public/image/me3.jpg deleted: public/image/me4.jpeg new file: public/image/me4.jpg new file: public/image/me7.jpg deleted: vite-to_VS/README.md
This commit is contained in:
parent
4542735373
commit
55249b5aa6
32 changed files with 298 additions and 582 deletions
|
|
@ -1,9 +1,8 @@
|
|||
import Image from "next/image";
|
||||
import Card from "./spotify/card";
|
||||
import { motion } from "framer-motion";
|
||||
import Me1 from "@/public/image/me1.jpg";
|
||||
import Me2 from "@/public/image/me2.jpg";
|
||||
import Me3 from "@/public/image/me3.jpg";
|
||||
import Me1 from "@/public/image/me1.jpeg";
|
||||
import Me2 from "@/public/image/me2.jpeg";
|
||||
import Me3 from "@/public/image/me4.jpg";
|
||||
import Hr from "@/components/Hr";
|
||||
|
||||
function Title() {
|
||||
|
|
@ -11,7 +10,7 @@ function Title() {
|
|||
<div className="mt-10 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
|
||||
<div className="flex justify-center items-center flex-col my-5 self-start ">
|
||||
<Hr variant="long"></Hr>
|
||||
<h1 className="text-3xl font-bold mt-3">Who Am I?</h1>
|
||||
<h1 className="text-3xl font-bold mt-3">Обо мне</h1>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -35,7 +34,7 @@ export default function About() {
|
|||
className="w-full h-full">
|
||||
<Image
|
||||
src={Me1}
|
||||
alt="Korobtsev"
|
||||
alt="Korobtsev.ru"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
placeholder="blur"
|
||||
|
|
@ -108,13 +107,13 @@ export default function About() {
|
|||
type: "spring",
|
||||
}}>
|
||||
<h2 className="text-2xl font-bold tracking-wider mb-3">
|
||||
Alvalen Shafelbilyunazra
|
||||
Виталий Коробцев
|
||||
</h2>
|
||||
<p className="text-gray-600 text-justify title text-lg">
|
||||
Hey there, I’m Alvalen Shafelbilyunazra, a
|
||||
Привет! Я Виталий Коробцев,
|
||||
<span className="text-black font-medium">
|
||||
{" "}
|
||||
passionate Web Developer
|
||||
разработчик, архитектор,
|
||||
</span>{" "}
|
||||
with a growing expertise in
|
||||
<span className="text-black font-medium">
|
||||
|
|
@ -139,7 +138,6 @@ export default function About() {
|
|||
essential. Let’s connect and explore the evolving intersection
|
||||
of web and AI together!
|
||||
</p>
|
||||
<Card />
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
import { motion } from "framer-motion";
|
||||
|
||||
const PlayingAnimation = () => {
|
||||
return (
|
||||
<div className="relative flex justify-between w-4 h-8 space-x-1">
|
||||
<motion.span
|
||||
className="w-1 h-full bg-gray-500 rounded-full"
|
||||
animate={{ scaleY: [0.3, 1, 0.5, 0.75, 0.5] }}
|
||||
transition={{ duration: 2.2, repeat: Infinity }}
|
||||
/>
|
||||
<motion.span
|
||||
className="w-1 h-full bg-gray-500 rounded-full"
|
||||
animate={{ scaleY: [0.3, 1, 0.5, 0.75, 0.5] }}
|
||||
transition={{ duration: 2.2, repeat: Infinity, delay: -2 }}
|
||||
/>
|
||||
<motion.span
|
||||
className="w-1 h-full bg-gray-500 rounded-full"
|
||||
animate={{ scaleY: [0.3, 1, 0.5, 0.75, 0.5] }}
|
||||
transition={{ duration: 2.2, repeat: Infinity, delay: -3.7 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlayingAnimation;
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import getNowPlayingItem from "./fetch";
|
||||
import PlayingAnimation from "./animation";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faSpotify } from "@fortawesome/free-brands-svg-icons";
|
||||
import Image from "next/image";
|
||||
|
||||
const Card = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [result, setResult] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const results = await Promise.all([getNowPlayingItem()]);
|
||||
console.log(results);
|
||||
setResult(results[0]);
|
||||
setLoading(false);
|
||||
};
|
||||
fetchData(); // Fetch data immediately on component mount
|
||||
|
||||
const intervalId = setInterval(fetchData, 60 * 1000); // ! Fetch data every minute: temporary
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="mt-3 flex justify-center w-full">
|
||||
{loading ? (
|
||||
<div className="flex justify-center mb-8">
|
||||
{/* Replace this with your own loading spinner */}
|
||||
<div className="loader ease-linear rounded-full border-4 border-t-4 border-black h-12 w-12 mb-4"></div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative w-full mb-8 grid grid-cols-2 gap-2 border-2 border-gray-500 p-4 rounded-lg backdrop-filter backdrop-blur-lg bg-white bg-opacity-30">
|
||||
{result.isPlaying && (
|
||||
<Image
|
||||
src={result.albumImageUrl}
|
||||
alt="backgroundImage"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="z-0 opacity-20 absolute"
|
||||
/>
|
||||
)}
|
||||
<div className="z-10 flex items-center">
|
||||
<FontAwesomeIcon
|
||||
icon={faSpotify}
|
||||
className="text-black text-5xl me-5 md:me-1 xl:me-8"
|
||||
/>
|
||||
<p className="font-semibold me-5 md:me-1 xl:me-7">
|
||||
{result.isPlaying
|
||||
? "Now playing"
|
||||
: "Currently offline"}
|
||||
</p>
|
||||
{result.isPlaying && <PlayingAnimation />}
|
||||
</div>
|
||||
{result.isPlaying && (
|
||||
<div className="z-10 rounded-lg ms-5">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="overflow-hidden">
|
||||
<a
|
||||
href={result.songUrl ? encodeURI(result.songUrl) : "#"}
|
||||
target="_blank"
|
||||
className="block font-semibold w-full truncate text-blue-500">
|
||||
{result.title}
|
||||
</a>
|
||||
<p className="truncate text-gray-500">
|
||||
{result.artist}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Card;
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
import querystring from "querystring";
|
||||
const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`;
|
||||
const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-playing`;
|
||||
const client_id = process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID;
|
||||
const client_secret = process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_SECRET;
|
||||
const refresh_token = process.env.NEXT_PUBLIC_SPOTIFY_REFRESH_TOKEN;
|
||||
|
||||
const basic = Buffer.from(`${client_id}:${client_secret}`).toString("base64");
|
||||
const getAccessToken = async () => {
|
||||
const response = await fetch(TOKEN_ENDPOINT, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Basic ${basic}`,
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
body: querystring.stringify({
|
||||
grant_type: "refresh_token",
|
||||
refresh_token,
|
||||
}),
|
||||
});
|
||||
|
||||
return response.json();
|
||||
};
|
||||
|
||||
export const getNowPlaying = async () => {
|
||||
const { access_token } = await getAccessToken();
|
||||
return fetch(NOW_PLAYING_ENDPOINT, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${access_token}`,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export default async function getNowPlayingItem() {
|
||||
const response = await getNowPlaying();
|
||||
if (response.status === 204 || response.status > 400) {
|
||||
return false;
|
||||
}
|
||||
const song = await response.json();
|
||||
const albumImageUrl = song.item.album.images[0].url;
|
||||
const artist = song.item.artists.map((_artist) => _artist.name).join(", ");
|
||||
const isPlaying = song.is_playing;
|
||||
const songUrl = song.item.external_urls.spotify;
|
||||
const title = song.item.name;
|
||||
|
||||
return {
|
||||
albumImageUrl,
|
||||
artist,
|
||||
isPlaying,
|
||||
songUrl,
|
||||
title,
|
||||
};
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@ import {
|
|||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useState } from "react";
|
||||
import Me4 from "@/public/image/me4.jpeg";
|
||||
import Me4 from "@/public/image/me4.jpg";
|
||||
import Me5 from "@/public/image/me5.jpg";
|
||||
import Me6 from "@/public/image/me6.jpg";
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue