How to Make a Resume for Freshers
Creating a resume as a fresher can be a bit challenging, but with the right approach and structure, you can showcase your skills, education, and potential to prospective employers. Here’s a step-by-step guide on how to make a resume for freshers, including an example:
1. Contact Information:
- Your full name
- Phone number (preferably a mobile number)
- Email address
- LinkedIn profile (if applicable)
- Location (city and state)
Example:
vbnetCopy code
John Doe
Phone: (123) 456-7890
Email: john.doe@email.com
LinkedIn: linkedin.com/in/johndoe
Location: New York, NY
2. Resume Objective or Summary (Optional):
- A brief statement summarizing your career goals and what you can bring to the job.
- Highlight key skills, interests, and qualifications.
Example:
vbnetCopy code
Objective: Recent graduate with a degree in Computer Science seeking an entry-level software developer position to leverage strong problem-solving skills, programming knowledge, and a passion for technology to contribute to a dynamic team.
3. Education:
- List your educational qualifications in reverse chronological order (most recent first).
- Include the institution’s name, degree earned, major, graduation date, and GPA (if it’s strong).
Example:
yamlCopy code
Education:
– Bachelor of Science in Computer Science
XYZ University, New York, NY
Graduated: May 2023
GPA: 3.7/4.0
4. Projects:
- Highlight any relevant projects you’ve completed during your education or as part of coursework.
- Include project names, a brief description, technologies used, and your role.
Example:
markdownCopy code
Projects:
1. E-commerce Website
– Developed a fully functional e-commerce website using HTML, CSS, and JavaScript.
– Implemented user authentication, product catalog, and shopping cart features.
– Role: Front-end Developer
5. Skills:
- List technical and soft skills that are relevant to the job you’re applying for.
- Categorize skills (e.g., programming languages, software, communication skills).
Example:
diffCopy code
Skills:
– Programming Languages: Python, Java, JavaScript
– Web Development: HTML, CSS, React
– Database Management: SQL
– Problem-Solving
– Team Collaboration
6. Internships or Work Experience (if applicable):
- Include any internships, part-time jobs, or volunteer work.
- Mention the organization, your role, dates of employment, and key responsibilities.
Example:
vbnetCopy code
Internships:
– Software Development Intern
ABC Tech Solutions, New York, NY
May 2022 – August 2022
– Assisted in developing and testing new software features.
– Collaborated with a team of developers to troubleshoot and resolve issues.
7. Certifications (if applicable):
- Include any relevant certifications, courses, or online training.
Example:
diffCopy code
Certifications:
– Certified Web Developer, Udemy
– AWS Certified Cloud Practitioner
8. Awards and Achievements (Optional):
- Mention any academic or extracurricular awards or recognitions.
Example:
vbnetCopy code
Awards:
– Dean’s List, XYZ University (Fall 2021)
9. Hobbies and Interests (Optional):
- Include personal interests that demonstrate qualities valued in the workplace.
Example:
diffCopy code
Hobbies:
– Coding personal projects
– Hiking and outdoor activities
10. References (Optional):
- It’s not necessary to include references on your resume. You can provide them separately if requested by the employer.
Example:
arduinoCopy code
References available upon request.
General Tips:
- Keep your resume concise, ideally one page.
- Use a clean and professional font (e.g., Arial, Calibri) with consistent formatting.
- Proofread for typos and grammatical errors.
- Tailor your resume for each job application by emphasizing relevant skills and experiences.
Remember that your resume is your first impression on a potential employer, so make it stand out by showcasing your strengths, skills, and enthusiasm for the job.
How to Make a Resume for Freshers
How to Make a Resume for Freshers (demo)
Section 1: HTML Structure – How to Make a Resume for Freshers
Start by creating a basic HTML structure for your webpage. In the <body> section, add a div element with a class name that you’ll use for styling and animation:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decodeit - Personal Website</title>
<!--
- favicon
-->
<link rel="shortcut icon" href="./assets/images/my-avatar.png" type="image/x-icon">
<!--
- custom css link
-->
<link rel="stylesheet" href="./assets/css/style.css">
<!--
- google font link
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<!--
- #MAIN
-->
<main>
<!--
- #SIDEBAR
-->
<aside class="sidebar" data-sidebar>
<div class="sidebar-info">
<figure class="avatar-box">
<img src="./assets/images/my-photo.png" alt=" decodeit" width="80">
</figure>
<div class="info-content">
<h1 class="name" title="decodeit">Decodeit</h1>
<p class="title">Software Engineer</p>
</div>
<button class="info_more-btn" data-sidebar-btn>
<span>Show Contacts</span>
<ion-icon name="chevron-down"></ion-icon>
</button>
</div>
<div class="sidebar-info_more">
<div class="separator"></div>
<ul class="contacts-list">
<li class="contact-item">
<div class="icon-box">
<ion-icon name="location-outline"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">Location</p>
<address>Bangalore, India</address>
</div>
</li>
<li class="contact-item">
<div class="icon-box">
<ion-icon name="mail-outline"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">Email</p>
<a href="mailto:example@gmail.com" class="contact-link">example@gmail.com</a>
</div>
</li>
<li class="contact-item">
<div class="icon-box">
<ion-icon name="logo-linkedin"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">LinkedIn</p>
<a href="https://linkedin.com/in/#" target="_blank" class="contact-link">Decodeit</a>
</div>
</li>
<li class="contact-item">
<div class="icon-box">
<ion-icon name="logo-github"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">GitHub</p>
<a href="https://github.com/#" target="_blank" class="contact-link">Decodeit</a>
</div>
</li>
</ul>
<div class="separator"></div>
<ul class="social-list">
<li class="social-item">
<a href="#" class="social-link">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
</ul>
</div>
</aside>
<!-- ----------------------------------------------------------------------------------------------- -->
<!--
- #main-content
-->
<div class="main-content">
<!--
- #NAVBAR
-->
<nav class="navbar">
<ul class="navbar-list">
<li class="navbar-item">
<button class="navbar-link" data-nav-link>About</button>
</li>
<li class="navbar-item">
<button class="navbar-link" data-nav-link>Projects</button>
</li>
<li class="navbar-item">
<button class="navbar-link" data-nav-link>Education</button>
</li>
<li class="navbar-item">
<button class="navbar-link" data-nav-link>More</button>
</li>
<li class="navbar-item">
<button class="navbar-link" data-nav-link>Contact</button>
</li>
</ul>
</nav>
<!-- ----------------------------------------------------------------------------------------------- -->
<!--
- #ABOUT
-->
<article class="about active" data-page="about">
<header>
<h2 class="h2 article-title" id="about">About me</h2>
</header>
<section class="about-text">
<p>
I'm a Software Engineer 👨‍💻 (backend) currently working at HYCU, Inc.
I enjoy learning and writing about Personal Finance and Software Engineering.
I strongly believe in "The process is important, regardless of the outcome" and
that exactly reflects my personality.
</p>
<div class="project-links">
<a href="https://drive.google.com/file/d/1X0YCo-Em2L6_VO73gLdT4q-AAG2A7-Kb/view?usp=sharing"
target="_blank" class="project-link">
Download Resume <ion-icon name="open-outline" class="open-icon"></ion-icon>
</a>
</div>
</section>
<!--
Experience
-->
<section class="timeline">
<div class="title-wrapper">
<div class="icon-box">
<ion-icon name="briefcase-outline"></ion-icon>
</div>
<h2 class="h2" id="experience">Experience</h2>
</div>
<ol class="timeline-list">
<li class="timeline-item">
<h3 class="h3 timeline-item-title">Software Development Engineer 1</h3>
<h4 class="h4 timeline-item-subtitle"><span>February 2023 — Present | @HYCU, Inc | Bangalore, India</span>
</h4>
<p class="timeline-text">
• Working in the data protection domain to develop plugin software that helps SaaS users recover their critical data at
different granularity levels. Currently developing plugins for IAM (Identity and Access Management)-based SaaS apps<br>
• Designing plugin software’s backend architecture and writing REST APIs<br>
<div class="experience-techs">
<b class="experience-tech">C#</b>
<b class="experience-tech">.NET</b>
<b class="experience-tech">REST API Design & Development</b>
<b class="experience-tech">GCP</b>
<b class="experience-tech">AWS</b>
<b class="experience-tech">Git</b>
<b class="experience-tech">JIRA</b>
<b class="experience-tech">Scrum Methodology</b>
</div>
</p>
</li>
<li class="timeline-item">
<h3 class="h4 timeline-item-title">Undergraduate Researcher [Software Engineering Internship]</h3>
<h4 class="h4 timeline-item-subtitle"><span>January 2022 — May 2022 | @Ahmedabad University | Ahmedabad,
India</span></h4>
<p class="timeline-text">
• Learned the fundamentals of Blockchain and Ethereum. Built ETH-Marketplace using Node.js,
Metamask & Ganache.<br>
• Prototyped the election and replication pattern of PBFT into RAFT to make it both byzantine &
crash fault-tolerant. <br>
• Implemented round-robin election and log replication between leader-follower nodes using RPC
and sockets. <br>
<div class="experience-techs">
<b class="experience-tech">Python</b>
<b class="experience-tech">NodeJS</b>
<b class="experience-tech">Distributed Systems</b>
</div>
</p>
</li>
<li class="timeline-item">
<h3 class="h3 timeline-item-title">Data Engineer Intern</h3>
<h4 class="h4 timeline-item-subtitle"><span>June 2021 — August 2021 | @Flash Tech Company | Remote </span>
</h4>
<p class="timeline-text">
• Worked with SAP HANA DBMS to fetch and prepare the data to increase customer engagement on the
Nesto app.<br>
• Increased 20M+ rows data processing speed by 10x using parallel processing tools like Modin
Pandas, Dask, and Ray.<br>
• Created ETL Pipeline to fetch the data from SAP, processing it in Jupyter notebook and loading
it into the Postgres DB.<br>
<div class="experience-techs">
<b class="experience-tech">Python</b>
<b class="experience-tech">PostgreSQL</b>
<b class="experience-tech">Linux</b>
</div>
</p>
</li>
</ol>
</section>
<!--
- skills
-->
<section class="skills">
<!-- <h3 class="h3 clients-title">Skills</h3> -->
<div class="my-skills-title-wrapper">
<div class="icon-box">
<ion-icon name="code-slash"></ion-icon>
</div>
<h2 class="h2" id="skills">Skills</h2>
</div>
<div class="my-skills-container">
<div class="skills-list-title">
<p>Programming Languages</p>
</div>
<div class="skills-list">
<span class="my-skill">Python</span>
<span class="my-skill">C#</span>
<span class="my-skill">Java</span>
<span class="my-skill">SQL</span>
<span class="my-skill">Javascript</span>
</div>
<div class="skills-list-title">
<p>Frameworks/Libraries</p>
</div>
<div class="skills-list">
<span class="my-skill">.NET</span>
<span class="my-skill">Django</span>
<span class="my-skill">NodeJS</span>
<span class="my-skill">Spring-boot</span>
</div>
<div class="skills-list-title">
<p>Databases</p>
</div>
<div class="skills-list">
<span class="my-skill">MySQL</span>
<span class="my-skill">PostgreSQL</span>
<span class="my-skill">MongoDB</span>
</div>
<div class="skills-list-title">
<p>Other Tools/Technologies</p>
</div>
<div class="skills-list">
<span class="my-skill">Git</span>
<span class="my-skill">GCP</span>
<span class="my-skill">AWS</span>
<span class="my-skill">Linux</span>
</div>
<div class="skills-list-title">
<p>Familiar With/Other Skills</p>
</div>
<div class="skills-list">
<span class="my-skill">REST API Design & Development</span>
<span class="my-skill">Docker</span>
<span class="my-skill">Distributed Systems</span>
<span class="my-skill">JIRA</span>
<span class="my-skill">Confluence</span>
<span class="my-skill">HTML</span>
<span class="my-skill">CSS</span>
</div>
</div>
</section>
</article>
<!-- ----------------------------------------------------------------------------------------------- -->
<!--
- #PORTFOLIO
-->
<article class="projects" data-page="projects">
<header>
<h2 class="h2 article-title">Projects</h2>
</header>
<!--
Key Projects
-->
<section class="timeline">
<div class="title-wrapper">
<div class="icon-box">
<ion-icon name="code-slash"></ion-icon>
</div>
<h2 class="h2" id="key-projects">Key Projects</h2>
</div>
<ol class="timeline-list">
<!-- project-1 -->
<li class="timeline-item">
<h3 class="h3 timeline-item-title">SoundSync — Song Streaming Platform</h3>
<h4 class="h4 timeline-item-subtitle"><span>Course Project: Cloud Computing | @Ahmedabad University | Team
of 4</span></h4>
<p class="timeline-text">
• Implemented song upload, search and streaming services in Java using framework-less
multi-threaded HTTP Server.<br>
• For high availability of data, created multiple mongodb shard clusters inside LXC containers to
store song metadata.<br>
• Used Hadoop Distributed File System for song file storage. Deployed all services on XCP-ng's
bare-metal VM setup.<br>
<div class="experience-techs">
<b class="experience-tech">Java</b>
<b class="experience-tech">MongoDB</b>
<b class="experience-tech">Hadoop DFS</b>
<b class="experience-tech">LXC Containers</b>
<b class="experience-tech">Xen-Server bare-metal setup</b>
</div>
<div class="project-links">
<a href="https://github.com/meetakbari/SoundSync" target="_blank" class="project-link">
Source Code <ion-icon name="open-outline" class="open-icon"></ion-icon>
</a>
</div>
</p>
</li>
<!-- project-2 -->
<li class="timeline-item">
<h3 class="h3 timeline-item-title">Peer Learning System</h3>
<h4 class="h4 timeline-item-subtitle"><span>Course Project: Software Engineering | @Ahmedabad University |
Team of 4</span></h4>
<p class="timeline-text">
• Designed and developed a web solution for college geeks in Django for students to
learn from their peers's work while managing course activities and assignments at one place.<br>
• Learned how to design Entity Relationship Diagrams, Data Flow Diagrams and Sequence Diagrams
along
with how to prepare documentation of the project.<br>
• Followed Scrum Methodology during entire Software Development Life Cycle.<br>
<div class="experience-techs">
<b class="experience-tech">Django</b>
<b class="experience-tech">SQLite</b>
<b class="experience-tech">REST APIs</b>
<b class="experience-tech">Javascript</b>
</div>
<div class="project-links">
<a href="https://github.com/meetakbari/PLS" target="_blank" class="project-link">
Source Code <ion-icon name="open-outline" class="open-icon"></ion-icon>
</a>
</div>
</p>
</li>
<!-- project-3 -->
<li class="timeline-item">
<h3 class="h3 timeline-item-title">Yup Chat — A Chat App</h3>
<h4 class="h4 timeline-item-subtitle"><span>Personal Project: Full Stack Development | Solo</span></h4>
<p class="timeline-text">
• Developed an app with features of multiple rooms creation, emoji messages, and scrolling down
for recent messages.<br>
• Implemented WebSockets using Socket.IO to maintain a two-way interactive communication session
b/w two users.<br>
• Get to learn about CORS mechanism. Used NodeJS for backend and ReactJS for frontend.<br>
<div class="experience-techs">
<b class="experience-tech">NodeJS</b>
<b class="experience-tech">ReactJS</b>
<b class="experience-tech">WebSockets</b>
<b class="experience-tech">CORS</b>
</div>
<div class="project-links">
<a href="https://yupchat.vercel.app" target="_blank" class="project-link">
Live <ion-icon name="open-outline" class="open-icon"></ion-icon>
</a>
<a href="https://github.com/meetakbari/yup-chat" target="_blank" class="project-link">
Source Code <ion-icon name="open-outline" class="open-icon"></ion-icon>
</a>
</div>
</p>
</li>
</ol>
</section>
<section class="projects">
<!-- this part can be taken be added for other projects which doesn't require descriptions,
as provided by the author -->
</section>
</article>
<!-- ----------------------------------------------------------------------------------------------- -->
<!--
- #EDUCATION
-->
<article class="education" data-page="education">
<header>
<h2 class="h2 article-title">Education</h2>
</header>
<!-- Education
-->
<section class="timeline">
<div class="title-wrapper">
<div class="icon-box">
<ion-icon name="school"></ion-icon>
</div>
<h2 class="h2" id="education">Undergraduation</h2>
</div>
<ol class="timeline-list">
<li class="timeline-item">
<h3 class="h3 timeline-item-title">Ahmedabad University, India</h3>
<h4 class="h4 timeline-item-subtitle">Bachelor of Technology, Information and Communication Technology
</h4>
<span>2018 — 2022</span>
<p class="timeline-text">
<b>CGPA:</b> 3.31/4.00 <br>
<b>Activities</b> <br>
Ingenium'21 Hackathon Organiser & Techfest Core Committee Member •
Hult Prize Runners-up •
AIESEC in Ahmedabad Team Leader
<br>
<b>Societies </b> <br>
Programming, Entrepreneurship & Management Club at Ahmedabad University •
Ahmedabad University Students' branch of IEEE
</p>
</li>
</ol>
</section>
<!-- courses I studied at AU -->
<section class="courses">
<!-- <h3 class="h3 clients-title">Skills</h3> -->
<div class="my-skills-title-wrapper">
<div class="icon-box">
<ion-icon name="layers-outline"></ion-icon>
</div>
<h2 class="h2" id="courses">Undergraduate Courses</h2>
</div>
<div class="my-courses-container">
<span class="my-course">Data Structures & Algorithms</span>
<span class="my-course">Database Management Systems</span>
<span class="my-course">Operating Systems</span>
<span class="my-course">Software Engineering</span>
<span class="my-course">Computer Networks</span>
<span class="my-course">Cloud Computing</span>
<span class="my-course">Internet of Things</span>
<span class="my-course">Object-Oriented Programming</span>
<span class="my-course">Computer Organization</span>
</div>
</section>
</article>
<!-- ----------------------------------------------------------------------------------------------- -->
<!--
- #MORE
-->
<article class="more" data-page="more">
<header>
<h2 class="h2 article-title">More About My Journey</h2>
</header>
<!-- Volunteer Experience
-->
<section class="timeline">
<div class="title-wrapper">
<div class="icon-box">
<ion-icon name="people"></ion-icon>
</div>
<h2 class="h2" id="experience">Volunteer Experience</h2>
</div>
<ol class="timeline-list">
<li class="timeline-item">
<h3 class="h3 timeline-item-title">Hackathon Organiser</h3>
<h4 class="h4 timeline-item-subtitle">
<div class="volunteer-exp-subtitles">
<p class="volunteer-exp-subtitle">February 2021 — March 2021 |</p>
<a href="https://ingenious-hackathon-2.devfolio.co/" target="_blank"
class="volunteer-exp-subtitle volunteer-hyperlink">
Ingenious Hackathon 2.0 <ion-icon name="open-outline" class="open-icon"></ion-icon>
</a>
</div>
</h4>
<p class="timeline-text">
As a lead organizer, earnestly involved in bringing sponsors, speakers and judges for the
hackathon. With a team of 3,
managed 120+ participants smoothly for 48 hours of the hackathon on Discord.<br>
<div class="experience-techs">
<b class="experience-tech">Event Planning</b>
<b class="experience-tech">Team Management</b>
<b class="experience-tech">Event Management</b>
</div>
</p>
</li>
<li class="timeline-item">
<h3 class="h3 timeline-item-title">Core Committee Member</h3>
<h4 class="h4 timeline-item-subtitle">
<div class="volunteer-exp-subtitles">
<p class="volunteer-exp-subtitle">March 2021 — April 2021 |</p>
<a href="https://techingenium.org/" target="_blank"
class="volunteer-exp-subtitle volunteer-hyperlink">
Ingenium <ion-icon name="open-outline" class="open-icon"></ion-icon>
</a>
</div>
</h4>
<p class="timeline-text">
Planned, coordinated and managed different Events as a Technical Events Team Coordinator for
Ingenium'21 the
annual Techfest of Ahmedabad University held on 1-4 April'21.<br>
<div class="experience-techs">
<b class="experience-tech">Event Planning</b>
<b class="experience-tech">Event Coordination</b>
</div>
</p>
</li>
<li class="timeline-item">
<h3 class="h3 timeline-item-title">Team Leader</h3>
<h4 class="h4 timeline-item-subtitle">
<div class="volunteer-exp-subtitles">
<p class="volunteer-exp-subtitle">February 2021 — July 2021 |</p>
<a href="https://aiesec.org/" target="_blank" class="volunteer-exp-subtitle volunteer-hyperlink">
AIESEC @Ahmedabad <ion-icon name="open-outline" class="open-icon"></ion-icon>
</a>
</div>
</h4>
<p class="timeline-text">
Volunteered with the Business Development department, headed a team of 3, and gained useful leadership
& team management experience. Organized an SDGs-based Virtual Business Idea Hackathon with the
participation of 35+
participants.<br>
<div class="experience-techs">
<b class="experience-tech">Leadership</b>
<b class="experience-tech">Event Planning</b>
<b class="experience-tech">Event Management</b>
</div>
</p>
</li>
</ol>
</section>
<!-- Achievements -->
<section class="achievements">
<div class="my-skills-title-wrapper">
<div class="icon-box">
<ion-icon name="rocket"></ion-icon>
</div>
<h2 class="h2" id="courses">Achievements</h2>
</div>
<div class="achievements-list">
<p class="achievement">
Awarded 100% tuition fee waiver scholarship for 4 years of B.Tech at Ahmedabad University
</p>
<p class="achievement">
Secured 6th position in the University with the team in IEEEXtreme 13.0 - 24 hour programming competition
</p>
</div>
</section>
<!-- Certifications -->
<section class="certifications">
<div class="my-skills-title-wrapper">
<div class="icon-box">
<ion-icon name="ribbon"></ion-icon>
</div>
<h2 class="h2" id="courses">Certifications</h2>
</div>
<div class="certifications-links">
<a href="https://drive.google.com/file/d/1ktx8V5dGS0U5RG6M8Z4YrBlcoMHmSbdR/view" target="_blank"
class="certifications-link">
Git & Github Master Course (2021) by Coding Minutes <ion-icon name="open-outline"
class="open-icon"></ion-icon>
</a>
<a href="https://drive.google.com/file/d/1GGPBvSsM0VZLUNT-hpedze8Bupnv2Hv4/view" target="_blank"
class="certifications-link">
HULT PRIZE (Organized by United Nations) 2019-20 Runners Up at University<ion-icon name="open-outline"
class="open-icon"></ion-icon>
</a>
<a href="https://drive.google.com/file/d/1G6d5F48-hwj-RShTX-kw09QkUwxNC_3V/view" target="_blank"
class="certifications-link">
Alumni of FLY (Finding the Leader in You) at Competitiveness Mindset Institute<ion-icon
name="open-outline" class="open-icon"></ion-icon>
</a>
</div>
</section>
</article>
<!-- ----------------------------------------------------------------------------------------------- -->
<!--
- #CONTACT
-->
<article class="contact" data-page="contact">
<header>
<h2 class="h2 article-title">Contact</h2>
</header>
<!-- <section class="mapbox" data-mapbox>
<figure>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d199666.5651251294!2d-121.58334177520186!3d38.56165006739519!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x809ac672b28397f9%3A0x921f6aaa74197fdb!2sSacramento%2C%20CA%2C%20USA!5e0!3m2!1sen!2sbd!4v1647608789441!5m2!1sen!2sbd"
width="400" height="300" loading="lazy"></iframe>
</figure>
</section> -->
<section class="contact-form">
<h3 class="h3 form-title">Knock my door for tech and finance discussion anytime 🙃</h3>
<form onsubmit="sendEmail(); reset(); return false;" class="form" data-form>
<div class="input-wrapper">
<input type="text" id="fullName" class="form-input" placeholder="Full name" required
data-form-input>
<input type="email" id="emailId" class="form-input" placeholder="Email address" required
data-form-input>
</div>
<textarea id="message" class="form-input" placeholder="Your Message" required
data-form-input></textarea>
<button class="form-btn" type="submit" disabled data-form-btn>
<ion-icon name="paper-plane"></ion-icon>
<span>Send Message</span>
</button>
</form>
</section>
<section class="credits">
<div class="credits-text">
<p class="credits-text-color">Thanks & ♥ to</p>
<a class="credits-link-color" href="https://github.com/codewithsadee/vcard-personal-portfolio"
target="_blank">Sadee</a>
<p class="credits-text-color">for the design!</p>
</div>
<div class="credits-text">
<p class="credits-text-color">Revised By</p>
<a class="credits-link-color" href="https://github.com/meetakbari" target="_blank">Meet Akbari</a>
</div>
</section>
</article>
</div>
</main>
<!--
- custom js link
-->
<script src="./assets/js/script.js"></script>
<!--
- ionicon link
-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
Section 2: Styling with CSS
Create a separate file named styles.css to style your spinner. Add the following CSS code to create a simple circular spinner
CSS Code:
--------------------------------*/
:root {
--bg-gradient-onyx: linear-gradient(
to bottom right,
hsl(240, 1%, 25%) 3%,
hsl(0, 0%, 19%) 97%
);
--bg-gradient-jet: linear-gradient(
to bottom right,
hsla(240, 1%, 18%, 0.251) 0%,
hsla(240, 2%, 11%, 0) 100%
), hsl(240, 2%, 13%);
--bg-gradient-yellow-1: linear-gradient(
to bottom right,
hsl(45, 100%, 71%) 0%,
hsla(36, 100%, 69%, 0) 50%
);
--bg-gradient-yellow-2: linear-gradient(
135deg,
hsla(45, 100%, 71%, 0.251) 0%,
hsla(35, 100%, 68%, 0) 59.86%
), hsl(240, 2%, 13%);
--border-gradient-onyx: linear-gradient(
to bottom right,
hsl(0, 0%, 25%) 0%,
hsla(0, 0%, 25%, 0) 50%
);
--text-gradient-yellow: linear-gradient(
to right,
hsl(45, 100%, 72%),
hsl(35, 100%, 68%)
);
/* solid */
--jet: hsl(0, 0%, 22%);
--onyx: hsl(240, 1%, 17%);
--eerie-black-1: hsl(240, 2%, 13%);
--eerie-black-2: hsl(240, 2%, 12%);
--smoky-black: hsl(0, 0%, 7%);
--white-1: hsl(0, 0%, 100%);
--white-2: hsl(0, 0%, 98%);
--orange-yellow-crayola: hsl(45, 100%, 72%);
--vegas-gold: hsl(45, 54%, 58%);
--light-gray: hsl(0, 0%, 84%);
--light-gray-70: hsla(0, 0%, 84%, 0.7);
--bittersweet-shimmer: hsl(0, 43%, 51%);
/**
* typography
*/
/* font-family */
--ff-poppins: 'Poppins', sans-serif;
/* font-size */
--fs-1: 24px;
--fs-2: 22px;
--fs-3: 20px;
--fs-4: 18px;
--fs-5: 16px;
--fs-6: 14px;
--fs-7: 12px;
--fs-8: 10px;
/* font-weight */
--fw-300: 300;
--fw-400: 400;
--fw-500: 500;
--fw-600: 600;
/**
* shadow
*/
--shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
--shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
--shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
--shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
--shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);
/**
* transition
*/
--transition-1: 0.25s ease;
--transition-2: 0.5s ease-in-out;
}
/*-----------------------------------*\
#RESET
\*-----------------------------------*/
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a { text-decoration: none; }
li { list-style: none; }
img, ion-icon, a, button, time, span { display: block; }
button {
font: inherit;
background: none;
border: none;
text-align: left;
cursor: pointer;
}
input, textarea {
display: block;
width: 100%;
background: none;
font: inherit;
}
::selection {
background: var(--orange-yellow-crayola);
color: var(--smoky-black);
}
:focus { outline-color: var(--orange-yellow-crayola); }
html { font-family: var(--ff-poppins); }
body { background: var(--smoky-black); }
/*-----------------------------------*\
#REUSED STYLE
\*-----------------------------------*/
.sidebar,
article {
background: var(--eerie-black-2);
border: 1px solid var(--jet);
border-radius: 20px;
padding: 15px;
box-shadow: var(--shadow-1);
z-index: 1;
}
.separator {
width: 100%;
height: 1px;
background: var(--jet);
margin: 16px 0;
}
.icon-box {
position: relative;
background: var(--border-gradient-onyx);
width: 30px;
height: 30px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: var(--orange-yellow-crayola);
box-shadow: var(--shadow-1);
z-index: 1;
}
.icon-box::before {
content: "";
position: absolute;
inset: 1px;
background: var(--eerie-black-1);
border-radius: inherit;
z-index: -1;
}
.icon-box ion-icon { --ionicon-stroke-width: 35px; }
article { display: none; }
article.active {
display: block;
animation: fade 0.5s ease backwards;
}
@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.experience-techs {
margin: 10px 0px 0px 0px;
display: flex;
flex-direction: row;
flex-flow: wrap;
}
.experience-tech {
color: var(--orange-yellow-crayola);
padding: 3px 10px;
border: 1px solid var(--white-1);
border-radius: 5px;
margin: 5px 10px 5px 0px;
font-size: var(--fs-7);
}
.h2,
.h3,
.h4,
.h5 {
color: var(--white-2);
text-transform: capitalize;
}
.h2 { font-size: var(--fs-1); }
.h3 { font-size: var(--fs-2); }
.h4 { font-size: var(--fs-4); }
.h5 {
font-size: var(--fs-7);
font-weight: var(--fw-500);
}
.article-title {
position: relative;
padding-bottom: 7px;
padding-top: 40px;
}
.article-title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 3px;
background: var(--text-gradient-yellow);
border-radius: 3px;
}
.has-scrollbar::-webkit-scrollbar {
width: 5px; /* for vertical scrollbar */
height: 5px; /* for horizontal scrollbar */
}
.has-scrollbar::-webkit-scrollbar-track {
background: var(--onyx);
border-radius: 5px;
}
.has-scrollbar::-webkit-scrollbar-thumb {
background: var(--orange-yellow-crayola);
border-radius: 5px;
}
.has-scrollbar::-webkit-scrollbar-button { width: 20px; }
.content-card {
position: relative;
background: var(--border-gradient-onyx);
padding: 15px;
padding-top: 45px;
border-radius: 14px;
box-shadow: var(--shadow-2);
cursor: pointer;
z-index: 1;
}
.content-card::before {
content: "";
position: absolute;
inset: 1px;
background: var(--bg-gradient-jet);
border-radius: inherit;
z-index: -1;
}
/*-----------------------------------*\
#MAIN
\*-----------------------------------*/
main {
margin: 15px 12px;
margin-bottom: 75px;
min-width: 259px;
}
/*-----------------------------------*\
#SIDEBAR
\*-----------------------------------*/
.sidebar {
margin-bottom: 15px;
max-height: 112px;
overflow: hidden;
transition: var(--transition-2);
}
.sidebar.active { max-height: 405px; }
.sidebar-info {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 15px;
}
.avatar-box {
background: var(--bg-gradient-onyx);
border-radius: 20px;
}
.info-content .name {
color: var(--white-2);
font-size: var(--fs-3);
font-weight: var(--fw-500);
letter-spacing: -0.25px;
margin-bottom: 10px;
}
.info-content .title {
color: var(--white-1);
background: var(--onyx);
font-size: var(--fs-5);
font-weight: var(--fw-300);
width: max-content;
padding: 3px 12px;
border-radius: 8px;
}
.info_more-btn {
position: absolute;
top: -15px;
right: -15px;
border-radius: 0 15px;
font-size: 13px;
color: var(--orange-yellow-crayola);
background: var(--border-gradient-onyx);
padding: 10px;
box-shadow: var(--shadow-2);
transition: var(--transition-1);
z-index: 1;
}
.info_more-btn::before {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
background: var(--bg-gradient-jet);
transition: var(--transition-1);
z-index: -1;
}
.info_more-btn:hover,
.info_more-btn:focus { background: var(--bg-gradient-yellow-1); }
.info_more-btn:hover::before,
.info_more-btn:focus::before { background: var(--bg-gradient-yellow-2); }
.info_more-btn span { display: none; }
.sidebar-info_more {
opacity: 0;
visibility: hidden;
transition: var(--transition-2);
}
.sidebar.active .sidebar-info_more {
opacity: 1;
visibility: visible;
}
.contacts-list {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.contact-item {
min-width: 100%;
display: flex;
align-items: center;
gap: 16px;
}
.contact-info {
max-width: calc(100% - 46px);
width: calc(100% - 46px);
}
.contact-title {
color: var(--light-gray-70);
font-size: var(--fs-8);
text-transform: uppercase;
margin-bottom: 2px;
}
.contact-info :is(.contact-link, time, address) {
color: var(--white-2);
font-size: var(--fs-7);
}
.contact-info address { font-style: normal; }
.social-list {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 15px;
padding-bottom: 4px;
padding-left: 7px;
}
.social-item .social-link {
color: var(--light-gray-70);
font-size: 18px;
}
.social-item .social-link:hover { color: var(--light-gray); }
/*-----------------------------------*\
#NAVBAR
\*-----------------------------------*/
.navbar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: hsla(240, 1%, 17%, 0.75);
backdrop-filter: blur(10px);
border: 1px solid var(--jet);
border-radius: 12px 12px 0 0;
box-shadow: var(--shadow-2);
z-index: 5;
}
.navbar-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0 10px;
}
.navbar-link {
color: var(--light-gray);
font-size: var(--fs-5);
padding: 20px 7px;
transition: color var(--transition-1);
}
.navbar-link:hover,
.navbar-link:focus { color: var(--light-gray-70); }
.navbar-link.active { color: var(--orange-yellow-crayola); }
/*-----------------------------------*\
#ABOUT
\*-----------------------------------*/
.about .article-title { margin-bottom: 15px; }
.about-text {
color: var(--light-gray);
font-size: var(--fs-4);
font-weight: var(--fw-500);
line-height: 2.0;
}
.about-text p { margin-bottom: 15px; }
/**
* #service
*/
.service { margin-bottom: 35px; }
.service-title { margin-bottom: 20px; }
.service-list {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.service-item {
position: relative;
background: var(--border-gradient-onyx);
padding: 20px;
border-radius: 14px;
box-shadow: var(--shadow-2);
z-index: 1;
}
.service-item::before {
content: "";
position: absolute;
inset: 1px;
background: var(--bg-gradient-jet);
border-radius: inherit;
z-index: -1;
}
.service-icon-box { margin-bottom: 10px; }
.service-icon-box img { margin: auto; }
.service-content-box { text-align: center; }
.service-item-title { margin-bottom: 7px; }
.service-item-text {
color: var(--light-gray);
font-size: var(--fs-6);
font-weight: var(--fw-3);
line-height: 1.6;
}
/**
* #testimonials
*/
.testimonials { margin-bottom: 30px; }
.testimonials-title { margin-bottom: 20px; }
.testimonials-list {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 15px;
margin: 0 -15px;
padding: 25px 15px;
padding-bottom: 35px;
overflow-x: auto;
scroll-behavior: smooth;
overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
}
.testimonials-item {
min-width: 100%;
scroll-snap-align: center;
}
.testimonials-avatar-box {
position: absolute;
top: 0;
left: 0;
transform: translate(15px, -25px);
background: var(--bg-gradient-onyx);
border-radius: 14px;
box-shadow: var(--shadow-1);
}
.testimonials-item-title { margin-bottom: 7px; }
.testimonials-text {
color: var(--light-gray);
font-size: var(--fs-6);
font-weight: var(--fw-300);
line-height: 1.6;
display: -webkit-box;
line-clamp: 4;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/**
* #testimonials-modal
*/
.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
overscroll-behavior: contain;
z-index: 20;
pointer-events: none;
visibility: hidden;
}
.modal-container::-webkit-scrollbar { display: none; }
.modal-container.active {
pointer-events: all;
visibility: visible;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: hsl(0, 0%, 5%);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 1;
transition: var(--transition-1);
}
.overlay.active {
opacity: 0.8;
visibility: visible;
pointer-events: all;
}
.testimonials-modal {
background: var(--eerie-black-2);
position: relative;
padding: 15px;
margin: 15px 12px;
border: 1px solid var(--jet);
border-radius: 14px;
box-shadow: var(--shadow-5);
transform: scale(1.2);
opacity: 0;
transition: var(--transition-1);
z-index: 2;
}
.modal-container.active .testimonials-modal {
transform: scale(1);
opacity: 1;
}
.modal-close-btn {
position: absolute;
top: 15px;
right: 15px;
background: var(--onyx);
border-radius: 8px;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
color: var(--white-2);
font-size: 18px;
opacity: 0.7;
}
.modal-close-btn:hover,
.modal-close-btn:focus { opacity: 1; }
.modal-close-btn ion-icon { --ionicon-stroke-width: 50px; }
.modal-avatar-box {
background: var(--bg-gradient-onyx);
width: max-content;
border-radius: 14px;
margin-bottom: 15px;
box-shadow: var(--shadow-2);
}
.modal-img-wrapper > img { display: none; }
.modal-title { margin-bottom: 4px; }
.modal-content time {
font-size: var(--fs-6);
color: var(--light-gray-70);
font-weight: var(--fw-300);
margin-bottom: 10px;
}
.modal-content p {
color: var(--light-gray);
font-size: var(--fs-6);
font-weight: var(--fw-300);
line-height: 1.6;
}
/**
* #clients
*/
.clients { margin-bottom: 15px; }
.clients-list {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 15px;
margin: 0 -15px;
padding: 25px;
padding-bottom: 25px;
overflow-x: auto;
scroll-behavior: smooth;
overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
scroll-padding-inline: 25px;
}
.clients-item {
min-width: 50%;
scroll-snap-align: start;
}
.clients-item img {
width: 100%;
filter: grayscale(1);
transition: var(--transition-1);
}
.clients-item img:hover { filter: grayscale(0); }
/*-----------------------------------*\
#RESUME
\*-----------------------------------*/
.article-title { margin-bottom: 30px; }
/**
* education and experience
*/
.timeline { margin-bottom: 40px; }
.timeline .title-wrapper {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.timeline-list {
font-size: var(--fs-6);
margin-left: 45px;
}
.timeline-item { position: relative; }
.timeline-item:not(:last-child) { margin-bottom: 20px; }
.timeline-item-title {
font-size: var(--fs-4);
line-height: 1.3;
margin-bottom: 10px;
}
.timeline-item-subtitle {
color: var(--vegas-gold);
font-size: var(--fs-5);
line-height: 1.3;
margin-bottom: 10px;
}
.timeline-list span {
color: var(--vegas-gold);
font-weight: var(--fw-400);
line-height: 1.6;
}
.timeline-item:not(:last-child)::before {
content: "";
position: absolute;
top: -25px;
left: -30px;
width: 1px;
height: calc(100% + 50px);
background: var(--jet);
}
.timeline-item::after {
content: "";
position: absolute;
top: 5px;
left: -33px;
height: 6px;
width: 6px;
background: var(--text-gradient-yellow);
border-radius: 50%;
box-shadow: 0 0 0 4px var(--jet);
}
.timeline-text {
color: var(--white-2);
font-weight: var(--fw-400);
line-height: 1.9;
font-size: var(--fs-6);
}
/**
* skills
*/
/* .skills-title { margin-bottom: 20px; }
.skills-list { padding: 20px; }
.skills-item:not(:last-child) { margin-bottom: 15px; }
.skill .title-wrapper {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 8px;
}
.skill .title-wrapper data {
color: var(--light-gray);
font-size: var(--fs-7);
font-weight: var(--fw-300);
}
.skill-progress-bg {
background: var(--jet);
width: 100%;
height: 8px;
border-radius: 10px;
}
.skill-progress-fill {
background: var(--text-gradient-yellow);
height: 100%;
border-radius: inherit;
} */
.my-skills-container {
margin-top: -20px;
display: flex;
/* justify-content: center; */
align-items: left;
flex-direction: column;
}
.skills-list-title {
color: var(--white-1);
margin-left: 60px;
font-size: var(--fs-4);
font-weight: var(--fw-500);
}
.skills-list {
display: flex;
/* border: 1px solid salmon; */
margin: 5px 0px 15px 60px;
flex-direction: row;
flex-flow: wrap;
}
.my-skill {
color: var(--orange-yellow-crayola);
padding: 3px 10px;
/* border: 1px solid var(--white-1); */
border-radius: 5px;
margin: 5px 10px 5px 0px;
background-color: var(--orange-yellow-crayola);
color: black;
font-weight: var(--fw-500);
font-size: var(--fs-5);
}
.my-skills-title-wrapper {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
flex-direction: row;
}
/*-----------------------------------*\
#PORTFOLIO
\*-----------------------------------*/
.filter-list { display: none; }
.filter-select-box {
position: relative;
margin-bottom: 25px;
}
.filter-select {
background: var(--eerie-black-2);
color: var(--light-gray);
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 12px 16px;
border: 1px solid var(--jet);
border-radius: 14px;
font-size: var(--fs-6);
font-weight: var(--fw-300);
}
.filter-select.active .select-icon { transform: rotate(0.5turn); }
.select-list {
background: var(--eerie-black-2);
position: absolute;
top: calc(100% + 6px);
width: 100%;
padding: 6px;
border: 1px solid var(--jet);
border-radius: 14px;
z-index: 2;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: 0.15s ease-in-out;
}
.filter-select.active + .select-list {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.select-item button {
background: var(--eerie-black-2);
color: var(--light-gray);
font-size: var(--fs-6);
font-weight: var(--fw-300);
text-transform: capitalize;
width: 100%;
padding: 8px 10px;
border-radius: 8px;
}
.select-item button:hover { --eerie-black-2: hsl(240, 2%, 20%); }
.project-list {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
margin-bottom: 10px;
}
.project-item { display: none; }
.project-item.active {
display: block;
animation: scaleUp 0.25s ease forwards;
}
@keyframes scaleUp {
0% { transform: scale(0.5); }
100% { transform: scale(1); }
}
.project-item > a { width: 100%; }
.project-img {
position: relative;
width: 100%;
height: 200px;
border-radius: 16px;
overflow: hidden;
margin-bottom: 15px;
}
.project-img::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 1;
transition: var(--transition-1);
}
.project-item > a:hover .project-img::before { background: hsla(0, 0%, 0%, 0.5); }
.project-item-icon-box {
--scale: 0.8;
background: var(--jet);
color: var(--orange-yellow-crayola);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(var(--scale));
font-size: 20px;
padding: 18px;
border-radius: 12px;
opacity: 0;
z-index: 1;
transition: var(--transition-1);
}
.project-item > a:hover .project-item-icon-box {
--scale: 1;
opacity: 1;
}
.project-item-icon-box ion-icon { --ionicon-stroke-width: 50px; }
.project-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-1);
}
.project-item > a:hover img { transform: scale(1.1); }
.project-title,
.project-category { margin-left: 10px; }
.project-title {
color: var(--white-2);
font-size: var(--fs-5);
font-weight: var(--fw-400);
text-transform: capitalize;
line-height: 1.3;
}
.project-category {
color: var(--light-gray-70);
font-size: var(--fs-6);
font-weight: var(--fw-300);
}
.project-links {
margin: 0px 0px 0px 0px;
display: flex;
flex-direction: row;
flex-flow: wrap;
}
.project-link {
font-size: var(--fs-5);
color: var(--orange-yellow-crayola);
padding: 3px 10px 3px 2px;
/* border: 1px solid var(--white-1); */
border-radius: 5px;
margin: 5px 10px 5px 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-decoration: underline;
}
.project-link .open-icon {
padding-left: 4px;
font-size: var(--fs-5);
}
/* EDUCATION > UnderGraduate Courses */
.my-courses-container {
margin-top: -10px;
margin-left: 60px;
display: flex;
justify-content: left;
/* align-items: center; */
flex-direction: row;
flex-flow: wrap;
}
.my-course {
color: var(--orange-yellow-crayola);
padding: 3px 10px;
border-radius: 5px;
margin: 5px 10px 5px 0px;
background-color: var(--orange-yellow-crayola);
color: black;
font-weight: var(--fw-500);
font-size: var(--fs-5);
width: fit-content;
}
/*-----------------------------------*\
#MORE (Volunteer Exp., Certificates, ...)
\*-----------------------------------*/
.volunteer-exp-subtitles {
margin: -5px 0px 0px 0px;
display: flex;
flex-direction: row;
flex-flow: wrap;
align-items: center;
}
.volunteer-exp-subtitle {
color: var(--vegas-gold);
font-size: var(--fs-6);
padding: 3px 10px 3px 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-weight: lighter;
}
.volunteer-exp-subtitles .volunteer-hyperlink {
text-decoration: underline;
}
.volunteer-exp-subtitle .open-icon {
padding-left: 3px;
font-size: var(--fs-5);
}
.achievements-list {
margin-top: -15px;
margin-bottom: 30px;
display: flex;
flex-direction: column;
align-items: left;
flex-flow: wrap;
}
.achievement {
font-size: var(--fs-6);
color: var(--white-1);
padding: 3px 10px;
border: 1px solid var(--white-1);
border-style: dotted;
border-radius: 5px;
margin: 5px 10px 5px 60px;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.achievement:hover {
background: var(--orange-yellow-crayola);
color: var(--eerie-black-1);
cursor: grab;
}
.certifications-links {
margin-top: -15px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: left;
flex-flow: wrap;
}
.certifications-link {
font-size: var(--fs-5);
color: var(--white-1);
/* background-color: white; */
padding: 3px 10px 3px 2px;
/* border: 1px solid var(--white-1); */
border-radius: 5px;
margin: 5px 10px 5px 60px;
display: flex;
flex-direction: row;
/* justify-content: center; */
align-items: center;
}
.certifications-link:hover {
color: var(--vegas-gold);
text-decoration: underline;
}
.certifications-links .open-icon {
padding-left: 5px;
font-size: var(--fs-5);
}
/*-----------------------------------*\
#CONTACT
\*-----------------------------------*/
.mapbox {
position: relative;
height: 250px;
width: 100%;
border-radius: 16px;
margin-bottom: 30px;
border: 1px solid var(--jet);
overflow: hidden;
}
.mapbox figure { height: 100%; }
.mapbox iframe {
width: 100%;
height: 100%;
border: none;
filter: grayscale(1) invert(1);
}
.contact-form { margin-bottom: 10px; }
.form-title {
margin-bottom: 20px;
font-size: var(--fs-4);
}
.input-wrapper {
display: grid;
grid-template-columns: 1fr;
gap: 25px;
margin-bottom: 25px;
}
.form-input {
color: var(--white-2);
font-size: var(--fs-6);
font-weight: var(--fw-400);
padding: 13px 20px;
border: 1px solid var(--jet);
border-radius: 14px;
outline: none;
}
.form-input::placeholder { font-weight: var(--fw-500); }
.form-input:focus { border-color: var(--orange-yellow-crayola); }
textarea.form-input {
min-height: 100px;
height: 120px;
max-height: 200px;
resize: vertical;
margin-bottom: 25px;
}
textarea.form-input::-webkit-resizer { display: none; }
.form-input:focus:invalid { border-color: var(--bittersweet-shimmer); }
.form-btn {
position: relative;
width: 100%;
background: var(--border-gradient-onyx);
color: var(--orange-yellow-crayola);
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
padding: 13px 20px;
border-radius: 14px;
font-size: var(--fs-6);
text-transform: capitalize;
box-shadow: var(--shadow-3);
z-index: 1;
transition: var(--transition-1);
}
.form-btn::before {
content: "";
position: absolute;
inset: 1px;
background: var(--bg-gradient-jet);
border-radius: inherit;
z-index: -1;
transition: var(--transition-1);
}
.form-btn ion-icon { font-size: 16px; }
.form-btn:hover { background: var(--bg-gradient-yellow-1); }
.form-btn:hover::before { background: var(--bg-gradient-yellow-2); }
.form-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.form-btn:disabled:hover { background: var(--border-gradient-onyx); }
.form-btn:disabled:hover::before { background: var(--bg-gradient-jet); }
/* ---- CREDITS ------------*/
.credits {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 50px;
}
.credits-text {
font-size: var(--fs-5);
display: flex;
flex-direction: row;
margin: 5px;
}
.credits-text-color {
color: var(--white-1);
padding: 3px;
}
.credits-link-color {
color: var(--orange-yellow-crayola);
padding: 3px;
font-weight: var(--fw-500);
text-decoration: underline;
}
/*-----------------------------------*\
#RESPONSIVE
\*-----------------------------------*/
/**
* responsive larger than 450px screen
*/
@media (min-width: 450px) {
/**
* client
*/
.clients-item { min-width: calc(33.33% - 10px); }
/**
* #PORTFOLIO, BLOG
*/
.project-img,
.blog-banner-box { height: auto; }
}
/**
* responsive larger than 320px screen
*/
@media (max-width: 580px) {
:root {
/**
* typography
*/
--fs-1: 22px;
--fs-2: 20px;
--fs-3: 18px;
--fs-4: 16px;
--fs-5: 14px;
--fs-6: 12px;
--fs-7: 11px;
--fs-8: 10px;
}
.navbar-link {
color: var(--white-1);
font-weight: var(--fw-500);
font-size: var(--fs-6);
}
.about-text {
color: var(--light-gray);
font-size: var(--fs-6);
font-weight: var(--fw-500);
line-height: 2.0;
}
.timeline-item-title {
font-size: var(--fs-5);
line-height: 1.3;
margin-bottom: 10px;
}
.timeline-item-subtitle {
color: var(--vegas-gold);
font-size: var(--fs-6);
line-height: 1.3;
margin-bottom: 10px;
}
.timeline .title-wrapper h2 {
font-size: var(--fs-2);
}
.article-title {
position: relative;
padding-bottom: 7px;
padding-top: 5px;
}
.my-skills-title-wrapper {
margin-bottom: 15px;
}
.my-skills-title-wrapper h2 {
font-size: var(--fs-2);
}
.my-skills-container {
display: flex;
/* border: 1px solid salmon; */
margin: 10px 0px 15px 40px;
flex-direction: row;
flex-flow: wrap;
}
.my-skill {
font-size: var(--fs-7);
}
.project-link {
font-size: var(--fs-6);
}
.achievement {
margin: 8px 5px 5px 35px;
}
.certifications-links {
margin-top: -10px;
margin-bottom: 10px;
}
.certifications-link {
font-size: var(--fs-6);
margin: 8px 5px 0px 35px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.certifications-links .open-icon {
padding-left: 5px;
font-size: var(--fs-2);
}
.credits-text {
font-size: var(--fs-7);
}
.skills-list-title {
color: var(--white-1);
margin-left: 5px;
font-size: var(--fs-5);
font-weight: var(--fw-500);
margin-bottom: -5px;
}
.skills-list {
display: flex;
/* border: 1px solid salmon; */
margin: 5px 0px 15px 5px;
flex-direction: row;
flex-flow: wrap;
}
.my-courses-container {
margin-top: -10px;
margin-left: 40px;
display: flex;
justify-content: left;
/* align-items: center; */
flex-direction: row;
flex-flow: wrap;
}
.my-course {
color: var(--orange-yellow-crayola);
padding: 3px 7px;
border-radius: 5px;
margin: 5px 5px 2px 0px;
background-color: var(--orange-yellow-crayola);
color: black;
font-weight: var(--fw-500);
font-size: var(--fs-7);
width: fit-content;
}
}
/**
* responsive larger than 580px screen
*/
@media (min-width: 580px) {
/**
* CUSTOM PROPERTY
*/
:root {
/**
* typography
*/
--fs-1: 32px;
--fs-2: 26px;
--fs-3: 24px;
--fs-4: 18px;
--fs-6: 15px;
--fs-7: 15px;
--fs-8: 12px;
}
.navbar-link {
color: var(--white-1);
font-weight: var(--fw-400);
font-size: var(--fs-6);
}
/**
* #REUSED STYLE
*/
.sidebar, article {
width: 520px;
margin-inline: auto;
padding: 30px;
}
.article-title {
font-weight: var(--fw-600);
padding-bottom: 15px;
}
.article-title::after {
width: 40px;
height: 5px;
}
.icon-box {
width: 48px;
height: 48px;
border-radius: 12px;
font-size: 18px;
}
/**
* #MAIN
*/
main {
margin-top: 60px;
margin-bottom: 100px;
}
/**
* #SIDEBAR
*/
.sidebar {
max-height: 180px;
margin-bottom: 30px;
}
.sidebar.active { max-height: 584px; }
.sidebar-info { gap: 25px; }
.avatar-box { border-radius: 30px; }
.avatar-box img { width: 120px; }
.info-content .name { margin-bottom: 15px; }
.info-content .title { padding: 5px 18px; }
.info_more-btn {
top: -30px;
right: -30px;
padding: 10px 15px;
}
.info_more-btn span {
display: block;
font-size: var(--fs-8);
}
.info_more-btn ion-icon { display: none; }
.separator { margin: 32px 0; }
.contacts-list { gap: 20px; }
.contact-info {
max-width: calc(100% - 64px);
width: calc(100% - 64px);
}
/**
* #NAVBAR
*/
.navbar { border-radius: 20px 20px 0 0; }
.navbar-list { gap: 20px; }
.navbar-link { --fs-8: 14px; }
/**
* #ABOUT
*/
.about .article-title { margin-bottom: 20px; }
.about-text { margin-bottom: 40px; }
/* service */
.service-item {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 18px;
padding: 30px;
}
.service-icon-box {
margin-bottom: 0;
margin-top: 5px;
}
.service-content-box { text-align: left; }
/* testimonials */
.testimonials-title { margin-bottom: 25px; }
.testimonials-list {
gap: 30px;
margin: 0 -30px;
padding: 30px;
padding-bottom: 35px;
}
.content-card {
padding: 30px;
padding-top: 25px;
}
.testimonials-avatar-box {
transform: translate(30px, -30px);
border-radius: 20px;
}
.testimonials-avatar-box img { width: 80px; }
.testimonials-item-title {
margin-bottom: 10px;
margin-left: 95px;
}
.testimonials-text {
line-clamp: 2;
-webkit-line-clamp: 2;
}
/* testimonials modal */
.modal-container { padding: 20px; }
.testimonials-modal {
display: flex;
justify-content: flex-start;
align-items: stretch;
gap: 25px;
padding: 30px;
border-radius: 20px;
}
.modal-img-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.modal-avatar-box {
border-radius: 18px;
margin-bottom: 0;
}
.modal-avatar-box img { width: 65px; }
.modal-img-wrapper > img {
display: block;
flex-grow: 1;
width: 35px;
}
/* clients */
.clients-list {
gap: 50px;
margin: 0 -30px;
padding: 45px;
scroll-padding-inline: 45px;
}
.clients-item { min-width: calc(33.33% - 35px); }
/**
* #RESUME
*/
.timeline-list { margin-left: 65px; }
.timeline-item:not(:last-child)::before { left: -40px; }
.timeline-item::after {
height: 8px;
width: 8px;
left: -43px;
}
.skills-item:not(:last-child) { margin-bottom: 25px; }
/**
* #PORTFOLIO, BLOG
*/
.project-img, .blog-banner-box { border-radius: 16px; }
.blog-posts-list { gap: 30px; }
.blog-content { padding: 25px; }
/**
* #CONTACT
*/
.mapbox {
height: 380px;
border-radius: 18px;
}
.input-wrapper {
gap: 30px;
margin-bottom: 30px;
}
.form-input { padding: 15px 20px; }
textarea.form-input { margin-bottom: 30px; }
.form-btn {
--fs-6: 16px;
padding: 16px 20px;
}
.form-btn ion-icon { font-size: 18px; }
}
/**
* responsive larger than 768px screen
*/
@media (min-width: 768px) {
/**
* REUSED STYLE
*/
.sidebar, article { width: 700px; }
.has-scrollbar::-webkit-scrollbar-button { width: 100px; }
/**
* SIDEBAR
*/
.contacts-list {
grid-template-columns: 1fr 1fr;
gap: 30px 15px;
}
/**
* NAVBAR
*/
.navbar-link { --fs-8: 15px; }
/**
* ABOUT
*/
/* testimonials modal */
.testimonials-modal {
gap: 35px;
max-width: 680px;
}
.modal-avatar-box img { width: 80px; }
/**
* PORTFOLIO
*/
.article-title { padding-bottom: 20px; }
.filter-select-box { display: none; }
.filter-list {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 25px;
padding-left: 5px;
margin-bottom: 30px;
}
.filter-item button {
color: var(--light-gray);
font-size: var(--fs-5);
transition: var(--transition-1);
}
.filter-item button:hover { color: var(--light-gray-70); }
.filter-item button.active { color: var(--orange-yellow-crayola); }
/* portfolio and blog grid */
.project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }
/**
* CONTACT
*/
.input-wrapper { grid-template-columns: 1fr 1fr; }
.form-btn {
width: max-content;
margin-left: auto;
}
}
/**
* responsive larger than 1024px screen
*/
@media (min-width: 1024px) {
/**
* CUSTOM PROPERTY
*/
:root {
/**
* shadow
*/
--shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);
--shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);
--shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125);
}
/**
* REUSED STYLE
*/
.sidebar, article {
width: 950px;
box-shadow: var(--shadow-5);
}
/**
* MAIN
*/
main { margin-bottom: 60px; }
.main-content {
position: relative;
width: max-content;
margin: auto;
}
/**
* NAVBAR
*/
.navbar {
position: absolute;
bottom: auto;
top: 0;
left: auto;
right: 0;
width: max-content;
border-radius: 0 20px;
padding: 0 20px;
box-shadow: none;
}
.navbar-list {
gap: 30px;
padding: 0 20px;
}
.navbar-link { font-weight: var(--fw-500);
padding: 17px 4px;}
/**
* ABOUT
*/
/* service */
.service-list {
grid-template-columns: 1fr 1fr;
gap: 20px 25px;
}
/* testimonials */
.testimonials-item { min-width: calc(50% - 15px); }
/* clients */
.clients-item { min-width: calc(25% - 38px); }
/**
* PORTFOLIO
*/
.project-list { grid-template-columns: repeat(3, 1fr); }
/**
* BLOG
*/
.blog-banner-box { height: 230px; }
}
/**
* responsive larger than 1250px screen
*/
@media (min-width: 1250px) {
/**
* RESET
*/
body::-webkit-scrollbar { width: 20px; }
body::-webkit-scrollbar-track { background: var(--smoky-black); }
body::-webkit-scrollbar-thumb {
border: 5px solid var(--smoky-black);
background: hsla(0, 0%, 100%, 0.1);
border-radius: 20px;
box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11),
inset -1px -1px 0 hsla(0, 0%, 100%, 0.11);
}
body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, 0.15); }
body::-webkit-scrollbar-button { height: 60px; }
/**
* REUSED STYLE
*/
.sidebar, article { width: auto; }
article { min-height: 100%; }
/**
* MAIN
*/
main {
max-width: 1200px;
margin-inline: auto;
display: flex;
justify-content: center;
align-items: stretch;
gap: 25px;
}
.main-content {
min-width: 75%;
width: 75%;
margin: 0;
}
/**
* SIDEBAR
*/
.sidebar {
position: sticky;
top: 60px;
max-height: max-content;
height: 100%;
margin-bottom: 0;
padding-top: 60px;
z-index: 1;
}
.sidebar-info { flex-direction: column; }
.avatar-box img { width: 150px; }
.info-content .name {
white-space: nowrap;
text-align: center;
}
.info-content .title { margin: auto; }
.info_more-btn { display: none; }
.sidebar-info_more {
opacity: 1;
visibility: visible;
}
.contacts-list { grid-template-columns: 1fr; }
.contact-link:hover {
text-decoration: underline;
}
.contact-info :is(.contact-link) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.contact-info :is(.contact-link, time, address) {
--fs-7: 14px;
font-weight: var(--fw-300);
}
.separator:last-of-type {
margin: 15px 0;
opacity: 0;
}
.social-list { justify-content: center; }
/**
* RESUME
*/
.timeline-text { max-width: 720px; }
}
Section 3: JavaScript Magic – How to Make a Resume for Freshers
To further enhance the spinner’s functionality, you can use JavaScript to control its behavior. Create a file named script.js and add the following code:
JavaScript Code: How to Make a Resume for Freshers
'use strict';
// element toggle function
const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
// sidebar variables
const sidebar = document.querySelector("[data-sidebar]");
const sidebarBtn = document.querySelector("[data-sidebar-btn]");
// sidebar toggle functionality for mobile
sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });
// // custom select variables
const select = document.querySelector("[data-select]");
const selectItems = document.querySelectorAll("[data-select-item]");
const selectValue = document.querySelector("[data-selecct-value]");
const filterBtn = document.querySelectorAll("[data-filter-btn]");
// contact form variables
const form = document.querySelector("[data-form]");
const formInputs = document.querySelectorAll("[data-form-input]");
const formBtn = document.querySelector("[data-form-btn]");
// add event to all form input field
for (let i = 0; i < formInputs.length; i++) {
formInputs[i].addEventListener("input", function () {
// check form validation
if (form.checkValidity()) {
formBtn.removeAttribute("disabled");
} else {
formBtn.setAttribute("disabled", "");
}
});
}
// page navigation variables
const navigationLinks = document.querySelectorAll("[data-nav-link]");
const pages = document.querySelectorAll("[data-page]");
// add event to all nav link
for (let i = 0; i < navigationLinks.length; i++) {
navigationLinks[i].addEventListener("click", function () {
for (let i = 0; i < pages.length; i++) {
if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {
pages[i].classList.add("active");
navigationLinks[i].classList.add("active");
window.scrollTo(0, 0);
} else {
pages[i].classList.remove("active");
navigationLinks[i].classList.remove("active");
}
}
});
}
In this JavaScript code, we’ve created functions to add and delete tasks. When the “Add” button is clicked, a new task is added to the list. When the “Delete” button for each task is clicked, the task is removed from the list.
Step 4: Images.(How to Make a Resume for Freshers)
These CSS styles add a smooth transition effect to buttons when they are clicked, How to Make a Resume for Freshers making the experience
How to Install Node.js and NPM on Windows
Javascript course in 30 days — Day 1
Dairy Farm Shop Management System Using PHP and MySQL
Youtube Demo Video :- How to Make a Resume for Freshers
Download Project Code “How to Make a Resume for Freshers“ Click on Below Link
