├── images
    ├── About.png
    ├── Home.png
    ├── Project1.png
    ├── Project2.png
    └── Project3.png
├── main.js
├── README.md
├── index.html
└── style.css


/images/About.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/HEAD/images/About.png


--------------------------------------------------------------------------------
/images/Home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/HEAD/images/Home.png


--------------------------------------------------------------------------------
/images/Project1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/HEAD/images/Project1.png


--------------------------------------------------------------------------------
/images/Project2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/HEAD/images/Project2.png


--------------------------------------------------------------------------------
/images/Project3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/HEAD/images/Project3.png


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | var typed = new Typed(".text",{
2 |     strings:["Frontend Developer", "Java Developer", "Web Developer"],
3 |     typeSpeed : 10,
4 |     backSpeed : 100,
5 |     backDelay : 1000,
6 |     loop : true
7 | });


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Day-10-Portfolio-Website-Modern
 2 | 
 3 | Embark on an exhilarating journey of web development with the "100 Days, 100 Websites" challenge! Over the course of 100 days, immerse yourself in the world of HTML, CSS, and JavaScript as you craft 100 unique websites from scratch. Each day presents an opportunity to explore new design concepts, master coding techniques, and unleash your creativity.
 4 | 
 5 | Live Demo - https://quantumcoding123.github.io/Day-10-Portfolio-Website-Modern/
 6 | 
 7 | # Join Us
 8 | 
 9 | GitHub-https://github.com/QuantumCoding123
