mirror of
https://github.com/emmabostian/developer-portfolios.git
synced 2025-05-02 16:38:01 +00:00
Add seyoonPuvi's portfolio
This commit is contained in:
seyoonPuvi
parent
782334bcb2
commit
b32638eda1
172
.gitignore
vendored
172
.gitignore
vendored
@ -1,171 +1,3 @@
|
||||
node_modules
|
||||
/build
|
||||
|
||||
# Created by https://www.gitignore.io/api/linux,visualstudiocode,jetbrains+all,sublimetext,vim
|
||||
# Edit at https://www.gitignore.io/?templates=linux,visualstudiocode,jetbrains+all,sublimetext,vim
|
||||
|
||||
.DS_Store
|
||||
|
||||
### JetBrains+all ###
|
||||
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
|
||||
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
|
||||
|
||||
# User-specific stuff
|
||||
.idea/**/workspace.xml
|
||||
.idea/**/tasks.xml
|
||||
.idea/**/usage.statistics.xml
|
||||
.idea/**/dictionaries
|
||||
.idea/**/shelf
|
||||
|
||||
# Generated files
|
||||
.idea/**/contentModel.xml
|
||||
|
||||
# Sensitive or high-churn files
|
||||
.idea/**/dataSources/
|
||||
.idea/**/dataSources.ids
|
||||
.idea/**/dataSources.local.xml
|
||||
.idea/**/sqlDataSources.xml
|
||||
.idea/**/dynamic.xml
|
||||
.idea/**/uiDesigner.xml
|
||||
.idea/**/dbnavigator.xml
|
||||
|
||||
# Gradle
|
||||
.idea/**/gradle.xml
|
||||
.idea/**/libraries
|
||||
|
||||
# Gradle and Maven with auto-import
|
||||
# When using Gradle or Maven with auto-import, you should exclude module files,
|
||||
# since they will be recreated, and may cause churn. Uncomment if using
|
||||
# auto-import.
|
||||
# .idea/modules.xml
|
||||
# .idea/*.iml
|
||||
# .idea/modules
|
||||
# *.iml
|
||||
# *.ipr
|
||||
|
||||
# CMake
|
||||
cmake-build-*/
|
||||
|
||||
# Mongo Explorer plugin
|
||||
.idea/**/mongoSettings.xml
|
||||
|
||||
# File-based project format
|
||||
*.iws
|
||||
|
||||
# IntelliJ
|
||||
out/
|
||||
|
||||
# mpeltonen/sbt-idea plugin
|
||||
.idea_modules/
|
||||
|
||||
# JIRA plugin
|
||||
atlassian-ide-plugin.xml
|
||||
|
||||
# Cursive Clojure plugin
|
||||
.idea/replstate.xml
|
||||
|
||||
# Crashlytics plugin (for Android Studio and IntelliJ)
|
||||
com_crashlytics_export_strings.xml
|
||||
crashlytics.properties
|
||||
crashlytics-build.properties
|
||||
fabric.properties
|
||||
|
||||
# Editor-based Rest Client
|
||||
.idea/httpRequests
|
||||
|
||||
# Android studio 3.1+ serialized cache file
|
||||
.idea/caches/build_file_checksums.ser
|
||||
|
||||
### JetBrains+all Patch ###
|
||||
# Ignores the whole .idea folder and all .iml files
|
||||
# See https://github.com/joeblau/gitignore.io/issues/186 and https://github.com/joeblau/gitignore.io/issues/360
|
||||
|
||||
.idea/
|
||||
|
||||
# Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-249601023
|
||||
|
||||
*.iml
|
||||
modules.xml
|
||||
.idea/misc.xml
|
||||
*.ipr
|
||||
|
||||
# Sonarlint plugin
|
||||
.idea/sonarlint
|
||||
|
||||
### Linux ###
|
||||
*~
|
||||
|
||||
# temporary files which can be created if a process still has a handle open of a deleted file
|
||||
.fuse_hidden*
|
||||
|
||||
# KDE directory preferences
|
||||
.directory
|
||||
|
||||
# Linux trash folder which might appear on any partition or disk
|
||||
.Trash-*
|
||||
|
||||
# .nfs files are created when an open file is removed but is still being accessed
|
||||
.nfs*
|
||||
|
||||
### SublimeText ###
|
||||
# Cache files for Sublime Text
|
||||
*.tmlanguage.cache
|
||||
*.tmPreferences.cache
|
||||
*.stTheme.cache
|
||||
|
||||
# Workspace files are user-specific
|
||||
*.sublime-workspace
|
||||
|
||||
# Project files should be checked into the repository, unless a significant
|
||||
# proportion of contributors will probably not be using Sublime Text
|
||||
# *.sublime-project
|
||||
|
||||
# SFTP configuration file
|
||||
sftp-config.json
|
||||
|
||||
# Package control specific files
|
||||
Package Control.last-run
|
||||
Package Control.ca-list
|
||||
Package Control.ca-bundle
|
||||
Package Control.system-ca-bundle
|
||||
Package Control.cache/
|
||||
Package Control.ca-certs/
|
||||
Package Control.merged-ca-bundle
|
||||
Package Control.user-ca-bundle
|
||||
oscrypto-ca-bundle.crt
|
||||
bh_unicode_properties.cache
|
||||
|
||||
# Sublime-github package stores a github token in this file
|
||||
# https://packagecontrol.io/packages/sublime-github
|
||||
GitHub.sublime-settings
|
||||
|
||||
### Vim ###
|
||||
# Swap
|
||||
[._]*.s[a-v][a-z]
|
||||
[._]*.sw[a-p]
|
||||
[._]s[a-rt-v][a-z]
|
||||
[._]ss[a-gi-z]
|
||||
[._]sw[a-p]
|
||||
|
||||
# Session
|
||||
Session.vim
|
||||
Sessionx.vim
|
||||
|
||||
# Temporary
|
||||
.netrwhist
|
||||
# Auto-generated tag files
|
||||
tags
|
||||
# Persistent undo
|
||||
[._]*.un~
|
||||
|
||||
### VisualStudioCode ###
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
|
||||
### VisualStudioCode Patch ###
|
||||
# Ignore all local history of files
|
||||
.history
|
||||
|
||||
# End of https://www.gitignore.io/api/linux,visualstudiocode,jetbrains+all,sublimetext,vim
|
||||
n
|
||||
33975
package-lock.json
generated
Normal file
33975
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
51
package.json
Normal file
51
package.json
Normal file
@ -0,0 +1,51 @@
|
||||
{
|
||||
"homepage": "https://seyoonPuvi.github.io/personal-portfolio",
|
||||
"name": "particles",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@tsparticles/all": "^3.5.0",
|
||||
"@tsparticles/react": "^3.0.0",
|
||||
"aos": "^2.3.4",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.3.0",
|
||||
"react-loader-spinner": "^6.1.6",
|
||||
"react-scripts": "5.0.1",
|
||||
"reactjs-popup": "^2.0.6",
|
||||
"styled-components": "^6.1.13",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"predeploy": "npm run build",
|
||||
"deploy": "gh-pages -d build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"gh-pages": "^6.2.0"
|
||||
}
|
||||
}
|
||||
49
public/index.html
Normal file
49
public/index.html
Normal file
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="https://i.postimg.cc/9FBcZT41/boy.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="https://i.postimg.cc/9FBcZT41/boy.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Catamaran:wght@100..900&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Dots:wght@400..700&family=Londrina+Shadow&family=Satisfy&family=Spicy+Rice&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");
|
||||
</style>
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>VigneshPugazhenthi</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
25
public/manifest.json
Normal file
25
public/manifest.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
29
src/App.css
Normal file
29
src/App.css
Normal file
@ -0,0 +1,29 @@
|
||||
:root {
|
||||
font-size: 62.5%;
|
||||
box-sizing: border-box;
|
||||
scroll-behavior: smooth;
|
||||
transition: scroll 0.8s ease-out;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#particles {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: -1; /* Keeps it behind other content */
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
23
src/App.js
Normal file
23
src/App.js
Normal file
@ -0,0 +1,23 @@
|
||||
import React from "react";
|
||||
import Home from "./components/Home";
|
||||
import Service from "./components/Service";
|
||||
import Header from "./components/Header";
|
||||
import Project from "./components/Project";
|
||||
import About from "./components/About";
|
||||
import Contact from "./components/Contact";
|
||||
import "./App.css";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Home />
|
||||
<Service />
|
||||
<Project />
|
||||
<About />
|
||||
<Contact />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
260
src/components/About/index.js
Normal file
260
src/components/About/index.js
Normal file
@ -0,0 +1,260 @@
|
||||
import React from "react";
|
||||
import {
|
||||
AboutContainer,
|
||||
LeftContainer,
|
||||
RightContainer,
|
||||
Title,
|
||||
Text,
|
||||
Highlight,
|
||||
SubTitle,
|
||||
SkillContainer,
|
||||
SkillList,
|
||||
SkillListItem,
|
||||
SkillImage,
|
||||
SkillName,
|
||||
ExperienceTitle,
|
||||
Experience,
|
||||
ExperienceHeading,
|
||||
ExperienceText,
|
||||
ExperienceText2,
|
||||
} from "./style";
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<>
|
||||
<AboutContainer id="about">
|
||||
<LeftContainer>
|
||||
<Title
|
||||
data-aos="zoom-in"
|
||||
data-aos-duration="1500"
|
||||
data-aos-delay="300"
|
||||
>
|
||||
About
|
||||
</Title>
|
||||
<Text
|
||||
data-aos="zoom-in-right"
|
||||
data-aos-duration="1500"
|
||||
data-aos-delay="600"
|
||||
>
|
||||
I am a passionate <Highlight>software developer</Highlight>{" "}
|
||||
specializing in the <Highlight>MERN stack</Highlight>, with a strong
|
||||
emphasis on <Highlight>frontend development</Highlight>.I am
|
||||
dedicated to continuously learning and refining my skills to create
|
||||
engaging digital experiences that meet both user needs and business
|
||||
objectives.
|
||||
</Text>
|
||||
<ExperienceTitle
|
||||
data-aos="zoom-in-right"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="800"
|
||||
>
|
||||
Experience
|
||||
</ExperienceTitle>
|
||||
<Experience
|
||||
data-aos="zoom-in-left"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="1000"
|
||||
>
|
||||
<ExperienceHeading>Frontend Engineer Intern</ExperienceHeading>
|
||||
<ExperienceText>CodTech IT Solution</ExperienceText>
|
||||
<ExperienceText2>March 2024 – Present</ExperienceText2>
|
||||
</Experience>
|
||||
<Experience
|
||||
data-aos="zoom-in-left"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="1100"
|
||||
>
|
||||
<ExperienceHeading>
|
||||
MERN Stack Development Program
|
||||
</ExperienceHeading>
|
||||
<ExperienceText>NxTWave Academy</ExperienceText>
|
||||
<ExperienceText2>Aug 2023 – October 2024 </ExperienceText2>
|
||||
</Experience>
|
||||
</LeftContainer>
|
||||
<RightContainer>
|
||||
<SubTitle
|
||||
data-aos="zoom-in"
|
||||
data-aos-duration="1500"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
Skills
|
||||
</SubTitle>
|
||||
<SkillContainer>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="200"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/tgsCK0QC/python.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>Python</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="300"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/x1hWJ48c/js.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>JavaScript</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="500"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/L6YsrGcs/physics.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>React</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="400"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/t4FFHsK7/html-5.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>Html5</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="500"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/tCcHHT30/css-3.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>Css3</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="600"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/wTw4CGd7/nodejs.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>NodeJS</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="700"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/GtP33sCh/Express.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>ExpressJS</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="800"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/g0GVGvbr/MongoDB.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>MongoDB</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="900"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/Qx09cv2N/SQLite.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>Sqlite</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="1000"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/cLWW4J9r/MySQL.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>MySQL</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="1100"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/sDyHMZzd/Redux.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>Redux</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="1200"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/rpcwbjXZ/Git.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>Git</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="1300"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/CLz7BC22/GitHub.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>GitHub</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="1500"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/m2mrqC2T/Bootstrap.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>Bootstrap</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="1600"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/26WsdR31/Sass.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>Sass</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="1700"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/d0Pm7bMH/Tailwind-CSS.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>TailWind</SkillName>
|
||||
</SkillList>
|
||||
<SkillList
|
||||
data-aos="fade-down"
|
||||
data-aos-duration="1000"
|
||||
data-aos-delay="1800"
|
||||
>
|
||||
<SkillListItem>
|
||||
<SkillImage src="https://i.postimg.cc/9XKb9877/Figma.png" />
|
||||
</SkillListItem>
|
||||
<SkillName>Figma</SkillName>
|
||||
</SkillList>
|
||||
</SkillContainer>
|
||||
</RightContainer>
|
||||
</AboutContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
135
src/components/About/style.js
Normal file
135
src/components/About/style.js
Normal file
@ -0,0 +1,135 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
export const AboutContainer = styled.div`
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
export const LeftContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5rem 2rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 49%;
|
||||
}
|
||||
`;
|
||||
|
||||
export const RightContainer = styled.div`
|
||||
background-color: rgb(237, 242, 248);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 3rem;
|
||||
padding: 5rem 2rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 50%;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Title = styled.h1`
|
||||
font-size: 12rem;
|
||||
color: #ffffff;
|
||||
font-family: "Catamaran", sans-serif;
|
||||
letter-spacing: 2px;
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1200px) {
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Text = styled.p`
|
||||
font-size: 2rem;
|
||||
color: #8f9094;
|
||||
line-height: 1.5;
|
||||
`;
|
||||
|
||||
export const Highlight = styled.span`
|
||||
color: #3ccf91;
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
`;
|
||||
|
||||
export const SubTitle = styled(Title)`
|
||||
color: black;
|
||||
letter-spacing: 1px;
|
||||
`;
|
||||
|
||||
export const SkillContainer = styled.ul`
|
||||
padding-inline-start: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem 2rem;
|
||||
`;
|
||||
|
||||
export const SkillList = styled.li`
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 1rem;
|
||||
`;
|
||||
|
||||
export const SkillListItem = styled.div`
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const SkillImage = styled.img`
|
||||
height: 50%;
|
||||
object-fit: contain;
|
||||
width: 50%;
|
||||
`;
|
||||
|
||||
export const SkillName = styled.p`
|
||||
color: #6b7688;
|
||||
font-size: 1.8rem;
|
||||
`;
|
||||
|
||||
export const ExperienceTitle = styled.h1`
|
||||
font-size: 4rem;
|
||||
color: white;
|
||||
font-family: "Oswald";
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
margin-top: 10rem;
|
||||
`;
|
||||
|
||||
export const Experience = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 1rem;
|
||||
margin-top: 3rem;
|
||||
`;
|
||||
|
||||
export const ExperienceHeading = styled.h2`
|
||||
color: #3ccf91;
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
font-size: 2rem;
|
||||
`;
|
||||
|
||||
export const ExperienceText = styled.p`
|
||||
font-size: 1.6rem;
|
||||
color: #8f9094;
|
||||
`;
|
||||
|
||||
export const ExperienceText2 = styled(ExperienceText)`
|
||||
font-size: 1.2rem;
|
||||
`;
|
||||
142
src/components/Contact/index.js
Normal file
142
src/components/Contact/index.js
Normal file
@ -0,0 +1,142 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { IoDocumentTextSharp } from "react-icons/io5";
|
||||
import { FaGithub } from "react-icons/fa";
|
||||
|
||||
const ContactContainer = styled.div`
|
||||
height: 100vh;
|
||||
/* background-color: black; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const Title = styled.h1`
|
||||
color: white;
|
||||
font-size: 8rem;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 4rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const Text = styled.p`
|
||||
color: #8f9094;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const LinkContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 5rem;
|
||||
column-gap: 2rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
column-gap: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const LinkItem = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 1rem;
|
||||
`;
|
||||
|
||||
const GithubIcon = styled(FaGithub)`
|
||||
color: #3ccf91;
|
||||
font-size: 2.5rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const ResumeIcon = styled(IoDocumentTextSharp)`
|
||||
color: #3ccf91;
|
||||
font-size: 2.5rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const SubText = styled.p`
|
||||
color: #ffffff;
|
||||
font-size: 2rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const Footer = styled.div`
|
||||
background-color: black;
|
||||
width: 100%;
|
||||
padding-bottom: 2rem;
|
||||
`;
|
||||
|
||||
const FooterText = styled(Text)`
|
||||
color: #8f9094;
|
||||
font-size: 1.5rem;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const Highlight = styled.span`
|
||||
color: #3ccf91;
|
||||
`;
|
||||
|
||||
const Contact = () => {
|
||||
return (
|
||||
<>
|
||||
<ContactContainer id="contact">
|
||||
<Title>Keep In Touch.</Title>
|
||||
<Text>
|
||||
Feel free to get in touch and talk more about your projects.
|
||||
</Text>
|
||||
<Text>seyoonpuvi@gmail.com</Text>
|
||||
|
||||
<LinkContainer>
|
||||
<LinkItem>
|
||||
<GithubIcon />
|
||||
<SubText
|
||||
as="a"
|
||||
href="https://github.com/seyoonPuvi"
|
||||
target="_blank"
|
||||
>
|
||||
Github
|
||||
</SubText>
|
||||
</LinkItem>
|
||||
<LinkItem>
|
||||
<ResumeIcon />
|
||||
<SubText
|
||||
as="a"
|
||||
href="https://drive.google.com/file/d/1hwwHAGyvbGsliqXoHujYgnRhJ3tjlHlb/view?usp=sharing"
|
||||
target="_blank"
|
||||
download
|
||||
>
|
||||
Resume
|
||||
</SubText>
|
||||
</LinkItem>
|
||||
</LinkContainer>
|
||||
</ContactContainer>
|
||||
<Footer>
|
||||
<FooterText>
|
||||
Designed and Developed by <Highlight>Vignesh Pugazhenthi</Highlight>.
|
||||
</FooterText>
|
||||
</Footer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
125
src/components/Header/index.js
Normal file
125
src/components/Header/index.js
Normal file
@ -0,0 +1,125 @@
|
||||
import { React, useState } from "react";
|
||||
import AOS from "aos";
|
||||
import "aos/dist/aos.css";
|
||||
import {
|
||||
NavbarContainer,
|
||||
Navbar,
|
||||
NavLogo,
|
||||
NavItemsContainer,
|
||||
NavItems,
|
||||
HamburgerMenu,
|
||||
CloseIcon,
|
||||
MobNavContainer,
|
||||
MobNavItems,
|
||||
MobNavLink,
|
||||
} from "./style";
|
||||
|
||||
const Header = () => {
|
||||
AOS.init();
|
||||
const [showMobNav, setShowMobNav] = useState(false);
|
||||
const [isClosing, setIsClosing] = useState(false);
|
||||
|
||||
const onClickNavBtn = () => {
|
||||
if (showMobNav) {
|
||||
// Start closing animation
|
||||
setIsClosing(true);
|
||||
// Delay hiding the navigation until the animation finishes
|
||||
setTimeout(() => {
|
||||
setShowMobNav(false);
|
||||
setIsClosing(false); // Reset closing state
|
||||
}, 1400); // Match the animation duration
|
||||
} else {
|
||||
setShowMobNav(true);
|
||||
}
|
||||
};
|
||||
|
||||
const onRenderMobileNav = () => (
|
||||
<MobNavContainer>
|
||||
<MobNavItems
|
||||
color="black"
|
||||
className={!isClosing ? "slide-in" : "slide-out"}
|
||||
duration="0.4s"
|
||||
delay="0.2s"
|
||||
closeDelay="1s"
|
||||
onClick={onClickNavBtn}
|
||||
>
|
||||
<MobNavLink href="#home">Home</MobNavLink>
|
||||
</MobNavItems>
|
||||
<MobNavItems
|
||||
color="#257180"
|
||||
className={!isClosing ? "slide-in" : "slide-out"}
|
||||
duration="0.4s"
|
||||
delay="0.4s"
|
||||
closeDelay="0.8s"
|
||||
onClick={onClickNavBtn}
|
||||
>
|
||||
<MobNavLink href="#service">Service</MobNavLink>
|
||||
</MobNavItems>
|
||||
<MobNavItems
|
||||
color="#912100 "
|
||||
className={!isClosing ? "slide-in" : "slide-out"}
|
||||
duration="0.4s"
|
||||
delay="0.6s"
|
||||
closeDelay="0.6s"
|
||||
onClick={onClickNavBtn}
|
||||
>
|
||||
<MobNavLink href="#project">Project</MobNavLink>
|
||||
</MobNavItems>
|
||||
<MobNavItems
|
||||
color="#FD8B51"
|
||||
className={!isClosing ? "slide-in" : "slide-out"}
|
||||
duration="0.4s"
|
||||
delay="0.8s"
|
||||
closeDelay="0.4s"
|
||||
onClick={onClickNavBtn}
|
||||
>
|
||||
<MobNavLink href="#about">About</MobNavLink>
|
||||
</MobNavItems>
|
||||
<MobNavItems
|
||||
color="#CB6040"
|
||||
className={!isClosing ? "slide-in" : "slide-out"}
|
||||
duration="0.4s"
|
||||
delay="1s"
|
||||
closeDelay="0.2s"
|
||||
onClick={onClickNavBtn}
|
||||
>
|
||||
<MobNavLink href="#contact">Contact</MobNavLink>
|
||||
</MobNavItems>
|
||||
</MobNavContainer>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavbarContainer>
|
||||
<Navbar>
|
||||
<NavLogo>{`<VK/>`}</NavLogo>
|
||||
<NavItemsContainer>
|
||||
<NavItems as="a" href="#Home">
|
||||
Home
|
||||
</NavItems>
|
||||
<NavItems as="a" href="#service">
|
||||
Service
|
||||
</NavItems>
|
||||
<NavItems as="a" href="#project">
|
||||
Project
|
||||
</NavItems>
|
||||
<NavItems as="a" href="#about">
|
||||
About
|
||||
</NavItems>
|
||||
<NavItems as="a" href="#contact">
|
||||
Contact
|
||||
</NavItems>
|
||||
</NavItemsContainer>
|
||||
{showMobNav ? (
|
||||
<CloseIcon onClick={onClickNavBtn} />
|
||||
) : (
|
||||
<HamburgerMenu onClick={onClickNavBtn} />
|
||||
)}
|
||||
</Navbar>
|
||||
</NavbarContainer>
|
||||
{showMobNav && onRenderMobileNav()}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
160
src/components/Header/style.js
Normal file
160
src/components/Header/style.js
Normal file
@ -0,0 +1,160 @@
|
||||
import { styled, keyframes } from "styled-components";
|
||||
import { GiHamburgerMenu } from "react-icons/gi";
|
||||
import { AiOutlineClose } from "react-icons/ai";
|
||||
|
||||
// Keyframes for animations
|
||||
const slideIn = keyframes`
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
`;
|
||||
|
||||
const slideOut = keyframes`
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavbarContainer = styled.div`
|
||||
display: flex;
|
||||
height: 5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const Navbar = styled.div`
|
||||
width: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
export const NavLogo = styled.h1`
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
color: #3ccf91;
|
||||
font-size: 5rem;
|
||||
font-family: "Londrina Shadow", sans-serif;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavItemsContainer = styled.ul`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 2.5rem;
|
||||
padding-inline-start: 0;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavItems = styled.a`
|
||||
list-style-type: none;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
font-family: "Londrina Shadow";
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
`;
|
||||
|
||||
export const HamburgerMenu = styled(GiHamburgerMenu)`
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
display: none;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: block;
|
||||
font-size: 3rem;
|
||||
z-index: 1001;
|
||||
}
|
||||
`;
|
||||
|
||||
export const CloseIcon = styled(AiOutlineClose)`
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
|
||||
position: fixed;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: block;
|
||||
font-size: 3rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const MobNavContainer = styled.ul`
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
align-items: stretch;
|
||||
padding-inline-start: 0;
|
||||
z-index: 100;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
`;
|
||||
|
||||
export const MobNavItems = styled.li`
|
||||
list-style-type: none;
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: ${(props) => props.color};
|
||||
|
||||
&.slide-in {
|
||||
animation: ${slideIn} ${(props) => props.duration} linear
|
||||
${(props) => props.delay} both;
|
||||
}
|
||||
|
||||
&.slide-out {
|
||||
animation: ${slideOut} ${(props) => props.duration} linear
|
||||
${(props) => props.closeDelay} both;
|
||||
}
|
||||
`;
|
||||
|
||||
export const MobNavLink = styled.a`
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
font-family: "Spicy Rice", serif;
|
||||
letter-spacing: 2px;
|
||||
transition: all 0.25s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
`;
|
||||
109
src/components/Home/index.js
Normal file
109
src/components/Home/index.js
Normal file
@ -0,0 +1,109 @@
|
||||
import React from "react";
|
||||
import AOS from "aos";
|
||||
import "aos/dist/aos.css";
|
||||
import styled from "styled-components";
|
||||
import ParticlesComponent from "../partcles";
|
||||
|
||||
const HomeContainer = styled.div`
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const Name = styled.h1`
|
||||
font-size: 10rem;
|
||||
font-weight: bold;
|
||||
color: #3ccf91;
|
||||
text-align: center;
|
||||
|
||||
letter-spacing: 2px;
|
||||
font-family: "Londrina Shadow";
|
||||
|
||||
@media (max-width: 600px) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 1000px) {
|
||||
font-size: 5rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const SkillText = styled.h2`
|
||||
font-size: 5rem;
|
||||
color: #3ccf91;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-family: "Londrina Shadow";
|
||||
letter-spacing: 2px;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 1000px) {
|
||||
font-size: 4rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const AboutText = styled.h2`
|
||||
color: white;
|
||||
font-size: 5rem;
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
font-family: "Londrina Shadow";
|
||||
|
||||
@media (max-width: 600px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 1000px) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const MainContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
row-gap: 1rem;
|
||||
`;
|
||||
|
||||
const Home = () => {
|
||||
AOS.init();
|
||||
|
||||
return (
|
||||
<>
|
||||
<HomeContainer id="home">
|
||||
<ParticlesComponent id="particles" />
|
||||
<MainContainer>
|
||||
<Name
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1500"
|
||||
data-aos-delay="800"
|
||||
>
|
||||
Vignesh Pugazhenthi
|
||||
</Name>
|
||||
<AboutText
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1500"
|
||||
data-aos-delay="1200"
|
||||
>
|
||||
Full Stack Developer who likes building stuff for
|
||||
</AboutText>
|
||||
<SkillText
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1500"
|
||||
data-aos-delay="1500"
|
||||
>
|
||||
Web
|
||||
</SkillText>
|
||||
</MainContainer>
|
||||
</HomeContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
203
src/components/Project/index.js
Normal file
203
src/components/Project/index.js
Normal file
@ -0,0 +1,203 @@
|
||||
import { React, useState, useEffect } from "react";
|
||||
import { Grid } from "react-loader-spinner";
|
||||
import { projectsList, TabList } from "../../utils/constant";
|
||||
import {
|
||||
ProjectContainer,
|
||||
RightContainer,
|
||||
LeftContainer,
|
||||
ProjectInfoDetailsContainer,
|
||||
Title,
|
||||
CloseButton,
|
||||
ProjectTitle,
|
||||
ProjectInfoOverview,
|
||||
ProjectHighlights,
|
||||
ProjectHighlight,
|
||||
HighlightName,
|
||||
ProjectLinkContainer,
|
||||
ProjectLive,
|
||||
GithubLink,
|
||||
Heading,
|
||||
ProjectTabContainer,
|
||||
ProjectTab,
|
||||
TabButton,
|
||||
ProjectCardContainer,
|
||||
ProjectName,
|
||||
ProjectCard,
|
||||
ProjectImageCard,
|
||||
LoaderContainer,
|
||||
ProjectInfo,
|
||||
ProjectDesc,
|
||||
NoProject,
|
||||
Heading2,
|
||||
} from "./style";
|
||||
|
||||
const Project = () => {
|
||||
const [projectInfo, setTab] = useState({
|
||||
activeTab: "webdesign",
|
||||
isLoading: true,
|
||||
ToDisplay: [],
|
||||
});
|
||||
const [projectInfoView, setProjectInfoView] = useState({
|
||||
showProjectInfoView: false,
|
||||
projectDetails: null,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const { activeTab } = projectInfo;
|
||||
const activeProjects = projectsList[activeTab];
|
||||
|
||||
setTab((prev) => ({
|
||||
...prev,
|
||||
activeTab,
|
||||
isLoading: false,
|
||||
ToDisplay: activeProjects,
|
||||
}));
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [projectInfo.activeTab, projectInfo.isLoading]);
|
||||
|
||||
const onClickTab = (id) => {
|
||||
setTab((prev) => ({ ...prev, activeTab: id, isLoading: true }));
|
||||
};
|
||||
|
||||
const onClickProject = (project) => {
|
||||
setProjectInfoView({
|
||||
showProjectInfoView: true,
|
||||
projectDetails: project,
|
||||
});
|
||||
const container = document.getElementById("leftContainer"); // Use the correct selector
|
||||
if (container) {
|
||||
container.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
};
|
||||
|
||||
const onRenderLoader = () => (
|
||||
<LoaderContainer data-testid="loader">
|
||||
<Grid type="ThreeDots" color="white" height="50" width="50" />
|
||||
</LoaderContainer>
|
||||
);
|
||||
|
||||
const onRenderProjectDetailsView = () => (
|
||||
<ProjectInfoDetailsContainer>
|
||||
<CloseButton
|
||||
onClick={() =>
|
||||
setProjectInfoView({
|
||||
showProjectInfoView: false,
|
||||
projectDetails: null,
|
||||
})
|
||||
}
|
||||
>
|
||||
❌
|
||||
</CloseButton>
|
||||
<ProjectTitle>{projectInfoView.projectDetails.title}</ProjectTitle>
|
||||
<ProjectInfoOverview>
|
||||
{projectInfoView.projectDetails.projectOverview}
|
||||
</ProjectInfoOverview>
|
||||
<ProjectHighlights>
|
||||
<ProjectInfoOverview>Features:</ProjectInfoOverview>
|
||||
{projectInfoView.projectDetails.projectHighlights.map((each, index) => (
|
||||
<ProjectHighlight key={`${each} ${index}`}>
|
||||
<HighlightName>{each}</HighlightName>
|
||||
</ProjectHighlight>
|
||||
))}
|
||||
</ProjectHighlights>
|
||||
|
||||
<ProjectHighlights>
|
||||
<ProjectInfoOverview>Tech Stack:</ProjectInfoOverview>
|
||||
{projectInfoView.projectDetails.projectTechStack.map((each, index) => (
|
||||
<ProjectHighlight key={`${each} ${index}`}>
|
||||
<HighlightName>{each}</HighlightName>
|
||||
</ProjectHighlight>
|
||||
))}
|
||||
</ProjectHighlights>
|
||||
<ProjectLinkContainer>
|
||||
<ProjectLive
|
||||
as="a"
|
||||
href={projectInfoView.projectDetails.link}
|
||||
target="_blank"
|
||||
>
|
||||
live🔎
|
||||
</ProjectLive>
|
||||
<GithubLink
|
||||
as="a"
|
||||
href={projectInfoView.projectDetails.githubLink}
|
||||
target="_blank"
|
||||
>
|
||||
Github🐱🏍
|
||||
</GithubLink>
|
||||
</ProjectLinkContainer>
|
||||
</ProjectInfoDetailsContainer>
|
||||
);
|
||||
|
||||
const onRenderView = () => {
|
||||
if (projectInfo.isLoading) {
|
||||
return onRenderLoader();
|
||||
} else {
|
||||
if (projectInfo.ToDisplay.length !== 0) {
|
||||
return (
|
||||
<ProjectCardContainer>
|
||||
{projectInfo.ToDisplay.map((each) => (
|
||||
<ProjectCard
|
||||
data-aos="zoom-in"
|
||||
data-aos-duration="1500"
|
||||
data-aos-delay="300"
|
||||
onClick={() => onClickProject(each)}
|
||||
>
|
||||
<ProjectImageCard src={each.imageUrl} alt="image" />
|
||||
<ProjectInfo>
|
||||
<ProjectName>{each.title}</ProjectName>
|
||||
<ProjectDesc>{each.desc}</ProjectDesc>
|
||||
</ProjectInfo>
|
||||
</ProjectCard>
|
||||
))}
|
||||
</ProjectCardContainer>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<NoProject>
|
||||
<Heading2>Project Will Be Updated Soon</Heading2>
|
||||
</NoProject>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ProjectContainer id="project">
|
||||
<LeftContainer id="leftContainer">
|
||||
{projectInfoView.showProjectInfoView ? (
|
||||
onRenderProjectDetailsView()
|
||||
) : (
|
||||
<>
|
||||
<ProjectTabContainer>
|
||||
{TabList.map((each) => (
|
||||
<ProjectTab key={each.id}>
|
||||
<TabButton
|
||||
type="button"
|
||||
onClick={() => onClickTab(each.id)}
|
||||
isActive={projectInfo.activeTab === each.id}
|
||||
>
|
||||
{each.displayName}
|
||||
</TabButton>
|
||||
</ProjectTab>
|
||||
))}
|
||||
</ProjectTabContainer>
|
||||
{onRenderView()}{" "}
|
||||
</>
|
||||
)}
|
||||
</LeftContainer>
|
||||
<RightContainer>
|
||||
<Title data-aos="zoom-in" data-aos-duration="1500" data-aos-delay="300">
|
||||
PROJECTS
|
||||
</Title>
|
||||
<Heading
|
||||
data-aos="zoom-in-right"
|
||||
data-aos-duration="1500"
|
||||
data-aos-delay="600"
|
||||
>
|
||||
Here are some of my selected projects worth sharing.
|
||||
</Heading>
|
||||
</RightContainer>
|
||||
</ProjectContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Project;
|
||||
295
src/components/Project/style.js
Normal file
295
src/components/Project/style.js
Normal file
@ -0,0 +1,295 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
export const ProjectContainer = styled.div`
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
`;
|
||||
|
||||
export const RightContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 1rem;
|
||||
padding: 5rem 2rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 50%;
|
||||
min-height: 100vh;
|
||||
row-gap: 5rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const LeftContainer = styled.div`
|
||||
background-color: rgb(237, 242, 248);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 3rem;
|
||||
padding: 5rem 1rem;
|
||||
@media (min-width: 768px) {
|
||||
width: 50%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
`;
|
||||
export const ProjectInfoDetailsContainer = styled(LeftContainer)`
|
||||
width: 98%;
|
||||
row-gap: 1rem;
|
||||
padding: 2rem 1rem;
|
||||
@media (min-width: 768px) {
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
scroll-behavior: smooth;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
`;
|
||||
|
||||
export const Title = styled.h1`
|
||||
font-size: 12rem;
|
||||
color: #ffffff;
|
||||
font-family: "Catamaran", sans-serif;
|
||||
letter-spacing: 2px;
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1200px) {
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
|
||||
export const CloseButton = styled.button`
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 2rem;
|
||||
align-self: flex-end;
|
||||
background-color: rgb(237, 242, 248);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
`;
|
||||
|
||||
export const ProjectTitle = styled.h1`
|
||||
font-size: 8rem;
|
||||
color: #000000;
|
||||
font-family: "Catamaran", sans-serif;
|
||||
letter-spacing: 2px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ProjectInfoOverview = styled.p`
|
||||
font-size: 2.5rem;
|
||||
font-family: "Oswald";
|
||||
letter-spacing: 1px;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.2;
|
||||
color: #000000;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ProjectHighlights = styled.ul`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-inline-start: 0;
|
||||
row-gap: 1rem;
|
||||
margin-top: 4rem;
|
||||
`;
|
||||
|
||||
export const ProjectHighlight = styled.li`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 0.5rem;
|
||||
background-color: black;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
|
||||
`;
|
||||
|
||||
export const HighlightName = styled.p`
|
||||
font-size: 1.8rem;
|
||||
color: #8f9094;
|
||||
font-weight: bold;
|
||||
font-family: "Catamaran", sans-serif;
|
||||
`;
|
||||
|
||||
export const ProjectLinkContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-top: 1rem;
|
||||
`;
|
||||
|
||||
export const ProjectLive = styled.button`
|
||||
color: #000000;
|
||||
padding: 1rem 2rem;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
border: 1px solid white;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
font-family: "Catamaran", sans-serif;
|
||||
background-color: #ffffff;
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
||||
|
||||
&:hover {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
`;
|
||||
|
||||
export const GithubLink = styled(ProjectLive)``;
|
||||
|
||||
export const Heading = styled.h1`
|
||||
font-size: 10rem;
|
||||
font-family: "Oswald";
|
||||
letter-spacing: 1px;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.2;
|
||||
color: #8f9094;
|
||||
|
||||
transition: all 0.45s ease-out;
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1200px) {
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ProjectTabContainer = styled.ul`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding-inline-start: 0;
|
||||
gap: 1.5rem;
|
||||
margin-top: 5rem;
|
||||
`;
|
||||
|
||||
export const ProjectTab = styled.li`
|
||||
list-style: none;
|
||||
`;
|
||||
|
||||
export const TabButton = styled.button`
|
||||
background-color: ${(props) =>
|
||||
props.isActive === true ? "black" : "rgb(237, 242, 248)"};
|
||||
border: 1px solid black;
|
||||
outline: none;
|
||||
border-radius: 1.2rem;
|
||||
padding: 1rem;
|
||||
color: ${(props) => (props.isActive === false ? "black" : "white")};
|
||||
font-weight: bolder;
|
||||
cursor: pointer;
|
||||
transition: all 0.45s ease-out;
|
||||
|
||||
width: 12rem;
|
||||
`;
|
||||
|
||||
export const ProjectCardContainer = styled.ul`
|
||||
padding-inline-start: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem 2rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
export const ProjectName = styled.h1`
|
||||
font-size: 2rem;
|
||||
color: #801515;
|
||||
font-family: "Catamaran", serif;
|
||||
font-weight: bold;
|
||||
`;
|
||||
|
||||
export const ProjectCard = styled.li`
|
||||
background-color: rgb(237, 242, 248);
|
||||
list-style: none;
|
||||
padding: 2rem 1rem;
|
||||
border-radius: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 1.5rem;
|
||||
width: 20rem;
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
||||
transition: all 0.45s ease-out;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
background-color: #ff3822;
|
||||
}
|
||||
|
||||
&:hover ${ProjectName} {
|
||||
color: white;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ProjectImageCard = styled.img`
|
||||
height: 18rem;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
border-radius: 1rem;
|
||||
`;
|
||||
|
||||
export const LoaderContainer = styled.div`
|
||||
height: 50rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const ProjectInfo = styled.div`
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
export const ProjectDesc = styled.p`
|
||||
font-size: 1.2rem;
|
||||
font-family: "Catamaran", seif;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
`;
|
||||
|
||||
export const NoProject = styled.div`
|
||||
height: 50rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const Heading2 = styled(Heading)`
|
||||
color: black;
|
||||
text-align: center;
|
||||
`;
|
||||
89
src/components/Service/index.js
Normal file
89
src/components/Service/index.js
Normal file
@ -0,0 +1,89 @@
|
||||
import React from "react";
|
||||
import AOS from "aos";
|
||||
import "aos/dist/aos.css";
|
||||
import {
|
||||
ServiceContainer,
|
||||
LeftContainer,
|
||||
Title,
|
||||
Heading,
|
||||
ServiceCardContainer,
|
||||
ServiceCard,
|
||||
Image,
|
||||
CardHeading,
|
||||
CardDesc,
|
||||
CardListContainer,
|
||||
CardListItem,
|
||||
CardItemText,
|
||||
} from "./style";
|
||||
const Service = () => {
|
||||
AOS.init();
|
||||
return (
|
||||
<ServiceContainer id="service">
|
||||
<LeftContainer>
|
||||
<Title data-aos="zoom-in" data-aos-duration="1500" data-aos-delay="300">
|
||||
SERVICES
|
||||
</Title>
|
||||
<Heading
|
||||
data-aos="zoom-in-right"
|
||||
data-aos-duration="1500"
|
||||
data-aos-delay="600"
|
||||
>
|
||||
Code that solves problems,one product at a time
|
||||
</Heading>
|
||||
</LeftContainer>
|
||||
<ServiceCardContainer>
|
||||
<ServiceCard
|
||||
data-aos="fade-down"
|
||||
data-aos-easing="linear"
|
||||
data-aos-duration="1000"
|
||||
>
|
||||
<Image src="https://cdn.sanity.io/images/y1prohws/production/1ee2839d9f4f3d19a08d9160d4b464a3dcedfb25-70x65.svg" />
|
||||
<CardHeading>What I can do for you</CardHeading>
|
||||
<CardDesc>
|
||||
Deliver faster, better products that your users will love. Here are
|
||||
the services I provide
|
||||
</CardDesc>
|
||||
<CardListContainer>
|
||||
<CardListItem>
|
||||
<CardItemText>Design Strategy</CardItemText>
|
||||
</CardListItem>
|
||||
<CardListItem>
|
||||
<CardItemText>Front-end Development</CardItemText>
|
||||
</CardListItem>
|
||||
<CardListItem>
|
||||
<CardItemText>Back-end Development</CardItemText>
|
||||
</CardListItem>
|
||||
<CardListItem>
|
||||
<CardItemText>Fullstack Development</CardItemText>
|
||||
</CardListItem>
|
||||
</CardListContainer>
|
||||
</ServiceCard>
|
||||
<ServiceCard
|
||||
data-aos="fade-down"
|
||||
data-aos-easing="linear"
|
||||
data-aos-duration="1000"
|
||||
>
|
||||
<Image src="https://cdn.sanity.io/images/y1prohws/production/167e91631a7731d5a4301f798b8444131b08dad1-69x68.svg" />
|
||||
<CardHeading>What you can expect</CardHeading>
|
||||
<CardDesc>
|
||||
I design products that go beyond aesthetics—they're shippable and
|
||||
usable
|
||||
</CardDesc>
|
||||
<CardListContainer>
|
||||
<CardListItem>
|
||||
<CardItemText>Clean and Functional</CardItemText>
|
||||
</CardListItem>
|
||||
<CardListItem>
|
||||
<CardItemText>Device and User Friendly</CardItemText>
|
||||
</CardListItem>
|
||||
<CardListItem>
|
||||
<CardItemText>Efficient and Maintainable</CardItemText>
|
||||
</CardListItem>
|
||||
</CardListContainer>
|
||||
</ServiceCard>
|
||||
</ServiceCardContainer>
|
||||
</ServiceContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Service;
|
||||
153
src/components/Service/style.js
Normal file
153
src/components/Service/style.js
Normal file
@ -0,0 +1,153 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
export const ServiceContainer = styled.div`
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`;
|
||||
|
||||
export const LeftContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 5rem;
|
||||
padding: 5rem 2rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
background-color: #000000;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Title = styled.h1`
|
||||
font-size: 12rem;
|
||||
color: #ffffff;
|
||||
font-family: "Catamaran", sans-serif;
|
||||
letter-spacing: 2px;
|
||||
|
||||
transition: all 0.45s ease-out;
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1200px) {
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Heading = styled.h1`
|
||||
font-size: 10rem;
|
||||
font-family: "Oswald";
|
||||
letter-spacing: 1px;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.2;
|
||||
color: #8f9094;
|
||||
transition: all 0.45s ease-out;
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1200px) {
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ServiceCardContainer = styled.div`
|
||||
background-color: rgb(237, 242, 248);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 3rem;
|
||||
padding: 5rem 3rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 50%;
|
||||
padding: 5rem 3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 5rem 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ServiceCard = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 1rem;
|
||||
font-family: "Catamaran", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
min-width: 30rem;
|
||||
flex-grow: 1;
|
||||
`;
|
||||
|
||||
export const Image = styled.img`
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
align-self: center;
|
||||
}
|
||||
`;
|
||||
|
||||
export const CardHeading = styled.h1`
|
||||
font-size: 3rem;
|
||||
font-family: "Oswald", sans-serif;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const CardDesc = styled.p`
|
||||
font-size: 1.8rem;
|
||||
color: black;
|
||||
font-family: "Catamaran", sans-serif;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const CardListContainer = styled.ul`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
column-gap: 1.5rem;
|
||||
row-gap: 1rem;
|
||||
padding-inline-start: 0;
|
||||
`;
|
||||
|
||||
export const CardListItem = styled.li`
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem 1.5rem;
|
||||
background-color: black;
|
||||
height: 4rem;
|
||||
border-radius: 1.5rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 50%;
|
||||
align-self: flex-start;
|
||||
}
|
||||
`;
|
||||
|
||||
export const CardItemText = styled.p`
|
||||
color: white;
|
||||
font-size: 1.6rem;
|
||||
font-family: "Catamaran", sans-serif;
|
||||
`;
|
||||
617
src/components/partcles.js
Normal file
617
src/components/partcles.js
Normal file
@ -0,0 +1,617 @@
|
||||
import Particles, { initParticlesEngine } from "@tsparticles/react";
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { loadAll } from "@tsparticles/all";
|
||||
|
||||
const ParticlesComponent = (props) => {
|
||||
useEffect(() => {
|
||||
initParticlesEngine(async (engine) => {
|
||||
await loadAll(engine);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const option1 = useMemo(
|
||||
() => ({
|
||||
autoPlay: true,
|
||||
background: {
|
||||
color: {
|
||||
value: "#000000",
|
||||
},
|
||||
image: "",
|
||||
position: "",
|
||||
repeat: "",
|
||||
size: "",
|
||||
opacity: 1,
|
||||
},
|
||||
backgroundMask: {
|
||||
composite: "destination-out",
|
||||
cover: {
|
||||
color: {
|
||||
value: "#fff",
|
||||
},
|
||||
opacity: 1,
|
||||
},
|
||||
enable: false,
|
||||
},
|
||||
clear: true,
|
||||
defaultThemes: {},
|
||||
delay: 0,
|
||||
fullScreen: {
|
||||
enable: true,
|
||||
zIndex: -1,
|
||||
},
|
||||
detectRetina: true,
|
||||
duration: 0,
|
||||
fpsLimit: 120,
|
||||
interactivity: {
|
||||
detectsOn: "window",
|
||||
events: {
|
||||
onClick: {
|
||||
enable: false,
|
||||
mode: [],
|
||||
},
|
||||
onDiv: {
|
||||
selectors: [],
|
||||
enable: false,
|
||||
mode: [],
|
||||
type: "circle",
|
||||
},
|
||||
onHover: {
|
||||
enable: false,
|
||||
mode: [],
|
||||
parallax: {
|
||||
enable: false,
|
||||
force: 2,
|
||||
smooth: 10,
|
||||
},
|
||||
},
|
||||
resize: {
|
||||
delay: 0.5,
|
||||
enable: true,
|
||||
},
|
||||
},
|
||||
modes: {
|
||||
trail: {
|
||||
delay: 1,
|
||||
pauseOnStop: false,
|
||||
quantity: 1,
|
||||
},
|
||||
attract: {
|
||||
distance: 200,
|
||||
duration: 0.4,
|
||||
easing: "ease-out-quad",
|
||||
factor: 1,
|
||||
maxSpeed: 50,
|
||||
speed: 1,
|
||||
},
|
||||
bounce: {
|
||||
distance: 200,
|
||||
},
|
||||
bubble: {
|
||||
distance: 200,
|
||||
duration: 0.4,
|
||||
mix: false,
|
||||
divs: {
|
||||
distance: 200,
|
||||
duration: 0.4,
|
||||
mix: false,
|
||||
selectors: [],
|
||||
},
|
||||
},
|
||||
connect: {
|
||||
distance: 80,
|
||||
links: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
radius: 60,
|
||||
},
|
||||
grab: {
|
||||
distance: 100,
|
||||
links: {
|
||||
blink: false,
|
||||
consent: false,
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
push: {
|
||||
default: true,
|
||||
groups: [],
|
||||
quantity: 4,
|
||||
},
|
||||
remove: {
|
||||
quantity: 2,
|
||||
},
|
||||
repulse: {
|
||||
distance: 200,
|
||||
duration: 0.4,
|
||||
factor: 100,
|
||||
speed: 1,
|
||||
maxSpeed: 50,
|
||||
easing: "ease-out-quad",
|
||||
divs: {
|
||||
distance: 200,
|
||||
duration: 0.4,
|
||||
factor: 100,
|
||||
speed: 1,
|
||||
maxSpeed: 50,
|
||||
easing: "ease-out-quad",
|
||||
selectors: [],
|
||||
},
|
||||
},
|
||||
slow: {
|
||||
factor: 3,
|
||||
radius: 200,
|
||||
},
|
||||
light: {
|
||||
area: {
|
||||
gradient: {
|
||||
start: {
|
||||
value: "#ffffff",
|
||||
},
|
||||
stop: {
|
||||
value: "#000000",
|
||||
},
|
||||
},
|
||||
radius: 1000,
|
||||
},
|
||||
shadow: {
|
||||
color: {
|
||||
value: "#000000",
|
||||
},
|
||||
length: 2000,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
manualParticles: [],
|
||||
particles: {
|
||||
bounce: {
|
||||
horizontal: {
|
||||
value: 1,
|
||||
},
|
||||
vertical: {
|
||||
value: 1,
|
||||
},
|
||||
},
|
||||
collisions: {
|
||||
absorb: {
|
||||
speed: 2,
|
||||
},
|
||||
bounce: {
|
||||
horizontal: {
|
||||
value: 1,
|
||||
},
|
||||
vertical: {
|
||||
value: 1,
|
||||
},
|
||||
},
|
||||
enable: false,
|
||||
maxSpeed: 50,
|
||||
mode: "bounce",
|
||||
overlap: {
|
||||
enable: true,
|
||||
retries: 0,
|
||||
},
|
||||
},
|
||||
color: {
|
||||
value: "#fff",
|
||||
animation: {
|
||||
h: {
|
||||
count: 0,
|
||||
enable: false,
|
||||
speed: 1,
|
||||
decay: 0,
|
||||
delay: 0,
|
||||
sync: true,
|
||||
offset: 0,
|
||||
},
|
||||
s: {
|
||||
count: 0,
|
||||
enable: false,
|
||||
speed: 1,
|
||||
decay: 0,
|
||||
delay: 0,
|
||||
sync: true,
|
||||
offset: 0,
|
||||
},
|
||||
l: {
|
||||
count: 0,
|
||||
enable: false,
|
||||
speed: 1,
|
||||
decay: 0,
|
||||
delay: 0,
|
||||
sync: true,
|
||||
offset: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
effect: {
|
||||
close: true,
|
||||
fill: true,
|
||||
options: {},
|
||||
type: [],
|
||||
},
|
||||
groups: {
|
||||
z5000: {
|
||||
number: {
|
||||
value: 70,
|
||||
},
|
||||
zIndex: {
|
||||
value: 50,
|
||||
},
|
||||
},
|
||||
z7500: {
|
||||
number: {
|
||||
value: 30,
|
||||
},
|
||||
zIndex: {
|
||||
value: 75,
|
||||
},
|
||||
},
|
||||
z2500: {
|
||||
number: {
|
||||
value: 50,
|
||||
},
|
||||
zIndex: {
|
||||
value: 25,
|
||||
},
|
||||
},
|
||||
z1000: {
|
||||
number: {
|
||||
value: 40,
|
||||
},
|
||||
zIndex: {
|
||||
value: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
move: {
|
||||
angle: {
|
||||
offset: 0,
|
||||
value: 10,
|
||||
},
|
||||
attract: {
|
||||
distance: 200,
|
||||
enable: false,
|
||||
rotate: {
|
||||
x: 3000,
|
||||
y: 3000,
|
||||
},
|
||||
},
|
||||
center: {
|
||||
x: 50,
|
||||
y: 50,
|
||||
mode: "percent",
|
||||
radius: 0,
|
||||
},
|
||||
decay: 0,
|
||||
distance: {},
|
||||
direction: "right",
|
||||
drift: 0,
|
||||
enable: true,
|
||||
gravity: {
|
||||
acceleration: 9.81,
|
||||
enable: false,
|
||||
inverse: false,
|
||||
maxSpeed: 50,
|
||||
},
|
||||
path: {
|
||||
clamp: true,
|
||||
delay: {
|
||||
value: 0,
|
||||
},
|
||||
enable: false,
|
||||
options: {},
|
||||
},
|
||||
outModes: {
|
||||
default: "out",
|
||||
bottom: "out",
|
||||
left: "out",
|
||||
right: "out",
|
||||
top: "out",
|
||||
},
|
||||
random: false,
|
||||
size: false,
|
||||
speed: 5,
|
||||
spin: {
|
||||
acceleration: 0,
|
||||
enable: false,
|
||||
},
|
||||
straight: false,
|
||||
trail: {
|
||||
enable: false,
|
||||
length: 10,
|
||||
fill: {},
|
||||
},
|
||||
vibrate: false,
|
||||
warp: false,
|
||||
},
|
||||
number: {
|
||||
density: {
|
||||
enable: false,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
},
|
||||
limit: {
|
||||
mode: "delete",
|
||||
value: 0,
|
||||
},
|
||||
value: 150,
|
||||
},
|
||||
opacity: {
|
||||
value: 1,
|
||||
animation: {
|
||||
count: 0,
|
||||
enable: false,
|
||||
speed: 2,
|
||||
decay: 0,
|
||||
delay: 0,
|
||||
sync: false,
|
||||
mode: "auto",
|
||||
startValue: "random",
|
||||
destroy: "none",
|
||||
},
|
||||
},
|
||||
reduceDuplicates: false,
|
||||
shadow: {
|
||||
blur: 0,
|
||||
color: {
|
||||
value: "#000",
|
||||
},
|
||||
enable: false,
|
||||
offset: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
},
|
||||
shape: {
|
||||
close: true,
|
||||
fill: true,
|
||||
options: {},
|
||||
type: "circle",
|
||||
},
|
||||
size: {
|
||||
value: 3,
|
||||
animation: {
|
||||
count: 0,
|
||||
enable: false,
|
||||
speed: 5,
|
||||
decay: 0,
|
||||
delay: 0,
|
||||
sync: false,
|
||||
mode: "auto",
|
||||
startValue: "random",
|
||||
destroy: "none",
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 0,
|
||||
},
|
||||
zIndex: {
|
||||
value: 5,
|
||||
opacityRate: 0.5,
|
||||
sizeRate: 1,
|
||||
velocityRate: 1,
|
||||
},
|
||||
destroy: {
|
||||
bounds: {},
|
||||
mode: "none",
|
||||
split: {
|
||||
count: 1,
|
||||
factor: {
|
||||
value: 3,
|
||||
},
|
||||
rate: {
|
||||
value: {
|
||||
min: 4,
|
||||
max: 9,
|
||||
},
|
||||
},
|
||||
sizeOffset: true,
|
||||
particles: {},
|
||||
},
|
||||
},
|
||||
roll: {
|
||||
darken: {
|
||||
enable: false,
|
||||
value: 0,
|
||||
},
|
||||
enable: false,
|
||||
enlighten: {
|
||||
enable: false,
|
||||
value: 0,
|
||||
},
|
||||
mode: "vertical",
|
||||
speed: 25,
|
||||
},
|
||||
tilt: {
|
||||
value: 0,
|
||||
animation: {
|
||||
enable: false,
|
||||
speed: 0,
|
||||
decay: 0,
|
||||
sync: false,
|
||||
},
|
||||
direction: "clockwise",
|
||||
enable: false,
|
||||
},
|
||||
twinkle: {
|
||||
lines: {
|
||||
enable: false,
|
||||
frequency: 0.05,
|
||||
opacity: 1,
|
||||
},
|
||||
particles: {
|
||||
enable: false,
|
||||
frequency: 0.05,
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
wobble: {
|
||||
distance: 5,
|
||||
enable: false,
|
||||
speed: {
|
||||
angle: 50,
|
||||
move: 10,
|
||||
},
|
||||
},
|
||||
life: {
|
||||
count: 0,
|
||||
delay: {
|
||||
value: 0,
|
||||
sync: false,
|
||||
},
|
||||
duration: {
|
||||
value: 0,
|
||||
sync: false,
|
||||
},
|
||||
},
|
||||
rotate: {
|
||||
value: 0,
|
||||
animation: {
|
||||
enable: false,
|
||||
speed: 0,
|
||||
decay: 0,
|
||||
sync: false,
|
||||
},
|
||||
direction: "clockwise",
|
||||
path: false,
|
||||
},
|
||||
orbit: {
|
||||
animation: {
|
||||
count: 0,
|
||||
enable: false,
|
||||
speed: 1,
|
||||
decay: 0,
|
||||
delay: 0,
|
||||
sync: false,
|
||||
},
|
||||
enable: false,
|
||||
opacity: 1,
|
||||
rotation: {
|
||||
value: 45,
|
||||
},
|
||||
width: 1,
|
||||
},
|
||||
links: {
|
||||
blink: false,
|
||||
color: {
|
||||
value: "#fff",
|
||||
},
|
||||
consent: false,
|
||||
distance: 100,
|
||||
enable: false,
|
||||
frequency: 1,
|
||||
opacity: 1,
|
||||
shadow: {
|
||||
blur: 5,
|
||||
color: {
|
||||
value: "#000",
|
||||
},
|
||||
enable: false,
|
||||
},
|
||||
triangles: {
|
||||
enable: false,
|
||||
frequency: 1,
|
||||
},
|
||||
width: 1,
|
||||
warp: false,
|
||||
},
|
||||
repulse: {
|
||||
value: 0,
|
||||
enabled: false,
|
||||
distance: 1,
|
||||
duration: 1,
|
||||
factor: 1,
|
||||
speed: 1,
|
||||
},
|
||||
},
|
||||
pauseOnBlur: true,
|
||||
pauseOnOutsideViewport: true,
|
||||
responsive: [],
|
||||
smooth: false,
|
||||
style: {},
|
||||
themes: [],
|
||||
zLayers: 100,
|
||||
emitters: {
|
||||
autoPlay: true,
|
||||
fill: true,
|
||||
life: {
|
||||
wait: false,
|
||||
},
|
||||
rate: {
|
||||
quantity: 1,
|
||||
delay: 7,
|
||||
},
|
||||
shape: {
|
||||
options: {},
|
||||
replace: {
|
||||
color: false,
|
||||
opacity: false,
|
||||
},
|
||||
type: "square",
|
||||
},
|
||||
startCount: 0,
|
||||
size: {
|
||||
mode: "percent",
|
||||
height: 0,
|
||||
width: 0,
|
||||
},
|
||||
particles: {
|
||||
shape: {
|
||||
type: "images",
|
||||
options: {
|
||||
images: {
|
||||
src: "https://particles.js.org/images/cyan_amongus.png",
|
||||
width: 500,
|
||||
height: 634,
|
||||
},
|
||||
},
|
||||
},
|
||||
size: {
|
||||
value: 40,
|
||||
},
|
||||
move: {
|
||||
enable: true,
|
||||
direction: "right",
|
||||
speed: 8,
|
||||
outModes: {
|
||||
default: "out",
|
||||
right: "destroy",
|
||||
},
|
||||
straight: true,
|
||||
},
|
||||
zIndex: {
|
||||
value: 0,
|
||||
},
|
||||
rotate: {
|
||||
value: {
|
||||
min: 0,
|
||||
max: 360,
|
||||
},
|
||||
animation: {
|
||||
enable: true,
|
||||
speed: 10,
|
||||
sync: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
position: {
|
||||
x: 0,
|
||||
y: 55,
|
||||
},
|
||||
},
|
||||
motion: {
|
||||
disable: false,
|
||||
reduce: {
|
||||
factor: 0,
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
return <Particles id={props.id} options={option1} />;
|
||||
};
|
||||
|
||||
export default ParticlesComponent;
|
||||
10
src/index.js
Normal file
10
src/index.js
Normal file
@ -0,0 +1,10 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
398
src/utils/constant.js
Normal file
398
src/utils/constant.js
Normal file
@ -0,0 +1,398 @@
|
||||
export const projectsList = {
|
||||
react: [
|
||||
{
|
||||
id: 1,
|
||||
title: "Netflix-GEMINI",
|
||||
desc: "Movie Streaming Application",
|
||||
link: "https://seyoonpuvi.github.io/Netflix-Gemini/",
|
||||
githubLink: "https://github.com/seyoonPuvi/Netflix-Gemini/",
|
||||
imageUrl: "https://i.postimg.cc/9MTttwJN/netflix-1.png",
|
||||
projectOverview:
|
||||
"Netflix-GEMINI is a movie streaming application that allows users to explore and watch a wide variety of movies. The app features a responsive design, personalized movie recommendations powered by GEMINIAI, and movie trailers for an engaging user experience.",
|
||||
projectHighlights: [
|
||||
"User Authentication (Login, Sign Up, Sign Out)",
|
||||
"Now Playing Movies with Trailer Integration",
|
||||
"Personalized Movie Suggestions with GEMINIAI",
|
||||
"Responsive Design with TailwindCSS",
|
||||
"Real-time Updates with Redux Store",
|
||||
"Multi-language Support",
|
||||
"Movie Card Click to Show Trailer, Movie Info, and Similar Movie Suggestions",
|
||||
],
|
||||
projectTechStack: [
|
||||
"React",
|
||||
"Redux",
|
||||
"TailwindCSS",
|
||||
"GEMINIAI",
|
||||
"Firebase",
|
||||
"TMDB API",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Nxt-Trends",
|
||||
desc: "Ecommerce Shopping Website",
|
||||
link: "https://VKtrnd.ccbp.tech",
|
||||
githubLink: "https://github.com/seyoonPuvi/NXT-Trends-Ecom",
|
||||
imageUrl: "https://i.postimg.cc/bJ88zkjV/shopping.png",
|
||||
projectOverview:
|
||||
"Nxt-Trends is an ecommerce website that allows authenticated users to manage their cart, view products, and enjoy personalized deals based on their user status (Prime or Normal). The website is built using class components, showcasing my proficiency in managing state, props, and lifecycle methods in React class components.",
|
||||
projectHighlights: [
|
||||
"User Authentication (Login, Redirect to Login Page for Unauthenticated Users)",
|
||||
"Prime Deals for Prime Customers, Normal Deals for Regular Customers",
|
||||
"Search Bar for Product Search",
|
||||
"Category Filter for Easier Product Discovery",
|
||||
"Sort By Feature to Organize Product Listings",
|
||||
"404 Not Found Route for Invalid URLs",
|
||||
"Built with Class Components to Showcase React Class Component Skills",
|
||||
"Responsive Design with React Context for Cart Management",
|
||||
],
|
||||
projectTechStack: [
|
||||
"React (Class Components)",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"JWT (JSON Web Token)",
|
||||
"Cookies",
|
||||
"React Context API",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Nxt-Watch",
|
||||
desc: "Online Video Streaming Application",
|
||||
link: "https://VKWcH.ccbp.tech",
|
||||
githubLink: "https://github.com/seyoonPuvi/VK-NXT-Watch",
|
||||
imageUrl: "https://i.postimg.cc/85BpWwHV/video.png",
|
||||
projectOverview:
|
||||
"Nxt-Watch is an online video streaming application where users can log in to watch videos across multiple categories like Home, Trending, Gaming, and Saved Videos. It includes a detailed video player with options for liking, disliking, and saving videos. The app is built using React and showcases class components for managing authentication, video list rendering, and theme switching.",
|
||||
|
||||
projectHighlights: [
|
||||
"User Authentication with Login/Logout and Redirects for Unauthenticated Users",
|
||||
"Search Functionality for Video Discovery",
|
||||
"Video Details with React-Player Integration for Streaming",
|
||||
"Ability to Like, Dislike, and Save Videos to Personal Collection",
|
||||
"Responsive Design with Light and Dark Themes Toggle",
|
||||
"React Popup Library for Logout Confirmation",
|
||||
"Handled Failure View for Each Route and Functionality",
|
||||
"Loading Spinner Displayed While Fetching Data",
|
||||
],
|
||||
|
||||
projectTechStack: [
|
||||
"React (Class Components)",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"React-Player for Video Streaming",
|
||||
"JWT (JSON Web Token) for Authentication",
|
||||
"Cookies for Storing JWT Token",
|
||||
"React Context for Theme and Video Management",
|
||||
"React Popup Library for Logout Confirmation",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Jobby-App",
|
||||
desc: "Online Job Seeking Application",
|
||||
link: "https://Vkjb.ccbp.tech",
|
||||
githubLink: "https://github.com/seyoonPuvi/Jobby-App-react",
|
||||
imageUrl: "https://i.postimg.cc/RCLhnCsn/job.png",
|
||||
projectOverview:
|
||||
"Jobby-App is an online job seeking application where authenticated users can search, filter, and view job listings. The app supports features like user authentication, search functionality, and job details viewing. It handles loading states and displays appropriate failure views in case of errors during data fetching. The app is built using React and incorporates class components for managing authentication and API requests.",
|
||||
|
||||
projectHighlights: [
|
||||
"User Authentication with Login/Logout and Redirects for Unauthenticated Users",
|
||||
"Job Search Functionality with Filters for Employment Type and Salary Range",
|
||||
"View Detailed Job Information and Similar Jobs",
|
||||
"Failure Handling with Retry Option on API Failures",
|
||||
"Handled Failure View for Each Route and Functionality",
|
||||
"Loading Spinner Displayed While Fetching Data",
|
||||
"Responsive Design for Different Screen Sizes",
|
||||
"React Popup Library for Logout Confirmation",
|
||||
],
|
||||
|
||||
projectTechStack: [
|
||||
"React (Class Components)",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"JWT (JSON Web Token) for Authentication",
|
||||
"Cookies for Storing JWT Token",
|
||||
"React Popup Library for Logout Confirmation",
|
||||
"React Router for Navigation",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Insta-Share",
|
||||
desc: "Social Media Application",
|
||||
link: "https://Vkinstashare.ccbp.tech",
|
||||
githubLink: "https://github.com/seyoonPuvi/insta-share",
|
||||
imageUrl: "https://i.postimg.cc/q7k2yCkW/instagram.png",
|
||||
projectOverview:
|
||||
"Insta-Share is a social media application where users can log in to share and interact with posts. Users can like/unlike posts, search for posts, and navigate between their profile, home feed, and other routes. The app handles loading states and displays failure views when necessary. It also ensures that authenticated users are able to access the required routes, and unauthenticated users are redirected to the login page. The app uses React with class components for route management and data fetching.",
|
||||
|
||||
projectHighlights: [
|
||||
"User Authentication with Login/Logout and Redirects for Unauthenticated Users",
|
||||
"Home Route displaying User Stories and Posts with Data Fetching",
|
||||
"Like/Unlike Functionality for Posts with Dynamic Like Count Update",
|
||||
"Search Functionality to Search Posts by Caption",
|
||||
"Profile Routes with Post Lists and Post Grid View",
|
||||
"Responsive Design for Mobile, Tablet, and Desktop Views",
|
||||
"Error Handling with Retry Option for Failed API Requests",
|
||||
"Failure Views for Data Fetching Unsuccessfully",
|
||||
"React-Icons for Like, Comment, Share, and Post Interactions",
|
||||
"Not Found Route for Invalid Paths",
|
||||
],
|
||||
|
||||
projectTechStack: [
|
||||
"React (Class Components)",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"JWT (JSON Web Token) for Authentication",
|
||||
"Cookies for Storing JWT Token",
|
||||
"React Router for Navigation",
|
||||
"React-Icons for Post Interactions",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "RPS-Game",
|
||||
desc: "Rock Paper Scissors Game",
|
||||
link: "https://VKRPS.ccbp.tech",
|
||||
githubLink: "https://github.com/seyoonPuvi/RPS-GAME",
|
||||
imageUrl: "https://i.postimg.cc/sx5ShD6f/game-over.png",
|
||||
projectOverview:
|
||||
"RPS-Game is a simple Rock Paper Scissors game built with React. The game allows users to choose between rock, paper, or scissors and play against the computer. The result of the game is displayed using a React Popup, which shows whether the user won, lost, or tied. Additionally, the game includes a popup that explains the rules of the game. The app is responsive and easy to use, providing a fun and interactive experience for the users.",
|
||||
|
||||
projectHighlights: [
|
||||
"Rock Paper Scissors Game with User vs. Computer",
|
||||
"Result Displayed in a React Popup",
|
||||
"Popup for Game Rules Explanation",
|
||||
"Responsive Design for Different Devices",
|
||||
"Simple and Intuitive Interface",
|
||||
],
|
||||
|
||||
projectTechStack: [
|
||||
"React (Functional Components)",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"React Popup Library for Displaying Results and Game Rules",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Gradient-Generator",
|
||||
desc: "CSS Gradient Generator Application",
|
||||
link: "https://VKCSSGradient.ccbp.tech",
|
||||
githubLink: "https://github.com/seyoonPuvi/CSS-gradient-Generator",
|
||||
imageUrl: "https://i.postimg.cc/ZnYZrwj9/color-circle.png",
|
||||
projectOverview:
|
||||
"Gradient-Generator is a simple web application built using React that allows users to create custom CSS gradients. The app provides an intuitive interface where users can choose two colors, and it will generate a gradient for them in CSS code. The generated gradient can be copied directly and used in their projects. The app also features a preview of the gradient, giving users a real-time view of their custom creation.",
|
||||
|
||||
projectHighlights: [
|
||||
"CSS Gradient Generator with Multiple Color Options",
|
||||
"Real-Time Preview of the Generated Gradient",
|
||||
"CSS Code Copy Feature for Easy Use",
|
||||
"Simple and Intuitive User Interface",
|
||||
"Responsive Design for Different Devices",
|
||||
],
|
||||
|
||||
projectTechStack: ["React (Functional Components)", "CSS", "JavaScript"],
|
||||
},
|
||||
],
|
||||
webdesign: [
|
||||
{
|
||||
id: 1,
|
||||
title: "VK-Studio",
|
||||
desc: "PhotoGraphic Landing Portfolio",
|
||||
link: "https://seyoonpuvi.github.io/VKstudio-Responsive_Website/",
|
||||
githubLink: "https://github.com/seyoonPuvi/VKstudio-Responsive_Website",
|
||||
imageUrl: "https://i.postimg.cc/pLHp9hx8/camera.png",
|
||||
projectOverview:
|
||||
"Vk Studio is a beautifully crafted web design project designed as a landing page for a photography studio. The website showcases an elegant and visually appealing layout, tailored to highlight the studio's services and portfolio.",
|
||||
projectHighlights: [
|
||||
"Responsive Design",
|
||||
"Image Gallery",
|
||||
"Services Section",
|
||||
"Modern Aesthetics",
|
||||
],
|
||||
projectTechStack: ["HTML5", "CSS3", "JavaScript"],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "VK-Fit",
|
||||
desc: "Fitness Center Landing Portfolio",
|
||||
link: "https://seyoonpuvi.github.io/VK-Fitness/",
|
||||
githubLink: "https://github.com/seyoonPuvi/VK-Fitness",
|
||||
imageUrl: "https://i.postimg.cc/cCtNhm7H/weightlifting.png",
|
||||
projectOverview:
|
||||
"VK-Fit is a web design project created as a landing page for a fitness center. The website is designed using an adaptive layout, ensuring optimal user experience across various devices with fixed screen dimensions. It features visually appealing sections with engaging hover effects to enhance interactivity. The styling for the page was done using SASS, allowing for a more modular and maintainable CSS structure.",
|
||||
projectHighlights: [
|
||||
"Adaptive Web Design Layout",
|
||||
"Cool Hover Effects",
|
||||
"Dedicated Sections for Services and Programs",
|
||||
"Engaging Visual Appeal",
|
||||
"SASS for Styling",
|
||||
],
|
||||
projectTechStack: ["HTML5", "SASS", "JavaScript"],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Landing Pro",
|
||||
desc: "Landing Page Design Template",
|
||||
link: "https://seyoonpuvi.github.io/landingpage-template/",
|
||||
githubLink: "https://github.com/seyoonPuvi/landingpage-template",
|
||||
imageUrl: "https://i.postimg.cc/h47gqD54/landing-page.png",
|
||||
projectOverview:
|
||||
"Landing Pro is a professional design template crafted for building elegant and modern landing pages. This template includes multiple well-structured sections, cool hover effects, and a dark theme toggle for an enhanced user experience. Additionally, the parallax scrolling effect adds a dynamic and engaging visual appeal.",
|
||||
projectHighlights: [
|
||||
"Well-structured Sections",
|
||||
"Cool Hover Effects",
|
||||
"Dark Theme Toggle",
|
||||
"Parallax Scrolling Effect",
|
||||
"Professional Design Aesthetics",
|
||||
],
|
||||
projectTechStack: [
|
||||
"HTML5",
|
||||
"CSS-in-JS (Styled Components)",
|
||||
"JavaScript",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Web-VR",
|
||||
desc: "VR Product Promotion Website",
|
||||
link: "https://vkvrpage.ccbp.tech",
|
||||
githubLink: "https://vkvrpage.ccbp.tech",
|
||||
imageUrl: "https://i.postimg.cc/d0R3mqsX/virtual-glasses.png",
|
||||
projectOverview:
|
||||
"Web-VR is a website dedicated to showcasing VR products and their features. Designed with a clean and modern layout, the website provides comprehensive information about VR technology and products. The entire site is built using Bootstrap, ensuring a responsive and consistent design.",
|
||||
projectHighlights: [
|
||||
"Fully Responsive Design",
|
||||
"Bootstrap-based Development",
|
||||
"Modern and Clean Layout",
|
||||
"Focused on VR Product Details",
|
||||
],
|
||||
projectTechStack: ["HTML5", "CSS3", "Bootstrap"],
|
||||
},
|
||||
],
|
||||
javascript: [
|
||||
{
|
||||
id: 1,
|
||||
title: "FLAMES-APP",
|
||||
desc: "90's Kids Nostalgic Game",
|
||||
link: "https://seyoonpuvi.github.io/FLAMES-JS/",
|
||||
githubLink: "https://github.com/seyoonPuvi/FLAMES-JS",
|
||||
imageUrl: "https://i.postimg.cc/150z17S1/love.png",
|
||||
projectOverview:
|
||||
"FLAMES Game is a nostalgic game from the 90's, designed to predict the relationship between a boy and a girl in a fun and engaging way. This project brings the classic game to life using JavaScript, showcasing both its entertaining nature and the logical string manipulation involved.",
|
||||
|
||||
projectHighlights: [
|
||||
"User-Friendly Interface for Easy Name Input",
|
||||
"Real-Time Calculation of Relationship Prediction",
|
||||
"Clear Instructions on How to Play the Game",
|
||||
"Fun and Interactive Experience Reminiscent of Childhood Memories",
|
||||
],
|
||||
|
||||
projectTechStack: [
|
||||
"HTML for Game Structure",
|
||||
"CSS for Styling the Interface",
|
||||
"JavaScript for FLAMES Calculation Logic",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "VK-ScreenCapture",
|
||||
desc: "Screen Cast and Screen Capture Website",
|
||||
link: "https://seyoonpuvi.github.io/Capture-Cast-JS/",
|
||||
githubLink: "https://github.com/seyoonPuvi/Capture-Cast-JS",
|
||||
imageUrl:
|
||||
"https://i.postimg.cc/g02jDVfF/ooooooooooooooooooooooooooooooooooo.png",
|
||||
projectOverview:
|
||||
"VK-ScreenCapture is a sophisticated Screen Capture Web Application that includes Picture-in-Picture (PiP) mode. It allows users to capture their entire screen, specific windows, or browser tabs in real time. With the PiP mode, users can monitor their screen capture in a floating window while multitasking. The app is built using HTML, CSS, and JavaScript, powered by the WebRTC API for real-time communication, and designed for cross-browser compatibility.",
|
||||
|
||||
projectHighlights: [
|
||||
"Real-Time Screen Capture of Entire Screen, Windows, or Tabs",
|
||||
"Picture-in-Picture (PiP) Mode for Multitasking",
|
||||
"Cross-Browser Compatibility for Major Desktop Browsers",
|
||||
"Developed with HTML, CSS, JavaScript, and WebRTC API",
|
||||
],
|
||||
|
||||
projectTechStack: [
|
||||
"HTML for Structure",
|
||||
"CSS for Styling",
|
||||
"JavaScript for Functionality",
|
||||
"WebRTC API for Real-Time Communication",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Infinite-Scroller",
|
||||
desc: "Image Gallery",
|
||||
link: "https://seyoonpuvi.github.io/InfiniteScroller-JS/",
|
||||
githubLink: "https://github.com/seyoonPuvi/InfiniteScroller-JS",
|
||||
|
||||
imageUrl: "https://i.postimg.cc/Pxcj1Yk4/picture.png",
|
||||
projectOverview:
|
||||
"Infinite-Scroller is an innovative image surfing application that leverages the Unsplash API to provide an endless browsing experience. The key feature is infinite scroll functionality, allowing users to continuously load new images as they scroll down the page, without the need for pagination or manual navigation. The application also provides high-quality, royalty-free images from Unsplash and includes a responsive design optimized for various devices.",
|
||||
|
||||
projectHighlights: [
|
||||
"Infinite Scrolling for Seamless Image Browsing",
|
||||
"Responsive Design for Optimal Viewing on Any Device",
|
||||
"Access to a Vast Library of High-Quality Images from Unsplash",
|
||||
"Loading Indicators to Improve User Experience During Content Fetching",
|
||||
"Performance Optimization for Smooth and Fast Image Rendering",
|
||||
],
|
||||
|
||||
projectTechStack: [
|
||||
"HTML for Structure",
|
||||
"CSS for Styling and Responsive Design",
|
||||
"JavaScript for Infinite Scrolling and API Integration",
|
||||
"Unsplash API for Accessing High-Quality Images",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "VK-Weather-App",
|
||||
desc: "Weather application with interactive background",
|
||||
link: "https://seyoonpuvi.github.io/WeatherApp-JS/",
|
||||
githubLink: "https://github.com/seyoonPuvi/WeatherApp-JS",
|
||||
|
||||
imageUrl: "https://i.postimg.cc/xTm0yx8b/cloudy.png",
|
||||
projectOverview:
|
||||
"VK-Weather-App is a weather application that not only provides weather details but also features a dynamic video background, enhancing the user experience with a visually interactive atmosphere based on the current weather conditions. The app offers real-time weather information, including temperature, humidity, and weather status, along with an engaging background that changes to match the weather, such as sunny, rainy, or cloudy scenes.",
|
||||
|
||||
projectHighlights: [
|
||||
"Real-Time Weather Information for Current Location or Search",
|
||||
"Dynamic Video Background Based on Weather Conditions",
|
||||
"Interactive and Visually Engaging User Interface",
|
||||
"User-Friendly Design for Easy Access to Weather Data",
|
||||
"Cross-Browser Compatibility",
|
||||
],
|
||||
|
||||
projectTechStack: [
|
||||
"HTML for Structure",
|
||||
"CSS for Styling and Dynamic Backgrounds",
|
||||
"JavaScript for Weather Data Fetching and Background Control",
|
||||
"OpenWeather API for Real-Time Weather Data",
|
||||
],
|
||||
},
|
||||
],
|
||||
fullstack: [],
|
||||
};
|
||||
|
||||
export const TabList = [
|
||||
{
|
||||
id: "webdesign",
|
||||
displayName: "WEBDESIGN",
|
||||
},
|
||||
{
|
||||
id: "react",
|
||||
displayName: "REACT",
|
||||
},
|
||||
{
|
||||
id: "javascript",
|
||||
displayName: "JAVASCRIPT",
|
||||
},
|
||||
{
|
||||
id: "fullstack",
|
||||
displayName: "FULLSTACK",
|
||||
},
|
||||
];
|
||||
Loading…
Reference in New Issue
Block a user