├── .babelrc ├── .gitignore ├── .netlify └── state.json ├── LICENSE ├── README.md ├── package.json ├── public ├── favicon.ico ├── files │ └── resume.pdf ├── images │ ├── abs.jpg │ ├── banner.png │ ├── capps.jpg │ ├── covid.jpg │ ├── eb.jpg │ ├── portfolio.jpg │ └── snapit.jpg └── logo.svg ├── src ├── components │ ├── Acomplishments │ │ ├── Acomplishments.js │ │ └── AcomplishmentsStyles.js │ ├── BackgrooundAnimation │ │ └── BackgroundAnimation.js │ ├── Footer │ │ ├── Footer.js │ │ └── FooterStyles.js │ ├── Header │ │ ├── Header.js │ │ └── HeaderStyles.js │ ├── Hero │ │ ├── Hero.js │ │ └── HeroStyles.js │ ├── NavDropDown │ │ ├── NavDropDown.js │ │ └── index.js │ ├── Projects │ │ ├── Projects.js │ │ └── ProjectsStyles.js │ ├── Technologies │ │ ├── Skills.js │ │ ├── Technologies.js │ │ └── TechnologiesStyles.js │ └── TimeLine │ │ ├── TimeLine.js │ │ └── TimeLineStyles.js ├── constants │ └── constants.js ├── layout │ ├── Layout.js │ └── LayoutStyles.js ├── pages │ ├── _app.js │ ├── _document.js │ ├── api │ │ └── hello.js │ └── index.js ├── styles │ ├── GlobalComponents │ │ ├── Button.js │ │ └── index.js │ ├── globals.js │ └── theme.js └── themes │ └── default.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["next/babel"], 3 | "plugins": [["styled-components", { "ssr": true }]] 4 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | node_modules 36 | -------------------------------------------------------------------------------- /.netlify/state.json: -------------------------------------------------------------------------------- 1 | { 2 | "siteId": "bf44a414-8f2c-433f-aa3e-c3629b913d4f" 3 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Vipul Jha & Adrian Hajdin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | [![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/lordarcadius/portfolio/blob/master/LICENSE) 3 | 4 | 5 | # Personal Portfolio 6 | 7 | A portfolio built in React and NextJS. Simple, clean and fast. 8 | 9 | **Note: The logo and banner used in the project are my intellectual property. Please refrain from using it anywhere.** 10 | 11 | 12 | 13 | ![App Screenshot](https://i.ibb.co/jRRNMkH/Screenshot-from-2021-10-27-18-45-14.png) 14 | 15 | 16 | ## Demo 17 | 18 | [Live Preview](https://www.vipuljha.com) 19 | 20 | ## Run Project 21 | 22 | Run this project with Yarn 23 | 24 | ```bash 25 | yarn && yarn run dev 26 | ``` 27 | 28 | ## Deployment 29 | 30 | To deploy this project run 31 | 32 | ```bash 33 | yarn build 34 | ``` 35 | 36 | 37 | ## Contributing 38 | 39 | Contributions are always welcome! 40 | 41 | Fork repo, make changes, test, create a pull request. 42 | 43 | Please make sure to maintain `authorship`. 44 | 45 | 46 | ## Credits 47 | 48 | - [@adrianhajdin](https://github.com/adrianhajdin) (The original author) 49 | - [@lordarcadius](https://github.com/lordarcadius) (I just fixed and modified few things) 50 | - [@dhruvsaxena1998](https://github.com/dhruvsaxena1998) (For help and PR) 51 | 52 | 53 | ## License 54 | 55 | [MIT](https://github.com/lordarcadius/portfolio/blob/master/LICENSE) 56 | 57 | 58 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio_nextjs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build && next export", 8 | "start": "next start" 9 | }, 10 | "dependencies": { 11 | "next": "13.2.4", 12 | "ngrok": "^4.3.3", 13 | "react": "18.2.0", 14 | "react-dom": "18.2.0", 15 | "react-icons": "^4.8.0", 16 | "styled-components": "^5.3.9", 17 | "styled-normalize": "^8.0.7" 18 | }, 19 | "devDependencies": { 20 | "next-optimized-images": "^2.6.2" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lordarcadius/portfolio/84133b9bfc5547c299665394455461dedfacc89a/public/favicon.ico -------------------------------------------------------------------------------- /public/files/resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lordarcadius/portfolio/84133b9bfc5547c299665394455461dedfacc89a/public/files/resume.pdf -------------------------------------------------------------------------------- /public/images/abs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lordarcadius/portfolio/84133b9bfc5547c299665394455461dedfacc89a/public/images/abs.jpg -------------------------------------------------------------------------------- /public/images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lordarcadius/portfolio/84133b9bfc5547c299665394455461dedfacc89a/public/images/banner.png -------------------------------------------------------------------------------- /public/images/capps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lordarcadius/portfolio/84133b9bfc5547c299665394455461dedfacc89a/public/images/capps.jpg -------------------------------------------------------------------------------- /public/images/covid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lordarcadius/portfolio/84133b9bfc5547c299665394455461dedfacc89a/public/images/covid.jpg -------------------------------------------------------------------------------- /public/images/eb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lordarcadius/portfolio/84133b9bfc5547c299665394455461dedfacc89a/public/images/eb.jpg -------------------------------------------------------------------------------- /public/images/portfolio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lordarcadius/portfolio/84133b9bfc5547c299665394455461dedfacc89a/public/images/portfolio.jpg -------------------------------------------------------------------------------- /public/images/snapit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lordarcadius/portfolio/84133b9bfc5547c299665394455461dedfacc89a/public/images/snapit.jpg -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 488 | 489 | -------------------------------------------------------------------------------- /src/components/Acomplishments/Acomplishments.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Section, SectionDivider, SectionTitle } from '../../styles/GlobalComponents'; 4 | import { Box, Boxes, BoxNum, BoxText } from './AcomplishmentsStyles'; 5 | 6 | const data = [ 7 | { number: 20, text: 'Open Source Projects' }, 8 | { number: 50, text: 'Shell Scripts', }, 9 | { number: 250000, text: 'Downloads', }, 10 | { number: 200, text: 'Github Stars', } 11 | ]; 12 | 13 | const Acomplishments = () => ( 14 |
15 | Personal Achievements 16 | 17 | {data.map((card, index) => ( 18 | 19 | {`${card.number.toLocaleString('en-IN')}+`} 20 | {card.text} 21 | 22 | ))} 23 | 24 | 25 |
26 | ); 27 | 28 | export default Acomplishments; 29 | -------------------------------------------------------------------------------- /src/components/Acomplishments/AcomplishmentsStyles.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components" 2 | 3 | export const Boxes = styled.div` 4 | width: 100%; 5 | display: grid; 6 | grid-template-columns: repeat(4, 1fr); 7 | gap: 24px; 8 | margin: 24px 0 40px; 9 | 10 | @media ${props => props.theme.breakpoints.md}{ 11 | gap: 16px; 12 | margin: 20px 0 32px; 13 | grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 14 | } 15 | 16 | @media ${props => props.theme.breakpoints.sm}{ 17 | display: grid; 18 | grid-template-columns: repeat(2, 1fr); 19 | gap: 10px; 20 | max-width: 500px; 21 | margin: 24px auto; 22 | } 23 | ` 24 | 25 | export const Box = styled.div` 26 | background: #212D45; 27 | border-radius: 12px; 28 | height: 144px; 29 | padding: 24px; 30 | @media ${props => props.theme.breakpoints.lg} { 31 | height: 210px; 32 | 33 | } 34 | 35 | @media ${props => props.theme.breakpoints.md} { 36 | height: 135px; 37 | padding: 16px; 38 | } 39 | 40 | @media ${props => props.theme.breakpoints.sm} { 41 | height: 110px; 42 | padding: 12px; 43 | 44 | &:nth-child(2n){ 45 | grid-row:2; 46 | } 47 | } 48 | ` 49 | export const BoxNum = styled.h5` 50 | font-style: normal; 51 | font-weight: 600; 52 | font-size: 36px; 53 | line-height: 40px; 54 | letter-spacing: 0.01em; 55 | color: #FFFFFF; 56 | margin-bottom: 8px; 57 | 58 | @media ${props => props.theme.breakpoints.md} { 59 | font-size: 28px; 60 | line-height: 32px; 61 | } 62 | @media ${props => props.theme.breakpoints.sm} { 63 | font-size: 24px; 64 | line-height: 26px; 65 | } 66 | ` 67 | 68 | export const BoxText = styled.p` 69 | font-style: normal; 70 | font-weight: normal; 71 | font-size: 18px; 72 | line-height: 24px; 73 | letter-spacing: 0.02em; 74 | color: rgba(255, 255, 255, 0.75); 75 | 76 | @media ${props => props.theme.breakpoints.md}{ 77 | font-size: 16px; 78 | line-height: 20px; 79 | }; 80 | 81 | @media ${props => props.theme.breakpoints.sm} { 82 | font-size: 14px; 83 | line-height: 14px; 84 | } 85 | ` 86 | 87 | export const Join = styled.div` 88 | display: flex; 89 | justify-content: center; 90 | align-items: center; 91 | padding-bottom: 80px; 92 | 93 | @media ${props => props.theme.breakpoints.md}{ 94 | display: flex; 95 | justify-content: center; 96 | padding-bottom: 64px; 97 | } 98 | 99 | @media ${props => props.theme.breakpoints.sm}{ 100 | display: flex; 101 | flex-direction: column; 102 | align-items: center; 103 | padding-bottom: 32px; 104 | } 105 | ` 106 | 107 | export const JoinText = styled.h5` 108 | display: flex; 109 | font-size: 24px; 110 | line-height: 40px; 111 | letter-spacing: 0.02em; 112 | color: rgba(255, 255, 255, 0.5); 113 | 114 | @media ${props => props.theme.breakpoints.md}{ 115 | line-height: 32px; 116 | font-size: 20px; 117 | }; 118 | 119 | @media ${props => props.theme.breakpoints.sm}{ 120 | font-size: 16px; 121 | line-height: 24px; 122 | margin: 0 0 16px; 123 | } 124 | ` 125 | 126 | export const IconContainer = styled.div` 127 | display: flex; 128 | 129 | @media ${props => props.theme.breakpoints.sm}{ 130 | width: 160px; 131 | justify-content: space-between; 132 | } 133 | ` 134 | -------------------------------------------------------------------------------- /src/components/BackgrooundAnimation/BackgroundAnimation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const BackgroundAnimation = () => ( 4 |
5 | 11 | 12 | 19 | 24 | 29 | 30 | 38 | 39 | 40 | 41 | 42 | 47 | 48 | 49 | 50 | 51 | 59 | 65 | 66 | 67 | 68 | 73 | 79 | 80 | 81 | 82 | 90 | 91 | 92 | 93 | 94 | 99 | 100 | 101 | 102 | 103 | 111 | 117 | 118 | 119 | 120 | 125 | 131 | 132 | 133 | 134 | 142 | 148 | 149 | 150 | 151 | 156 | 162 | 163 | 164 | 165 | 173 | 179 | 180 | 181 | 182 | 187 | 193 | 194 | 195 | 196 | 204 | 210 | 211 | 212 | 213 | 218 | 224 | 225 | 226 | 227 | 228 | 236 | 237 | 238 | 239 | 247 | 248 | 249 | 250 | 258 | 259 | 260 | 261 | 269 | 270 | 271 | 272 | 280 | 281 | 282 | 283 | 291 | 292 | 293 | 294 | 302 | 303 | 304 | 305 | 313 | 314 | 315 | 316 | 324 | 325 | 326 | 327 | 335 | 336 | 337 | 338 | 346 | 347 | 348 | 349 | 357 | 358 | 359 | 360 | 361 | 362 |
363 | ); 364 | 365 | export default BackgroundAnimation; -------------------------------------------------------------------------------- /src/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AiFillGithub, AiFillInstagram, AiFillLinkedin, AiFillTwitterCircle } from 'react-icons/ai'; 3 | import { Link } from '../../styles/GlobalComponents'; 4 | import { SocialIcons } from '../Header/HeaderStyles'; 5 | import { CompanyContainer, FooterWrapper, LinkColumn, LinkItem, LinkList, LinkTitle, Slogan, SocialContainer, SocialIconsContainer } from './FooterStyles'; 6 | 7 | const Footer = () => { 8 | const today = new Date(); 9 | const year = today.getFullYear(); 10 | return ( 11 | 12 | 13 | 14 | Chat 15 | Telegram 16 | 17 | 18 | Email 19 | 20 | hey@vipuljha.com 21 | 22 | 23 | 24 | 25 | 26 | Copyright © {year} Vipul Jha. All rights reserved. 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | ); 46 | }; 47 | 48 | export default Footer; 49 | -------------------------------------------------------------------------------- /src/components/Footer/FooterStyles.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components" 2 | 3 | export const FooterWrapper = styled.section` 4 | width: calc(100vw - 96px); 5 | max-width: 1040px; 6 | padding: 2rem 48px 40px; 7 | margin: 1rem auto; 8 | box-sizing: content-box; 9 | 10 | 11 | @media ${props => props.theme.breakpoints.sm} { 12 | padding: 0 16px 48px; 13 | width: calc(100vw - 32px); 14 | } 15 | ` 16 | 17 | export const LinkItem = styled.a` 18 | font-size: 18px; 19 | line-height: 30px; 20 | color: rgba(255, 255, 255, 0.75); 21 | margin-bottom: 16px; 22 | transition: .3s ease; 23 | position: relative; 24 | left: 0; 25 | 26 | &:hover { 27 | color: #fff; 28 | left: 6px; 29 | } 30 | 31 | @media ${props => props.theme.breakpoints.md} { 32 | font-size: 17px; 33 | line-height: 28px; 34 | display: flex; 35 | } 36 | 37 | @media ${props => props.theme.breakpoints.sm} { 38 | font-size: 15px; 39 | line-height: 14px; 40 | margin-bottom: 8px; 41 | display: flex; 42 | align-items: center; 43 | } 44 | ` 45 | 46 | export const SocialIconsContainer = styled.div` 47 | display: flex; 48 | justify-content: space-between; 49 | 50 | @media ${props => props.theme.breakpoints.md}{ 51 | display: flex; 52 | justify-content: space-between; 53 | } 54 | 55 | @media ${props => props.theme.breakpoints.sm}{ 56 | display: flex; 57 | width: 100%; 58 | flex-direction: column; 59 | } 60 | ` 61 | 62 | export const CompanyContainer = styled.div` 63 | display: flex; 64 | align-items:baseline; 65 | flex-wrap: wrap; 66 | margin-right: auto; 67 | 68 | 69 | @media ${props => props.theme.breakpoints.md}{ 70 | flex-direction: column; 71 | align-items: baseline; 72 | } 73 | 74 | @media ${props => props.theme.breakpoints.sm}{ 75 | display: flex; 76 | flex-direction: column; 77 | margin: 0 0 32px; 78 | align-items: center; 79 | } 80 | ` 81 | 82 | 83 | export const Slogan = styled.p` 84 | color: rgba(255, 255, 255, 0.5); 85 | min-width: 280px; 86 | letter-spacing: 0.02em; 87 | font-size: 18px; 88 | line-height: 30px; 89 | padding-top: 1rem; 90 | 91 | @media ${props => props.theme.breakpoints.md}{ 92 | font-size: 17px; 93 | line-height: 28px; 94 | } 95 | 96 | @media ${props => props.theme.breakpoints.sm}{ 97 | line-height: 22px; 98 | font-size: 15px; 99 | min-width: 100px; 100 | } 101 | ` 102 | 103 | export const SocialContainer = styled.div` 104 | display: flex; 105 | align-items: center; 106 | 107 | @media ${props => props.theme.breakpoints.md}{ 108 | justify-content: center; 109 | padding-right: 16px; 110 | flex-wrap: wrap; 111 | } 112 | ` 113 | 114 | 115 | export const LinkList = styled.ul` 116 | border-top: 1px solid rgba(255, 255, 255, 0.1); 117 | display: grid; 118 | grid-template-columns: repeat(3, minmax(85px, 220px)); 119 | gap: 40px; 120 | padding: 40px 0 28px; 121 | 122 | @media ${props => props.theme.breakpoints.lg} { 123 | padding: 32px 0 16px; 124 | } 125 | 126 | @media ${props => props.theme.breakpoints.md} { 127 | width: 100%; 128 | padding: 32px 0 16px; 129 | gap: 16px; 130 | } 131 | @media ${props => props.theme.breakpoints.sm} { 132 | width: 100%; 133 | padding: 32px 4px 16px; 134 | gap: 5px; 135 | } 136 | ` 137 | 138 | export const LinkColumn = styled.div` 139 | display: flex; 140 | flex-direction: column; 141 | max-width: 220px; 142 | width: 100%; 143 | ` 144 | export const LinkTitle = styled.h4` 145 | font-style: normal; 146 | font-weight: 600; 147 | font-size: 12px; 148 | line-height: 24px; 149 | text-transform: uppercase; 150 | color: rgba(255, 255, 255, 0.4); 151 | margin-bottom: 16px; 152 | 153 | @media ${props => props.theme.breakpoints.sm} { 154 | font-size: 10px; 155 | line-height: 12px; 156 | margin-bottom: 8px; 157 | } 158 | ` 159 | -------------------------------------------------------------------------------- /src/components/Header/Header.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | import React from 'react'; 3 | import { AiFillGithub, AiFillInstagram, AiFillLinkedin, AiFillTwitterCircle } from 'react-icons/ai'; 4 | import { Container, Div1, Div2, Div3, NavLink, SocialIcons } from './HeaderStyles'; 5 | 6 | const Header = () => ( 7 | 8 | 9 | 12 | 13 | Vipul Jha 14 | 15 | 16 | 17 | 18 |
  • 19 | 20 | Projects 21 | 22 |
    • 23 |
  • 24 | 25 | Skills 26 | 27 |
    • 28 |
  • 29 | 30 | About 31 | 32 |
    • 33 |
  • 34 | 35 | Blog 36 | 37 |
    • 38 |     39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |     54 | ); 55 | 56 | export default Header; 57 | -------------------------------------------------------------------------------- /src/components/Header/HeaderStyles.js: -------------------------------------------------------------------------------- 1 | import { IoIosArrowDropdown } from 'react-icons/io'; 2 | import styled from 'styled-components'; 3 | 4 | export const Container = styled.div` 5 | display: grid; 6 | grid-template-columns: repeat(5, 1fr); 7 | grid-template-rows: 1fr; 8 | grid-column-gap: 2rem; 9 | padding: 1rem; 10 | padding-top: 2rem; 11 | 12 | @media ${(props) => props.theme.breakpoints.sm} { 13 | display: grid; 14 | grid-template-columns: repeat(5, 1fr); 15 | grid-template-rows: repeat(2, 60px); 16 | grid-column-gap: 0.5rem; 17 | grid-row-gap: 0.5rem; 18 | } 19 | `; 20 | export const Div1 = styled.div` 21 | grid-area: 1 / 1 / 2 / 2; 22 | display: flex; 23 | flex-direction: row; 24 | align-content: center; 25 | @media ${(props) => props.theme.breakpoints.sm} { 26 | grid-area: 1 / 1 / 2 / 3; 27 | } 28 | `; 29 | export const Div2 = styled.div` 30 | grid-area: 1 / 2 / 2 / 4; 31 | display: flex; 32 | margin-top: 0.75em; 33 | justify-content: space-between; 34 | @media ${(props) => props.theme.breakpoints.sm} { 35 | grid-area: 2 / 2 / 3 / 5; 36 | } 37 | `; 38 | export const Div3 = styled.div` 39 | grid-area: 1 / 5 / 2 / 6; 40 | display: flex; 41 | justify-content: space-around; 42 | align-items: center; 43 | @media ${(props) => props.theme.breakpoints.sm} { 44 | align-items: center; 45 | grid-area: 1 / 4 / 2 / 6; 46 | } 47 | `; 48 | 49 | // Navigation Links 50 | export const NavLink = styled.a` 51 | font-size: 2rem; 52 | line-height: 32px; 53 | color: rgba(255, 255, 255, 0.75); 54 | transition: 0.4s ease; 55 | &:hover { 56 | color: #fff; 57 | opacity: 1; 58 | cursor: pointer; 59 | } 60 | @media ${(props) => props.theme.breakpoints.sm} { 61 | padding: 0.5rem; 62 | font-size: 1.7rem; 63 | } 64 | `; 65 | 66 | /// DropDown Contact 67 | export const ContactDropDown = styled.button` 68 | border: none; 69 | display: flex; 70 | position: relative; 71 | background: none; 72 | font-size: 1.7rem; 73 | 74 | line-height: 32px; 75 | color: rgba(255, 255, 255, 0.75); 76 | cursor: pointer; 77 | transition: 0.3s ease; 78 | 79 | &:focus { 80 | outline: none; 81 | } 82 | &:hover { 83 | color: #fff; 84 | } 85 | 86 | @media ${(props) => props.theme.breakpoints.sm} { 87 | padding: 0.4rem 0; 88 | } 89 | @media ${(props) => props.theme.breakpoints.md} { 90 | padding: 0; 91 | } 92 | `; 93 | 94 | export const NavProductsIcon = styled(IoIosArrowDropdown)` 95 | margin-left: 8px; 96 | display: flex; 97 | align-self: center; 98 | transition: 0.3s ease; 99 | opacity: ${({ isOpen }) => (isOpen ? '1' : '.75')}; 100 | transform: ${({ isOpen }) => (isOpen ? 'scaleY(-1)' : 'scaleY(1)')}; 101 | 102 | &:hover { 103 | opacity: 1; 104 | } 105 | 106 | @media ${(props) => props.theme.breakpoints.sm} { 107 | margin: 2px 0 0 2px; 108 | width: 15px; 109 | } 110 | `; 111 | 112 | 113 | // Social Icons 114 | 115 | export const SocialIcons = styled.a` 116 | transition: 0.3s ease; 117 | color: white; 118 | border-radius: 50px; 119 | padding: 8px; 120 | &:hover { 121 | background-color: #212d45; 122 | transform: scale(1.2); 123 | cursor: pointer; 124 | 125 | } 126 | ` -------------------------------------------------------------------------------- /src/components/Hero/Hero.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Section, SectionText, SectionTitle, Link } from '../../styles/GlobalComponents'; 4 | import Button from '../../styles/GlobalComponents/Button'; 5 | import { LeftSection } from './HeroStyles'; 6 | 7 | const Hero = (props) => ( 8 | <> 9 |
    10 | 11 | 12 | Hey there, 13 | 14 | 15 | I'm Vipul Jha, also known as lordarcadius. I'm an Android developer from Delhi, India with experience in ROMs, Kernels, & Scripts. Currently, I am working in Primebook as an Android Engineer. I'm passionate about contributing to open-source projects and helping the developer community on Facebook and Telegram. 16 | 17 | 21 | 22 |
    23 | 24 | ); 25 | 26 | export default Hero; 27 | -------------------------------------------------------------------------------- /src/components/Hero/HeroStyles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const LeftSection = styled.div` 4 | width: 100%; 5 | @media ${(props) => props.theme.breakpoints.sm} { 6 | width: 80%; 7 | display: flex; 8 | flex-direction: column; 9 | 10 | margin: 0 auto; 11 | } 12 | @media ${(props) => props.theme.breakpoints.md} { 13 | width: 100%; 14 | display: flex; 15 | flex-direction: column; 16 | 17 | margin: 0 auto; 18 | } 19 | `; 20 | -------------------------------------------------------------------------------- /src/components/NavDropDown/NavDropDown.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const DropDownContainer = styled.div` 4 | position: absolute; 5 | display: flex; 6 | flex-direction: column; 7 | right: -25%; 8 | top: 40px; 9 | width: 280px; 10 | background-color: #fff; 11 | border-radius: 8px; 12 | z-index: 100; 13 | padding: 4px 0; 14 | cursor: default; 15 | overflow: hidden; 16 | transition: 0.3s ease; 17 | visibility: ${({ active }) => active ? 'visible' : 'hidden'}; 18 | opacity: ${({ active }) => active ? '1' : '0'}; 19 | transform-origin: top; 20 | transform: ${({ active }) => active ? 'scaleY(1)' : 'scaleY(.3)'}; 21 | 22 | @media ${(props) => props.theme.breakpoints.md} { 23 | top: 32px; 24 | } 25 | @media ${(props) => props.theme.breakpoints.sm} { 26 | top: 24px; 27 | } 28 | ` 29 | export const DropDownItem = styled.a` 30 | width: 100%; 31 | display: flex; 32 | align-items: flex-start; 33 | cursor: pointer; 34 | transition: .3s ease; 35 | padding: 12px 16px; 36 | 37 | &:hover { 38 | transform: scale(1.05); 39 | background-color: #eee; 40 | box-shadow: 0 3px 6px 3px rgba(0,0,0,.3); 41 | } 42 | 43 | &:nth-of-type(2n):hover { 44 | box-shadow: 0 0 8px 4px rgba(0,0,0,.3); 45 | } 46 | 47 | &:nth-of-type(3n):hover { 48 | box-shadow: 0 -3px 6px 3px rgba(0,0,0,.3); 49 | } 50 | ` 51 | 52 | export const DropDownIcon = styled.div` 53 | width: 32px; 54 | height: 32px; 55 | margin-right: 16px; 56 | ` 57 | 58 | export const DropDownTextContainer = styled.div` 59 | display: flex; 60 | flex-direction: column; 61 | ` 62 | 63 | export const DropDownItemTitle = styled.h2` 64 | color: #0f1624; 65 | font-size: 18px; 66 | line-height: 26px; 67 | text-align: start; 68 | ` 69 | 70 | export const DropDownItemDesc = styled.p` 71 | color: #0f1624; 72 | opacity: 0.5; 73 | font-size: 14px; 74 | line-height: 22px; 75 | text-align: start; 76 | ` -------------------------------------------------------------------------------- /src/components/NavDropDown/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { AiFillPhone, AiOutlineMail } from 'react-icons/ai' 3 | import { FaLocationArrow } from "react-icons/fa" 4 | 5 | import { DropDownContainer, DropDownIcon, DropDownItem, DropDownItemDesc, DropDownItemTitle, DropDownTextContainer } from './NavDropDown' 6 | 7 | const NavDropDown = (props) => ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | Phone 15 | Let's get together and have a chat?' 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | Email 24 | If you want to talk jus send a message and I'll get back 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | Address 33 | 1405, Angelus Dr, Florissant. Mo 34 | 35 | 36 | 37 | ); 38 | 39 | export default NavDropDown 40 | -------------------------------------------------------------------------------- /src/components/Projects/Projects.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { BlogCard, CardInfo, ExternalLinks, GridContainer, HeaderThree, Hr, Tag, TagList, TitleContent, UtilityList, Img } from './ProjectsStyles'; 4 | import { Section, SectionDivider, SectionTitle } from '../../styles/GlobalComponents'; 5 | import { projects } from '../../constants/constants'; 6 | 7 | const Projects = () => ( 8 |
    9 | 10 | Projects 11 | 12 | {projects.map((p, i) => { 13 | return ( 14 | 15 | 16 | 17 | {p.title} 18 |
    19 | 20 | {p.description} 21 |
    22 | Tech Stack 23 |
    24 | 25 | {p.tags.map((t, i) => { 26 | return {t}; 27 | })} 28 | 29 |
    30 | 31 | Live Preview 32 | Source Code 33 | 34 |     35 | ); 36 | })} 37 |     38 |
    39 | ); 40 | 41 | export default Projects; -------------------------------------------------------------------------------- /src/components/Projects/ProjectsStyles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Img = styled.img` 4 | width:100%; 5 | height:100%; 6 | object-fit: cover; 7 | overflow: hidden; 8 | ` 9 | 10 | export const GridContainer = styled.section` 11 | display: grid; 12 | grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); 13 | padding-top: 3rem; 14 | padding-bottom: 3rem; 15 | place-items: center; 16 | column-gap: 1rem; 17 | row-gap: 3rem; 18 | @media ${(props) => props.theme.breakpoints.sm} { 19 | display: flex; 20 | flex-direction: column; 21 | padding: 2rem; 22 | padding-bottom: 1.5rem; 23 | } 24 | 25 | ` 26 | export const BlogCard = styled.div` 27 | border-radius: 10px; 28 | box-shadow: 3px 3px 20px rgba(80, 78, 78, 0.5); 29 | text-align: center; 30 | width: 400px; 31 | @media ${(props) => props.theme.breakpoints.sm} { 32 | width: 100%; 33 | } 34 | `; 35 | export const TitleContent = styled.div` 36 | text-align: center; 37 | z-index: 20; 38 | width: 100%; 39 | margin-top: 4rem; 40 | margin-bottom: 0.7em; 41 | color: #9cc9e3; 42 | font-size: 1.8rem; 43 | 44 | `; 45 | 46 | 47 | export const HeaderThree = styled.h3` 48 | font-weight: 500; 49 | letter-spacing: 2px; 50 | color: #9cc9e3; 51 | padding: .5rem 0; 52 | margin-top: 1rem; 53 | font-size: ${(props) => props.title ? '3rem' : '2rem'}; 54 | `; 55 | 56 | export const Hr = styled.hr` 57 | width: 50px; 58 | height: 3px; 59 | margin: 8px auto; 60 | border: 0; 61 | background: #d0bb57; 62 | `; 63 | 64 | export const Intro = styled.div` 65 | width: 170px; 66 | margin: 0 auto; 67 | color: #dce3e7; 68 | font-family: 'Droid Serif', serif; 69 | font-size: 13px; 70 | font-style: italic; 71 | line-height: 18px; 72 | `; 73 | 74 | 75 | export const CardInfo = styled.p` 76 | width: 100%; 77 | padding: 0 50px; 78 | color: #e4e6e7; 79 | font-style: 2rem; 80 | line-height: 24px; 81 | text-align: justify; 82 | margin-top: 2rem; 83 | @media ${(props) => props.theme.breakpoints.sm} { 84 | padding:.3rem 85 | 86 | } 87 | `; 88 | 89 | 90 | export const UtilityList = styled.ul` 91 | list-style-type: none; 92 | padding: 0; 93 | display: flex; 94 | justify-content: space-around; 95 | margin: 2.5rem 0; 96 | `; 97 | 98 | export const ExternalLinks = styled.a` 99 | color:#d4c0c0; 100 | font-size: 1.6rem; 101 | padding:1rem 1.5rem; 102 | background: #6b3030; 103 | border-radius: 15px; 104 | transition: 0.5s; 105 | &:hover{ 106 | background: #801414; 107 | 108 | } 109 | `; 110 | 111 | export const TagList = styled.ul` 112 | display: flex; 113 | justify-content: space-around; 114 | padding: 2rem; 115 | ` 116 | export const Tag = styled.li` 117 | color: #d8bfbf; 118 | font-size: 1.5rem; 119 | ` -------------------------------------------------------------------------------- /src/components/Technologies/Skills.js: -------------------------------------------------------------------------------- 1 | import { DiAndroid, DiTerminal, DiJava, DiHtml5 } from "react-icons/di"; 2 | import { SiFirebase, SiGit, SiDart, SiCss3, SiMysql, SiAmazonaws } from "react-icons/si"; 3 | import { RiFlutterFill } from "react-icons/ri"; 4 | import { TbBrandKotlin } from "react-icons/tb"; 5 | 6 | export const Skills = [ 7 | { 8 | slug: "android", 9 | Component: DiAndroid, 10 | title: "Android", 11 | Description: () => <>Android Apps, ROMs, & Kernels, 12 | }, 13 | { 14 | slug: "flutter", 15 | Component: RiFlutterFill, 16 | title: "Flutter", 17 | Description: () => <>Cross-platform app development, 18 | }, 19 | { 20 | slug: "kotlin", 21 | Component: TbBrandKotlin, 22 | title: "Kotlin", 23 | Description: () => <>Android apps and Lambda functions, 24 | }, 25 | { 26 | slug: "dart", 27 | Component: SiDart, 28 | title: "Dart", 29 | Description: () => <>Flutter apps only, 30 | }, 31 | { 32 | slug: "java", 33 | Component: DiJava, 34 | title: "Java", 35 | Description: () => <>Android apps and Lambda functions, 36 | }, 37 | 38 | { 39 | slug: "html", 40 | Component: DiHtml5, 41 | title: "HTML", 42 | Description: () => <>Static webpages and portfolio projects, 43 | }, 44 | { 45 | slug: "css", 46 | Component: SiCss3, 47 | title: "CSS", 48 | Description: () => <>Styling of my webpages, 49 | }, 50 | 51 | { 52 | slug: "sql", 53 | Component: SiMysql, 54 | title: "MySQL", 55 | Description: () => <>Storing client and user data, 56 | }, 57 | { 58 | slug: "aws", 59 | Component: SiAmazonaws, 60 | title: "AWS Lambda", 61 | Description: () => <>Lambda functions for creating APIs, 62 | }, 63 | { 64 | slug: "terminal", 65 | Component: DiTerminal, 66 | title: "Bash", 67 | Description: () => <>Ease of life and build scripts, 68 | }, 69 | { 70 | slug: "firebase", 71 | Component: SiFirebase, 72 | title: "Firebase", 73 | Description: () => <>Authentication, database and analytics, 74 | }, 75 | { 76 | slug: "git", 77 | Component: SiGit, 78 | title: "Git", 79 | Description: () => <>Code management and open source contributions, 80 | }, 81 | ]; 82 | -------------------------------------------------------------------------------- /src/components/Technologies/Technologies.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Section, SectionDivider, SectionText, SectionTitle, } from "../../styles/GlobalComponents"; 3 | import { List, ListContainer, ListItem, ListParagraph, ListTitle, } from "./TechnologiesStyles"; 4 | import { Skills } from './Skills' 5 | 6 | const Technologies = () => ( 7 |
    8 | 9 | Skills 10 | 11 | I have extensive experience working with a variety of technologies as a developer. I've developed and maintained multiple projects using these technologies, and I'm always eager to learn more. 12 | 13 | 14 | {Skills.map((Skill) => ( 15 | 16 | 17 | 18 | 19 | 20 | {Skill.title} 21 | 22 | 23 | 24 | 25 | 26 | ))} 27 | 28 | 29 |
    30 | ); 31 | 32 | export default Technologies; 33 | -------------------------------------------------------------------------------- /src/components/Technologies/TechnologiesStyles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const ImageContainer = styled.div` 4 | text-align: center; 5 | background-image: radial-gradient(50% 50% at 50% 50%, rgba(79, 108, 176, 0.25) 53.8%, rgba(79, 108, 176, 0) 100%); 6 | width: 100%; 7 | padding: 60px; 8 | margin-top: 48px; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | 14 | @media ${props => props.theme.breakpoints.lg} { 15 | background-image: none; 16 | padding: 0; 17 | margin-top: 40px; 18 | } 19 | @media ${props => props.theme.breakpoints.md} { 20 | background-image: none; 21 | padding: 0; 22 | margin-top: 16px; 23 | } 24 | ` 25 | 26 | export const MainImage = styled.img` 27 | width: 100%; 28 | ` 29 | 30 | export const List = styled.ul` 31 | list-style-type: none; 32 | display: grid; 33 | grid-template-columns: repeat(3, 1fr); 34 | gap: 40px; 35 | margin-bottom: 4rem; 36 | 37 | @media ${props => props.theme.breakpoints.lg}{ 38 | margin: 64px 0; 39 | } 40 | 41 | @media ${props => props.theme.breakpoints.md}{ 42 | margin: 64px 0; 43 | gap: 24px 44 | } 45 | 46 | @media ${props => props.theme.breakpoints.sm}{ 47 | display: grid; 48 | grid-template-columns: repeat(2, 1fr); 49 | padding: 15px; 50 | } 51 | 52 | @media ${props => props.theme.breakpoints.xs}{ 53 | display: flex; 54 | flex-direction: column; 55 | } 56 | ` 57 | 58 | export const ListContainer = styled.div` 59 | display: flex; 60 | flex-direction: column; 61 | margin-left: 18px; 62 | 63 | @media ${props => props.theme.breakpoints.sm}{ 64 | display: flex; 65 | margin-left: 18px; 66 | } 67 | ` 68 | 69 | export const ListTitle = styled.h4` 70 | font-weight: 700; 71 | font-size: 28px; 72 | line-height: 32px; 73 | letter-spacing: 0.02em; 74 | color: #FFFFFF; 75 | margin-bottom: 8px; 76 | 77 | @media ${props => props.theme.breakpoints.md}{ 78 | font-size: 24px; 79 | line-height: 28px; 80 | } 81 | 82 | @media ${props => props.theme.breakpoints.sm}{ 83 | font-size: 20px; 84 | line-height: 28px; 85 | letter-spacing: 0.02em; 86 | margin-bottom: 4px; 87 | } 88 | ` 89 | 90 | export const ListParagraph = styled.div` 91 | font-size: 18px; 92 | line-height: 30px; 93 | color: rgba(255, 255, 255, 0.75); 94 | 95 | @media ${props => props.theme.breakpoints.md}{ 96 | font-size: 16px; 97 | line-height: 28px; 98 | } 99 | 100 | @media ${props => props.theme.breakpoints.sm}{ 101 | font-size: 14px; 102 | line-height: 22px; 103 | } 104 | ` 105 | 106 | export const ListItem = styled.li` 107 | max-width: 320px; 108 | display: flex; 109 | flex-direction: row; 110 | 111 | @media ${props => props.theme.breakpoints.md}{ 112 | max-width: 203px; 113 | } 114 | 115 | @media ${props => props.theme.breakpoints.sm}{ 116 | margin-bottom: 14px; 117 | max-width: 320px; 118 | } 119 | ` 120 | 121 | export const ListIcon = styled.img` 122 | display: block; 123 | width: 48px; 124 | height: 48px; 125 | margin-bottom: 10px; 126 | 127 | @media ${props => props.theme.breakpoints.md}{ 128 | width: 40px; 129 | height: 40px; 130 | margin-bottom: 8px; 131 | } 132 | 133 | @media ${props => props.theme.breakpoints.sm}{ 134 | width: 32px; 135 | height: 32px; 136 | margin-bottom: 0px; 137 | } 138 | ` 139 | -------------------------------------------------------------------------------- /src/components/TimeLine/TimeLine.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef, useEffect } from 'react'; 2 | 3 | import { CarouselButton, CarouselButtonDot, CarouselButtons, CarouselContainer, CarouselItem, CarouselItemImg, CarouselItemText, CarouselItemTitle, CarouselMobileScrollNode } from './TimeLineStyles'; 4 | import { Section, SectionDivider, SectionText, SectionTitle } from '../../styles/GlobalComponents'; 5 | import { TimeLineData } from '../../constants/constants'; 6 | 7 | const TOTAL_CAROUSEL_COUNT = TimeLineData.length; 8 | 9 | const Timeline = () => { 10 | const [activeItem, setActiveItem] = useState(0); 11 | const carouselRef = useRef(); 12 | 13 | const scroll = (node, left) => { 14 | return node.scrollTo({ left, behavior: 'smooth' }); 15 | } 16 | 17 | const handleClick = (e, i) => { 18 | e.preventDefault(); 19 | 20 | if (carouselRef.current) { 21 | const scrollLeft = Math.floor(carouselRef.current.scrollWidth * 0.7 * (i / TimeLineData.length)); 22 | 23 | scroll(carouselRef.current, scrollLeft); 24 | } 25 | } 26 | 27 | const handleScroll = () => { 28 | if (carouselRef.current) { 29 | const index = Math.round((carouselRef.current.scrollLeft / (carouselRef.current.scrollWidth * 0.7)) * TimeLineData.length); 30 | 31 | setActiveItem(index); 32 | } 33 | } 34 | 35 | // snap back to beginning of scroll when window is resized 36 | // avoids a bug where content is covered up if coming from smaller screen 37 | useEffect(() => { 38 | const handleResize = () => { 39 | scroll(carouselRef.current, 0); 40 | } 41 | 42 | window.addEventListener('resize', handleResize); 43 | }, []); 44 | 45 | return ( 46 |
    47 | My Journey 48 | 49 | Throughout my journey, I've gained a wealth of knowledge and experience in both development and life in general. I’m always eager to learn more and take on new challenges, 50 | 51 | 52 | <> 53 | {TimeLineData.map((item, index) => ( 54 | 57 | handleClick(e, index)}> 62 | 63 | {`${item.year}`} 64 | 70 | 77 | 78 | 85 | 86 | 91 | 92 | 93 | 94 | 95 | {item.text} 96 | 97 | 98 | ))} 99 | 100 | 101 | 102 | {TimeLineData.map((item, index) => { 103 | return ( 104 | handleClick(e, index)} 109 | type="button"> 110 | 111 | 112 | ); 113 | })} 114 | 115 | 116 |
    117 | ); 118 | }; 119 | 120 | export default Timeline; 121 | -------------------------------------------------------------------------------- /src/components/TimeLine/TimeLineStyles.js: -------------------------------------------------------------------------------- 1 | 2 | import styled from 'styled-components' 3 | 4 | export const CarouselContainer = styled.ul` 5 | background: #0F1624; 6 | padding: 0rem; 7 | list-style:none; 8 | display: flex; 9 | justify-content: space-between; 10 | /* overflow-x: hidden; */ 11 | 12 | margin-left: 32px; 13 | &:first-of-type{ 14 | margin-left: 0px; 15 | } 16 | 17 | margin-bottom: 80px; 18 | 19 | //remove scrollbar 20 | scrollbar-width: none; 21 | &::-webkit-scrollbar { 22 | display: none; 23 | } 24 | 25 | @media ${props => props.theme.breakpoints.sm} { 26 | overflow-x: scroll; 27 | -webkit-overflow-scrolling: touch; 28 | scroll-snap-type: x mandatory; 29 | touch-action: pan-x; 30 | justify-content: initial; 31 | margin-bottom: 8px; 32 | } 33 | ` 34 | export const CarouselMobileScrollNode = styled.div` 35 | @media ${props => props.theme.breakpoints.sm} { 36 | display: flex; 37 | min-width: ${({ final }) => final ? `120%;` : `min-content`} 38 | } 39 | ` 40 | 41 | export const CarouselItem = styled.div` 42 | background: #0F1624; 43 | border-radius: 3px; 44 | max-width: 196px; 45 | 46 | @media ${props => props.theme.breakpoints.md} { 47 | max-width: 124px; 48 | } 49 | 50 | @media ${props => props.theme.breakpoints.sm} { 51 | margin-left: 32px; 52 | min-width: 120px; 53 | background: #0F1624; 54 | padding: 4px; 55 | align-content: start; 56 | scroll-snap-align: start; 57 | border-radius: 3px; 58 | overflow: visible; 59 | position: relative; 60 | height: fit-content; 61 | 62 | ${(props) => props.active === props.index ? `opacity: 1` : `opacity: 0.5`}; 63 | } 64 | ` 65 | 66 | export const CarouselItemTitle = styled.h4` 67 | font-weight: bold; 68 | font-size: 24px; 69 | line-height: 32px; 70 | letter-spacing: 0.02em; 71 | display: flex; 72 | /* This gradient is different due to the size of the Title container, it must transition sooner to be visible on the text */ 73 | background: linear-gradient(121.57deg, #FFFFFF 10%, rgba(255, 255, 255, 0.66) 30.15%); 74 | -webkit-background-clip: text; 75 | -webkit-text-fill-color: transparent; 76 | margin-bottom: 8px; 77 | 78 | @media ${props => props.theme.breakpoints.md} { 79 | font-size: 20px; 80 | line-height: 28px; 81 | margin-bottom: 4px; 82 | } 83 | 84 | @media ${props => props.theme.breakpoints.sm} { 85 | font-size: 20px; 86 | line-height: 28px; 87 | } 88 | ` 89 | export const CarouselItemImg = styled.svg` 90 | margin-left: 21px; 91 | -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0)); 92 | width: 100%; 93 | 94 | @media ${props => props.theme.breakpoints.sm} { 95 | -webkit-mask-image: none; 96 | margin-left: 16px; 97 | overflow: visible; 98 | } 99 | ` 100 | 101 | export const CarouselItemText = styled.p` 102 | font-size: 14px; 103 | line-height: 22px; 104 | letter-spacing: 0.02em; 105 | color: rgba(255, 255, 255, 0.75); 106 | padding-right: 16px; 107 | 108 | @media ${props => props.theme.breakpoints.md} { 109 | font-size: 12px; 110 | line-height: 18px; 111 | padding-right: 32px; 112 | } 113 | @media ${props => props.theme.breakpoints.sm} { 114 | font-size: 11px; 115 | line-height: 18px; 116 | padding-right: 0; 117 | } 118 | ` 119 | export const CarouselButtons = styled.div` 120 | width: 288px; 121 | 122 | display: none; 123 | visibility: hidden; 124 | 125 | @media ${props => props.theme.breakpoints.sm} { 126 | display: flex; 127 | visibility: visible; 128 | margin-bottom: 48px; 129 | } 130 | ` 131 | 132 | export const CarouselButton = styled.button` 133 | box-sizing: border-box; 134 | background: none; 135 | padding: 4px; 136 | border: none; 137 | cursor: pointer; 138 | margin-right: 4px; 139 | opacity: ${(props) => props.active === props.index ? `1` : `.33`}; 140 | transform: ${(props) => props.active === props.index ? `scale(1.6)` : `scale(1)`}; 141 | 142 | &:focus { 143 | outline: none; 144 | } 145 | ` 146 | 147 | export const CarouselButtonDot = styled.div` 148 | background-color: white; 149 | border-radius: 10px; 150 | margin: auto; 151 | width: 3px; 152 | height: 3px; 153 | ` 154 | -------------------------------------------------------------------------------- /src/constants/constants.js: -------------------------------------------------------------------------------- 1 | export const projects = [ 2 | { 3 | title: 'Covid-19 Status App', 4 | description: "COVID-19 Status is a free, open-source Android application that shows the current state of COVID-19 in India and the world. It has a beautiful, simple, fast, and responsive UI.", 5 | image: '/images/covid.jpg', 6 | tags: ['Java', 'XML', 'Firebase', 'Rest API'], 7 | source: 'https://github.com/Coders-Of-XDA-OT/covid19-status-android', 8 | visit: 'https://project.vipuljha.com/covid/', 9 | id: 0, 10 | }, 11 | { 12 | title: 'Portfolio Website', 13 | description: "This was my personal portfolio website that has all my work and project experience, including my resume. It used to be my main portfolio before deploying this current portfolio.", 14 | image: '/images/portfolio.jpg', 15 | tags: ['HTML', 'CSS', 'Bootstrap', 'JQuery'], 16 | source: 'https://github.com/lordarcadius/website', 17 | visit: 'https://project.vipuljha.com/website/', 18 | id: 1, 19 | }, 20 | { 21 | title: 'ABS Tweaks', 22 | description: "ABS Tweaks or Arkaynine Boost Script is a collection of shell scripts written with the aim of enhancing the performance and battery life of an Android phone. It got 2 Lac+ downloads overall.", 23 | image: '/images/abs.jpg', 24 | tags: ['Shell', 'Busybox'], 25 | source: 'https://github.com/lordarcadius/ABS-Tweaks', 26 | visit: 'https://forum.xda-developers.com/t/tweak-mod-arm-x86-project-dark-booster-abs-tweaks-v5-0-2-3-6-0-23-01-2016.3120404/', 27 | id: 2, 28 | }, 29 | { 30 | title: 'ElectraBlue Kernel', 31 | description: "ElectraBlue is a flash & forget custom kernel for supported Android devices. It was developed with the aim to provide a stable, fluid, & battery-efficient experience with customizations.", 32 | image: '/images/eb.jpg', 33 | tags: ['Linux', 'C', 'Makefile', 'Bash'], 34 | source: 'https://github.com/lordarcadius/electrablue_mido', 35 | visit: 'https://forum.xda-developers.com/t/kernel-mido-oreo-pie-electrablue-kernel-21-0-july-06-redmi-note-4.3655651/', 36 | id: 3, 37 | }, 38 | { 39 | title: 'Lenovo SNAPit', 40 | description: "Lenovo SNAPit Camera was one of the finest OEM camera apps back in those days. It had tonnes of unique and amazing features. I ported it to work on almost all devices at that time.", 41 | image: '/images/snapit.jpg', 42 | tags: ['Java', 'Libs', 'Smali'], 43 | source: '#', 44 | visit: 'https://forum.xda-developers.com/t/app-port-6-0-lenovo-snapit-camera-5-8-53-for-all-devices.3608065/', 45 | id: 3, 46 | }, 47 | { 48 | title: 'CyanogenOS Apps', 49 | description: "CyanogenOS 12.1 had a set of exclusive apps like a new theme engine and a new Truecaller integrated dialer. I ported it to work with CyanogenMod 13 and CM 13 based ROMs.", 50 | image: '/images/capps.jpg', 51 | tags: ['Java', 'Libs'], 52 | source: '#', 53 | visit: 'https://forum.xda-developers.com/t/c-apps-v2-unofficial-6-0-x-cyanogen-os-capps-v2-for-cm13-and-cm13-based-roms.3254865/', 54 | id: 3, 55 | }, 56 | 57 | ]; 58 | 59 | export const TimeLineData = [ 60 | { year: 2016, text: 'Started my journey as a developer.', }, 61 | { year: 2017, text: 'Worked intensively on ROMs & Kernels.', }, 62 | { year: 2018, text: 'Learned Android app development.', }, 63 | { year: 2019, text: 'Finished Diploma in Computer Engineering.', }, 64 | { year: 2020, text: 'Aquired new skills while trying not to catch COVID-19', }, 65 | { year: 2021, text: 'Survived COVID-19 and got my first Job at Primebook.', }, 66 | { year: 2022, text: 'Completed B.Tech in Information Technology.', }, 67 | { year: 2023, text: 'Year under progress....', }, 68 | ]; -------------------------------------------------------------------------------- /src/layout/Layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Footer from '../components/Footer/Footer' 4 | import Header from '../components/Header/Header' 5 | import { Container } from './LayoutStyles' 6 | 7 | export const Layout = ({ children }) => { 8 | return ( 9 | 10 |
    11 |
    {children}
    12 |