10 | 
11 | YouTube-https://www.youtube.com/channel/UC3Dz2Yaz2uWAczNU4GEDg5Q
12 | 
13 | Instagram - https://www.instagram.com/quantumcoding123
14 | 
15 | Telegram - https://t.me/QuantumCoding123
16 | 
17 | Whatsapp- https://whatsapp.com/channel/0029VaVInCA2ZjCjXEf2IC2I
18 | 
19 | With a plethora of free resources available online, including tutorials, code snippets, and open-source projects, you'll have everything you need to bring your ideas to life. Whether you're building a personal blog, an e-commerce site, a portfolio showcase, or an interactive web application, the possibilities are endless.
20 | 
21 | Join the "100 Days, 100 Websites" challenge today and witness your proficiency in web development soar to new heights. With dedication, perseverance, and a dash of creativity, you'll emerge from this journey as a proficient web developer ready to tackle any project that comes your way.
22 | 
23 | # Output - 1
24 | 
25 | ![Screenshot (43)](https://github.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/assets/166281221/e5cbc900-7032-4503-8d0f-ba323a4eb916)
26 | 
27 | 
28 | # Output - 2
29 | 
30 | ![Screenshot (44)](https://github.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/assets/166281221/c2107373-abdb-4220-8eee-2f9bac0965d1)
31 | 
32 | 
33 | # Output - 3
34 | 
35 | ![Screenshot (45)](https://github.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/assets/166281221/57bbe198-ade7-41a3-89a5-7a5cf138ac80)
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Portfolio</title>
  7 |     <link rel="stylesheet" href="style.css">
  8 |     <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
  9 |     <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
 10 | </head>
 11 | <body>
 12 |     <header class="header">
 13 |         <a href="#" class="logo">Portfolio</a>
 14 | 
 15 |         <nav class="navbar">
 16 |             <a href="#home" style="--i:1" class="active">Home</a>
 17 |             <a href="#about" style="--i:2">About</a>
 18 |             <a href="#services" style="--i:3">Skills</a>
 19 |             <a href="#skills" style="--i:4">Portfolio</a>
 20 |             <a href="#contact" style="--i:5">Contact</a>
 21 |         </nav>
 22 |     </header>
 23 |     <section class="home" id="home">
 24 |         <div class="home-content">
 25 |             <h3>Hello, It's Me</h3>
 26 |             <h1>Diksha Jadhav</h1>
 27 |             <h3>And I'm a <span class="text"></span></h3>
 28 |             <p>I'm a Full Stack Developer. <br/>
 29 |                 My first exposure to professional life through internship has benefited me mostly in
 30 |                 strengthening my personal skills. I have developed a positive attitude and a strong
 31 |                 sense of responsibility being innovative , resourceful, open and responsive to change. It has
 32 |                 created in me an interest in lifelong learning.
 33 |             </p>
 34 |             <div class="home-scl">
 35 |                 <a href="#" style="--i:7"><i class='bx bxl-facebook'></i></a>
 36 |                 <a href="#" style="--i:8"><i class='bx bxl-instagram' ></i></a>
 37 |                 <a href="#" style="--i:9"><i class='bx bxl-whatsapp' ></i></a>
 38 |                 <a href="#" style="--i:10"><i class='bx bxl-linkedin' ></i></a>
 39 |             </div>
 40 |             <a href="#" class="btn-box">More About Me</a>
 41 |         </div>
 42 |         <span class="home-imgHover"></span>
 43 |     </section>
 44 | 
 45 |     <section class="about" id="about">
 46 |         <div class="about-img">
 47 |             <img src="./images/About.png" alt="">
 48 |         </div>
 49 |         <div class="about-text">
 50 |             <h2>About <span>Me</span></h2>
 51 |             <h4>Full Stack Developer!</h4>
 52 |             <p>
 53 |                 I'm Diksha Jadhav & I'm from Khargone. I'm an engineering graduate from JIT College specialized in Computer Science. I've worked hard in my education & maintained a CGPA of 8.
 54 |                 Along with my degree I've completed Java, SQL and Full Stack Courses online.Now I'm ready to apply my knowledge into practice.Though I do not have any real life working experience, I've  had a lot of exposure to the software field.
 55 |                 My Goal is to build a successfull career as a Full Stack Developer.Moving forward in my career I hope to expand my experience across different industries.
 56 |                 I'm a good learner and team player
 57 |                 That's all about my self.
 58 |                 <!-- My first exposure to professional life through internship has benefited me mostly in
 59 |                 strengthening my personal skills. I have developed a positive attitude and a strong
 60 |                 sense of responsibility being innovative , resourceful, open and responsive to change. It has
 61 |                 created in me an interest in lifelong learning.
 62 |                 I'm attentive listener and effective oral communication skill -->
 63 |             </p>
 64 |             <a href="#" class="btn-box">More About Me</a>
 65 |         </div>
 66 |     </section>
 67 | 
 68 |     <section>
 69 |         <div class="services" id="services">
 70 |             <div class="container">
 71 |                 <h1 class="sub-title">My <span>Skiils</span></h1>
 72 |                 <div class="services-list">
 73 |                     <div>
 74 |                         <i class='bx bx-code-alt'></i>
 75 |                         <h2>Full Stack Developer</h2>
 76 |                         <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam perspiciatis fugit debitis laudantium, sed numquam neque at, praesentium exercitationem culpa ipsam? Nihil.
 77 |                         </p>
 78 |                         <a href="#" class="read">Learn More</a>
 79 |                     </div>
 80 |                     <div>
 81 |                         <i class='bx bxl-java' style='color:#00eeff'></i>
 82 |                         <h2>Java</h2>
 83 |                         <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam perspiciatis fugit debitis laudantium, sed numquam neque at, praesentium exercitationem culpa ipsam? Nihil.
 84 |                         </p>
 85 |                         <a href="#" class="read">Learn More</a>
 86 |                     </div>
 87 |                     <div>
 88 |                         <i class='bx bxl-react' style='color:#00eeff'></i>
 89 |                         <h2>React</h2>
 90 |                         <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam perspiciatis fugit debitis laudantium, sed numquam neque at, praesentium exercitationem culpa ipsam? Nihil.
 91 |                         </p>
 92 |                         <a href="#" class="read">Learn More</a>
 93 |                     </div>
 94 |                 </div>
 95 |             </div>
 96 |         </div>
 97 |     </section>
 98 | 
 99 |     <h1 class="sub-title">My <span>Skills</span></h1>
100 | 
101 |     <section>
102 |         <div class="container1" id="skills">
103 |             
104 |             <h1 class="heading1">Technical Skills</h1>
105 |             <div class="Technical-bars">
106 |                 <div class="bar"><i style="color: #c95d2e" class='bx bxl-html5'></i>
107 |                     <div class="info">
108 |                         <span>HTML</span>
109 |                     </div>
110 |                     <div class="progress-line html">
111 |                         <span></span>
112 |                     </div>
113 |                 </div><br/>
114 |                 <div class="bar"><i style="color: #147bbc" class='bx bxl-css3'></i>
115 |                     <div class="info">
116 |                         <span>CSS</span>
117 |                     </div>
118 |                     <div class="progress-line css">
119 |                         <span></span>
120 |                     </div>
121 |                 </div><br/>
122 |                 <div class="bar"><i style="color: #b0bc1e" class='bx bxl-javascript'></i>
123 |                     <div class="info">
124 |                         <span>JavaScript</span>
125 |                     </div>
126 |                     <div class="progress-line javaScript">
127 |                         <span></span>
128 |                     </div>
129 |                 </div><br/>
130 |                 <div class="bar"><i style="color: #c32ec9" class='bx bxl-java'></i>
131 |                     <div class="info">
132 |                         <span>Java</span>
133 |                     </div>
134 |                     <div class="progress-line java">
135 |                         <span></span>
136 |                     </div>
137 |                 </div><br/>
138 |                 <div class="bar"><i style="color: #69bcbc" class='bx bxl-react'></i>
139 |                     <div class="info">
140 |                         <span>React</span>
141 |                     </div>
142 |                     <div class="progress-line react">
143 |                         <span> </span>
144 |                     </div>
145 |                 </div>
146 |             </div>
147 |         </div>
148 | 
149 |         <div class="container1">
150 |             <h1 class="heading1">Professional Skills</h1>
151 |             <div class="radial-bars">
152 | 
153 |              <div class="radial-bar">
154 |                 <svg x="0px" y="0px" viewBox="0 0 200 200">
155 |                     <circle class="progress-bar" cx="100" cy="100" r="80"></circle>
156 |                     <circle class="path path-1" cx="100" cy="100" r="80"></circle>
157 |                 </svg>
158 |                 <div class="percentage">90%</div>
159 |                 <div class="text">Creativity</div>
160 |              </div>
161 | 
162 |              <div class="radial-bar">
163 |                 <svg x="0px" y="0px" viewBox="0 0 200 200">
164 |                     <circle class="progress-bar" cx="100" cy="100" r="80"></circle>
165 |                     <circle class="path path-2" cx="100" cy="100" r="80"></circle>
166 |                 </svg>
167 |                 <div class="percentage">80%</div>
168 |                 <div class="text">Communication</div>
169 |              </div>
170 | 
171 |              <div class="radial-bar">
172 |                 <svg x="0px" y="0px" viewBox="0 0 200 200">
173 |                     <circle class="progress-bar" cx="100" cy="100" r="80"></circle>
174 |                     <circle class="path path-3" cx="100" cy="100" r="80"></circle>
175 |                 </svg>
176 |                 <div class="percentage">75%</div>
177 |                 <div class="text">Problem Solving</div>
178 |              </div>
179 | 
180 |              <div class="radial-bar">
181 |                 <svg x="0px" y="0px" viewBox="0 0 200 200">
182 |                     <circle class="progress-bar" cx="100" cy="100" r="80"></circle>
183 |                     <circle class="path path-4" cx="100" cy="100" r="80"></circle>
184 |                 </svg>
185 |                 <div class="percentage">85%</div>
186 |                 <div class="text">TeamWork</div>
187 |              </div>
188 |             </div>
189 |         </div>
190 |     </section>
191 | 
192 |     <section>
193 |         <div class="portfolio" id="project">
194 |             <div class="main-text" id="project">
195 |                 <h2>Latest <span>Project</span></h2>
196 |                 
197 |                 <div class="portfolio-content">
198 |                     <div class="row">
199 |                         <img src="./images/Project1.png">
200 |                         <div class="layer">
201 |                             <h5>Weather App</h5>
202 |                             <p>The Weather Detection project is designed to 
203 |                                provide real-time weather information based 
204 |                                on user inputs such as location or city name.
205 |                                It utilizes APIs (Application Programming Interfaces)
206 |                                provided by weather services to fetch and display 
207 |                                current weather conditions and forecasts.
208 |                             </p>
209 |                             <a href="#"><i class='bx bx-link-external' style="color: aliceblue;"></i></a>
210 |                         </div>
211 |                     </div>
212 | 
213 |                     <div class="row">
214 |                         <img src="./images/Project2.png">
215 |                         <div class="layer">
216 |                             <h5>To-Do List</h5>
217 |                             <p>The To-Do List project is a web application designed
218 |                                to help users organize and manage their tasks effectively.
219 |                                This project utilizes HTML, CSS, and JavaScript to create
220 |                                an interactive user interface for adding, editing, and 
221 |                                deleting tasks.
222 |                             </p>
223 |                             <a href="#"><i class='bx bx-link-external' style="color: aliceblue;"></i></a>
224 |                         </div>
225 |                     </div>
226 | 
227 |                     <div class="row">
228 |                         <img src="./images/Project3.png">
229 |                         <div class="layer">
230 |                             <h5>Quiz App</h5>
231 |                             <p>The Quiz App project is a web application designed to provide 
232 |                                users with an interactive quiz experience. This project utilizes 
233 |                                HTML, CSS, and JavaScript to create a dynamic user interface
234 |                                for presenting questions, handling user responses, and 
235 |                                calculating scores.
236 |                             </p>
237 |                             <a href="#"><i class='bx bx-link-external' style="color: aliceblue;"></i></a>
238 |                         </div>
239 |                     </div>
240 |                 </div>
241 |             </div>
242 |         </div>
243 |     </section>
244 | 
245 |     <section class="contact" id="contact">
246 |         <div class="contact-text">
247 |             <h2>Contact <span>Me</span></h2>
248 |             <h4>Let's Work Together</h4>
249 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
250 |                 Iste similique quibusdam facere!
251 |             </p>
252 |             <div class="contact-list">
253 |                 <li><i class='bx bxs-send'></i>dikshajadhav@gmail.com</li>
254 |                 <li><i class='bx bx-phone'></i>756653564</li>
255 |             </div>
256 |             <div class="contact-icons">
257 |                 <a href=""><i class='bx bxl-facebook-circle'></i></a>
258 |                 <a href=""><i class='bx bxl-twitter'></i></a>
259 |                 <a href=""><i class='bx bxl-instagram'></i></a>
260 |                 <a href=""><i class='bx bxl-linkedin'></i></a>
261 |             </div>
262 |         </div>
263 | 
264 |         <div class="contact-form">
265 |             <form action="">
266 |                 <input type="text" placeholder="Enter Your Name" required>
267 |                 <input type="email" placeholder="Enter Your Email" required>
268 | 
269 |                 <input type="" placeholder="Enter Your Subject">
270 | 
271 |                 <textarea name="" id="" cols="40" rows="10" placeholder="Enter Your Message" required></textarea>
272 | 
273 |                 <input type="submit" value="submit" class="send">
274 |             </form>
275 |         </div>
276 | 
277 |     </section>
278 |     <div class="last-text">
279 |         <p>Developed By Diksha....</p>
280 |     </div>
281 |     <a href="#" class="top"><i class='bx bx-up-arrow-alt'></i></a>
282 | 
283 | 
284 | 
285 | 
286 | 
287 | 
288 | 
289 |     <script src="main.js"></script>
290 | </body>
291 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 |     scroll-behavior: smooth;
  6 |     font-family: 'poppins', sans-serif;
  7 | }
  8 | body{
  9 |     color: #ededed;
 10 |     background: #081b29;
 11 | }
 12 | .header{
 13 |     position: fixed;
 14 |     top: 0;
 15 |     left: 0;
 16 |     width: 100%;
 17 |     padding: 20px 10px;
 18 |     background: #051129;
 19 |     /* background: #008080; */
 20 |     display: flex;
 21 |     justify-content: space-between;
 22 |     align-items: center;
 23 |     z-index: 100;
 24 | }
 25 | .logo{
 26 |     position: relative;
 27 |     font-size: 25px;
 28 |     color: #fff;
 29 |     text-decoration: none;
 30 |     font-weight: 600;
 31 |     /* margin-left: 35px;
 32 |     transition: .3s; */
 33 |     cursor: default;
 34 |     opacity: 0;
 35 |     animation: slideRight 1s ease forwards;
 36 | }
 37 | .navbar a{
 38 |     display: inline-block;
 39 |     font-size: 25px;
 40 |     color: #fff;
 41 |     text-decoration: none;
 42 |     font-weight: 500;
 43 |     margin-left: 35px;
 44 |     transition: .3s;
 45 |     opacity: 0;
 46 |     animation: slideTop .5s ease forwards;
 47 |     animation-delay: calc(.2s * var(--i));
 48 | }
 49 | .navbar a:hover{
 50 |     color: #0ef;
 51 | }
 52 | .home{
 53 |     position: relative;
 54 |     width: 100%;
 55 |     justify-content: space-between;
 56 |     height: 100vh;
 57 |     background:url(./images/Home.png) no-repeat;
 58 |     /* background:  #008080; */
 59 |     background-size: cover;
 60 |     background-position: center;
 61 |     display: flex;
 62 |     align-items: center;
 63 |     padding: 70px 10% 0;
 64 | }
 65 | .home-content{
 66 |     max-width: 600px;
 67 | }
 68 | .home-content h3{
 69 |     font-size: 32px;
 70 |     font-weight: 700;
 71 |     opacity: 0;
 72 |     animation: slideBottom 1s ease forwards;
 73 |     animation-delay: .7s;
 74 | }
 75 | .home-content h3:nth-last-of-type(2){
 76 |     margin-bottom: 30px;
 77 |     animation: slideTop 1s ease forwards;
 78 |     animation-delay: .7s;
 79 | }
 80 | .home-content h3 span{
 81 |     color:#0ef;
 82 | }
 83 | .home-content h1{
 84 |     font-size: 56px;
 85 |     font-weight: 700;
 86 |     margin: -3px 0;
 87 |     opacity: 0;
 88 |     animation: slideRight 1s ease forwards;
 89 |     animation-delay: 1s;
 90 | }
 91 | .home-content p{
 92 |     font-size: 20px;
 93 |     opacity: 0;
 94 |     animation: slideLeft 1s ease forwards;
 95 |     animation-delay: 1s;
 96 | }
 97 | .home-scl a{
 98 |     display: inline-flex;
 99 |     justify-content: center;
100 |     align-items: center;
101 |     width: 40px;
102 |     height: 40px;
103 |     background: transparent;
104 |     border: 2px solid #0ef;
105 |     border-radius: 50%;
106 |     font-size: 20px;
107 |     color: #0ef;
108 |     text-decoration: none;
109 |     transition: .5s ease;
110 |     opacity: 0;
111 |     animation: slideLeft 1s ease forwards;
112 |     animation-delay: calc(.2s * var(--i));
113 |     margin: 30px 15px 30px 0;
114 |     /* box-shadow: 0 0 5px #0ef,
115 |     0 0 25px #0ef; */
116 | }
117 | .home-sci a:hover{
118 |     background: #0ef;
119 |     color: #081b29;
120 |     box-shadow: 0 0 20px #0ef;
121 | }
122 | .btn-box{
123 |     display: inline-block;
124 |     padding: 12px 28px;
125 |     background: #0ef;
126 |     border-radius: 40px;
127 |     font-size: 16px;
128 |     color: #081b29;
129 |     letter-spacing: 1px;
130 |     text-decoration: none;
131 |     font-weight: 600;
132 |     opacity: 0;
133 |     animation: slideTop 1s ease forwards;
134 |     animation-delay: 2s;
135 |     box-shadow: 0 0 5px #0ef,
136 |     0 0 25px #0ef;
137 | }
138 | .btn-box:hover{
139 |     box-shadow: 0 0 5px cyan,
140 |     0 0 25px cyan, 0 0 50px cyan,
141 |     0 0 100px cyan, 0 0 200px cyan,;
142 | }
143 | 
144 | .about{
145 |     display: grid;
146 |     grid-template-columns: repeat(2, 1fr);
147 |     align-items: center;
148 |     gap: 1.5rem;
149 | }
150 | .about-img img{
151 |     padding-bottom: 20%;
152 |     max-width: 630px;
153 |     height: auto;
154 |     width: 100%;
155 |     border-radius: 8px;
156 | }
157 | .about-text h2{
158 |     font-size: 60px;
159 | }
160 | .about-text h2 span{
161 |     color: #0ef;
162 | }
163 | .about-text h4{
164 |     font-size: 29px;
165 |     font-weight: 600;
166 |     color: #fff;
167 |     line-height: 1.4;
168 |     margin: 15px 0 30px;
169 | }
170 | .about-text p{
171 |     color: aliceblue;
172 |     font-size: 20px;
173 |     line-height: 1.4;
174 |     margin-bottom: 4rem
175 | }
176 | #services{
177 |     color: aliceblue;
178 |     font-size: 20px;
179 |     line-height: 1.4;
180 |     margin-bottom: 4rem;
181 | }
182 | .sub-title{
183 |     text-align: center;
184 |     font-size: 60px;
185 |     padding-bottom: 70px;
186 | }
187 | .sub-title span{
188 |     color: #0ef;
189 | }
190 | .container{
191 |     padding: 90px;
192 | }
193 | .services-list{
194 |     display: grid;
195 |     grid-template-columns: repeat(auto-fit,minmax(259px,1fr));
196 |     grid-gap: 40px;
197 |     margin-top: 50px;
198 | }
199 | .services-list div{
200 |     background-color: transparent;
201 |     padding: 40px;
202 |     font-size: 13px;
203 |     font-weight: 13px;
204 |     border-right: 10px;
205 |     border-radius: 20px;
206 |     transition: background 0.5s, transform 0.5s;
207 |     box-shadow: 1px 1px 20px #012290f7,
208 |                 1px 1px 40px #0053b8f7;
209 | }
210 | .services-list div i{
211 |     font-size: 50px;
212 |     margin-bottom: 30px;
213 | }
214 | .services-list div h2{
215 |     font-size: 30px;
216 |     font-weight: 500;
217 |     margin-bottom: 15px;
218 | }
219 | .services-list div a{
220 |     text-decoration: none;
221 |     color: #000000;
222 |     font-size: 12px;
223 |     margin-top: 20px;
224 |     display: inline-block;
225 | }
226 | .read{
227 |     display: inline-block;
228 |     padding: 12px 28px;
229 |     background: #0ef;
230 |     border-radius: 40px;
231 |     font-size: 16px;
232 |     color: #001b29;
233 |     letter-spacing: 1px;
234 |     text-decoration: none;
235 |     font-weight: 600;
236 |     opacity: 0;
237 |     animation: slideTop 1s ease forwards;
238 |     animation-delay: 2s;
239 |     box-shadow: 0 0 5px #0ef,
240 |     0 0 25px #0ef;
241 | }
242 | .read:hover{
243 |     background: #0ef;
244 |     color: #081b29;
245 |     box-shadow: 0 0 20px #0ef;
246 | }
247 | .services-list div:hover{
248 |     transform: translateY(-10px);
249 | }
250 | section{
251 |     display: flex;
252 |     flex-wrap: wrap;
253 | }
254 | .container1{
255 |     width: 600px;
256 |     height: 500px;
257 |     padding: 75px 90px;
258 |     margin-left: 120px;
259 | }
260 | .heading1{
261 |     text-align: center;
262 |     text-decoration: underline;
263 |     text-underline-offset: 10px;
264 |     text-decoration-thickness: 5px;
265 |     margin-bottom: 50px;
266 | }
267 | .bar{
268 |     font-size: 23px;
269 | }
270 | .Technical-bars .bar{
271 |     margin-top: 40px 0;
272 | }
273 | .Technical-bars .bar:first-child{
274 |     margin-top: 0;
275 | }
276 | .Technical-bars .bar:last-child{
277 |     margin-bottom: 0;
278 | }
279 | .Technical-bars .bar .info{
280 |     margin-bottom: 5px;
281 | }
282 | .Technical-bars .bar .info span{
283 |     font-size: 17px;
284 |     font-weight: 500;
285 |     animation: showText 0.5s 1s linear forwards;
286 |     opacity: 0;
287 | }
288 | .Technical-bars .bar .progress-line{
289 |     position: relative;
290 |     border-radius: 10px;
291 |     width: 100%;
292 |     height: 5px;
293 |     background-color: #000000;
294 |     animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
295 |     transform: scaleX(0);
296 |     transform-origin: left;
297 | }
298 | @keyframes animate{
299 |     100%{
300 |         transform: scaleX(1);
301 |     }
302 | }
303 | .Technical-bars .bar .progress-line span{
304 |     height: 100%;
305 |     background-color: #0ef;
306 |     position: absolute;
307 |     border-radius: 10px;
308 |     animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
309 |     transform: scaleX(0);
310 |     transform-origin: left;
311 | }
312 | .progress-line.html span{
313 |     width: 90%;
314 | }
315 | .progress-line.css span{
316 |     width: 80%;
317 | }
318 | .progress-line.javaScript span{
319 |     width: 70%;
320 | }
321 | .progress-line.java span{
322 |     width: 65%;
323 | }
324 | .progress-line.react span{
325 |     width: 50%;
326 | }
327 | .progress-line span::after{
328 |     position: absolute;
329 |     padding: 1px 8px;
330 |     background-color: #000;
331 |     color: #fff;
332 |     font-size: 12px;
333 |     border-radius: 3px;
334 |     top: -28px;
335 |     right: -20px;
336 |     animation: showText 0.5s 1.5s linear forwards;
337 |     opacity: 0;
338 | }
339 | .progress-line.html span::after{
340 |     content: "90%";
341 | }
342 | .progress-line.css span::after{
343 |     content: "80%";
344 | }
345 | .progress-line.javaScript span::after{
346 |     content: "70%";
347 | }
348 | .progress-line.java span::after{
349 |     content: "65%";
350 | }
351 | .progress-line.react span::after{
352 |     content: "50%";
353 | }
354 | .progress-line span::before{
355 |     content: "";
356 |     position: absolute;
357 |     width: 0;
358 |     height: 0;
359 |     border: 7px solid transparent;
360 |     border-bottom-width: 0px;
361 |     border-right-width: 0px;
362 |     border-top-color: #000;
363 |     top: -10px;
364 |     right: 0;
365 |     animation: showText 0.5s 1.5s linear forwards;
366 |     opacity: 0;
367 | }
368 | @keyframes showText{
369 |     100%{
370 |         opacity: 1;
371 |     }
372 | }
373 | .radial-bars{
374 |     width: 100%;
375 |     display: flex;
376 |     flex-wrap: wrap;
377 |     justify-content: space-evenly;
378 |     align-items: flex-start;
379 | }
380 | .radial-bars .radial-bar{
381 |     width: 50%;
382 |     height: 170px;
383 |     margin-bottom: 10px;
384 |     position: relative;
385 | }
386 | .radial-bars .radial-bar svg{
387 |     position: absolute;
388 |     top: 50%;
389 |     left: 50%;
390 |     transform: translate(-50%, -50%) rotate(-90deg);
391 |     width: 120px;
392 |     height: 160px;
393 | }
394 | .radial-bars .radial-bar .progress-bar{
395 |     stroke-width: 10;
396 |     stroke: black;
397 |     fill: transparent;
398 |     stroke-dasharray: 502;
399 |     stroke-dashoffset: 502;
400 |     stroke-linecap: round;
401 |     animation: animate-bar 1s linear forwards;
402 | }
403 | 
404 | @keyframes animate-bar{
405 |     100%{
406 |         stroke-dashoffset: -1;
407 |     }
408 | }
409 | .path{
410 |     stroke-width: 10;
411 |     stroke: #0ef;
412 |     fill: transparent;
413 |     stroke-dasharray: 502;
414 |     stroke-dashoffset: 502;
415 |     stroke-linecap: round;
416 | } 
417 | .path-1{animation: animate-path1 1s 1s linear forwards;}
418 | .path-2{animation: animate-path2 1s 1s linear forwards;}
419 | .path-3{animation: animate-path3 1s 1s linear forwards;}
420 | .path-4{animation: animate-path4 1s 1s linear forwards;}
421 | 
422 | 
423 | @keyframes animate-path1{
424 |     100%{
425 |         stroke-dashoffset: 50;;
426 |     }
427 | }
428 | @keyframes animate-path2{
429 |     100%{
430 |         stroke-dashoffset: 175;;
431 |     }
432 | }
433 | @keyframes animate-path3{
434 |     100%{
435 |         stroke-dashoffset: 125;;
436 |     }
437 | }
438 | @keyframes animate-path4{
439 |     100%{
440 |         stroke-dashoffset: 75;;
441 |     }
442 | }
443 | .radial-bar .percentage{
444 |     position: absolute;
445 |     top: 50%;
446 |     left: 50%;
447 |     transform: translate(-50%, -50%);
448 |     font-size: 17px;
449 |     font-weight: 500;
450 |     animation: showText 0.5s 1s linear forwards;
451 |     opacity: 0;
452 | }
453 | .radial-bar .text{
454 |     width: 100%;
455 |     position: absolute;
456 |     text-align: center;
457 |     left: 50%;
458 |     bottom: -5px;
459 |     transform: translateX(-50px);
460 |     font-size: 17px;
461 |     font-weight: 500;
462 |     animation: showText 0.5s 1s linear forwards;
463 |     opacity: 0;
464 | } 
465 | .main-text{
466 |     padding-top: 130px;
467 |     margin-top: 200px;
468 | }
469 | .main-text h2{
470 |     font-size: 60px;
471 |     line-height: 1;
472 |     text-align: center;
473 | }
474 | .main-text h2 span{
475 |     color: #0ef;
476 | }
477 | .portfolio-content{
478 |     display: flex;
479 |     /* justify-content: center;
480 |     align-items: center;
481 |     flex-wrap: wrap; */
482 |     grid-template-columns: repeat(auto-fit, minmax(359px,auto));
483 | }
484 | .row{
485 |     flex: 1 1 30rem;
486 |     padding: 3rem 2rem 4rem;
487 |     border-radius: 2rem;
488 |     position: relative;
489 |     overflow: hidden;
490 |     border-radius: 8px;
491 |     cursor: pointer;
492 |     align-items: center;
493 | }
494 | .row img{
495 |     width: 100%;
496 |     border-radius: 8px;
497 |     display: flex;
498 |     transition: transform 0.5s;
499 |     /* height: 300px; */
500 | 
501 | }
502 | .layer{
503 |     width: 100%;
504 |     height: 0;
505 |     background: linear-gradient(rgba(0,0,0,0.1),#0ef);
506 |     position: absolute;
507 |     border-radius: 8px;
508 |     left: 0;
509 |     bottom: 0;
510 |     overflow: hidden;
511 |     display: flex;
512 |     flex-direction: column;
513 |     align-items: center;
514 |     justify-content: center;
515 |     text-align: center;
516 |     padding: 0 40px;
517 |     transition: height 0.5s;
518 | }
519 | .layer h5{
520 |     color: #000;
521 |     font-size: 20px;
522 |     font-weight: 600;
523 |     margin-bottom: 15px;
524 | }
525 | .layer p{
526 |     color: #000;
527 |     font-size: 1rem;
528 |     line-height: 1.8;
529 | }
530 | .layer i{
531 |     color: #ff004f;
532 |     margin-top: 20px;
533 |     font-size: 20px;
534 |     background: #fff;
535 |     width: 60px;
536 |     height: 60px;
537 |     display: flex;
538 |     align-items: center;
539 |     justify-content: center;
540 |     border-radius: 50%;
541 | }
542 | .row:hover img{
543 |     transform: scale(1.1);
544 | }
545 | .row:hover .layer{
546 |     height: 100%;
547 | }
548 | .contact{
549 |     display: grid;
550 |     grid-template-columns: repeat(2, 1fr);
551 |     align-items: center;
552 |     gap: 3rem;
553 |     padding-left: 30px;
554 |     margin-top: 130px;
555 | }
556 | .contact-text h2{
557 |     font-size: 90px;
558 |     line-height: 1;
559 |     text-align: center;
560 | }
561 | .contact-text h2 span{
562 |     color: #0ef;
563 | }
564 | .contact-text h4{
565 |     margin: 15px 0;
566 |     color: rgb(228, 228, 228);
567 |     font-size: 20px;
568 |     font-weight: 600;
569 | }
570 | .contact-text p{
571 |     color: rgb(177, 177, 177);
572 |     font-size: 20px;
573 |     line-height: 30px;
574 |     margin-bottom: 2rem;
575 | }
576 | .contact-list{
577 |     margin-bottom: 3rem;
578 | }
579 | .contact-list li{
580 |     margin-bottom: 10px;
581 |     display: block;
582 | }
583 | .contact-list i{
584 |     display: inline-block;
585 |     color: #0ef;
586 |     font-size: 20px;
587 |     font-weight: 600;
588 |     transition: all .40s ease;
589 | }
590 | .contact-list li a:hover{
591 |     transform: scale(1.01) translateY(-5px);
592 |     color: #0ef;
593 | }
594 | .contact-icons i{
595 |     display: inline-flex;
596 |     justify-content: center;
597 |     align-items: center;
598 |     width: 40px;
599 |     height: 40px;
600 |     background: transparent;
601 |     border: 2px solid #0ef;
602 |     border-radius: 50%;
603 |     font-size: 20px;
604 |     color: #0ef;
605 |     text-decoration: none;
606 |     margin: 30px 15px 30px 0;
607 |     transition: .5s ease;
608 |     opacity: 0;
609 |     animation: slideLeft 1s ease forwards;
610 |     animation-delay: calc(.2s * var(--i));
611 | }
612 | .contact-icons i:hover{
613 |     background: #0ef;
614 |     color: #000;
615 |     box-shadow: 0  0 20px #0ef;
616 | }
617 | .contact-form form{
618 |     position: relative;
619 | }
620 | .contact-form form input,form textarea{
621 |     border: none;
622 |     outline: none;
623 |     width: 90%;
624 |     padding: 18px;
625 |     background: #555557;
626 |     color: #000;
627 |     font-size: 1rem;
628 |     font-weight: 600;
629 |     margin-bottom: 0.5rem;
630 |     border-radius: 0.5rem;
631 | }
632 | .contact-form textarea{
633 |     resize: none;
634 |     height: 220px;
635 | }
636 | .contact-form form .send{
637 |     display: inline-block;
638 |     padding: 14px 60px;
639 |     background: #0ef;
640 |     border-radius: 40px;
641 |     font-size: 18px;
642 |     color: #001b29;
643 |     letter-spacing: 1px;
644 |     text-decoration: none;
645 |     font-weight: 600;
646 |     opacity: 0;
647 |     animation: slideTop 1s ease forwards;
648 |     animation-delay: 2s;
649 |     box-shadow: 0 0 5px #0ef,
650 |     0 0 25px #0ef;
651 | }
652 | .contact-form form .send:hover{
653 |     background: #0ef;
654 |     color: #081b29;
655 |     box-shadow: 0 0 20px #0ef;
656 | }
657 | .last-text p{
658 |     width: 100%;
659 |     text-align: center;
660 |     padding: 25px 0;
661 |     background: rgb(7, 85, 91);
662 |     font-weight: 300;
663 |     margin-top: 70px;
664 | }
665 | .top{
666 |     position: fixed;
667 |     bottom: 2.1rem;
668 |     right: 2.1rem;
669 | }
670 | .top i{
671 |     color: #000;
672 |     background: #0ef;
673 |     font-size: 20px;
674 |     padding: 10px;
675 |     border-radius: 0.5rem;
676 | }
677 | 
678 | 
679 | 
680 | 
681 | 
682 | @keyframes slideRight{
683 |     0% { 
684 |         transform: translateX(-100px);
685 |         opacity: 0;
686 |     }
687 |     100% {
688 |         transform: translateX(0px);
689 |         opacity: 1;
690 |     }
691 | }
692 | 
693 | @keyframes slideLeft{
694 |     0% { 
695 |         transform: translateX(100px);
696 |         opacity: 0;
697 |     }
698 |     100% {
699 |         transform: translateX(0px);
700 |         opacity: 1;
701 |     }
702 | }
703 | 
704 | @keyframes slideTop{
705 |     0% { 
706 |         transform: translateY(100px);
707 |         opacity: 0;
708 |     }
709 |     100% {
710 |         transform: translateY(0px);
711 |         opacity: 1;
712 |     }
713 | }
714 | 
715 | @keyframes slideBottom{
716 |     0% { 
717 |         transform: translateY(-100px);
718 |         opacity: 0;
719 |     }
720 |     100% {
721 |         transform: translateY(0px);
722 |         opacity: 1;
723 |     }
724 | }


--------------------------------------------------------------------------------